/* ==========================================================================
   COHIRE · shared stylesheet
   --------------------------------------------------------------------------
   Every COHIRE page links this one file. It runs from general to specific,
   so read it top to bottom:

     1. Design tokens ... the ONLY place colours, type and spacing are set
     2. Base ............ defaults for plain HTML elements
     3. Layout .......... the page container
     4. Components ...... buttons, verified badge, tags, chips, cards
     5. Site chrome ..... header and footer (identical on every page)
     6. Profile page .... profile.html
     7. Discover page ... index.html (the stream of professionals)
     8. Messages page ... messages.html (chat)

   MOBILE-FIRST: any rule outside a media query is the PHONE layout.
   Media queries only use min-width, so they ADD layout as the screen grows.
   Two breakpoints: 640px (large phone / tablet) and 960px (desktop).
   (Custom properties can't be used inside @media, so those two numbers
   are written out by hand wherever they appear.)

   COLOUR RULE: the orange accent means exactly two things, "do this"
   (primary buttons) and "checked by COHIRE" (verified badge and ticks).
   Everything else that needs emphasis (selected filters, your own chat
   bubbles, unread dots) uses navy, so orange never loses its meaning.
   ========================================================================== */


/* 1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand colour */
  --color-navy:         #011246;  /* primary: headings, nav, selected states */
  --color-navy-600:     #0B2C96;  /* lighter navy, used only inside gradients */
  --color-navy-soft:    #EEF1F8;  /* navy tint: tags, icon wells, selected rows */
  --color-accent:       #FF8A00;  /* THE accent: primary buttons + verified badge */
  --color-accent-hover: #FF9F33;
  --color-accent-soft:  #FFF1E0;  /* accent tints for the badge and verification summary; */
  --color-accent-line:  #FFD9A8;  /* retune these two if you ever change the accent  */

  /* Neutrals */
  --color-ink:     #1C2438;  /* body text */
  --color-muted:   #5B6B85;  /* secondary text (5.4:1 on white, passes WCAG AA) */
  --color-line:    #DDE4EE;  /* borders and dividers */
  --color-surface: #FFFFFF;  /* cards */
  --color-page:    #F4F6FA;  /* page background behind the cards */
  --color-link:    #1D4EBD;  /* inline links: COBRAND royal blue */

  /* Danger: staff screen only (flags, suspend). Never on public pages. */
  --color-danger:      #B42318;
  --color-danger-soft: #FEF0EE;
  --color-danger-line: #F5C2BE;

  /* Text and lines on navy backgrounds */
  --color-on-navy:       #FFFFFF;
  --color-on-navy-muted: rgba(255, 255, 255, 0.72);
  --color-on-navy-line:  rgba(255, 255, 255, 0.14);

  /* Type: same Google Fonts pairing as the COBRAND site */
  --font-display: "League Spartan", "Poppins", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px: never go below this for form inputs on phones */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  clamp(1.75rem, 1.35rem + 2vw, 2.5rem);  /* grows smoothly with the screen */

  /* Spacing: a 4px-based scale. Use these instead of one-off pixel values. */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* Shape and depth */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;
  --shadow-card:  0 1px 2px rgba(1, 18, 70, 0.05), 0 10px 28px -14px rgba(1, 18, 70, 0.22);
  --shadow-float: 0 -10px 28px -14px rgba(1, 18, 70, 0.30);

  /* Layout */
  --container: 1120px;
  --gutter:    var(--space-4);  /* side padding; widens on bigger screens below */
  --header-h:  64px;
  --tap:       48px;            /* minimum touch-target size for anything tappable */
}

@media (min-width: 640px) {
  :root { --gutter: var(--space-5); }
}
@media (min-width: 960px) {
  :root { --header-h: 72px; }
}


/* 2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Anchor links land below the sticky header, not underneath it */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

p, figure, dl, dd { margin: 0; }

a { color: var(--color-link); text-underline-offset: 3px; }

button, input, textarea { font: inherit; }

/* The hidden attribute must always win, even over display:grid on a card.
   script.js hides filtered-out professionals this way. */
[hidden] { display: none !important; }

/* Keyboard focus ring. Royal blue reads clearly on white; navy areas
   switch it to the accent because blue would vanish on navy. */
:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

/* Hides text visually but keeps it for screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* First thing a keyboard user can tab to: jumps past the header */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-on-navy);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

/* Respect the phone's "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 3. LAYOUT
   ========================================================================== */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* Edge-to-edge on phones (cards touch the screen edges, no wasted
   gutter), then a normal centred container from 640px up. */
.container--flush { width: 100%; margin-inline: auto; }
@media (min-width: 640px) {
  .container--flush { width: min(100% - 2 * var(--gutter), var(--container)); }
}


/* 4. COMPONENTS
   ========================================================================== */

/* ---- Icons: inline SVG, sized from the surrounding text ---- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* ---- Buttons ----
   Primary = accent background with NAVY text. White on this orange
   is only 2.4:1 contrast (fails WCAG); navy on orange is 7.5:1. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-navy);
}
.btn--primary:hover { background: var(--color-accent-hover); }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--secondary:hover { background: var(--color-navy-soft); }

.btn--ghost {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-line);
}
.btn--ghost:hover { border-color: var(--color-navy); }

.btn--block { width: 100%; }
.btn--icon  { width: var(--tap); padding: 0; }
.btn--sm    { min-height: 40px; padding: 0 var(--space-4); }  /* desktop only: below touch size */

/* A pressed toggle (Save, Like) fills its icon */
[aria-pressed="true"] > .icon-toggle { fill: currentColor; }

/* ---- Verified badge ----
   The accent seal always sits next to the word "Verified": colour is
   never the only signal. Same component everywhere a pro appears. */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--space-3) 3px 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}
.verified .icon { width: 18px; height: 18px; }

.verified--sm { gap: 4px; padding: 1px 8px 1px 3px; font-size: 0.6875rem; }
.verified--sm .icon { width: 15px; height: 15px; }

/* ---- Tags (skills, "open to") ---- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-navy-soft);
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
}
.tag--sm { padding: 2px 10px; font-size: var(--text-xs); }

/* ---- Chips: tappable filters. Selected = navy, never orange. ---- */
.chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chip:hover { border-color: var(--color-navy); }
.chip[aria-pressed="true"] {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-on-navy);
}

/* ---- Cards ----
   Phone: full-width white panels separated by thin strips of page
   background, like sections of an app. From 640px: floating rounded cards. */
.card {
  background: var(--color-surface);
  border-block: 1px solid var(--color-line);
  border-inline: 0;  /* a <fieldset> used as a card has a default side border; remove it */
  padding: var(--space-5) var(--gutter);
}
@media (min-width: 640px) {
  .card {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
}

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.card__head .card__title { margin-bottom: 0; }
.card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}
.card__count { font-size: var(--text-sm); color: var(--color-muted); }


/* 5. SITE CHROME: header and footer
   ========================================================================== */

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-h);
}

/* Logo lockup: COBRAND mark + COHIRE wordmark + "by COBRAND".
   Same structure as the COBRAND site's logo, so the family resemblance is obvious. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;  /* pushes the menu button to the far right on phones */
  color: var(--color-navy);
  text-decoration: none;
}
.brand__mark { width: 36px; height: 36px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  padding-top: 2px;  /* League Spartan sits slightly high; this centres it optically */
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.brand__by {
  margin-top: 3px;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Phone: a menu button that opens a panel under the header */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: calc(-1 * var(--space-3));  /* align the icon, not the tap area, to the gutter */
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-navy);
  cursor: pointer;
}
.nav-toggle .icon { width: 26px; height: 26px; }
.nav-toggle[aria-expanded="true"] .icon-open,
.nav-toggle[aria-expanded="false"] .icon-close { display: none; }

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--gutter) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
}
.site-nav[data-open] { display: block; }  /* script.js adds/removes data-open */

.site-nav__list { margin: 0; padding: 0; list-style: none; }

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-navy);
  font-weight: 500;
  text-decoration: none;
}
.site-nav__link[aria-current] { font-weight: 600; }
.site-nav__link[aria-current]::before {  /* accent bar marks the current page */
  content: "";
  position: absolute;
  left: calc(-1 * var(--gutter));
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-accent);
}

.site-nav__actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* Desktop: everything inline, no menu button */
@media (min-width: 960px) {
  .brand { margin-right: 0; }
  .brand__mark { width: 40px; height: 40px; }
  .nav-toggle { display: none; }

  .site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav__list {
    display: flex;
    gap: var(--space-6);
    margin-inline: auto;
  }
  .site-nav__link {
    height: var(--header-h);
    border-bottom: 0;
    font-size: var(--text-sm);
  }
  .site-nav__link[aria-current]::before { display: none; }
  .site-nav__link::after {  /* accent underline, same idea as the COBRAND nav */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }
  .site-nav__link:hover::after,
  .site-nav__link[aria-current]::after { transform: scaleX(1); }

  .site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 0;
  }
  .site-nav__actions .btn { min-height: 40px; padding: 0 var(--space-4); }  /* mouse, not thumbs */
}

/* ---- Footer ---- */
.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-7) 0 var(--space-5);
  background: var(--color-navy);
  color: var(--color-on-navy-muted);
  font-size: var(--text-sm);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--color-on-navy); }
.site-footer :focus-visible { outline-color: var(--color-accent); }

.site-footer .brand { color: var(--color-on-navy); }
.site-footer .brand__by { color: var(--color-on-navy-muted); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-5);
}
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { max-width: 36ch; margin-top: var(--space-4); }

.footer-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-navy);
}
.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list a { display: inline-block; padding-block: var(--space-2); }  /* tap-friendly */

.footer-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-on-navy-line);
  font-size: var(--text-xs);
}

@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bar { flex-direction: row; justify-content: space-between; }
}


/* 6. PROFILE PAGE (profile.html)
   ========================================================================== */

/* ---- Breadcrumb ---- */
.breadcrumb {
  padding-block: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-line);
}
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-navy); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--color-ink); }

/* ---- Profile hero: cover strip, photo, name, badge, stats ---- */
.profile-hero {
  overflow: hidden;
  background: var(--color-surface);
  border-block: 1px solid var(--color-line);
}

.profile-hero__cover {
  height: 96px;
  /* Navy with a soft royal-blue highlight. (An orange glow was tried here:
     orange mixed into navy turns muddy brown, so the accent stays solid.) */
  background:
    radial-gradient(circle at 85% 0%, rgba(29, 78, 189, 0.55), transparent 60%),
    linear-gradient(135deg, var(--color-navy-600) 0%, var(--color-navy) 65%);
}

.profile-hero__body { padding: 0 var(--gutter); }

.profile-hero__photo {
  width: 104px;
  height: 104px;
  margin-top: -52px;  /* half its height: overlaps the cover strip */
  border: 4px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-navy-soft);  /* shows while the photo loads */
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

.profile-hero__identity { margin-top: var(--space-3); }

.profile-hero__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.profile-hero__name { font-size: var(--text-2xl); }

.profile-hero__headline {
  margin-top: var(--space-1);
  font-weight: 500;
  color: var(--color-ink);
}

.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.meta-list li { display: inline-flex; align-items: center; gap: 6px; }
.meta-list .icon { width: 16px; height: 16px; }

/* Stats: a <dl>. The label (<dt>) comes first in the HTML so screen
   readers say "Jobs completed, 64"; column-reverse shows the number on top. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding-inline: var(--space-3);
  border-left: 1px solid var(--color-line);
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat dd {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-navy);
}
.stat dt {
  margin-top: 2px;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-muted);
}

/* Jump links to each section, like the tabs on a LinkedIn profile.
   Plain anchor links: no JavaScript, and the back button still works. */
.section-nav {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.section-nav ul {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;         /* swipe sideways on narrow phones */
  scrollbar-width: none;
}
.section-nav ul::-webkit-scrollbar { display: none; }
.section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  border-bottom: 3px solid transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.section-nav a:hover { color: var(--color-navy); border-bottom-color: var(--color-line); }

@media (min-width: 640px) {
  .profile-hero {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
  }
  .profile-hero__cover { height: 150px; }
  .profile-hero__body { padding: 0 var(--space-6); }
  .profile-hero__photo {
    width: 136px;
    height: 136px;
    margin-top: -68px;
  }
  .stat { padding-inline: var(--space-5); }
}

@media (min-width: 960px) {
  /* Photo on the left, everything else beside it */
  .profile-hero__body {
    display: grid;
    grid-template-columns: 136px 1fr;
    column-gap: var(--space-5);
  }
  .profile-hero__photo { grid-row: span 2; }
  .profile-hero__identity { margin-top: var(--space-4); }
  .stats { max-width: 520px; }
  .section-nav { grid-column: 1 / -1; margin-top: var(--space-5); }
}

/* ---- Two-column layout below the hero ----
   The sidebar (hire card) comes FIRST in the HTML, so on a phone it
   appears straight after the hero, right where someone decides to hire.
   On desktop the grid moves it into the right-hand column. */
.profile-layout {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.profile-main {
  display: grid;
  gap: var(--space-2);
  min-width: 0;  /* lets long content shrink inside the grid instead of overflowing */
}

@media (min-width: 640px) {
  .profile-layout,
  .profile-main { gap: var(--space-4); }
  .profile-layout { margin-top: var(--space-4); }
}

@media (min-width: 960px) {
  .profile-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-5);
    align-items: start;
  }
  .profile-main  { grid-column: 1; grid-row: 1; gap: var(--space-5); }
  .profile-aside { grid-column: 2; grid-row: 1; }
}

/* Sidebar follows you down the page, but only if the screen is tall
   enough to show all of it. Otherwise its button could be cut off. */
@media (min-width: 960px) and (min-height: 700px) {
  .profile-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}

/* ---- Hire card ---- */
.hire-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.hire-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.hire-card__amount {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
}
.hire-card__unit { font-size: var(--text-sm); color: var(--color-muted); }

.hire-card__avail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}
.hire-card__avail .icon { width: 18px; height: 18px; color: var(--color-muted); }

.detail-list {
  margin-block: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-line);
}
.detail-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-sm);
}
.detail-list dt { color: var(--color-muted); }
.detail-list dd { font-weight: 500; text-align: right; }
.detail-list .tag-list { justify-content: flex-end; gap: var(--space-1); }

.hire-card__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}
.hire-card__actions > :first-child { grid-column: 1 / -1; }

.hire-card__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  text-align: center;
  color: var(--color-muted);
}

/* ---- Verification summary ----
   One line of reassurance; the full checklist sits behind a native
   <details> toggle, which opens and closes with no JavaScript at all. */
.verify-summary {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-line);
}
.verify-summary__head {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.verify-summary__head .icon { width: 32px; height: 32px; }
.verify-summary__title { font-size: var(--text-base); line-height: 1.35; }
.verify-summary__text { margin-top: 2px; font-size: var(--text-sm); }

.verify-summary__details { margin: var(--space-2) 0 0 calc(32px + var(--space-3)); }
.verify-summary__details summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;  /* hide the default triangle... */
  cursor: pointer;
}
.verify-summary__details summary::-webkit-details-marker { display: none; }
.verify-summary__details summary::after {  /* ...and draw a chevron instead */
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.verify-summary__details[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }

.check-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-2);
}
.check .icon { width: 20px; height: 20px; margin-top: 1px; }
.check__title { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; color: var(--color-navy); }
.check__detail { font-size: var(--text-xs); line-height: 1.5; color: var(--color-muted); }
.verify-summary__link { font-size: var(--text-sm); font-weight: 600; }

@media (min-width: 640px) {
  .check-list { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

/* ---- About ---- */
.prose { max-width: 65ch; }  /* ~65 characters per line is comfortable reading */
.prose p + p { margin-top: var(--space-3); }

/* ---- Posts: photo, video and text updates, LinkedIn style ---- */
.post-list { margin: 0; padding: 0; list-style: none; }
.post {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.post:first-child { padding-top: 0; border-top: 0; }
.post:last-child  { padding-bottom: 0; }

.post__head { display: flex; align-items: center; gap: var(--space-3); }
.post__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.post__author { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; color: var(--color-navy); }
.post__time { font-size: var(--text-xs); color: var(--color-muted); }
.post__text { margin-top: var(--space-3); font-size: var(--text-sm); }

.post__media {
  margin-top: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-navy-soft);
}
.post__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.post__media--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.post__media--pair img { aspect-ratio: 1; }

.post__stats { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }

.post__actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-line);
}
.post-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.post-action:hover { background: var(--color-page); color: var(--color-navy); }
.post-action[aria-pressed="true"] { color: var(--color-navy); }
.post-action .icon { width: 18px; height: 18px; }

/* ---- Work experience ---- */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.timeline__item:first-child { padding-top: 0; border-top: 0; }
.timeline__item:last-child  { padding-bottom: 0; }

.timeline__logo {  /* initials stand in for a company logo */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-navy-soft);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
}
.timeline__role { font-size: var(--text-base); line-height: 1.3; }
.timeline__org  { font-size: var(--text-sm); }
.timeline__meta { font-size: var(--text-xs); color: var(--color-muted); }
.timeline__desc { margin-top: var(--space-2); font-size: var(--text-sm); }

/* "Reference checked": a smaller use of the same verified language */
.ref-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-navy);
}
.ref-check .icon { width: 16px; height: 16px; }

/* ---- Portfolio grid ---- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}

.work__link { display: block; color: inherit; text-decoration: none; }
.work__frame {
  overflow: hidden;  /* clips the zoom on hover */
  border-radius: var(--radius-md);
  background: var(--color-navy-soft);
}
.work__img {
  width: 100%;
  aspect-ratio: 4 / 3;  /* reserves space before the image loads: no layout jump */
  object-fit: cover;
  transition: transform 0.35s ease;
}
.work__link:hover .work__img { transform: scale(1.04); }
.work__title {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}
.work__meta { font-size: var(--text-xs); color: var(--color-muted); }

/* ---- Mobile hire bar ----
   Slides up once the in-page "Request to hire" button scrolls out of
   view, so Chat and Hire are always under your thumb. script.js adds
   .is-visible. Without JavaScript it simply never appears. Hidden on
   desktop, where the sticky sidebar does the same job. */
.hire-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  box-shadow: var(--shadow-float);
  transform: translateY(100%);
  visibility: hidden;  /* also takes it out of the keyboard tab order while hidden */
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.hire-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.2s ease;
}
.hire-bar__photo {  /* the face confirms who you're about to contact */
  width: 40px;
  height: 40px;
  margin-right: var(--space-1);
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.hire-bar .btn { padding-inline: var(--space-4); }
.hire-bar__hire { flex: 1; }

/* Leave room so the fixed bar never covers the end of the footer */
.has-hire-bar .site-footer {
  padding-bottom: calc(var(--space-5) + 76px + env(safe-area-inset-bottom));
}

@media (min-width: 960px) {
  .hire-bar { display: none; }
  .has-hire-bar .site-footer { padding-bottom: var(--space-5); }
}


/* 7. DISCOVER PAGE (index.html): the stream of verified professionals
   ========================================================================== */
.discover-intro { padding-block: var(--space-5) var(--space-4); }
.discover-intro h1 { font-size: var(--text-2xl); }
.discover-intro p { max-width: 52ch; margin-top: var(--space-2); color: var(--color-muted); }

/* ---- Search box ---- */
.search-form { position: relative; margin-top: var(--space-4); max-width: 640px; }
.search-form .icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  width: 20px;
  height: 20px;
  color: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.search-input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-4) 0 44px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-base);  /* 16px stops iPhones zooming in when you tap it */
}
.search-input:focus { border-color: var(--color-navy); outline: none; }
.search-input:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }

/* ---- Layout: phone = one column; desktop = fields on the left ---- */
/* minmax(0, 1fr), not the default "auto": an auto column grows to fit its
   widest content, and the one-line chip row is ~1200px long, so the whole
   page became 1200px wide on phones. 0 lets the column shrink to the
   screen and the chip row scroll inside it. (Found in testing.) */
.discover-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.discover-stream { display: grid; gap: var(--space-2); min-width: 0; }

@media (min-width: 640px) {
  .discover-layout,
  .discover-stream { gap: var(--space-4); }
}

@media (min-width: 960px) {
  .discover-layout {
    grid-template-columns: 260px minmax(0, 640px);
    justify-content: center;
    align-items: start;
    gap: var(--space-5);
  }
  .discover-fields { grid-column: 1; grid-row: 1; }
  .discover-rail   { grid-column: 1; grid-row: 2; }
  .discover-ads    { grid-column: 1; grid-row: 3; }   /* ads under "How verification works" */
  .discover-stream { grid-column: 2; grid-row: 1 / span 3; }
  /* The stream is far taller than the side column. A grid shares a tall
     item's height across every row it spans, which pushed the side items
     far apart. "1fr" on the last row makes that row soak up the spare
     height, so the side items stack neatly at the top. (Found in testing.) */
  .discover-layout { grid-template-rows: auto auto 1fr; }
  /* Line the heading up with the columns below: 260 + 24 gap + 640 = 924px */
  .discover-intro { width: min(100% - 2 * var(--gutter), 924px); }
}

/* Wide screens get a third column on the right for the video ads, the way
   LinkedIn puts adverts beside its feed. (A third breakpoint, used only
   here: below 1200px there isn't room for three columns.)
   240 + 24 + 580 + 24 + 240 = 1108px */
@media (min-width: 1200px) {
  .discover-layout { grid-template-columns: 240px minmax(0, 580px) 240px; grid-template-rows: auto 1fr; }
  .discover-ads    { grid-column: 3; grid-row: 1 / span 2; }
  .discover-stream { grid-row: 1 / span 2; }
  .discover-intro  { width: min(100% - 2 * var(--gutter), 1108px); }
}

/* ---- Video ads: 9:16 frames, stacked one above the other ---- */
.discover-ads { display: flex; justify-content: center; padding: var(--space-4) var(--gutter) 0; }
.ad-stack { display: grid; gap: var(--space-4); width: min(100%, 300px); }
@media (min-width: 960px) {
  .discover-ads { padding: 0; }
  .ad-stack { width: 100%; }
}

.ad-frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-navy) var(--poster, none) var(--pos, center) / cover no-repeat;
  color: var(--color-on-navy);
  text-decoration: none;
}
/* Layers, bottom to top: poster (the background), video, a dark fade so
   the words stay readable over any footage, then the words */
.ad-frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;  /* fades in once it's actually playing, never a black box */
  transition: opacity 0.4s ease;
}
.ad-frame.is-playing .ad-frame__video { opacity: 1; }
.ad-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 18, 70, 0) 40%, rgba(1, 18, 70, 0.88) 100%);
}
.ad-frame__label,
.ad-frame__text,
.ad-frame__cta { position: absolute; z-index: 1; }
.ad-frame__label {
  top: var(--space-3);
  left: var(--space-3);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(1, 18, 70, 0.6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.ad-frame__text { left: var(--space-4); right: var(--space-4); bottom: 72px; display: grid; gap: 4px; }
.ad-frame__text strong { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; }
.ad-frame__text span { font-size: var(--text-sm); line-height: 1.4; color: var(--color-on-navy-muted); }
.ad-frame__cta {
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: 600;
}
.ad-frame:hover .ad-frame__cta { background: var(--color-accent-hover); }
.ad-frame:focus-visible { outline: 3px solid var(--color-link); outline-offset: 3px; }

/* ---- Field filters ----
   Phone: one row of chips you swipe sideways, running off the screen
   edge so it's obvious there are more. Desktop: a vertical list in a card. */
.discover-fields__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.chip-row {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 2px var(--gutter) var(--space-2);
  list-style: none;
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  .chip-row { padding-inline: 0; }
}

@media (min-width: 960px) {
  .discover-fields {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
  }
  .discover-fields__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
  }
  .chip-row { flex-direction: column; gap: 2px; padding: 0; overflow: visible; }
  .chip {
    width: 100%;
    min-height: 40px;
    border-color: transparent;
    border-radius: var(--radius-sm);
  }
  .chip:hover { border-color: transparent; background: var(--color-page); }
  .chip[aria-pressed="true"] {
    background: var(--color-navy-soft);
    border-color: transparent;
    color: var(--color-navy);
    font-weight: 600;
  }
}

.discover-count {
  padding-inline: var(--gutter);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
@media (min-width: 640px) {
  .discover-count { padding-inline: 0; }
}

/* ---- Professional card ----
   The whole card is clickable: the name link's ::after stretches over the
   card. The Save and Chat buttons sit above it (z-index) so they still work. */
.pro-card { position: relative; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.pro-card:hover { border-color: #C5D0E1; }
@media (min-width: 640px) {
  .pro-card:hover { box-shadow: var(--shadow-card); }
}

.pro-card__head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.pro-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-navy-soft);
  object-fit: cover;
}
.pro-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-2);
  font-size: var(--text-lg);
  line-height: 1.25;
}
.pro-card__link { color: inherit; text-decoration: none; }
.pro-card__link:hover { text-decoration: underline; }
.pro-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.pro-card__link:focus-visible { outline: none; }
.pro-card__link:focus-visible::after { outline: 3px solid var(--color-link); outline-offset: -3px; }
@media (min-width: 640px) {
  .pro-card__link::after { border-radius: var(--radius-lg); }
}

.pro-card__headline { margin-top: 2px; font-size: var(--text-sm); font-weight: 500; }
.pro-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-3);
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.pro-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.pro-card__meta .icon { width: 14px; height: 14px; }

.pro-card__bio {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  /* Cut long bios at two lines with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pro-card .tag-list { margin-top: var(--space-3); gap: var(--space-1); }

/* A peek at their work (visual trades) ... */
.pro-card__media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: var(--space-3) 0 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  list-style: none;
}
.pro-card__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-navy-soft);
}
/* ... or their latest post (trades where a photo says less than words) */
.pro-card__latest {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-page);
  font-size: var(--text-sm);
}
.pro-card__latest-label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.pro-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}
.pro-card__rate { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.3; }
.pro-card__rate strong { display: block; color: var(--color-navy); font-weight: 600; }
.pro-card__actions {
  position: relative;
  z-index: 1;  /* above the stretched link */
  display: flex;
  gap: var(--space-2);
}
.pro-card__actions .btn { min-height: 44px; padding-inline: var(--space-4); }
.pro-card__actions .btn--icon { width: 44px; padding: 0; }

/* ---- "Join as a pro" card inside the stream ---- */
.promo-card {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-on-navy-muted);
}
.promo-card h3 { color: var(--color-on-navy); font-size: var(--text-xl); }
.promo-card p { margin-block: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.promo-card :focus-visible { outline-color: var(--color-accent); }

/* ---- Empty state when nothing matches ---- */
.discover-empty { text-align: center; }
.discover-empty p { margin-bottom: var(--space-4); color: var(--color-muted); }

/* ---- How verification works (rail) ---- */
.steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3);
  font-size: var(--text-sm);
  counter-increment: step;
}
.steps li::before {  /* CSS counters number the steps for us */
  content: counter(step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-navy-soft);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 700;
}
.steps strong { display: block; color: var(--color-navy); }
.steps span { color: var(--color-muted); font-size: var(--text-xs); }


/* 8. MESSAGES PAGE (messages.html)
   ========================================================================== */

/* The chat fills the screen under the header, like a messaging app.
   100vh first as a fallback; 100dvh ignores the phone's collapsing URL bar. */
.chat-app {
  display: grid;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  background: var(--color-surface);
}

/* Phone: one pane at a time. script.js switches data-view. */
.chat-app[data-view="thread"] .chat-list,
.chat-app[data-view="list"] .chat-thread { display: none; }

.chat-list,
.chat-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;  /* lets the inner lists scroll instead of stretching the page */
}

/* ---- Conversation list ---- */
.chat-list__head {
  padding: var(--space-4) var(--gutter);
  border-bottom: 1px solid var(--color-line);
}
.chat-list__head h1 { font-size: var(--text-xl); }
.chat-list__head p { font-size: var(--text-xs); color: var(--color-muted); }

.convo-list { flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.convo {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--gutter);
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.convo:hover { background: var(--color-page); }
.convo[aria-current] { background: var(--color-navy-soft); }
.convo__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.convo__name { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.convo__snippet {
  display: block;
  overflow: hidden;
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.convo__side { display: grid; justify-items: end; gap: 4px; font-size: var(--text-xs); color: var(--color-muted); }
.convo__unread { width: 10px; height: 10px; border-radius: 50%; background: var(--color-navy); }

/* ---- Open conversation ---- */
.thread-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--gutter);
  border-bottom: 1px solid var(--color-line);
}
.thread-back {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: calc(-1 * var(--space-3));
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-navy);
  cursor: pointer;
}
.thread-back .icon { width: 22px; height: 22px; }
.thread-head__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.thread-head__who { flex: 1; min-width: 0; }
.thread-head__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
}
.thread-head__name a { color: inherit; text-decoration: none; }
.thread-head__name a:hover { text-decoration: underline; }
.thread-head__role {
  overflow: hidden;
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.thread-head .btn { min-height: 40px; padding-inline: var(--space-4); }

.thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) var(--gutter);
  overflow-y: auto;
  list-style: none;
  background: var(--color-page);
}

/* The monitoring notice: shown at the top of EVERY conversation, so
   both sides know COBRAND can review what they write. */
.thread-note {
  display: flex;
  gap: var(--space-2);
  align-self: center;
  max-width: 40ch;
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.thread-note .icon { width: 18px; height: 18px; color: var(--color-navy); }
.thread-note strong { color: var(--color-navy); }

.thread-day {
  align-self: center;
  margin-block: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;  /* long links can't push the bubble off screen */
}
.msg--them {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-bottom-left-radius: 6px;
}
.msg--me {
  align-self: flex-end;
  background: var(--color-navy);
  color: var(--color-on-navy);
  border-bottom-right-radius: 6px;
}
.msg time { display: block; margin-top: 2px; font-size: 0.6875rem; text-align: right; opacity: 0.7; }

/* ---- Message box ---- */
.composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}
.composer textarea {
  flex: 1;
  min-height: var(--tap);
  max-height: 140px;
  padding: 12px var(--space-4);
  border: 1.5px solid var(--color-line);
  border-radius: 24px;
  color: var(--color-ink);
  font-size: var(--text-base);  /* 16px: no zoom-on-focus on iPhones */
  line-height: 1.4;
  resize: none;
}
.composer textarea:focus { border-color: var(--color-navy); outline: none; }
.composer textarea:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }

/* Desktop: list and conversation side by side in a framed panel */
@media (min-width: 960px) {
  .chat-app {
    grid-template-columns: 320px minmax(0, 1fr);
    width: min(100% - 2 * var(--gutter), var(--container));
    height: calc(100dvh - var(--header-h) - var(--space-7));
    margin: var(--space-5) auto 0;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
  }
  .chat-app[data-view] .chat-list,
  .chat-app[data-view] .chat-thread { display: flex; }
  .chat-list { border-right: 1px solid var(--color-line); }
  .thread-back { display: none; }
}


/* 9. SHARED BITS FOR THE NEWER PAGES
   ========================================================================== */
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { background: #912018; }

.page-intro { padding-block: var(--space-5) var(--space-4); }
.page-intro h1 { font-size: var(--text-2xl); }
.page-intro p { max-width: 56ch; margin-top: var(--space-2); color: var(--color-muted); }
@media (min-width: 960px) {
  .page-intro--feed   { width: min(100% - 2 * var(--gutter), 964px); }  /* 640 + 24 + 300 */
  .page-intro--narrow { width: min(100% - 2 * var(--gutter), 720px); }
}

.stack { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .stack { gap: var(--space-4); } }

.not-found { padding-block: var(--space-8); text-align: center; }
.not-found p { margin: var(--space-2) auto var(--space-5); color: var(--color-muted); }

/* Initials instead of a photo (the signed-in client) */
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-on-navy);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Written work samples, for trades where a photo says little */
.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.portfolio-grid + .case-list { margin-top: var(--space-5); }
.case {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-page);
}
.case__meta { font-size: var(--text-xs); color: var(--color-muted); }
.case__title { margin: 2px 0 var(--space-2); font-size: var(--text-base); line-height: 1.3; }
.case__desc { font-size: var(--text-sm); }


/* 10. FEED PAGE (feed.html)
   ========================================================================== */
.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.feed-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) {
  .feed-layout, .feed-list { gap: var(--space-4); }
}
@media (min-width: 960px) {
  .feed-layout {
    grid-template-columns: minmax(0, 640px) 300px;
    justify-content: center;
    align-items: start;
    gap: var(--space-5);
  }
  .feed-rail { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* A post in the feed is its own card (overrides the profile's shared list) */
.post.feed-post { padding: var(--space-5) var(--gutter); border-top: 1px solid var(--color-line); }
@media (min-width: 640px) {
  .post.feed-post { padding: var(--space-6); border: 1px solid var(--color-line); }
}
.post__author { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); }
.post__author-link { color: inherit; text-decoration: none; }
.post__author-link:hover { text-decoration: underline; }

.composer-card { display: flex; align-items: center; gap: var(--space-3); }
.composer-card p { font-size: var(--text-sm); color: var(--color-muted); }

.suggest-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.suggest { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.suggest__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.suggest__name { font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); text-decoration: none; }
.suggest__name:hover { text-decoration: underline; }
.suggest__role { font-size: var(--text-xs); line-height: 1.4; color: var(--color-muted); }


/* 11. HIRE REQUEST FORM (hire.html)
   ========================================================================== */
.hire-page { max-width: 720px; }

.hire-pro {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: center;
}
.hire-pro__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.hire-pro__name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-weight: 600; color: var(--color-navy); }
.hire-pro__role { font-size: var(--text-sm); }
.hire-pro__meta { font-size: var(--text-xs); color: var(--color-muted); }
.hire-pro__link { grid-column: 2; font-size: var(--text-sm); font-weight: 600; }
@media (min-width: 640px) {
  .hire-pro { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .hire-pro__link { grid-column: auto; }
}

/* A <fieldset> per step. min-width: 0 stops fieldsets refusing to shrink,
   an old browser quirk that breaks phone layouts. */
.form-card { min-width: 0; margin: 0; }
.form-card legend {
  float: left;  /* lets the legend sit inside the card padding like a heading */
  width: 100%;
  margin-bottom: var(--space-4);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy);
}
.form-card legend + * { clear: both; }

.field { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }
.field__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.field__hint { font-size: var(--text-xs); color: var(--color-muted); }
.field-row { display: grid; gap: 0 var(--space-4); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-base);  /* 16px: no zoom-on-focus on iPhones */
}
textarea.input { min-height: 140px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--color-navy); outline: none; }
.input:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
/* :user-invalid only turns red AFTER someone has interacted with the field,
   so an untouched form doesn't greet people with a wall of errors */
.input:user-invalid { border-color: var(--color-danger); }

/* Radio buttons drawn as tappable cards. The real radio is hidden but still
   focusable, so keyboards and screen readers work exactly as normal. */
.choice-grid { display: grid; gap: var(--space-2); }
@media (min-width: 640px) {
  .choice-grid--2 { grid-template-columns: 1fr 1fr; }
  .choice-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap);
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
}
.choice small { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.choice input:checked + span { border-color: var(--color-navy); background: var(--color-navy-soft); box-shadow: inset 0 0 0 1px var(--color-navy); }
.choice input:focus-visible + span { outline: 3px solid var(--color-link); outline-offset: 2px; }

.consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--color-navy); }

.hire-done { text-align: center; }
.hire-done:focus { outline: none; }
.hire-done .icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); }
.hire-done p { max-width: 44ch; margin: var(--space-2) auto var(--space-5); color: var(--color-muted); }
.hire-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }


/* 12. STAFF MONITORING (monitor.html)
   Staff-only, so it's allowed its own warning colour (--color-danger).
   ========================================================================== */
.site-header--staff { background: var(--color-navy); border-bottom-color: var(--color-navy); }
.site-header--staff .brand { color: var(--color-on-navy); }
.site-header--staff .brand__by { color: var(--color-on-navy-muted); }
.site-header--staff :focus-visible { outline-color: var(--color-accent); }
/* Phones: logo and name only. The tag and "Signed in as" appear from 640px. */
.staff-tag { display: none; }
.staff-user__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
@media (min-width: 640px) {
  .staff-tag { display: inline-block; }
  .staff-user__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.staff-tag {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-on-navy);
  font-size: var(--text-xs);
  font-weight: 600;
}
.staff-user { margin-left: auto; font-size: var(--text-xs); color: var(--color-on-navy-muted); text-align: right; }

.mstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: var(--space-4) 0 0; }
.mstat {
  display: flex;
  flex-direction: column-reverse;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.mstat dd { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--color-navy); }
.mstat dt { font-size: var(--text-xs); color: var(--color-muted); }
.mstat--alert dd { color: var(--color-danger); }
.mtabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); padding: 0; list-style: none; }

.monitor-app {
  display: grid;
  min-height: 70vh;
  background: var(--color-surface);
  border-block: 1px solid var(--color-line);
}
.monitor-app[data-view="thread"] .mlist-pane,
.monitor-app[data-view="list"] .mthread { display: none; }
.mlist-pane, .mthread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.mlist { flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.mlist__empty { padding: var(--space-6) var(--gutter); text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
.mrow {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: var(--space-3) var(--gutter);
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.mrow:hover { background: var(--color-page); }
.mrow[aria-current] { background: var(--color-navy-soft); }
.mrow__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mrow__people { font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.mrow__snippet { overflow: hidden; font-size: var(--text-xs); white-space: nowrap; text-overflow: ellipsis; }
.mrow__meta { font-size: var(--text-xs); color: var(--color-muted); }

.status { flex: none; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.status--flagged  { background: var(--color-danger-soft); color: var(--color-danger); }
.status--reviewed { background: var(--color-navy-soft); color: var(--color-navy); }
.status--clear    { background: var(--color-page); color: var(--color-muted); }

.mthread__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--gutter); border-bottom: 1px solid var(--color-line); }
.mthread__who { flex: 1; min-width: 0; }
.mthread__title { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; }
.mthread__sub { font-size: var(--text-xs); color: var(--color-muted); }
.mthread__body {
  flex: 1;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--gutter);
  overflow-y: auto;
  background: var(--color-page);
}
.audit-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.audit-note .icon { width: 16px; height: 16px; }

.flag-box { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); }
.flag-box--flagged { border-color: var(--color-danger-line); background: var(--color-danger-soft); }
.flag-box__title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.flag-box--flagged .flag-box__title { color: var(--color-danger); }
.flag-box__title .icon { width: 16px; height: 16px; }
.flag-box ul { margin: 4px 0 0; padding-left: 1.2em; }
.flag-box__note { margin-top: var(--space-2); font-size: var(--text-xs); }

.thread.thread--staff { flex: none; padding: 0; overflow: visible; background: none; }
.msg--pro {
  align-self: flex-end;
  background: var(--color-navy-soft);
  border: 1px solid #D5DCEB;
  border-bottom-right-radius: 6px;
}
.msg__from { display: block; margin-bottom: 2px; font-size: 0.6875rem; font-weight: 600; color: var(--color-muted); }
.msg--flagged { border: 2px solid var(--color-danger); }
.msg__flag {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-danger-line);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-danger);
}
.msg__flag .icon { width: 14px; height: 14px; }

.mactions {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}
.mactions__label { font-size: var(--text-xs); font-weight: 600; color: var(--color-navy); }
.mactions textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  resize: vertical;
}
.mactions__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mactions .btn { min-height: 44px; padding-inline: var(--space-4); }

@media (min-width: 960px) {
  .monitor-app {
    grid-template-columns: 360px minmax(0, 1fr);
    height: calc(100dvh - var(--header-h) - 250px);
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
  }
  .monitor-app[data-view] .mlist-pane,
  .monitor-app[data-view] .mthread { display: flex; }
  .mlist-pane { border-right: 1px solid var(--color-line); }
}