/* Appnable Careers (careers.appnable.com), powered by Kokoodi. Quiet, like
   Ops' policy editor, after Granola (docs/design.md): the warm ground,
   hairlines instead of boxes, no shadows and no gradients, and one colour,
   Appnable green, for what you act on. Red only for errors. Laid out like the job sites candidates already use: a list of
   roles, a role page with Apply always in reach, and a four-step apply.
   No framework and no other scripts, so the Content-Security-Policy stays
   at 'self' (plus Google Fonts and the API). Built for a phone first. */

:root {
    /* The warm ground and hairlines of Ops' policy editor. */
    --bg: #faf7f2;
    --card: #ffffff;
    --ink: #1f2937;
    --ink-2: #4b5563;
    --muted: #6b6f76;
    --border: #ebe5da;
    --border-strong: #ddd5c8;
    --border-soft: #f3efe7;
    --tint: #f6f2ea;
    /* Appnable green is the one colour: buttons, links, the selected answer,
       progress. Deepened from the logo's #7fb83f so white text on it passes
       AA (4.7:1); links use the deeper shade (5.2:1 on the ground). */
    --accent: #46821f;
    --accent-hover: #3d7520;
    --accent-ink: #3d7520;
    --accent-soft: #eef5e5;
    --accent-ring: rgba(70, 130, 31, 0.22);
    --green: #7fb83f;           /* the logo's green, for dots and bars */
    --green-ink: #3d7520;
    --green-soft: #eef5e5;
    --brand-ink: #1f2937;
    --good: #3d7520;
    --critical: #b42318;        /* errors only */
    --critical-soft: #fdf3f2;
    --critical-border: #f1c9c4;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: none;
    --shadow-lift: 0 12px 32px -16px rgba(31, 41, 55, 0.28);  /* dialogs and pop-ups only */
    --font: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --display: 'Figtree', 'Noto Sans', system-ui, sans-serif;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --page: 1040px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 15.5px/1.6 var(--font); -webkit-font-smoothing: antialiased;
    min-height: 100vh; display: flex; flex-direction: column;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; z-index: 30; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 13.5px; margin: 16px 0 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }

/* ── Type ──────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.01em; color: var(--ink); }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.headline { font-size: clamp(25px, 4vw, 34px); line-height: 1.18; font-weight: 600; margin: 0 0 10px; }
.sub { color: var(--ink-2); margin: 0 0 22px; max-width: 660px; }
.lead { color: var(--ink-2); margin: 0 0 20px; }
.section-title { font-size: 18px; font-weight: 600; margin: 0 0 12px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 999px; padding: 11px 20px;
    font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; min-height: 44px; white-space: nowrap;
    transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.12s var(--ease), border-color 0.18s, color 0.18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--card); color: var(--accent-ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--tint); }
.btn-danger { background: var(--critical); color: #fff; }
.btn-danger:hover { background: #8f1c13; }
.btn-lg { padding: 13px 26px; font-size: 16px; min-height: 50px; }
.btn-sm { padding: 6px 14px; min-height: 36px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.btn[aria-busy="true"]::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: spin 0.8s linear infinite; }
.btn-ghost[aria-busy="true"]::before { border-color: var(--border); border-top-color: var(--accent); }
.link { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── Top bar and footer ────────────────────────────────────────────────── */
.topbar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px max(16px, calc((100vw - var(--page)) / 2 + 16px)); background: rgba(250, 247, 242, 0.92);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 112px; height: auto; }
.brand-tag { font: 600 11.5px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 4px 0 4px 10px; border-left: 1px solid var(--border-strong); }
.topnav { display: flex; align-items: center; gap: 14px; }
.topnav > a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.topnav > a:not(.btn):hover, .topnav > a[aria-current="page"]:not(.btn) { color: var(--ink); }
.page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 28px 16px 64px; outline: none; flex: 1; }
.page > section { animation: rise 0.35s var(--ease) both; }
.foot { border-top: 1px solid var(--border); }
.foot-inner { max-width: var(--page); margin: 0 auto; padding: 22px 16px 28px; display: grid; gap: 6px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.foot nav a { color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.powered { margin: 0; font-size: 14px; color: var(--ink-2); }
.powered strong { color: #156d99; font-family: var(--display); }
.foot .fine { margin: 4px 0 0; font-size: 12.5px; }
.page-status { color: var(--muted); font-size: 14px; text-align: center; }
.page-status:empty { display: none; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.empty-state { padding: 36px 24px; text-align: center; }
.empty-state .sub { margin-left: auto; margin-right: auto; }

/* ── Roles ─────────────────────────────────────────────────────────────── */
.hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
    color: var(--ink); padding: clamp(12px, 4vw, 36px) 0 clamp(20px, 4vw, 36px);
    margin-bottom: 20px; border-bottom: 1px solid var(--border);
}
.hero-title { color: var(--ink); font-size: clamp(30px, 5vw, 46px); line-height: 1.08; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.025em; max-width: 620px; }
.hero-sub { color: var(--ink-2); margin: 0 0 18px; max-width: 560px; font-size: 16.5px; }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 14.5px; }
.hero-points li { display: flex; align-items: center; gap: 9px; }
.tick-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.hero-art { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 16px; transform: rotate(-4deg); margin-right: 8px; }
.hero-art img { width: 100px; height: 100px; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.list-head .section-title { margin: 0; font-size: 20px; }
.jobs { display: grid; gap: 12px; }
.job-card {
    position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start;
    padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    text-decoration: none; color: inherit; transition: border-color 0.18s;
}
.job-card:hover { border-color: var(--border-strong); }
.job-card:focus-visible { outline-offset: 3px; }
.job-logo { grid-row: span 3; width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--border-soft); background: #fff; display: grid; place-items: center; }
.job-logo img { width: 38px; height: 38px; }
.job-card-title { font: 600 18px/1.3 var(--display); margin: 0; color: var(--ink); }
.job-card:hover .job-card-title { color: var(--accent-ink); }
.job-card-title { grid-column: 2; grid-row: 1; }
.job-card-co { grid-column: 2 / 4; margin: 0; color: var(--ink-2); font-size: 14.5px; }
.job-card-go { grid-row: 1; grid-column: 3; color: var(--accent); align-self: center; }
.job-card .chips { grid-column: 2 / 4; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tint); color: var(--ink-2); font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.chip-pay { color: var(--ink); font-weight: 600; }
.chip-quick { background: transparent; border: 1px solid var(--border-strong); }
.job-card-when { grid-column: 2 / 4; margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.sk { pointer-events: none; display: grid; gap: 10px; grid-template-columns: 1fr; }
.sk-line { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--tint), var(--border-soft), var(--tint)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; }

/* ── One role (the API serves the same markup) ─────────────────────────── */
.crumbs { margin: 0 0 14px; font-size: 14px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a::before { content: '‹ '; }
.crumbs a:hover { color: var(--ink); }
.job-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; padding: 24px; align-items: start; margin-bottom: 16px; }
.job-mark { width: 64px; height: 64px; border-radius: 16px; border: 1px solid var(--border-soft); background: #fff; display: grid; place-items: center; }
.job-mark img { width: 48px; height: 48px; }
.job-title { font-size: clamp(24px, 3.6vw, 32px); line-height: 1.15; font-weight: 700; margin: 0 0 4px; }
.job-employer { margin: 0 0 10px; color: var(--ink-2); }
.dot-sep { color: var(--muted); margin: 0 4px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; padding: 0; margin: 0 0 10px; }
.facts li { background: var(--tint); color: var(--ink-2); font-size: 13.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px; }
.facts li:last-child:not(:first-child) { }
.job-posted { margin: 0; color: var(--muted); font-size: 13.5px; }
.job-cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.job-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.prose { padding: 24px clamp(18px, 3vw, 30px); }
.prose h1, .prose h2, .prose h3, .prose h4 { font-size: 18px; margin: 22px 0 8px; }
.prose > h2.section-title { margin-top: 0; font-size: 20px; }
.prose p { margin: 0 0 12px; color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin: 4px 0; }
.prose li::marker { color: var(--green); }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 14.5px; }
.prose th, .prose td { text-align: left; border-bottom: 1px solid var(--border-soft); padding: 8px 10px 8px 0; vertical-align: top; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.job-side { display: grid; gap: 16px; position: sticky; top: 84px; }
.job-side > .card { padding: 20px; }
.job-side p { margin: 0 0 10px; color: var(--ink-2); font-size: 14.5px; }
.job-side .hire-steps + .fine { margin-top: 16px; }
.hire-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.hire-steps li { display: flex; gap: 12px; align-items: flex-start; }
.hire-steps strong { color: var(--ink); }
.step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 700 13px var(--display); }
.apply-bar { display: none; }

/* ── Applying ──────────────────────────────────────────────────────────── */
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 500; text-decoration: none; padding: 6px 8px 6px 2px; margin: 0 0 12px; border-radius: 8px; }
.back:hover { color: var(--ink); }
#vApply > .back { display: flex; width: fit-content; max-width: 680px; margin-left: max(0px, calc((100% - 680px) / 2)); }
.apply-shell { max-width: 680px; margin: 0 auto; padding: 24px clamp(18px, 4vw, 34px) 22px; }
.apply-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.apply-mark { width: 44px; height: 44px; border: 1px solid var(--border-soft); border-radius: 12px; padding: 4px; background: #fff; }
.apply-title { font-size: 20px; line-height: 1.25; margin: 0; font-weight: 600; }
.apply-head .eyebrow { margin-bottom: 2px; }
.progress { height: 6px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.progress span { display: block; height: 100%; width: 25%; background: var(--green); border-radius: 999px; transition: width 0.35s var(--ease); }
.progress-text { margin: 8px 0 18px; color: var(--muted); font-size: 13px; }
.step { border: 0; padding: 0; margin: 0; min-width: 0; animation: rise 0.3s var(--ease) both; }
.step-title { font: 600 19px var(--display); margin: 0 0 16px; padding: 0; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field { display: block; border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.label { display: block; font-weight: 600; font-size: 14.5px; margin: 0 0 6px; color: var(--ink); padding: 0; }
.optional { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.req { color: var(--critical); margin-left: 3px; }
.hint { display: block; color: var(--muted); font-size: 13.5px; margin: -2px 0 8px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
    width: 100%; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 11px 13px; min-height: 46px; transition: border-color 0.18s, box-shadow 0.18s; font-size: 16px;
}
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6f76' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.field.has-err input, .field.has-err select, .field.has-err textarea, .field.has-err .drop { border-color: var(--critical); }
.err { display: block; color: var(--critical); font-size: 13.5px; margin-top: 6px; }
.err:empty { display: none; }
.counter { display: block; text-align: right; color: var(--muted); font-size: 12px; margin-top: 4px; }
.summary { background: var(--critical-soft); border: 1px solid var(--critical-border); color: var(--critical); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 18px; font-weight: 500; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

/* Choices: yes or no, and one of a list */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; cursor: pointer; transition: all 0.16s var(--ease); font-weight: 500; font-size: 14.5px; }
.choice:hover span { border-color: var(--muted); }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--accent-ring); }
.field.has-err .choice span { border-color: var(--critical-border); }

/* The CV */
.drop { display: block; position: relative; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--card); cursor: pointer; transition: all 0.18s var(--ease); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; text-align: center; color: var(--ink-2); pointer-events: none; }
.drop-inner svg { color: var(--accent); }
.drop-inner .hint { margin: 0; }
.file-chip { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: #fff; }
.file-ico { flex: none; width: 38px; height: 44px; border-radius: 6px; display: grid; place-items: center; font: 700 11px var(--display); color: var(--ink-2); background: var(--tint); border: 1px solid var(--border); letter-spacing: 0.04em; }
.file-meta { flex: 1; min-width: 0; }
.file-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-sub { display: block; color: var(--muted); font-size: 12.5px; }
.file-bar { height: 4px; background: var(--tint); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.file-bar span { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.2s; }
.file-chip .ok { color: var(--good); font-weight: 600; font-size: 13px; }
.file-chip button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px 8px; border-radius: 8px; font-weight: 500; }
.file-chip button:hover { color: var(--critical); background: var(--critical-soft); }
.links-grid { display: grid; gap: 8px; }
.link-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.link-kind { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.quick { margin-top: 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink-2); font-size: 14.5px; }
.quick p { margin: 0 0 6px; }

/* Review and consent */
.review { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 18px; }
.review-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border-soft); font-size: 14.5px; }
.review-row:first-child { border-top: 0; }
.review-row dt, .review-k { color: var(--muted); }
.review-v { overflow-wrap: anywhere; white-space: pre-wrap; }
.review-edit { background: none; border: 0; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; cursor: pointer; padding: 0 2px; font-size: 13.5px; }
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.consent.has-err { border-color: var(--critical); background: var(--critical-soft); }
.apply-actions { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }

/* Sent */
.card.done { max-width: 640px; margin: 0 auto; padding: 34px clamp(20px, 4vw, 38px); text-align: center; }
.tick { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: var(--green-soft); color: var(--green-ink); animation: pop 0.45s var(--ease) both; }
.steps { list-style: none; padding: 0; margin: 22px 0 24px; display: grid; gap: 12px; text-align: left; }
.steps li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.steps strong { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions.center { justify-content: center; }

/* ── Signing in ────────────────────────────────────────────────────────── */
.auth-card { max-width: 440px; margin: 24px auto; padding: 30px 28px 26px; }
.auth-card h1 { font-size: 24px; margin: 0 0 8px; font-weight: 600; }
.badge-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 18px; font: 700 22px var(--display); }
.badge-warn { background: var(--tint); color: var(--ink); }

/* ── My applications ───────────────────────────────────────────────────── */
.me-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.me-head .headline { margin: 0; }
.apps { display: grid; gap: 14px; margin-bottom: 20px; }
.app { padding: 20px clamp(16px, 3vw, 24px); }
.app-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.app-title { font: 600 18px/1.3 var(--display); margin: 0 0 2px; }
.app-title a { color: inherit; text-decoration: none; }
.app-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-sub { margin: 0; color: var(--muted); font-size: 13.5px; }
/* Status: one quiet style; only the dot says more. */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 4px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); color: var(--ink-2); background: var(--card); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); }
.pill-offer::before, .pill-submitted::before, .pill-late::before { background: var(--green); }
.pill-overdue::before { background: var(--critical); }
.pill-closed, .pill-withdrawn { color: var(--muted); }
.pill-closed::before, .pill-withdrawn::before { background: var(--border-strong); }
.track { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0; margin: 16px 0 6px; }
.track li { position: relative; padding-top: 18px; font-size: 12px; color: var(--muted); text-align: center; }
.track li::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--tint); }
.track li.done::before { background: var(--green); }
.track li.now { color: var(--ink); font-weight: 600; }
.track li.now::before { background: var(--accent); }
.track.is-closed li.done::before, .track.is-closed li.now::before { background: var(--border-strong); }
.callout { margin: 14px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--tint); color: var(--ink-2); font-size: 14.5px; }
.callout strong { color: var(--ink); }
.app-more { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.app-more summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); list-style: none; display: flex; align-items: center; gap: 6px; }
.app-more summary::-webkit-details-marker { display: none; }
.app-more summary::before { content: '›'; display: inline-block; transition: transform 0.2s; font-size: 18px; line-height: 1; }
.app-more[open] summary::before { transform: rotate(90deg); }
.kv { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); gap: 8px 14px; margin: 14px 0; font-size: 14.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.data-card { padding: 20px clamp(16px, 3vw, 24px); }
.data-card p { color: var(--ink-2); margin: 0 0 12px; font-size: 14.5px; }
.inline-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }

/* ── Text pages ────────────────────────────────────────────────────────── */
.prose-page { max-width: 720px; }
.prose-page h2 { font-size: 18px; margin: 24px 0 6px; }
.prose-page p { color: var(--ink-2); margin: 0 0 12px; }
.prose-page .btn { margin-top: 12px; }
.timeline-steps { list-style: none; padding: 0; margin: 8px 0 22px; display: grid; gap: 4px; }
.timeline-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.timeline-steps .step-n { width: 32px; height: 32px; font-size: 14px; }
.timeline-steps h2 { margin: 3px 0 4px; font-size: 17px; }
.timeline-steps p { margin: 0; }

/* ── Bits ──────────────────────────────────────────────────────────────── */
.dialog { border: 0; border-radius: 16px; padding: 0; max-width: 420px; width: calc(100% - 32px); box-shadow: var(--shadow-lift); color: var(--ink); }
.dialog::backdrop { background: rgba(28, 28, 26, 0.4); }
.dialog-body { padding: 24px; }
.dialog h2 { margin: 0 0 8px; font-size: 20px; }
.dialog p { margin: 0 0 18px; color: var(--ink-2); }
.dialog .actions { justify-content: flex-end; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; margin: 8px auto 14px; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 40; transition: opacity 0.25s; }
.boot.gone { opacity: 0; pointer-events: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--brand-ink); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-lift); z-index: 50; max-width: calc(100% - 32px); font-size: 14.5px; animation: rise 0.25s var(--ease) both; }
.toast.bad { background: var(--critical); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── The assessment, on their application ─────────────────────────────── */
.assess { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border-soft); }
.assess-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.assess-head h3 { margin: 0; font-size: 16.5px; }
.assess p { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; }
.assess-due strong { color: var(--ink); }
.assess-done { color: var(--green-ink) !important; font-weight: 600; }
.assess-brief { margin-top: 12px; }
.assess-brief summary { cursor: pointer; padding: 6px 0; font-weight: 600; color: var(--accent-ink); }
.assess-brief .prose { padding: 4px 0 2px; }
.assess-dl { list-style: none; margin: 0; padding: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.assess-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.assess-form h4 { margin: 0 0 12px; font: 600 15px var(--display); }
.assess-files { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }

/* ── Network and the standard states (docs/ui-states.md) ───────────── */
.net-banner { position: sticky; top: 0; z-index: 30; padding: 10px 16px; text-align: center; font-size: 14px; font-weight: 500; color: #fff; }
.net-banner.off { background: var(--ink); }
.net-banner.back { background: var(--good); }
.net-slow { position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 45; max-width: calc(100% - 32px); padding: 10px 16px 10px 38px; border-radius: 999px; background: var(--brand-ink); color: #fff; font-size: 13.5px; box-shadow: var(--shadow-lift); }
.net-slow::before { content: ''; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.9s linear infinite; }
.state-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.nf-jobs { margin-top: 22px; }
.apply-loading { display: grid; gap: 14px; padding: 6px 0 10px; }
.apply-loading .sk-line { height: 14px; }
.apply-loading .sk-line.w100 { height: 46px; border-radius: 10px; }
.w100 { width: 100%; }
.app.sk { display: grid; gap: 12px; padding: 22px; }

/* ── Phones and small tablets ──────────────────────────────────────────── */
@media (max-width: 880px) {
    .job-body { grid-template-columns: minmax(0, 1fr); }
    .job-side { position: static; }
    .job-head { grid-template-columns: 52px minmax(0, 1fr); padding: 20px; gap: 14px; }
    .job-mark { width: 52px; height: 52px; border-radius: 12px; }
    .job-mark img { width: 38px; height: 38px; }
    .job-cta { grid-column: 1 / -1; flex-direction: row; }
    .job-cta .btn-primary { flex: 1; }
    .apply-bar {
        display: block; position: sticky; bottom: 0; z-index: 15; background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform 0.25s var(--ease);
    }
    .apply-bar.show { transform: none; }
    .apply-bar-inner { display: flex; align-items: center; gap: 12px; max-width: var(--page); margin: 0 auto; }
    .apply-bar-text { flex: 1; min-width: 0; display: grid; font-size: 14px; }
    .apply-bar-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .apply-bar-text span { color: var(--green-ink); font-weight: 600; font-size: 13px; }
}
@media (max-width: 640px) {
    body { font-size: 15px; }
    .page { padding: 18px 16px 48px; }
    .topnav > a:not(.btn) { display: none; }
    .brand img { width: 96px; }
    .hero { grid-template-columns: minmax(0, 1fr); padding: 8px 0 22px; }
    .hero-art { display: none; }
    .job-head { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
    .job-mark { width: 46px; height: 46px; }
    .job-mark img { width: 34px; height: 34px; }
    .job-card { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; gap: 2px 12px; }
    .job-logo { width: 44px; height: 44px; border-radius: 10px; grid-row: span 2; }
    .job-logo img { width: 32px; height: 32px; }
    .job-card-go { display: none; }
    .job-card .chips { grid-column: 1 / -1; }
    .job-card-when { grid-column: 1 / -1; }
    .row-2 { grid-template-columns: minmax(0, 1fr); }
    .review-row { grid-template-columns: minmax(0, 1fr) auto; }
    .review-row .review-k { grid-column: 1 / -1; font-size: 13px; }
    .link-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .apply-shell { padding: 20px 16px 18px; border-radius: 14px; }
    .apply-actions { position: sticky; bottom: 0; background: #fff; margin: 18px -16px -18px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0 0 14px 14px; }
    .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .kv dd { margin-bottom: 8px; }
    .track li { font-size: 0; padding-top: 10px; }
    .track li.now { font-size: 11.5px; }
    .app-top { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Powered by Kokoodi: the same mark on everything we build ─────────── */
.kk-badge { position: relative; display: inline-block; font-size: 13px; }
.kk-badge summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink-2); font-weight: 500; user-select: none; transition: border-color .18s, box-shadow .18s; }
.kk-badge summary::-webkit-details-marker { display: none; }
.kk-badge summary:hover, .kk-badge[open] summary { border-color: var(--border-strong); }
.kk-badge summary strong { color: #156d99; font-weight: 700; letter-spacing: .01em; }
.kk-badge summary img { width: 14px; height: auto; }
.kk-card { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 20; width: min(320px, calc(100vw - 32px)); padding: 16px 16px 14px; border-radius: 14px; background: var(--ink); color: rgba(255, 255, 255, .86); text-align: left; box-shadow: var(--shadow-lift); font-size: 13.5px; line-height: 1.5; }
.kk-card::after { content: ''; position: absolute; left: 22px; bottom: -6px; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); }
.kk-card p { margin: 0 0 10px; }
.kk-card .kk-title { color: #fff; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.kk-card a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.kk-card a::after { content: ' \2192'; }
.kk-card a:hover { text-decoration: underline; }
.assess-again { margin-bottom: 14px; }
.job-needs { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 500; }

/* ── The mark moment ─────────────────────────────────────────────────────
   When an application goes, the Appnable mark draws itself: the tile settles
   at the hero's tilt, the grey dot drops in, the green stroke grows up out
   of it, and one soft ripple goes out. The same mark, drawing on a loop, is
   the loading state. CSS only (the CSP allows no inline style), and still
   for anyone who asks for reduced motion. */
.mm .mm-dot { fill: #818181; }
.mm .mm-stroke { fill: none; stroke: #a0c63f; stroke-width: 46.8; stroke-linecap: round; }
.mm .mm-ring { fill: none; stroke: #a0c63f; stroke-width: 4; opacity: 0; }
.mm circle, .mm line { transform-box: fill-box; transform-origin: center; }

.lockup-moment { display: grid; place-items: center; margin: 0 auto 14px; }
.lk { overflow: visible; }
.lk path, .lk circle, .lk line { transform-box: fill-box; transform-origin: center; }
.lk .lk-stem { fill: #1a84b8; transform-origin: top center; animation: lk-stem 0.4s 0.05s cubic-bezier(0.65, 0, 0.35, 1) both; }
.lk .lk-arm { fill: none; stroke: #1a84b8; stroke-width: 60; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: lk-arm 1.5s 0.3s cubic-bezier(0.45, 0, 0.55, 1) both; }
.lk .lk-kdot { fill: #1a94b8; animation: lk-pop 0.4s 1.11s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.lk .lk-stroke { fill: none; stroke: #a0c63f; stroke-width: 46.8; stroke-linecap: round; stroke-dasharray: 100; animation: lk-grow 0.55s 1.8s cubic-bezier(0.65, 0, 0.35, 1) both; }
.lk .lk-ring { fill: none; stroke: #818181; stroke-width: 4; opacity: 0; animation: lk-ripple 0.9s 1.8s ease-out both; }
/* The dot: in at the top of the K, round the turn, past the K's own dot, then
   right in a short arc, turning from Kokoodi teal to Appnable grey as it grows. */
.lk .lk-dot { fill: #818181; stroke: #fff; animation: lk-run 1.5s 0.3s cubic-bezier(0.45, 0, 0.55, 1) both; }
.card.done > :not(.lockup-moment) { animation: rise 0.45s var(--ease) both; }
.card.done > .eyebrow { animation-delay: 1.95s; }
.card.done > .headline { animation-delay: 2.05s; }
.card.done > .sub { animation-delay: 2.15s; }
.card.done > .steps { animation-delay: 2.25s; }
.card.done > .actions, .card.done > :last-child { animation-delay: 2.35s; }

@keyframes lk-stem { from { transform: scaleY(0); } to { transform: none; } }
@keyframes lk-arm { 0% { stroke-dashoffset: 100; } 29.1% { stroke-dashoffset: 46; } 53.9%, 100% { stroke-dashoffset: 0; } }
@keyframes lk-pop { 0% { transform: scale(0); } 100% { transform: none; } }
@keyframes lk-run {
    0% { transform: translate(-110.3px, -100.6px) scale(0.38); fill: #1a94b8; stroke-width: 12; opacity: 0; }
    4% { opacity: 1; }
    29.1% { transform: translate(-170.7px, -38.9px) scale(0.38); fill: #1a94b8; stroke-width: 12; }
    53.9% { transform: translate(-117.5px, 11.7px) scale(0.38); fill: #1a94b8; stroke-width: 12; }
    77.9% { transform: translate(-58.8px, -28.9px) scale(0.62); fill: #4f8ea0; stroke-width: 6; }
    92% { transform: translate(0, 0) scale(1.1); fill: #818181; stroke-width: 0; }
    100% { transform: none; fill: #818181; stroke-width: 0; opacity: 1; }
}
@keyframes lk-grow { 0% { stroke-dashoffset: 100; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes lk-ripple { 0% { opacity: 0; transform: scale(1); } 1% { opacity: 0.5; } 100% { opacity: 0; transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) {
    .lk .lk-stem, .lk .lk-kdot, .lk .lk-dot { transform: none !important; opacity: 1 !important; }
    .lk .lk-arm, .lk .lk-stroke { stroke-dashoffset: 0 !important; opacity: 1 !important; }
    .lk .lk-dot { fill: #818181 !important; stroke-width: 0 !important; }
    .lk .lk-ring { display: none; }
}

/* Loading: the stroke draws up, holds, and lets go, over a still dot. */
.mark-loop .mm-stroke { stroke-dasharray: 100; animation: mm-loop 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.mark-loop .mm-dot { animation: mm-breathe 1.5s ease-in-out infinite; }
@keyframes mm-loop { 0% { stroke-dashoffset: 100; opacity: 1; } 45%, 70% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes mm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88); } }

@media (prefers-reduced-motion: reduce) {
    .mm .mm-stroke { stroke-dashoffset: 0 !important; opacity: 1 !important; }
    .mm .mm-dot { opacity: 1 !important; transform: none !important; }
    .mm .mm-ring { display: none; }
}

/* ── The track: the Appnable dot runs the pipeline ───────────────────────
   On My applications, the grey dot from the Appnable mark travels along the
   bars to the stage they are at, the green filling in behind it, and comes
   to rest there. Four stages; the class says which (at-1 to at-4). */
.track-wrap { position: relative; --at: 12.5%; }
.track-wrap.at-2 { --at: 37.5%; } .track-wrap.at-3 { --at: 62.5%; } .track-wrap.at-4 { --at: 87.5%; }
.track-dot { position: absolute; top: 6px; left: var(--at); z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #818181; box-shadow: 0 0 0 3px var(--card); animation: track-run 1.1s 0.2s linear both; }
.track-wrap .track li::before { transform-origin: left center; animation: track-fill 0.3s linear both; }
/* Each bar fills as the dot crosses it: the dot runs 1.1s from the start to the middle of stage k. */
.track-wrap.at-1 .track li:nth-child(1)::before { animation-delay: 0.20s; animation-duration: 1.10s; }
.track-wrap.at-2 .track li:nth-child(1)::before { animation-delay: 0.20s; animation-duration: 0.73s; }
.track-wrap.at-2 .track li:nth-child(2)::before { animation-delay: 0.93s; animation-duration: 0.37s; }
.track-wrap.at-3 .track li:nth-child(1)::before { animation-delay: 0.20s; animation-duration: 0.44s; }
.track-wrap.at-3 .track li:nth-child(2)::before { animation-delay: 0.64s; animation-duration: 0.44s; }
.track-wrap.at-3 .track li:nth-child(3)::before { animation-delay: 1.08s; animation-duration: 0.22s; }
.track-wrap.at-4 .track li:nth-child(1)::before { animation-delay: 0.20s; animation-duration: 0.31s; }
.track-wrap.at-4 .track li:nth-child(2)::before { animation-delay: 0.51s; animation-duration: 0.31s; }
.track-wrap.at-4 .track li:nth-child(3)::before { animation-delay: 0.83s; animation-duration: 0.31s; }
.track-wrap.at-4 .track li:nth-child(4)::before { animation-delay: 1.14s; animation-duration: 0.16s; }
.track-wrap .track li:not(.done):not(.now)::before { animation: none; }
.track-wrap.is-still .track-dot, .track-wrap.is-still .track li::before { animation: none; }
@keyframes track-run { from { left: 0%; opacity: 0; } 15% { opacity: 1; } to { left: var(--at); opacity: 1; } }
@keyframes track-fill { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .track-dot { left: var(--at) !important; opacity: 1 !important; } }

/* The thin rule across the top, as in Ops' sidebar: Appnable, then Kokoodi. */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: linear-gradient(90deg, #7fb83f 0 66.66%, #1a84b8 66.66% 100%); pointer-events: none; }