/*
 * ResMatch
 * Apple-neutral palette: soft grey-white field (#f5f5f7), white glass, near-black
 * type, and a single blue kept for the main action and the score.
 * Rules of the system:
 *   - one glass layer only: panels are glass, what sits inside them is solid
 *   - nothing has a sharp corner; inner corners follow the panel they sit in
 *   - colour is spent on meaning (match dots, the gain), never on decoration
 *   - depth is real 3D (the hero object, the dial, leaning cards, floating orbs)
 */
:root {
    --ink: #1d1d1f;
    --ink-2: #55555a;
    --cream: #f5f5f7;
    --blue: #0071e3;
    --blue-deep: #0066cc;
    --blue-soft: #e8f2fd;
    --solid: rgba(255, 255, 255, .92);
    --line: rgba(0, 0, 0, .14);
    --good: #1f7a45; --warn: #8f5600; --bad: #b8291d;
    --glass-bg: linear-gradient(155deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .36));
    --glass-edge: rgba(255, 255, 255, .85);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 -1px 0 rgba(0, 0, 0, .05) inset, 0 24px 60px -18px rgba(30, 30, 40, .22), 0 2px 6px rgba(30, 30, 40, .05);
    --blur: saturate(160%) blur(26px);
    --r-panel: 40px;
    --pad: clamp(24px, 3.4vw, 44px);
    --r-in: 26px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
    color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--cream); color: var(--ink); font: 17px/1.5 var(--font); letter-spacing: -.012em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.5rem); line-height: 1.04; font-weight: 600; letter-spacing: -.045em; }
h2 { font-size: 1.75rem; line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
h3 { font-size: 1.18rem; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.page-title { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.sub { color: var(--ink-2); }
.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; letter-spacing: -.02em; max-width: 26em; }
.small { font-size: .87rem; }
a { color: var(--blue-deep); text-underline-offset: 3px; }
[hidden] { display: none !important; }
dialog:not([open]) { display: none !important; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 60; background: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 999px; }
textarea:focus-visible, .list li:focus-visible { border-radius: var(--r-in); }
main:focus { outline: none; }

/* ---------- the field: cream light and three slow glass orbs for the panels to frost ---------- */
.field { --px: 0; --py: 0; position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
    radial-gradient(60vmax 50vmax at 12% -8%, #ffffff 0%, transparent 62%),
    radial-gradient(54vmax 46vmax at 96% 22%, #e6e6eb 0%, transparent 66%),
    radial-gradient(60vmax 50vmax at 30% 112%, #e9e9ee 0%, transparent 64%),
    var(--cream); }
.orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #ffffff 0%, #f2f2f5 36%, #d4d4da 78%, #bcbcc4 100%); box-shadow: 0 60px 90px -30px rgba(30, 30, 40, .38), inset -18px -24px 50px rgba(80, 80, 92, .22), inset 10px 14px 30px rgba(255, 255, 255, .7); transition: translate 1.2s var(--ease); animation: drift 16s ease-in-out infinite; }
.o1 { width: 34vmax; height: 34vmax; right: -9vmax; top: 6vh; translate: calc(var(--px) * -34px) calc(var(--py) * -26px); }
.o2 { width: 17vmax; height: 17vmax; left: -7vmax; top: 64vh; animation-delay: -6s; translate: calc(var(--px) * 46px) calc(var(--py) * 34px); }
.o3 { width: 7vmax; height: 7vmax; left: 47vw; top: 74vh; animation-delay: -11s; translate: calc(var(--px) * 70px) calc(var(--py) * 50px); opacity: .9; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

/* ---------- glass: drawn on a layer behind the content so floating menus can frost too ---------- */
.bar, .tabbar, .card, .working, .steps li { position: relative; isolation: isolate; }
.bar::before, .tabbar::before, .card::before, .working::before, .steps li::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bar::before, .tabbar::before, .card::before, .working::before, .steps li::before { background: rgba(255, 255, 255, .95); }
}
@media (prefers-reduced-transparency: reduce) { :root { --glass-bg: rgba(255, 255, 255, .97); --blur: none; } }

/* top bar: a floating capsule */
.bar { position: sticky; top: 14px; z-index: 30; width: min(1160px, calc(100% - 28px)); margin: 14px auto 0; border-radius: 999px; }
.bar-in { height: 60px; padding: 0 10px 0 26px; display: flex; align-items: center; gap: 30px; }
.brand { font-weight: 650; font-size: 1.22rem; letter-spacing: -.04em; text-decoration: none; color: var(--ink); }
.bar nav { display: flex; gap: 6px; flex: 1; }
.tab { color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; color: var(--ink-2); font-size: .94rem; font-weight: 450; text-decoration: none; transition: background .2s, color .2s; }
.tab:hover { color: var(--ink); background: rgba(255, 255, 255, .5); }
.tab[aria-current="page"] { color: #fff; background: var(--ink); font-weight: 550; }
.tab .count { font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: rgba(0, 0, 0, .1); color: var(--ink-2); }
.tab[aria-current="page"] .count { background: rgba(255, 255, 255, .22); color: #fff; }
.bar .tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bar .btn { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.tabbar { display: none; }
@media (max-width: 760px) {
    .bar nav { display: none; }
    .bar-in { padding-left: 20px; gap: 10px; }
    .tabbar { display: flex; position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; border-radius: 999px; padding: 6px; gap: 4px; }
    .tabbar .tab { flex: 1; justify-content: center; font-size: .86rem; min-height: 48px; padding: 0 6px; }
    main { padding-bottom: 130px !important; }
}

main { width: min(1160px, calc(100% - 28px)); margin: 0 auto; padding: 56px 0 110px; }
.stack { display: grid; gap: 28px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.card { border-radius: var(--r-panel); padding: var(--pad); }
.card:has(.pick.open) { z-index: 6; }
.card > h2 + .sub, .card > h3 + .sub { margin-top: 8px; }
.grid-2 { display: grid; gap: 28px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (min-width: 881px) { .grid-2 > .stack:first-child { position: sticky; top: 96px; } }
@media (max-width: 880px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- controls: every one a capsule ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .9); background: var(--solid); color: var(--ink); font: 500 1rem var(--font); letter-spacing: -.015em; cursor: pointer; text-decoration: none; box-shadow: 0 6px 18px -8px rgba(30, 30, 40, .3); transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(30, 30, 40, .38); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 12px 26px -12px rgba(0, 113, 227, .75); }
.btn.quiet { background: none; border-color: transparent; box-shadow: none; padding: 0 6px; color: var(--blue-deep); text-decoration: underline; text-decoration-color: rgba(0, 88, 184, .3); text-underline-offset: 4px; }
.btn.quiet:hover { transform: none; text-decoration-color: currentColor; }
.btn.danger { color: var(--bad); }
.btn.big { min-height: 60px; padding: 0 36px; font-size: 1.14rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
label, .field-label { display: grid; gap: 8px; font-weight: 500; font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel] { width: 100%; min-height: 50px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--solid); color: var(--ink); font: 400 1rem/1.4 var(--font); }
textarea { width: 100%; min-height: 120px; padding: 18px 22px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--solid); color: var(--ink); font: 400 1rem/1.5 var(--font); resize: vertical; }
textarea::-webkit-resizer { display: none; }
textarea::-webkit-scrollbar { width: 10px; } textarea::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
input:focus, textarea:focus { border-color: var(--blue); }
.fields { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }

/* a round switch, not a square tick box */
.switch { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 400; font-size: 1rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 52px; height: 32px; border-radius: 999px; background: rgba(0, 0, 0, .2); position: relative; transition: background .25s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.switch input:checked + .track { background: var(--blue); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--blue); outline-offset: 3px; }

/* glass dropdown */
.pick { position: relative; display: inline-block; }
.pick-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .9); background: var(--solid); color: var(--ink); font: 500 .95rem var(--font); cursor: pointer; width: 100%; box-shadow: 0 6px 18px -8px rgba(30, 30, 40, .3); }
.pick-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); opacity: .7; }
.pick.open .pick-btn::after { transform: translateY(2px) rotate(-135deg); }
.pick-menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 10px); min-width: max(100%, 190px); margin: 0; padding: 8px; list-style: none; border-radius: 28px; display: grid; gap: 2px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .78), rgba(250, 250, 252, .6)); border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: saturate(170%) blur(30px); backdrop-filter: saturate(170%) blur(30px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 34px 70px -18px rgba(20, 20, 30, .45), 0 4px 12px rgba(20, 20, 30, .08);
    transform-origin: top right; animation: pop .28s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.94); } }
.pick-menu li { padding: 11px 16px; border-radius: 20px; cursor: pointer; font-size: .96rem; display: flex; align-items: center; justify-content: space-between; gap: 18px; white-space: nowrap; outline-offset: -2px; }
.pick-menu li:hover, .pick-menu li:focus { background: rgba(255, 255, 255, .75); }
.pick-menu li[aria-selected="true"] { font-weight: 600; }
.pick-menu li[aria-selected="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.app .pick { display: block; }

/* ---------- welcome ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 24px; align-items: center; min-height: min(660px, calc(100vh - 170px)); padding: 0 0 40px; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.drop { display: grid; gap: 12px; justify-items: start; border-radius: var(--r-panel); transition: background .2s, padding .2s; }
.drop.over { background: rgba(255, 255, 255, .6); padding: 24px; }
details.plain > summary { justify-content: flex-start; font-weight: 400; color: var(--blue-deep); text-decoration: underline; text-decoration-color: rgba(0, 88, 184, .3); text-underline-offset: 4px; }
details.plain[open] { width: min(540px, 100%); }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; min-height: 0; } .stage { order: -1; height: 300px !important; padding-left: 0 !important; } .o1 { opacity: .5; } }

.stage { --px: 0; --py: 0; --dx: 0; --dy: 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; height: 520px; padding-left: 40px; perspective: 1500px; perspective-origin: 50% 40%; display: grid; place-items: center; }
.object { position: relative; width: 300px; height: 392px; transform-style: preserve-3d; transform: rotateX(calc(14deg - var(--py) * 16deg - var(--dy) * 1deg)) rotateY(calc(-24deg + var(--px) * 26deg + var(--dx) * 1deg)) rotateZ(3deg); transition: transform .9s var(--ease); animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@media (max-width: 880px) { .object { scale: .62; } .stage { margin-bottom: 18px; } }
/* Mid-size screens (small laptops, tablets on their side): a smaller object that stays inside the page. */
@media (min-width: 881px) and (max-width: 1180px) { .object { scale: .8; } .stage { padding-left: 0; padding-right: 30px; } }
html { overflow-x: clip; }
/* Large monitors (24 to 32 inch and up): the whole page grows with the screen instead of sitting small in the middle. */
@media (min-width: 1800px) { body { zoom: 1.15; } }
@media (min-width: 2200px) { body { zoom: 1.35; } }
@media (min-width: 2900px) { body { zoom: 1.6; } }
@media (min-width: 3600px) { body { zoom: 2; } }
.pane { position: absolute; border-radius: 34px; border: 1px solid rgba(255, 255, 255, .95); background: linear-gradient(140deg, rgba(255, 255, 255, .9), rgba(246, 246, 248, .55)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 34px 64px -10px rgba(30, 30, 40, .3), 0 6px 14px rgba(30, 30, 40, .08); }
.slab { position: absolute; inset: 0; border-radius: 34px; background: #d2d2d7; transform: translateZ(-14px); }
.paper { inset: 0; padding: 38px 32px; display: grid; align-content: start; gap: 11px; }
.paper .l { display: block; height: 9px; border-radius: 9px; background: #e3e3e8; }
.paper .l.dark { background: var(--ink); height: 11px; }
.paper .gap { height: 12px; }
.w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; }
.dial3d { width: 168px; height: 168px; right: -74px; top: -42px; border-radius: 50%; display: grid; place-items: center; transform: translateZ(110px); }
/* The ring is given an exact size and position: left to itself, an SVG sizes differently from browser to browser and drifts off the number. */
.dial3d svg { position: absolute; left: 14px; top: 14px; width: calc(100% - 28px); height: calc(100% - 28px); transform: rotate(-90deg); }
.dial3d b { position: relative; line-height: 1; }
.dial3d circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.dial3d .track { stroke: rgba(0, 0, 0, .1); } .dial3d .value { stroke: var(--blue); }
.dial3d b { font-size: 3.1rem; font-weight: 600; letter-spacing: -.06em; }
.tag3d { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 550; white-space: nowrap; }
.tag3d b { font-size: 1.3rem; letter-spacing: -.04em; margin-left: 4px; }
.tag3d.t1 { left: -58px; bottom: 96px; transform: translateZ(170px); }
.tag3d.t2 { right: -48px; bottom: 26px; transform: translateZ(70px); }
.floor { position: absolute; left: -10%; right: -10%; bottom: -70px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 30, 40, .3), transparent); transform: translateZ(-120px) rotateX(78deg); filter: blur(10px); }


.steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 28px; grid-template-columns: 1.25fr 1fr 1fr; counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 8px; align-content: start; border-radius: var(--r-panel); padding: var(--pad); }
.steps li > h3::before { content: counter(s); display: block; font-size: 3.6rem; line-height: 1; font-weight: 600; letter-spacing: -.06em; color: rgba(0, 0, 0, .28); margin-bottom: 18px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* progress + notices */
.working { border-radius: var(--r-panel); padding: 22px var(--pad); display: flex; gap: 16px; align-items: center; }
.working.between { justify-content: space-between; }
.stages { display: grid; gap: 12px; }
.stages ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.stages li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.stages li .sub { font-weight: 400; }
.mark { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; border: 2.5px solid var(--line); }
.running .mark { border-top-color: var(--blue); animation: spin .8s linear infinite; }
.done .mark, .added .mark { border-color: var(--good); background: var(--good); }
.done .mark::after, .added .mark::after { content: ""; width: 6px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1.5px) rotate(45deg); }
.failed .mark { border-color: var(--bad); background: var(--bad); }
.failed .mark::after { content: "!"; color: #fff; font-weight: 700; font-size: .85rem; line-height: 1; }
@media (min-width: 761px) { .stages { position: sticky; top: 96px; z-index: 20; } }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--blue); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice { border-radius: var(--r-in); padding: 16px 22px; background: var(--solid); display: flex; gap: 12px; align-items: baseline; }
.notice::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); flex: none; }
.notice.bad::before { background: var(--bad); }

/* score dial */
.score { display: grid; justify-items: center; gap: 24px; text-align: center; padding-top: 56px; padding-bottom: 48px; }
.dial { --tx: 0; --ty: 0; perspective: 900px; }
.ring { position: relative; width: 240px; height: 240px; border-radius: 50%; background: linear-gradient(150deg, #ffffff, #ececf0); box-shadow: 0 1px 0 #fff inset, 0 40px 56px -18px rgba(30, 30, 40, .45), 0 4px 10px rgba(30, 30, 40, .08); transform: rotateX(calc(16deg - var(--ty) * 22deg)) rotateY(calc(var(--tx) * 22deg)); transition: transform .5s var(--ease); }
.ring svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring .track { stroke: rgba(0, 0, 0, .09); }
.ring .value { stroke: var(--blue); transition: stroke-dashoffset 1.1s var(--ease); }
.ring .num { position: absolute; inset: 0; display: grid; place-content: center; }
.ring .num b { font-size: 5.2rem; line-height: 1; font-weight: 600; letter-spacing: -.07em; }
.trend { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--good); background: var(--solid); padding: 8px 18px; border-radius: 999px; }
.score p { max-width: 24em; font-size: 1.06rem; }

/* content inside panels is solid, never glass on glass */
.list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.list li { padding: 20px 24px; border-radius: var(--r-in); background: var(--solid); }
.list li > .sub { margin-top: 4px; }
.rewrite { display: grid; gap: 12px; }
.rewrite .was { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.rewrite .now { font-weight: 550; font-size: 1.06rem; line-height: 1.4; }
.list li.applied { background: #e9f7ee; box-shadow: inset 0 0 0 1.5px rgba(31, 122, 69, .35); transition: background .4s, box-shadow .4s; }
.added { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; font-weight: 600; color: var(--good); }
.rewrite .btn { min-height: 42px; font-size: .92rem; box-shadow: none; background: var(--blue-soft); color: var(--blue-deep); border-color: transparent; }
#editor form { margin-top: 24px !important; gap: 20px; }
#editor textarea { min-height: 380px; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; border-radius: 999px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; flex: none; margin: 0 8px; opacity: .6; }
details[open] > summary::after { transform: rotate(-135deg); }
details.card > form { margin-top: 18px !important; gap: 22px; }

/* jobs: details on the left, the match score on the right with its reasons on a note */
.job { --tx: 0; --ty: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; transition: transform .45s var(--ease); transform: perspective(1400px) rotateX(calc(var(--ty) * -2.6deg)) rotateY(calc(var(--tx) * 2.6deg)); }
.job::before { transition: box-shadow .45s var(--ease), background .3s; }
.job.lean::before { background: linear-gradient(155deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .62)); box-shadow: 0 1px 0 #fff inset, 0 44px 80px -24px rgba(30, 30, 40, .42); }
.job:hover, .job:focus-within, .job:has(.why.open) { z-index: 5; }
.job h3 { font-size: 1.45rem; letter-spacing: -.03em; }
.job h3 + .sub { margin-top: 4px; }
.job .actions { margin-top: 22px; }
.why { position: relative; display: grid; justify-items: center; gap: 8px; }
.match { position: relative; width: 104px; height: 104px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--ink); font-family: var(--font); background: linear-gradient(150deg, #ffffff, #ececf0); box-shadow: 0 1px 0 #fff inset, 0 18px 30px -12px rgba(30, 30, 40, .4), 0 2px 6px rgba(30, 30, 40, .08); transition: transform .3s var(--ease); }
.match:hover, .why.open .match { transform: scale(1.06); }
/* Exact size and position, so the ring sits on the number in every browser and at every screen size. */
.match svg { position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); transform: rotate(-90deg); }
.match b { position: relative; }
.match circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.match .track { stroke: rgba(0, 0, 0, .08); } .match .value { stroke: var(--blue); }
.match b { font-size: 2.7rem; font-weight: 600; letter-spacing: -.06em; line-height: 1; }
/* the note: a glass sticky note that appears on hover, keyboard focus, or tap */
.note { position: absolute; z-index: 20; right: calc(100% + 18px); top: 50%; width: min(340px, 72vw); padding: 22px 24px; border-radius: 30px; text-align: left;
    background: linear-gradient(155deg, rgba(255, 255, 255, .86), rgba(250, 250, 252, .66)); border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: saturate(170%) blur(30px); backdrop-filter: saturate(170%) blur(30px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 34px 70px -18px rgba(20, 20, 30, .45), 0 4px 12px rgba(20, 20, 30, .08);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) translateX(10px) rotate(-1.2deg) scale(.96); transform-origin: right center; transition: opacity .22s, transform .28s var(--ease), visibility .22s; }
.why:hover .note, .why:focus-within .note, .why.open .note { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) rotate(-1.2deg); }
.note strong { display: block; font-size: 1.02rem; letter-spacing: -.02em; }
.note ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.note li { position: relative; padding-left: 18px; font-size: .95rem; line-height: 1.4; }
.note li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
@media (max-width: 700px) {
    .job { grid-template-columns: 1fr; gap: 18px; }
    .why { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 14px; order: -1; }
    .match { width: 76px; height: 76px; } .match b { font-size: 2rem; }
    .note { position: static; grid-column: 1 / -1; width: auto; transform: none !important; display: none; margin-top: 4px; }
    .why:focus-within .note, .why.open .note { display: block; }
}

/* tracker */
.funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.funnel div { padding: 22px 24px; border-radius: var(--r-in); background: var(--solid); }
.funnel b { display: block; font-size: 3rem; font-weight: 600; letter-spacing: -.06em; line-height: 1; margin-bottom: 8px; }
.app { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(190px, 230px); align-items: start; }
.app label { margin-top: 18px !important; }
@media (max-width: 640px) { .app { grid-template-columns: 1fr; } }
.empty { padding: 56px var(--pad); display: grid; gap: 14px; justify-items: start; }

/* toast + account sheet */
.toast { position: fixed; left: 50%; bottom: 104px; transform: translate(-50%, 16px); z-index: 50; opacity: 0; pointer-events: none; background: rgba(29, 29, 31, .86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; padding: 13px 24px; border-radius: 999px; font-weight: 500; font-size: .95rem; max-width: calc(100% - 32px); text-align: center; transition: opacity .25s, transform .25s var(--ease); }
@media (max-width: 560px) { .toast { border-radius: 26px; } }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sheet { border: 1px solid var(--glass-edge); border-radius: 44px; padding: 40px; width: min(460px, calc(100% - 24px)); color: var(--ink); background: linear-gradient(155deg, rgba(255, 255, 255, .86), rgba(250, 250, 252, .74)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 1px 0 #fff inset, 0 50px 120px rgba(20, 20, 30, .4); }
.sheet::backdrop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sheet[open] { animation: rise .35s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.sheet form, .sheet .stack { display: grid; gap: 16px; }
.sheet hr { border-radius: 999px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: .86rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.print-only { display: none; }
@media print {
    body > *:not(.print-only) { display: none !important; }
    body { background: #fff; }
    .print-only { display: block; white-space: pre-wrap; font: 11pt/1.45 Georgia, serif; color: #000; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: .01ms !important; }
    .spin { border-top-color: var(--line); }
}

.stage.grabbing { cursor: grabbing; }
.stage.grabbing .object { transition: none; animation-play-state: paused; }
.steps li { padding-top: 30px; padding-bottom: 30px; }
.steps li > h3::before { margin-bottom: 12px; }

/* footer + plain reading pages */
.foot { width: min(1160px, calc(100% - 28px)); margin: -40px auto 0; padding: 0 12px 48px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; gap: 6px; flex-wrap: wrap; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: .92rem; }
.foot a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.foot p { margin: 0 14px; }
@media (max-width: 760px) { .foot { padding-bottom: 120px; margin-top: -90px; } }
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 { font-size: 1.3rem; margin: 34px 0 10px; }
.prose p { margin: 0 0 12px; max-width: 62ch; }
.prose .sub { margin-top: 8px; }

/* thumbs */
.btn svg { flex: none; }
.btn.like { background: var(--blue-soft); color: var(--blue-deep); border-color: transparent; }
.score .btn.big + .sub { margin-top: -10px; }

/* a job card confirming a save, or fading out after a thumbs-down */
.job.rated::before { background: #e9f7ee; box-shadow: inset 0 0 0 1.5px rgba(31, 122, 69, .4), 0 24px 60px -18px rgba(30, 30, 40, .22); }
.job.gone { opacity: .3; transition: opacity .3s; pointer-events: none; }

/* progress: a percentage in the middle of the ring */
.ring.loading { transform: none; }
.ring.loading .value { transition: stroke-dashoffset .4s linear; }
.ring .num small { font-size: .38em; font-weight: 600; letter-spacing: 0; margin-left: 2px; color: var(--ink-2); }
.stages .pct { font-variant-numeric: tabular-nums; color: var(--blue-deep); min-width: 3.2ch; }
.app .why { justify-items: start; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-bottom: 6px; }
.app .match { width: 72px; height: 72px; } .app .match b { font-size: 1.9rem; }

/* tracker notes: small by default, scrolls inside, can be dragged taller */
textarea.notes { min-height: 0; height: 66px; max-height: 260px; padding: 12px 18px; font-size: .95rem; overflow-y: auto; }

/* A suggestion that has gone into the resume: green, then folds away. */
.rewrite.applied { background: color-mix(in srgb, var(--good) 9%, transparent); transition: background .3s; }
.rewrite.folding { overflow: hidden; padding-block: 10px; transition: height .45s cubic-bezier(.4, 0, .2, 1), padding .45s; }
.rewrite.folding > :not(:last-child) { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .rewrite.folding { transition: none; } }

.list li.slim { display: flex; align-items: center; gap: 10px; min-height: 46px; padding-block: 8px; font-size: .95rem; background: color-mix(in srgb, var(--good) 9%, transparent); }
.slim .what { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 550; }
.slim .mark { width: 20px; height: 20px; }
.slim .mark::after { width: 5px; height: 9px; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-radius: 16px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .25s; margin-right: 6px; }
details.fold[open] > summary::after { transform: rotate(-135deg); }
details.fold > summary h2 { margin: 0; }
details.fold[open] > summary { margin-bottom: 12px; }
.grid-2 > *, .grid-2 .card, .list, .list li.slim { min-width: 0; }
.list li.slim { overflow: hidden; }

.btn.who { max-width: 9.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.btn.who.long { font-size: .82em; letter-spacing: -.01em; }

/* Staff tables */
.scroll { overflow: auto; max-height: 420px; border-radius: 18px; margin-top: 14px; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { text-align: left; padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.data th { position: sticky; top: 0; background: var(--cream); font-weight: 600; color: var(--ink-2); }
.stack > * { min-width: 0; }
.scroll { max-width: 100%; }
.scroll.tall { max-height: 70vh; }
/* "New jobs this morning": slides in under the top bar, leaves on its own after 25 seconds. */
.daynote { position: fixed; z-index: 40; top: 92px; left: 50%; width: min(560px, calc(100% - 28px)); transform: translate(-50%, -16px); opacity: 0; transition: opacity .3s, transform .3s var(--ease); }
.daynote.show { opacity: 1; transform: translate(-50%, 0); }
.daynote-in { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 54px 22px 26px; border-radius: 30px; overflow: hidden; border: 1px solid var(--glass-edge); background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(250, 250, 252, .84)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 1px 0 #fff inset, 0 30px 70px -20px rgba(20, 20, 30, .45); }
.daynote-in > div { flex: 1; min-width: 0; }
.daynote-in .btn.primary { min-height: 44px; white-space: nowrap; }
.daynote-in .close { position: absolute; top: 8px; right: 14px; min-height: 36px; padding: 0 8px; font-size: 1.5rem; line-height: 1; text-decoration: none; color: var(--ink-2); }
.daynote-in .countdown { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--blue); border-radius: 0 4px 4px 0; transition: width .1s linear; }
@media (max-width: 560px) { .daynote { top: 84px; } .daynote-in { flex-wrap: wrap; padding-right: 46px; } }
@media print { .daynote { display: none; } }
/* Shown when a job search finds nothing strong: what happened and what to do next. */
.advice { display: grid; gap: 14px; border-left: 6px solid var(--warn); }
.advice p { max-width: 46em; }
.flag { font-size: .8rem; font-weight: 600; padding: 3px 12px; border-radius: 999px; color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent); }
.flag.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, transparent); }
.manage { flex-wrap: nowrap; gap: 8px; }
.manage .btn { min-height: 36px; padding: 0 16px; font-size: .86rem; box-shadow: none; border-color: var(--line); }

/* What is missing to reach 100 */
.gap .pts { font-size: .82rem; font-weight: 600; color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent); padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.gap-form { display: flex; gap: 10px; flex-wrap: wrap; }
.gap-form input { flex: 1 1 220px; min-height: 46px; }
.rewrite .btn.quiet { background: none; min-height: 0; padding: 0; font-size: .87rem; }
.list li.slim.skipped { background: var(--solid); }
.slim.skipped .what { color: var(--ink-2); font-weight: 450; }
.slim.skipped .pts { font-size: .8rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.slim.skipped .btn.quiet { min-height: 0; padding: 0; font-size: .87rem; }
/* The example in an empty notes box clears as soon as the box is clicked. */
.notes::placeholder { color: var(--ink-2); opacity: .75; }
.notes:focus::placeholder { color: transparent; }

/* Sign-in: results wait behind it */
.pair { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) { .pair { grid-template-columns: 1fr; } .sheet { padding: 28px 22px; border-radius: 34px; } }
.sheet { max-height: calc(100dvh - 24px); overflow-y: auto; }
input[readonly] { color: var(--ink-2); background: transparent; }
.gate .gate-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.gate .lead { max-width: 30em; }
.ring.locked .num { color: var(--ink-2); }
.ring.locked .num svg { position: static; width: 76px; height: 76px; transform: none; }
.ring.locked .track { stroke-dasharray: 3 9; }