/* The home page on a wide screen (1024px and up). Loaded with media="(min-width: 1024px)".
   This sheet is linked BEFORE home.html's own <style>, so every rule here starts with `body`
   to win on specificity. Right = start (the page is RTL):
   right column (agent + how it works), centre (tabs, feed), left column (filters). */

body {
  --side-r: 320px; --side-l: 220px; --gap: 24px; --stick: 76px; --hero-h: 330px;
  overflow-x: clip; /* the full-bleed bars below are 100vw wide; clip, not hidden, so sticky still works */
}
@media (min-width: 1280px) { body { --side-r: 380px; --side-l: 260px; } }

/* ---------- page grid ---------- */
body .app {
  max-width: 1240px; padding: 0 var(--gap) 48px; min-height: 100vh;
  display: grid; align-items: start; column-gap: var(--gap); row-gap: 0;
  grid-template-columns: var(--side-r) minmax(0, 1fr) var(--side-l);
}
@media (min-width: 1600px) { body .app { max-width: 1440px; } }

/* top bar and stories: the full width of the content */
body .top { grid-column: 1 / -1; grid-row: 1; padding: 14px 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body .top::before { /* full-bleed frosted band behind the bar */
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: rgba(244,245,251,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
body .logo { font-size: 26px; }
body .top .emp { padding: 8px 16px; font-size: 15px; transition: border-color .15s, color .15s; }
body .top .emp:hover { border-color: var(--brand); color: var(--brand); }

body .stories { grid-column: 1 / -1; grid-row: 2; padding: 16px 0 18px; gap: 18px; }
body .story-btn { width: 78px; }
body .ring { width: 72px; height: 72px; }
body .story-btn small { font-size: 13px; }
body .story-btn:hover .ring { transform: scale(1.05); }
body .ring { transition: transform .15s; }

/* ---------- right column: agent + how it works (sticky) ----------
   Both sit in the same grid cell; the second is pushed under the first by --hero-h (margin) and sticks
   that far lower (top). Sticky offsets measure the border box, so margin and top must match.
   (A wrapper element around both would make this exact for any hero height; see the report.) */
body .hero, body .how, body .filters { grid-column: 1; grid-row: 3 / 7; align-self: start; position: sticky; top: var(--stick); }
body .hero {
  margin: 0; height: var(--hero-h); min-height: 0; border-radius: 28px;
  grid-template-rows: minmax(0, 1fr) auto auto;
}
body .hero .stage { min-height: 0; }
body .hero .talk { padding: 14px 12px 8px 2px; gap: 8px; min-height: 0; overflow: hidden; }
body .hero .hi { font-size: 21px; }
body .hero .bubble { font-size: 14px; min-height: 0; padding: 8px 11px; }
body .hero .ask { margin: 0 12px 12px; }
body .hero #quick { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; gap: 6px; margin: -2px 12px 12px; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 1; }
body .hero #quick::-webkit-scrollbar { display: none; }
body .hero #quick:empty { display: none; }
body .hero #quick > * {
  flex: none; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.16); color: #fff;
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
body .hero #quick > *:hover { background: rgba(255,255,255,.3); }

body .how {
  top: calc(var(--stick) + var(--hero-h) + 14px);
  margin: calc(var(--hero-h) + 14px) 0 0; padding: 0; list-style: none; counter-reset: how;
  display: grid; gap: 8px;
}
body .how:empty { display: none; }
body .how > li {
  counter-increment: how; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 11px 14px; padding-inline-start: 52px; font-size: 14px; line-height: 1.45; color: var(--soft);
}
body .how > li::before {
  content: counter(how); position: absolute; inset-inline-start: 12px; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: #fff; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 15px;
}
body .how > li b, body .how > li strong { display: block; color: var(--ink); font-size: 15px; font-weight: 700; }

@media (max-height: 700px) { /* too short to keep both in view: let the column scroll with the page */
  body .hero, body .how { position: static; }
}

/* ---------- centre column ---------- */
body .tabs { grid-column: 2; grid-row: 3; margin: 0 0 14px; }
body .tabs button { transition: background .15s; }
body .tabs button:not([aria-selected="true"]):hover { background: rgba(255,255,255,.6); }
body #feed { grid-column: 2; grid-row: 4; min-width: 0; }
body #explore { grid-column: 2; grid-row: 5; margin: 0; grid-auto-rows: 110px; gap: 10px; }
@media (min-width: 1600px) { body #explore { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body .tile { transition: transform .15s, box-shadow .15s; }
body .tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21,23,58,.18); }
body .post { margin: 0 0 14px; }
body .foot { grid-column: 2; grid-row: 6; margin: 8px 0 0; }

/* job cards: one column in the centre; two once the centre is wide enough */
body #feed #jobs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 0 0 14px; padding: 0; list-style: none; }
body #feed .job-card { margin: 0; min-width: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
body #feed .job-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21,23,58,.12); border-color: var(--brand); }

/* ---------- left column: filters (sticky) ---------- */
body .filters { grid-column: 3; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px; max-height: calc(100vh - var(--stick) - 16px); overflow-y: auto; }
body .filters:empty { display: none; }
body .filters h2, body .filters h3, body .filters legend, body .filters label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
body .filters .chip {
  display: inline-block; margin: 0 0 6px; margin-inline-end: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s;
}
body .filters .chip:hover { border-color: var(--brand); }
body .filters .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
body .filters select { width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; padding: 9px 10px; }

/* ---------- bottom nav: not on a computer (every action exists elsewhere) ---------- */
body .nav { display: none; }

/* ---------- agent chat: a drawer on the right edge, page stays visible ---------- */
body .sheet-wrap { background: rgba(15,15,40,.22); }
body #sheet { align-items: stretch; justify-content: flex-start; }
body #sheet .sheet {
  width: 420px; max-width: 100%; height: 100vh; height: 100dvh; border-radius: 26px 0 0 26px;
  box-shadow: -10px 0 40px rgba(15,15,40,.2); animation: drawer-in .22s ease-out;
}
body .sheet .grab { display: none; }
body .sheet header { padding: 16px 18px 12px; }
body .sheet header button:hover { background: #E6E8F2; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- job details: a centred dialog ---------- */
body .job-wrap { align-items: center; justify-content: center; }
body .job-wrap .sheet.job {
  width: 560px; max-width: calc(100vw - 48px); height: auto; max-height: min(86vh, 760px); border-radius: 26px;
  box-shadow: 0 24px 60px rgba(15,15,40,.3); animation: dialog-in .18s ease-out;
}
body .job-wrap .job-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
body .job-wrap .job-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--line); }
@keyframes dialog-in { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- story viewer: a phone-sized frame in the middle of a dark backdrop ---------- */
body .viewer { background: rgba(8,8,24,.94); padding: 24px; }
body .story { width: 420px; max-width: 100%; height: min(760px, calc(100vh - 48px)); box-shadow: 0 30px 80px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) {
  body #sheet .sheet, body .job-wrap .sheet.job { animation: none; }
  body .tile, body .ring, body #feed .job-card { transition: none; }
}

/* ---------- fitted to the real markup (feed redesign, 16/10/2026) ---------- */
/* The trade chips sit in a .chips row that scrolls sideways on a phone; in the narrow left column they wrap. */
body .filters .chips { flex-wrap: wrap; overflow: visible; }
body .how { grid-template-columns: 1fr; }
/* centre column, top to bottom: search, personal strip, quick chips, the feed, the footnote */
body #search { grid-column: 2; grid-row: 3; margin: 0 0 14px; }
body #search h1 { font-size: 30px; }
body #mine { grid-column: 2; grid-row: 4; margin: 0 0 12px; }
body #quick { grid-column: 2; grid-row: 5; margin: 0 0 12px; flex-wrap: wrap; overflow: visible; }
body #feed { grid-column: 2; grid-row: 6; }
body .foot { grid-column: 2; grid-row: 7; }
body .hero, body .how, body .filters { grid-row: 3 / 8; }
body #feed .jobs-head { margin: 4px 0 10px; }
body #feed #openings .post { margin: 0 0 14px; }
body #feed .more, body #feed .empty { margin-inline: 0; width: 100%; }
/* the filter column is the same panel the phone opens as a sheet; on a computer it is always there */
body .filters .fl-inner > div:first-child h3, body #fl-inner > div:first-child h3 { margin-top: 0; }
body #fl-inner h3 { font-size: 14px; margin: 14px 0 8px; }
body #filter-btn, body #nav-filter { display: none; }
/* the companion: a card in the corner, not a bar across the page */
body .companion { inset-inline: auto; inset-inline-start: 24px; bottom: 24px; width: 380px; }
body .companion .in { margin: 0; max-width: none; }
body .toast { bottom: 110px; }
body .app { padding-bottom: 120px; }
/* the sign-in, questionnaire and filter sheets are centred dialogs on a computer */
body #q-sheet, body #in-sheet, body #f-sheet { align-items: center; }
body #q-sheet .sheet, body #in-sheet .sheet, body #f-sheet .sheet { width: 520px; border-radius: 26px; max-height: min(86vh, 760px); }
body .job-wrap .jd-acts { display: grid; }
/* the frosted band under the top bar is 100vw, which includes the scrollbar: clip it at the page, not only the body */
html { overflow-x: clip; }