/* Workforce Sweden — Bold & energetic theme, built directly from
   design-tokens.md. Two independent axes: --accent-hue (12 values, set
   per-request via a small inline <style> block since it's per-user) and
   data-bg-mode on <html> (4 values, each block below overrides only the
   neutral/surface tokens — the accent recipe never changes between modes).
   Every themed color is oklch(...) with var(--accent-hue) — never a
   hardcoded hex — so changing the one variable re-themes the whole page.

   Scope note: this app is still plain forms/lists/tables (no
   cards/nav/chips markup was ever built for it — those existed only in
   the worker-app mockups on the design canvas). Rather than rebuild every
   route's HTML to match that mockup structure, this stylesheet applies
   the same tokens to what actually exists here: a single page "card",
   a top masthead, buttons, links, tables, and forms. Font/color/spacing
   tokens are unchanged from the spec either way. */

:root {
  --accent-hue: 45; /* overridden per-request by an inline <style> in <head> */

  --page-bg: oklch(97% 0.015 60);
  --card-bg: white;
  --card-border-color: transparent;
  --heading-color: oklch(22% 0.03 40);
  --muted-color: oklch(52% 0.04 40);
  --tag-bg: oklch(93% 0.01 40);
  --tag-color: oklch(40% 0.02 40);
  --nav-inactive: oklch(70% 0.03 40);
  --shadow-color: oklch(80% 0.05 45 / 0.15);
  --warn-color: oklch(52% 0.15 55); /* amber — "are you sure?" notes, never a hard error */

  /* Accent recipes — same across every background mode. */
  --accent-vivid: oklch(68% 0.19 var(--accent-hue));       /* decorative only: borders, glows */
  --accent-solid: oklch(46% 0.17 var(--accent-hue));       /* solid fill + white text (buttons) */
  --accent-text: oklch(48% 0.17 var(--accent-hue));        /* text/links on the page background */
  --chip-bg: oklch(94% 0.06 var(--accent-hue));
  --chip-color: oklch(48% 0.17 var(--accent-hue));
}

:root[data-bg-mode="white"] {
  --page-bg: white;
  --card-border-color: oklch(75% 0.02 60);
}

:root[data-bg-mode="tinted"] {
  --page-bg: oklch(96% 0.025 var(--accent-hue));
}

:root[data-bg-mode="dark"] {
  --page-bg: oklch(16% 0.015 var(--accent-hue));
  --card-bg: oklch(24% 0.02 var(--accent-hue));
  --heading-color: white;
  --muted-color: oklch(65% 0.03 var(--accent-hue));
  --tag-bg: oklch(32% 0.02 var(--accent-hue));
  --tag-color: oklch(80% 0.02 var(--accent-hue));
  --nav-inactive: oklch(68% 0.03 45);
  --shadow-color: oklch(0% 0 0 / 0.35);
  --warn-color: oklch(78% 0.14 65);
  --chip-bg: oklch(30% 0.09 var(--accent-hue));
  --chip-color: oklch(80% 0.17 var(--accent-hue));
  color-scheme: dark;
}

/* Gul (yellow, hue 100) — special-cased. The shared 46-48%-lightness
   recipe every other accent uses for text/chips goes muddy/brown at
   yellow hues (measured: oklch(48% 0.17 100) is #755c00 — not
   recognizable as yellow at all), so Gul pairs a bright yellow FILL with
   dark navy text instead, exactly like the logo (oklch(87% 0.20 100) /
   oklch(30% 0.10 220) — navy-on-yellow measures 8.64:1). Chips and
   buttons are self-contained filled elements, so that pairing is the
   same regardless of background mode. Link/nav TEXT (no fill behind it)
   is the one part that has to flip with the page: navy-on-light in every
   light-family mode below, yellow-on-dark in dark mode — bare yellow ink
   only reads as yellow, and only has any contrast at all, against
   something dark (navy on white: 12.63:1; yellow on the dark-mode card
   background: 11.20:1). Combined selectors are used throughout (rather
   than relying on source order to break specificity ties) so this stays
   correct no matter how the file is reordered later. */
:root[data-accent-hue="100"] {
  --accent-solid: oklch(87% 0.20 100);
  --chip-bg: oklch(87% 0.20 100);
  --chip-color: oklch(30% 0.10 220);
  --accent-text: oklch(30% 0.10 220);
}
:root[data-accent-hue="100"] button,
:root[data-accent-hue="100"] input[type="submit"],
:root[data-accent-hue="100"] a.button-link:not(.secondary),
:root[data-accent-hue="100"] .chat-message-own {
  color: oklch(30% 0.10 220); /* navy on the yellow fill, not the usual white */
}
:root[data-accent-hue="100"] .chat-message-own strong,
:root[data-accent-hue="100"] .chat-message-own .muted {
  color: oklch(30% 0.10 220 / 70%);
}
:root[data-bg-mode="dark"][data-accent-hue="100"] {
  --chip-bg: oklch(87% 0.20 100);
  --chip-color: oklch(30% 0.10 220);
  --accent-text: oklch(87% 0.20 100); /* flipped: light-on-dark is where yellow-as-text works */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--heading-color);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
}

h1, h2, h3 {
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--heading-color);
  font-weight: 700;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: var(--card-bg);
  box-shadow: 0 2px 10px var(--shadow-color);
  font-family: 'Baloo 2', system-ui, sans-serif;
}

.masthead a {
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
}

.masthead nav a {
  margin-left: 1rem;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent-text);
}

main {
  max-width: 640px;
  margin: 1.5rem auto;
  padding: 0 1rem 2rem;
}

.page-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border-color);
  border-radius: 1.1rem;
  box-shadow: 0 6px 24px var(--shadow-color);
  padding: 1.5rem 1.75rem;
}

p, li, label, td, th { color: var(--heading-color); }
.muted, small { color: var(--muted-color); }

/* Bold, no default underline — matches a.back-link/.button-link's already-
   established look. Without this, every plain in-body link (the "Tillbaka
   till startsidan" at the bottom of nearly every page, "Lägg upp liknande
   jobb igen", etc.) falls back to the browser's default blue-underlined
   style, which reads as visibly older/less finished than the rest of the
   app — this is the one rule that fixes all of them at once instead of
   adding a class to each of the 15+ call sites individually. */
/* No hover-underline rule here on purpose — several link "components"
   below (.button-link, .ghost-link, .list-card, .back-link) already define
   their own hover treatment (brightness shift, lift, explicit underline),
   and a generic a:hover{text-decoration:underline} would bleed into all of
   them (underlining button text, card contents, etc.) since none of those
   rules happen to touch text-decoration themselves. */
a { color: var(--accent-text); font-weight: 800; text-decoration: none; }

button, input[type="submit"] {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  background: var(--accent-solid);
  color: white;
  border: none;
  border-radius: 0.7rem;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  font-size: 0.95rem;
}
button:hover, input[type="submit"]:hover { filter: brightness(1.08); }
button.button-muted {
  background: transparent;
  color: var(--muted-color);
  border: 1.5px solid oklch(85% 0.02 40);
}
:root[data-bg-mode="dark"] button.button-muted { border-color: oklch(38% 0.02 var(--accent-hue)); }
button.button-muted:hover { filter: none; background: var(--tag-bg); }

input[type="text"], input[type="email"], input[type="date"], input[type="number"],
input[type="time"], input[type="datetime-local"], input[type="tel"],
input:not([type]), textarea, select {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  border: 1.5px solid oklch(85% 0.02 40);
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  background: var(--page-bg);
  color: var(--heading-color);
}

:root[data-bg-mode="dark"] input, :root[data-bg-mode="dark"] textarea, :root[data-bg-mode="dark"] select {
  border-color: oklch(38% 0.02 var(--accent-hue));
}

form p, form > label { margin: 0.6rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
table, th, td { border: 1px solid oklch(88% 0.015 40); }
:root[data-bg-mode="dark"] table, :root[data-bg-mode="dark"] th, :root[data-bg-mode="dark"] td {
  border-color: oklch(35% 0.02 var(--accent-hue));
}
th, td { padding: 0.5rem 0.7rem; text-align: left; }
th {
  font-family: 'Baloo 2', system-ui, sans-serif;
  background: var(--tag-bg);
  color: var(--tag-color);
}

.chip {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--chip-color);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-weight: 800;
  font-size: 0.85rem;
}
/* A row that needs THIS viewer's action right now — a job with a new
   applicant, a shift waiting on their review/response/hours-report — vs.
   every other chip variant, which only ever differs by text, not weight.
   Solid accent fill so it's a genuine at-a-glance signal in a longer list,
   not something that requires reading each row to notice. */
.chip-action {
  background: var(--accent-solid);
  color: white;
}

.theme-swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 1.2rem; }
.theme-swatch {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  display: inline-block;
}
.theme-swatch.selected { border-color: var(--heading-color); }
.bg-mode-options { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 1.2rem; }
.bg-mode-options label {
  border: 1.5px solid oklch(85% 0.02 40);
  border-radius: 0.6rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

/* --- Marketing site (logged-out landing page) ----------------------------
   Scoped under body.marketing so none of it touches the app-shell pages
   (dashboards/forms), which keep the plain page-card layout above. */

body.marketing { margin: 0; }

a.button-link, a.ghost-link {
  display: inline-block;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  text-decoration: none;
  border-radius: 0.7rem;
  padding: 0.65rem 1.3rem;
  font-size: 0.95rem;
  cursor: pointer;
}
a.button-link {
  background: var(--accent-solid);
  color: white;
  border: 2px solid transparent;
}
a.button-link:hover { filter: brightness(1.08); }
a.button-link.secondary {
  background: transparent;
  color: var(--accent-text);
  border: 2px solid var(--accent-solid);
}
a.ghost-link {
  color: var(--accent-text);
  padding: 0.65rem 0.2rem;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--card-bg);
  box-shadow: 0 2px 10px var(--shadow-color);
}
.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--heading-color);
  text-decoration: none;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}
.site-nav .brand img { border-radius: 0.5rem; }
/* Panel fills all the width the brand doesn't need, so the links below
   spread across the full top bar instead of bunching up at the right
   edge next to the login/CTA buttons (that used to happen because only
   .brand had flex-grow, via margin-right:auto, so the whole panel sat as
   one tight right-aligned block). */
.site-nav-panel { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; gap: 1rem 1.75rem; }
.site-nav-links { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: space-evenly; gap: 1rem; }
.site-nav-links a {
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
}
.site-nav-links a:hover { color: var(--accent-text); }
.site-nav-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex: 0 0 auto; }

/* Hamburger — hidden on desktop, shown below the nav breakpoint. */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }

@media (max-width: 880px) {
  .site-nav { flex-wrap: nowrap; }
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 11px 9px;
    border-radius: 0.6rem;
    cursor: pointer;
    flex-shrink: 0;
    /* .site-nav-panel (which carries the flex-grow on desktop — see its
       own rule above) is display:none here until toggled open, so nothing
       pushes the burger to the right edge without this — it would
       otherwise just sit right next to the logo. */
    margin-left: auto;
  }
  .nav-burger span {
    display: block;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: var(--heading-color);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .site-nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 1.1rem 1.2rem;
    background: var(--card-bg);
    box-shadow: 0 14px 26px var(--shadow-color);
    border-bottom-left-radius: 1.1rem;
    border-bottom-right-radius: 1.1rem;
  }
  .nav-toggle:checked ~ .site-nav-panel { display: flex; }
  .site-nav-panel .site-nav-links { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; }
  .site-nav-panel .site-nav-links a {
    padding: 0.9rem 0.3rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--card-border-color);
  }
  .site-nav-panel .site-nav-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 1rem;
    width: 100%;
  }
  .site-nav-panel .site-nav-cta a { text-align: center; }
}

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.hero-text { flex: 1 1 420px; min-width: 0; }
.hero h1 {
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 0 0 1.1rem;
}
.hero-sub {
  color: var(--muted-color);
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 0 2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* The single biggest differentiator for a worker deciding whether to sign
   up — pay lands the next bank day, not weeks later — so it gets its own
   loud, standalone badge rather than living as plain text inside a
   paragraph. Used in both the full-bleed homepage hero (over a dark photo,
   hence a solid fill that reads on any image) and the plain /for-workers
   hero. Deliberately a fixed brand gradient (the logo's own blue-to-pink,
   not the per-user --accent-* theme) — this badge is a marketing-only
   "brand moment", not a themed UI element a signed-in user customizes. */
.pay-highlight {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6 55%, #ec4899);
  color: #fff;
  border-radius: 1rem;
  padding: 0.85rem 1.3rem;
  margin: 0 0 1.6rem;
  box-shadow: 0 10px 26px var(--shadow-color);
}
.hero-full .pay-highlight { align-items: center; }
.pay-highlight-main {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
}
.pay-highlight-note {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Owners/founders row on the About page — same fixed brand gradient as
   .pay-highlight (not the per-user accent) so the three avatars read as
   consistent "this is us" branding regardless of which of the 12 accent
   colors a visitor happens to have picked. Initials only for now — swap
   the div's text for an <img> per card once real photos exist. */
.owners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem; }
.owner-card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.owner-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6 55%, #ec4899);
  color: #fff;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  box-shadow: 0 6px 18px var(--shadow-color);
}
.owner-name {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--heading-color);
  text-align: center;
}
.owner-contact {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted-color);
  text-align: center;
}

/* Small circular headshot for the made-up example applicants on
   /for-companies (see EXAMPLE_APPLICANTS in server.js) — stock/AI photos
   supplied specifically for this, not real photos of real people cropped
   from elsewhere on the site, which would misrepresent them as actual
   platform workers. */
.example-avatar-photo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.hero-media {
  flex: 1 1 380px;
  max-width: 460px;
  width: 100%;
  height: auto;
  border-radius: 1.3rem;
  box-shadow: 0 12px 34px var(--shadow-color);
  object-fit: cover;
  aspect-ratio: 9 / 7;
}

/* Full-bleed landing hero: the image covers the whole width of the screen,
   the headline + CTAs sit on top of it over a dark scrim for legibility. */
.hero-full {
  position: relative;
  max-width: none;
  width: 100%;
  min-height: 76vh;
  padding: 4rem 1.5rem;
  overflow: hidden;
  justify-content: center;
}
.hero-full .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: none;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}
.hero-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,18,28,0.42) 0%, rgba(12,18,28,0.55) 100%);
  z-index: 1;
}
.hero-full .hero-text {
  position: relative;
  z-index: 2;
  flex: none;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.hero-full .hero-text h1 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
.hero-full .hero-sub { color: rgba(255,255,255,0.94); margin: 0 auto 2rem; text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.hero-full .hero-cta { justify-content: center; }
.hero-full .button-link.secondary { color: #fff; border-color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.06); }
.hero-full .button-link.secondary:hover { background: rgba(255,255,255,0.16); }

.site-section { padding: 3.5rem 1.5rem; }
.site-section.alt { background: var(--card-bg); }
.section-inner { max-width: 1000px; margin: 0 auto; }
.section-inner.narrow { max-width: 600px; text-align: center; }
.section-grid {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.section-grid .section-text { flex: 1 1 340px; min-width: 0; }
/* Which side the photo lands on is controlled by DOM order alone (plain
   flex-direction: row) — .media-left sections put the <img> first in the
   markup, "media-right" sections (the default) put it last. No reverse
   needed; row-reverse here would undo that and put it on the wrong side. */
.section-media {
  flex: 1 1 320px;
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
  box-shadow: 0 8px 26px var(--shadow-color);
  object-fit: cover;
  aspect-ratio: 7 / 5;
}
.eyebrow {
  display: block;
  color: var(--accent-text);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.site-section h2 { font-size: 1.7rem; margin: 0 0 0.9rem; }
.site-section p {
  color: var(--muted-color);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.section-inner.narrow .section-cta { justify-content: center; }

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.how-step { text-align: left; }
.how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-color);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  margin-bottom: 0.7rem;
}
.how-step h3 { font-family: 'Baloo 2', system-ui, sans-serif; font-size: 1.05rem; margin: 0 0 0.4rem; }
.how-step p { color: var(--muted-color); font-size: 0.92rem; line-height: 1.5; margin: 0; }

.faq-item { margin-bottom: 1.6rem; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item h3 { font-family: 'Baloo 2', system-ui, sans-serif; font-size: 1.05rem; margin: 0 0 0.4rem; }
.faq-item p { color: var(--muted-color); margin: 0; line-height: 1.55; }

/* Guide hub: a grid of linked cards, and numbered steps for a single guide. */
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
  text-align: left;
}
.guide-card {
  display: block;
  padding: 1.4rem 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border-color);
  border-radius: 0.9rem;
  box-shadow: 0 3px 12px var(--shadow-color);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.guide-card:hover { transform: translateY(-2px); border-color: var(--accent-solid); }
.guide-card h3 { font-family: 'Baloo 2', system-ui, sans-serif; font-size: 1.1rem; margin: 0 0 0.35rem; }
.guide-card p { color: var(--muted-color); font-size: 0.92rem; line-height: 1.5; margin: 0; }

.guide-steps { margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: step; text-align: left; }
.guide-steps li {
  position: relative;
  padding: 0 0 1.1rem 2.6rem;
  line-height: 1.55;
}
.guide-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-color);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
}
.guide-steps li:last-child { padding-bottom: 0; }

@media (max-width: 780px) {
  .how-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .how-steps { grid-template-columns: 1fr; }
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 2rem 1.5rem;
  color: var(--muted-color);
  font-size: 0.9rem;
  border-top: 1px solid oklch(88% 0.015 40);
}
:root[data-bg-mode="dark"] .site-footer { border-top-color: oklch(35% 0.02 var(--accent-hue)); }
.site-footer img { border-radius: 0.4rem; }
.site-footer a { color: var(--accent-text); text-decoration: none; }

/* --- Dashboard shell (logged-in Home pages) ------------------------------- */

body.dashboard { margin: 0; }
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0.9rem 1.5rem;
  background: var(--card-bg);
  box-shadow: 0 2px 10px var(--shadow-color);
}
.dash-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--heading-color);
  text-decoration: none;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}
.dash-header .brand img { border-radius: 0.5rem; }
.dash-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1.25rem; align-items: center; }
.dash-header nav a { color: var(--heading-color); text-decoration: none; font-weight: 800; font-size: 0.92rem; }
.dash-header nav a:hover { color: var(--accent-text); }

.dash-main { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.dash-greeting { font-size: 1.6rem; margin: 0 0 1.7rem; }
.dash-section { margin-bottom: 2.2rem; }
.dash-section h2 { font-size: 1.1rem; margin: 0 0 0.9rem; }
.dash-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.list-card[hidden] { display: none; }
.list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border-color);
  border-radius: 0.9rem;
  box-shadow: 0 3px 12px var(--shadow-color);
  padding: 0.9rem 1.2rem;
  margin-bottom: 0.7rem;
  text-decoration: none;
}
.list-card:last-child { margin-bottom: 0; }
.list-card-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.list-card-title {
  font-weight: 800;
  color: var(--heading-color);
  font-family: 'Baloo 2', system-ui, sans-serif;
}
.list-card-sub { color: var(--muted-color); font-size: 0.88rem; }
.list-card-notes { color: var(--muted-color); font-size: 0.85rem; font-style: italic; }
.empty-state { color: var(--muted-color); font-size: 0.95rem; padding: 0.2rem 0 0.8rem; }

.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;
}

.chat-thread {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 22rem; overflow-y: auto;
  padding: 1rem; margin-bottom: 1rem;
  background: var(--page-bg); border: 1px solid var(--card-border-color, oklch(88% 0.015 40));
  border-radius: 1rem;
}
.chat-message {
  align-self: flex-start; max-width: 80%;
  background: var(--card-bg); border-radius: 1rem; border-bottom-left-radius: 0.3rem;
  padding: 0.55rem 0.8rem; box-shadow: 0 1px 4px var(--shadow-color);
}
.chat-message-own {
  align-self: flex-end;
  background: var(--accent-solid); color: white;
  border-radius: 1rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 0.3rem;
}
.chat-message-own strong, .chat-message-own .muted { color: rgba(255, 255, 255, 0.85); }
.chat-message-meta { font-size: 0.78rem; margin-bottom: 0.15rem; }
.chat-message-body { white-space: pre-wrap; word-break: break-word; }
.chat-form textarea { width: 100%; resize: vertical; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.dash-grid-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border-color);
  border-radius: 1.1rem;
  box-shadow: 0 3px 12px var(--shadow-color);
  padding: 1.4rem 1.2rem;
  text-decoration: none;
  min-height: 6.5rem;
  transition: transform 0.1s ease;
}
.dash-grid-tile:hover { transform: translateY(-2px); }
.dash-grid-tile-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  background: var(--chip-bg);
  color: var(--chip-color);
}
.dash-grid-tile-label {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  color: var(--heading-color);
  font-size: 1.05rem;
}
.dash-grid-tile-sub { color: var(--muted-color); font-size: 0.85rem; }
@media (max-width: 380px) {
  /* Stay 2-column even on a phone screen (matches the Staffely reference
     this pattern is based on) — only tighten spacing on genuinely narrow
     screens rather than collapsing to a single column. */
  .dash-grid { gap: 0.6rem; }
  .dash-grid-tile { padding: 1rem 0.9rem; min-height: 5.5rem; }
}
.app-main { max-width: 700px; margin: 2rem auto; padding: 0 1.25rem 3rem; }
.app-main .page-card h1 { font-size: 1.5rem; }
.app-main .page-card h2 { font-size: 1.15rem; margin-top: 1.8rem; }

/* "Back one step" link, sits just above the content card on secondary
   pages (job/shift detail, forms, settings, privacy). */
a.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--accent-text);
}
a.back-link span { font-size: 1.1rem; line-height: 1; }
a.back-link:hover { text-decoration: underline; }

.status-chip { display: inline-block; }
.price-preview {
  display: flex;
  gap: 1rem;
  margin: 0.4rem 0 1.3rem;
}
/* Equal-specificity tie-break: without this, .price-preview's own
   "display: flex" beats the browser default "[hidden] { display: none }"
   rule (same specificity, later in source order) — the panel would show
   up empty on page load instead of staying hidden until a real estimate
   comes back. Caught live: it rendered as a blank box on first load. */
.price-preview[hidden] { display: none; }
.price-preview-col {
  flex: 1;
  border: 1.5px solid oklch(85% 0.02 40);
  border-radius: 0.8rem;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.price-preview-col[hidden] { display: none; }
:root[data-bg-mode="dark"] .price-preview-col { border-color: oklch(38% 0.02 var(--accent-hue)); }
.price-preview-col.highlight {
  border-color: var(--accent-solid);
  background: var(--chip-bg);
}
.price-preview-label { font-weight: 800; font-size: 0.85rem; }
.price-preview-amount { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; }
.price-preview-col.highlight .price-preview-amount { color: var(--chip-color); }
.radio-field { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; font-weight: 600; }
.radio-field input[type="text"], .radio-field input:not([type]) { width: auto; max-width: 9rem; }
.radio-field input[type="datetime-local"] { width: auto; max-width: 13rem; }
.form-actions { margin-top: 1.2rem; }

/* --- Auth pages (signup/login/check-email/choose-login) ------------------ */

body.auth { margin: 0; }
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.5rem 1.25rem;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--heading-color);
  text-decoration: none;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
}
.auth-brand img { border-radius: 0.6rem; }
.auth-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border-color);
  border-radius: 1.2rem;
  box-shadow: 0 10px 30px var(--shadow-color);
  padding: 2rem 2.25rem;
  width: 100%;
  max-width: 440px;
}
.auth-card h1 { font-size: 1.5rem; margin: 0 0 1.4rem; text-align: center; }
.auth-card button[type="submit"], .auth-card input[type="submit"] { width: 100%; margin-top: 0.5rem; }
.auth-footer { text-align: center; font-size: 0.95rem; color: var(--muted-color); }
.auth-footer a { font-weight: 800; }
.auth-note { color: var(--muted-color); font-size: 0.9rem; margin: -0.6rem 0 1.3rem; }
.cap-check-note { color: var(--muted-color); font-size: 0.9rem; margin: 1.1rem 0 0; }
.auth-links { text-align: center; margin-top: 1.1rem; }

.field { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-weight: 800; font-size: 0.9rem; }
.field input, .field select { width: 100%; }
/* radios/checkboxes inside a .field (e.g. the pricing-mode toggle) must not
   stretch to 100% like a text input would. */
.field input[type="radio"], .field input[type="checkbox"] { width: auto; }
/* .field's own "display: flex" otherwise beats the [hidden] attribute — same
   fix as .price-preview[hidden] above. */
.field[hidden] { display: none; }
.field-row { display: flex; gap: 1rem; }
/* Same fix as .field[hidden]/.price-preview[hidden] above — .field-row's
   own "display: flex" otherwise beats the [hidden] attribute. */
.field-row[hidden] { display: none; }
.field-row .field { flex: 1; margin-bottom: 1.1rem; }
.checkbox-field { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.4rem 0 1.3rem; }
.checkbox-field input { margin-top: 0.25rem; }
.checkbox-field label { font-weight: 600; font-size: 0.9rem; }

/* Mobile-only "add to home screen" nudge — see INSTALL_PROMPT_HTML in
   server.js for when it's actually shown (it stays [hidden] until the JS
   there decides to reveal it). The >768px rule is a CSS backstop for the
   same width check the JS already makes. */
.install-banner {
  position: fixed;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--card-bg);
  border-radius: 1rem;
  box-shadow: 0 10px 30px var(--shadow-color);
  padding: 0.75rem 0.9rem;
}
.install-banner[hidden] { display: none; }
.install-banner img { border-radius: 0.5rem; flex: 0 0 auto; }
.install-banner-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.install-banner-text strong {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--heading-color);
}
.install-banner-text span { font-size: 0.78rem; color: var(--muted-color); }
.install-banner-action {
  flex: 0 0 auto;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6 55%, #ec4899);
  color: #fff;
  border: none;
  border-radius: 0.6rem;
  padding: 0.5rem 0.8rem;
  font-weight: 800;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 0.85rem;
}
.install-banner-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted-color);
  padding: 0.2rem 0.4rem;
}
@media (min-width: 769px) { .install-banner { display: none !important; } }

@media (max-width: 780px) {
  .hero { flex-direction: column; text-align: center; padding: 3rem 1.25rem 2.5rem; }
  .hero-sub { margin: 0 auto 2rem; }
  .hero-cta { justify-content: center; }
  .hero-media { max-width: 420px; order: -1; }
  .hero h1 { font-size: 2rem; }
  /* the full-bleed hero keeps its background image on mobile too */
  .hero-full { flex-direction: column; padding: 3.5rem 1.25rem; min-height: 70vh; }
  .hero-full .hero-media { max-width: none; order: 0; }
  .section-grid, .section-grid.media-left { flex-direction: column; text-align: center; }
  .section-grid .section-cta { justify-content: center; }
  .section-media { max-width: 420px; }
  .site-nav { padding: 0.7rem 1.1rem; }
}