/* ============================================================
   CAREERS — the /careers/ hub and /careers/<slug>/ role pages
   Role pages and the hub's role list, principles and process are generated by
   gen-careers.mjs from careers/*.json. Colour comes only from the tokens in
   /styles.css, so both themes work unchanged. Graphics are themed diagrams,
   the same direction as the home and security pages.
   ============================================================ */

.cr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
         clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- hero ---------- */
.cr-hero h1 { max-width: 20ch; }
.cr-hero .hero-graphic { margin-top: 36px; }
.cr-intro { margin-top: 18px; }

/* ---------- breadcrumb ---------- */
.cr-crumbs { margin-bottom: 20px; }
.cr-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 6px;
                font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2); }
.cr-crumbs li + li::before { content: '›'; margin: 0 10px; color: var(--ink-2); }
.cr-crumbs a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.cr-crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.cr-crumbs [aria-current] { color: var(--ink); }

/* ---------- chips with an icon ---------- */
.cr-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chips .chip, .cr-role-meta .chip { display: inline-flex; align-items: center; gap: 7px; }
.cr-chips .chip svg { width: 14px; height: 14px; flex: none; color: var(--accent); }

/* ---------- how we work: a ruled list, one principle per row ---------- */
.cr-principles { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.cr-principle { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; align-items: start;
                padding: 22px 0; border-bottom: 1px solid var(--rule); }
.cr-principle > div { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; }
.cr-principle h3 { margin: 0; font-size: 17.5px; letter-spacing: -.01em; line-height: 1.3; padding-top: 8px; }
.cr-principle p { color: var(--ink-2); font-size: 15.5px; max-width: 62ch; padding-top: 8px; }
.cr-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
          display: grid; place-items: center; flex: none; }
.cr-ico svg { width: 20px; height: 20px; display: block; }
@media (max-width: 820px) {
  .cr-principles { margin-top: 32px; }
  .cr-principle { gap: 14px; padding: 18px 0; }
  .cr-principle > div { grid-template-columns: 1fr; gap: 4px; }
  .cr-principle p { padding-top: 0; }
}
/* on a role page the column is narrower: title above body */
.cr-principles.in-role { margin-top: 18px; border-top-color: var(--rule); }
.cr-principles.in-role .cr-principle { padding: 16px 0; gap: 14px; }
.cr-principles.in-role .cr-principle > div { grid-template-columns: 1fr; gap: 4px; }
.cr-principles.in-role h3 { font-size: 16px; }
.cr-principles.in-role p { padding-top: 0; font-size: 15px; }

/* ---------- open roles, grouped by team ---------- */
.cr-team { margin-top: 44px; }
.cr-team + .cr-team { margin-top: 40px; }
.cr-team-h { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px;
             font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cr-team-h span { font-weight: 500; color: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: 99px;
                  padding: 1px 8px; font-size: 11px; letter-spacing: .04em; }
.cr-roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cr-role { border-bottom: 1px solid var(--rule); }
.cr-role a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 28px; align-items: center;
             padding: 22px 4px; text-decoration: none; color: var(--ink); transition: background .15s ease; }
.cr-role a:hover { background: var(--bg-2); }
.cr-role a:hover .cr-role-title { color: var(--accent-hover); }
.cr-role-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.cr-role-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-role-team { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }
.cr-role-go { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
              color: var(--accent); white-space: nowrap; }
.cr-empty { margin-top: 32px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 900px) {
  .cr-role a { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
  .cr-role a:hover { background: none; }
  .cr-role-team { display: none; }   /* the group heading above already names the team */
}

/* ---------- hiring process: five steps across, stacked on phones ---------- */
.cr-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cr-steps li { position: relative; padding-right: 18px; min-width: 0; }
.cr-steps li::before { content: ''; position: absolute; left: 60px; right: 6px; top: 26px; border-top: 1.5px dashed var(--rule-strong); }
.cr-steps li.last::before { display: none; }
.cr-step-dot { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
               background: var(--surface); border: 1.5px solid var(--rule-strong); color: var(--ink-2); }
.cr-step-dot svg { width: 22px; height: 22px; display: block; }
.cr-steps li.last .cr-step-dot { background: var(--violet-500); border-color: var(--violet-500); color: #fff; box-shadow: 0 0 0 6px var(--accent-soft); }
.cr-step-n { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-2); }
.cr-steps h3 { margin: 4px 0 0; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cr-steps p:not(.cr-step-n) { margin-top: 6px; color: var(--ink-2); font-size: 15px; max-width: 26ch; }
.cr-steps.compact { margin-top: 20px; }
.cr-steps.compact li { padding-right: 12px; }
.cr-steps.compact p:not(.cr-step-n) { font-size: 14px; }
@media (max-width: 820px) {
  .cr-steps { grid-template-columns: 1fr; margin-top: 36px; }
  .cr-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 0 0 24px; }
  .cr-steps li::before { left: 26px; right: auto; top: 58px; bottom: 4px; border-top: 0; border-left: 1.5px dashed var(--rule-strong); }
  .cr-step-dot { grid-row: span 3; }
  .cr-step-n { margin-top: 2px; }
  .cr-steps p:not(.cr-step-n) { max-width: none; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .cr-steps.compact { grid-template-columns: 1fr; }
  .cr-steps.compact li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 0 0 22px; }
  .cr-steps.compact li::before { left: 26px; right: auto; top: 58px; bottom: 4px; border-top: 0; border-left: 1.5px dashed var(--rule-strong); }
  .cr-steps.compact .cr-step-dot { grid-row: span 3; }
  .cr-steps.compact .cr-step-n { margin-top: 2px; }
  .cr-steps.compact p:not(.cr-step-n) { max-width: none; }
}

/* ---------- "don't see your role?" band ---------- */
.cr-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: center;
           border: 1px solid var(--rule); background: var(--surface); border-radius: 12px; padding: clamp(24px, 4vw, 48px); }
.cr-band .display { margin-top: 14px; }
.cr-band-body p { color: var(--ink-2); font-size: 17px; max-width: 46ch; }
.cr-band-cta { margin-top: 22px; }
@media (max-width: 820px) { .cr-band { grid-template-columns: 1fr; } }

/* ---------- closer (the brand dark surface in both themes) ---------- */
.cr-closer-h { margin-top: 18px; }
.cr-closer-cta { margin-top: 26px; }
.cr-closer .closer-aside p.tag { font-size: 11px; margin-top: 0; }
.cr-closer .closer-aside p a:not(.btn) { color: var(--violet-300); }
.cr-include { align-self: center; min-width: 0; }
.closer .cr-include .tag { color: var(--panel-ink-2); }
.cr-include ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.cr-include li { position: relative; padding: 16px 20px 16px 46px; background: var(--panel-2); border: 1px solid var(--panel-rule);
                 border-radius: 10px; color: var(--panel-ink); font-size: 15.5px; }
.cr-include li::before { content: ''; position: absolute; left: 20px; top: 1.45em; width: 9px; height: 5px;
                         border-left: 1.8px solid var(--violet-300); border-bottom: 1.8px solid var(--violet-300); transform: rotate(-45deg); }
.cr-related { align-self: center; min-width: 0; }
.closer .cr-related .tag { color: var(--panel-ink-2); }
.cr-related ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.cr-related a { display: grid; gap: 4px; padding: 16px 20px; background: var(--panel-2); border: 1px solid var(--panel-rule);
                border-radius: 10px; text-decoration: none; transition: border-color .15s ease; }
.cr-related a:hover { border-color: var(--violet-400); }
.cr-rel-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--panel-ink); }
.cr-rel-name::after { content: ' →'; color: var(--violet-300); }
.cr-rel-group { font-size: 14px; color: var(--panel-ink-2); }

/* ============================================================
   ROLE PAGE
   ============================================================ */
.cr-role-h1 { max-width: 18ch; overflow-wrap: anywhere; }
.cr-hero .hero-note { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; }

.cr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 clamp(40px, 5vw, 80px); align-items: start;
             padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); }
.cr-body { min-width: 0; }

/* each section: its number on the left, the content on the right */
.cr-sec { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 34px 0 36px; border-top: 1px solid var(--rule); }
.cr-sec:first-child { border-top-color: var(--ink); }
.cr-sec > * { grid-column: 2; min-width: 0; }
.cr-sec > .cr-sec-n { grid-column: 1; grid-row: 1; padding-top: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-2); }
.cr-h2 { margin: 0 0 16px; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase;
         font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; line-height: 1.15; }
.cr-prose { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 68ch; }
.cr-prose + .cr-prose { margin-top: 14px; }
.cr-prose a { white-space: nowrap; }
@media (max-width: 560px) {
  .cr-sec { grid-template-columns: minmax(0, 1fr); padding: 28px 0 30px; }
  .cr-sec > *, .cr-sec > .cr-sec-n { grid-column: 1; }
  .cr-sec > .cr-sec-n { grid-row: auto; padding: 0 0 8px; }
}

.cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; max-width: 68ch; }
.cr-list li { position: relative; padding-left: 26px; color: var(--ink); font-size: 16px; line-height: 1.55; }
.cr-list li::before { content: ''; position: absolute; left: 2px; top: .52em; width: 9px; height: 5px;
                      border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg); }
.cr-list.soft li { color: var(--ink-2); }
.cr-list.soft li::before { top: .72em; width: 10px; height: 0; border-left: 0; border-bottom: 1.6px solid var(--ink-3); transform: none; }
.cr-prose + .cr-list { margin-top: 14px; }

.cr-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.cr-apply-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.cr-apply-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); }

/* the apply card follows you down the page on wide screens */
.cr-aside { position: sticky; top: 90px; min-width: 0; }
.cr-aside-card { border: 1px solid var(--rule); background: var(--surface); border-radius: 12px; padding: 22px 22px 20px; display: grid; gap: 14px; }
.cr-aside-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.cr-facts { margin: 0; border-top: 1px solid var(--rule); }
.cr-facts > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.cr-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.cr-facts dd { margin: 0; font-size: 14.5px; color: var(--ink); }
.cr-aside-card .btn { justify-content: center; }
.cr-aside-mail { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); text-align: center; overflow-wrap: anywhere; }

/* narrower screens: no side card; an apply bar sticks to the bottom while you read the role */
.cr-applybar { display: none; }
@media (max-width: 1000px) {
  .cr-layout { grid-template-columns: minmax(0, 1fr); }
  .cr-aside { display: none; }
  .cr-applybar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
                 position: sticky; bottom: 0; z-index: 20; margin: 8px calc(-1 * var(--gutter)) 0;
                 padding: 12px var(--gutter); background: color-mix(in oklab, var(--bg) 92%, transparent);
                 backdrop-filter: blur(10px); border-top: 1px solid var(--rule); }
  .cr-applybar-t { min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cr-applybar .btn { padding: 11px 16px; font-size: 12px; }
}
@media (max-width: 420px) {
  .cr-applybar-t { display: none; }
  .cr-applybar .btn { flex: 1; justify-content: center; }
}
@media (max-width: 420px) { .cr-hero .btn, .cr-closer .btn { white-space: normal; } }