/* The overgrown clearing: original vector foliage, carved stone, and relics.
   Decoration stays outside hit areas; document content keeps its own typography. */
:root {
    --bg: #111323;
    --surface: #282b43;
    --surface-hover: #383d58;
    --surface-2: #1c2035;
    --border: #747c9e;
    --text: #eeeaf5;
    --text-muted: #c5c7dd;
    --primary: #bdb1e6;
    --primary-hover: #e0d4ff;
    --primary-soft: #443d62;
    --high: #f0b0a1;
    --high-bg: #563630;
    --medium: #ead395;
    --medium-bg: #51472e;
    --low: #b9d895;
    --low-bg: #2c443e;
    --radius: 5px 13px 5px 10px;
    --ink: #0b0d1b;
    --stone-texture: url('/static/ruins/stone.svg');
}
body {
    background-image: url('/static/ruins/stars.svg'), radial-gradient(ellipse at 65% 0, #4a427455, transparent 65%), var(--stone-texture);
    background-size: 720px 520px, auto, 220px 160px;
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}
::selection { background: #c3b5e6; color: #111323; }
:where(a, button, summary, input, select, textarea, [contenteditable]):focus-visible {
    outline: 3px solid #e6d49a; outline-offset: 4px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid #e6d49a; outline-offset: 2px; }
:where(.page-head, .app-head, .discovery-intro, .card-head) h1,
:where(.page-head, .app-head, .card, .match-card, .job-card, .app-card, .modal-head, .discovery-intro) > h2,
.card-head h3, .card > h3, .auth-card h1, .level-card h2 {
    font-family: Georgia, 'Palatino Linotype', serif;
    font-weight: 500; letter-spacing: -.025em; text-wrap: balance;
}
.card > h3, .card-head h3 { font-size: 1.2rem; color: #ece4fa; }
.eyebrow { color: #c3b8e7; letter-spacing: .17em; }
.topnav {
    background: #1c2035; border-bottom: 3px solid var(--ink);
    box-shadow: inset 0 -3px #55577d, 0 5px #080b1855;
    backdrop-filter: none; gap: 1rem; padding-block: .9rem;
}
.brand { font-family: Georgia, serif; font-size: 1.12rem; white-space: nowrap; }
.brand-mark {
    display: grid; place-items: center; width: 35px; height: 39px;
    font-family: Georgia, serif; font-size: 1.9rem; line-height: 1;
    color: #e3d497; background: #403e61; border: 2px solid #111326;
    border-radius: 45% 45% 6px 6px; box-shadow: inset 2px 2px #9691b7, 2px 2px #111326;
}
.nav-links a { border: 1px solid transparent; }
.nav-links a.active { background: #484066; color: #f0e7ff; border-color: #8c83b2; box-shadow: 2px 2px var(--ink); }
.nav-links a:hover { background: #343550; }
.nav-level-badge { background: #b6abdb; color: #1c1930; border: 2px solid #121329; box-shadow: 2px 2px #0b0d1b; border-radius: 40% 40% 6px 6px; }
.nav-streak { color: #ddd0ab; }
.nav-xp-fill { background: #b9a8e8; }
.nav-level-meta { min-width: 86px; }
body:not(.signed-in) > .ruin-banner { display: none; }
.ruin-banner {
    position: relative; isolation: isolate; width: calc(100% - 2rem); max-width: 1168px;
    min-height: 250px; margin: 2rem auto .5rem; border-bottom: 2px solid #646788;
}
.ruin-banner-copy { position: relative; z-index: 1; width: 48%; padding: 1.25rem 0 2rem 1rem; }
.ruin-banner-title { font-family: Georgia, serif; font-size: clamp(2.5rem, 4.8vw, 4rem); color: #e9e2f8; line-height: 1.02; letter-spacing: -.045em; margin: .65rem 0 1rem; }
.ruin-banner-note { font-size: .85rem; color: #c2c3dc; max-width: 300px; }
.ruin-gate { position: absolute; width: 78%; height: 100%; object-fit: contain; object-position: right bottom; right: -12px; bottom: 0; z-index: 0; pointer-events: none; }
main { padding-top: 1.4rem; }
.page { gap: 1.4rem; }
.page-head, .app-head, .discovery-intro {
    position: relative; background: var(--stone-texture), #33364f;
    border: 2px solid var(--ink); border-radius: 5px 20px 6px 12px;
    padding: 1.5rem; box-shadow: inset 3px 3px #a39bb866, inset -4px -5px #20233a, 4px 5px #090c19;
}
.page-head::after, .app-head::after, .discovery-intro::after {
    content: ''; position: absolute; inset: -9px; border: 21px solid transparent;
    border-image: url('/static/ruins/vine.svg') 30 / 21px / 0 round;
    pointer-events: none;
}
.discovery-intro::after { border-image-source: url('/static/ruins/ivy-flowering.svg'); }
.discovery-intro { margin-top: 0; margin-bottom: 10px; }
.discovery-intro h1 { color: #eee7fa; font-family: Georgia, serif; font-weight: 500; }
.card, .job-card, .app-card, .review-card, .modal-card, .suggestion-popover, .pdf-preview {
    background: var(--stone-texture), var(--surface); border: 2px solid var(--ink);
    box-shadow: inset 2px 2px #9e9fc755, inset -3px -4px #1b1d32, 3px 4px #0a0c1b;
}
.card { padding: 1.4rem; }
.match-card { padding: 1.6rem; }
.job-card, .app-card { border-top: 4px solid #6d7e8f; }
.app-card:hover { border-color: #bcb1e1; box-shadow: inset 2px 2px #9e9fc755, 4px 6px #0a0c1b; }
:where(.primary-btn, .secondary-btn, .mini-btn, .danger-btn) {
    border: 2px solid var(--ink); border-radius: 4px 9px 3px 7px;
    box-shadow: inset 1px 2px #e1d9ff33, inset -2px -3px #11132344, 2px 3px var(--ink);
    min-height: 36px; transition: background .15s, transform .15s, box-shadow .15s;
}
.primary-btn { background: #c4b7e8; color: #211b36; font-weight: 800; position: relative; }
.primary-btn:not(.auth-google), .secondary-btn:not(.auth-google) { position: relative; padding: .65rem 1.15rem; }
.primary-btn:not(.auth-google)::after, .secondary-btn:not(.auth-google)::after {
    content: ''; position: absolute; inset: -7px; border: 13px solid transparent;
    border-image: url('/static/ruins/vine.svg') 30 / 13px / 0 round;
    pointer-events: none;
}
.primary-btn:hover { background: #ddd0fc; }
.secondary-btn:hover, .mini-btn:hover { background: #454560; }
.danger-btn { background: #e5a596; color: #311e19; }
:where(.primary-btn, .secondary-btn, .mini-btn, .danger-btn):active:not(:disabled) { transform: translate(1px,2px); box-shadow: inset 1px 2px #1c1a3166; }
.auth-google { background: #fff; color: #1f1f1f; }
:where(button, input, select, textarea):disabled { cursor: not-allowed; }
input[type='text'], input[type='password'], input:not([type]), input[type='url'], input[type='email'], input[type='search'], textarea, select {
    border-color: #8a8caa; background-color: #191d30; box-shadow: inset 2px 2px #0a0c2080;
}
::placeholder { color: #b2b4cb; opacity: 1; }
select { color-scheme: dark; }
.chip { border-radius: 4px 10px 4px 8px; border-color: #8a8caa; }
.chip.active { color: #f0eaff; box-shadow: inset 0 -2px #b5a6df; }
.tag, .pill, .keyword-tag { border-radius: 3px 8px 3px 6px; }
.xp-pill { color: #e5d99d; background: #403953; border: 1px solid #9b90b3; border-radius: 3px 8px; }
.status-pill { border: 1px solid currentColor; border-radius: 3px 9px 3px 7px; padding: .25rem .55rem; }
.status-pill::before { display: inline-block; margin-right: .35rem; }
.status-pill.saved::before { content: '◇'; }
.status-pill.tailoring::before { content: '✧'; }
.status-pill.applied::before { content: '➶'; }
.status-pill.interviewing::before { content: '☽'; }
.status-pill.offer::before { content: '✦'; }
.status-pill.rejected::before { content: '×'; }
.status-pill.archived::before { content: '⌑'; }
.status-pill.interviewing { background: #483d54; color: #dec4eb; }
.status-pill.applied { background: #344b43; color: #c0dfc4; }
.status-pill.offer { background: #4b492c; color: #efe0a0; }
.progress, .nav-xp-bar { background: #14182a; border: 1px solid #727b9f; border-radius: 3px; height: 8px; }
.progress-fill { background: repeating-linear-gradient(110deg, #807ab9 0 16px, #bcb0e5 16px 30px); }
.stat { border: 1px solid #6d7596; box-shadow: inset 2px 2px #121528; }
.stat-num, .level-num { font-family: Georgia, serif; font-weight: 500; color: #e6d59b; }
.level-ring { border-radius: 50%; background: #232640; box-shadow: 0 0 0 3px #7a7fa6, 0 0 0 6px #14162a; }
.level-card { position: relative; }
.level-card::after { content: ''; position: absolute; inset: -8px; border: 19px solid transparent; border-image: url('/static/ruins/vine.svg') 30 / 19px / 0 round; pointer-events: none; }
.score-ring-fill { stroke: #b5a5e0; }
.relic-intro { margin: .35rem 0 1rem; }
.badge-grid { grid-template-columns: repeat(auto-fill,minmax(108px,1fr)); gap: .65rem; align-items: start; }
.badge-grid .badge { opacity: 1; filter: none; background: #25283e; border: 2px solid #111426; border-radius: 32px 32px 5px 5px; padding: .55rem .3rem; box-shadow: inset 2px 2px #8184ab55, 2px 3px #131528; }
.badge-grid .badge.earned { background: var(--stone-texture), #494262; border-color: #b2a4d4; }
.badge summary { display: block; cursor: pointer; color: var(--text); border-radius: 20px 20px 4px 4px; }
.badge summary::marker, .badge summary::-webkit-details-marker { display: none; }
.badge summary:hover .badge-name { text-decoration: underline; }
.badge-icon { width: 54px; height: 59px; margin: 0 auto .4rem; color: #b1b5d2; background: #202238; border: 1px solid #6d729b; border-radius: 45% 45% 7px 7px; }
.badge-icon svg { width: 100%; height: 100%; }
.earned .badge-icon { color: #ecdb9e; background: #343049; border-color: #c9b893; box-shadow: 0 2px #19152c; }
.badge-name { font-size: .73rem; line-height: 1.35; }
.badge-state { display: block; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: #b9bad3; margin-top: .35rem; }
.earned .badge-state { color: #e4d59b; }
.badge-detail { font-size: .73rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid #767898; overflow-wrap: anywhere; }
.match-reasons li { background: #3c3c58; color: #e4dff5; border: 1px solid #747297; }
.match-order { color: #c2b8db; font-family: Georgia, serif; }
.tab.active { color: #ecdfaa; border-bottom-color: #c6d38a; background: #393250; }
.drop-zone { background: #22263b; border-color: #8480a6; }
.drop-zone:hover, .drop-zone.drag-over { background: #2c443e; }
.empty-state { background: #22283e; border-color: #7c83a6; }
.auth-card { position: relative; margin-top: 130px; padding-top: 2rem; }
.auth-card::before { content: ''; position: absolute; width: 100%; height: 170px; left: 0; top: -167px; background: url('/static/ruins/moon-gate.svg') 65% bottom / 540px auto no-repeat; pointer-events: none; }
.auth-card::after { content: ''; position: absolute; inset: -9px; border: 21px solid transparent; border-image: url('/static/ruins/ivy-flowering.svg') 30 / 21px / 0 round; pointer-events: none; }
.toast { background: #36334f; border: 2px solid #a99fca; box-shadow: 3px 4px #0a0c1b; }
.toast.badge { filter: none; text-align: left; }
.loading-overlay { background: #111323ed; }
footer { border-top: 1px solid #525777; background: #171a2d; }
footer p { max-width: 920px; margin: auto; }
/* Keep long names and actions inside their stone frames. */
.page-head > *, .app-head > *, .match-intro > *, .job-head > *, .two-col > *, .hero-grid > *, .doc-row > * { min-width: 0; }
:where(.job-card, .app-card, .page-head, .app-head, .doc-title) { overflow-wrap: anywhere; }
.app-head-actions, .doc-toolbar-actions, .score-actions { flex-wrap: wrap; }
@media (max-width: 900px) {
    .ruin-banner { min-height: 220px; margin-top: 1.25rem; }
    .ruin-banner-copy { width: 52%; padding-left: .25rem; }
    .ruin-gate { width: 80%; right: -5px; }
    .checklist-card { position: static; }
}
@media (max-width: 640px) {
    .ruin-banner { min-height: 196px; margin-top: .75rem; }
    .ruin-banner-copy { width: 63%; padding: 1rem 0 1.3rem; }
    .ruin-banner .eyebrow { font-size: .56rem; letter-spacing: .09em; }
    .ruin-banner-title { font-size: 2.5rem; }
    .ruin-banner-note { max-width: 180px; font-size: .72rem; }
    .ruin-gate { width: 68%; object-fit: cover; object-position: 66% bottom; opacity: .85; }
    .card, .match-card, .page-head, .app-head, .discovery-intro { padding: 1.1rem; }
    .level-card { gap: 1rem; flex-wrap: wrap; }
    .badge-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .badge-name { font-size: .68rem; }
    .page-head::after, .app-head::after, .discovery-intro::after { inset: -6px; border-width: 16px; border-image-width: 16px; }
    .auth-card { margin-top: 105px; }
    .doc-row, .job-head, .app-head-actions { flex-wrap: wrap; }
    .nav-links a { padding-inline: .6rem; }
    .app-grid { grid-template-columns: minmax(0,1fr); }
    .primary-btn, .secondary-btn, .danger-btn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Compact screens give the illustration its own space below the heading. */
:where(.page-head, .app-head) h2 { font-family: Georgia, serif; font-weight: 500; color: #eee7fa; }
@media (max-width: 640px) {
    .ruin-banner { min-height: 320px; }
    .ruin-banner-copy { width: 100%; padding: .8rem .25rem 0; }
    .ruin-banner-title { font-size: 2.4rem; margin-block: .55rem; }
    .ruin-banner-title br { display: none; }
    .ruin-banner-note { max-width: 250px; }
    .ruin-gate { width: 100%; height: 180px; object-fit: cover; object-position: 64% bottom; opacity: 1; right: 0; }
}
/* Severity labels need dark ink on the pale warning stone. */
.rec-severity.high { color: #311e19; }

/* Quiet celestial details share the ruins' angular illustration language. */
.ruin-banner::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: url('/static/ruins/constellation.svg') right 12% top / 280px 120px no-repeat;
    opacity: .7; pointer-events: none;
}
.night-companion { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: 0 auto 1rem; color: #d0c5ec; }
.night-companion img { width: 64px; height: 72px; flex: none; }
.night-companion span { text-align: left; font-family: Georgia, serif; font-size: 1rem; }
.night-companion small { display: block; margin-top: .2rem; color: var(--text-muted); font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-size: .73rem; }
.earned .badge-icon { background-image: radial-gradient(circle at 50% 30%, #64507180, transparent 75%); }
@media (max-width: 640px) {
    .ruin-banner::before { background-position: right top 120px; background-size: 190px 80px; }
}