/* Playful Geometric: "Stable Grid, Wild Decoration." Content -- resume text,
   QA findings, forms -- stays calm and legible; the chrome around it (buttons,
   badges, the header, one hero blob) carries the energy. Token names are kept
   stable from the app's previous system so component rules below don't need
   duplicating per page; only the values and the shapes built on them change. */
:root {
  --paper: #FFFDF5; --panel: #FFFFFF; --ink: #1E293B; --muted: #64748B;
  --rule: #E2E8F0; --accent: #8B5CF6; --accent-soft: #EFE9FE; --accent-ink: #FFFFFF;
  --secondary: #F472B6; --tertiary: #FBBF24; --quaternary: #34D399;
  --good: #16A34A; --warn: #B45309; --bad: #DC2626;
  --good-bg: #DCFCE7; --warn-bg: #FEF3C7; --bad-bg: #FEE2E2;
  --radius: 16px; --radius-sm: 8px; --radius-full: 9999px; --border-w: 2px;
  --shadow-c: #1E293B;
  /* A scale, not a pile of one-off values: how close two things sit says how
     related they are. Micro is an icon against its own label; tight is a
     caption against the thing it's captioning (a hint under an input, a
     note under a button); group is the gap that says "new field, new
     thought"; section is a full break. Everything below should draw from
     this rather than inventing its own number. */
  --sp-micro: 4px; --sp-tight: 8px; --sp-rhythm: 12px; --sp-related: 16px;
  --sp-group: 24px; --sp-section: 32px; --sp-hero: 48px;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #18141F; --panel: #221C2E; --ink: #F1F5F9; --muted: #A79FC0;
    --rule: #3A3149; --accent: #A78BFA; --accent-soft: #2E2545; --accent-ink: #1E1530;
    --secondary: #F9A8D4; --tertiary: #FCD34D; --quaternary: #6EE7B7;
    --good: #4ADE80; --warn: #FBBF24; --bad: #F87171;
    --good-bg: #142C1E; --warn-bg: #2E2410; --bad-bg: #2E1717;
    --shadow-c: #000000;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
main { max-width: 900px; margin: 0 auto; padding: 0 20px 90px; }
h1 { font: 800 2.1rem/1.15 var(--font-display); letter-spacing: -.01em; margin: 0 0 .25em; }
h2 { font: 700 1.05rem/1 var(--font-display); color: var(--ink); margin: 0 0 1em;
     display: flex; align-items: center; gap: 9px; }
h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px;
             background: var(--accent); flex: none; }
h3 { font: 700 .82rem/1 var(--font-display); color: var(--muted); margin: 1.5em 0 .6em;
     text-transform: uppercase; letter-spacing: .03em; }
p { margin: 0 0 .8em; }
code { font-family: var(--font-mono); font-size: .85em; background: var(--muted);
       background: color-mix(in srgb, var(--ink) 6%, transparent); padding: .1em .35em; border-radius: 4px; }
a { color: var(--accent); font-weight: 600; }

/* A polka-dot fill -- one of the design system's named textures -- rather
   than a plain bar. */
.top { max-width: 900px; margin: 0 auto; padding: 30px 20px 34px;
       display: flex; align-items: center; justify-content: space-between;
       background-image: radial-gradient(var(--rule) 1.5px, transparent 1.5px);
       background-size: 20px 20px; }
.wordmark { font: 800 1.05rem var(--font-display); letter-spacing: -.01em;
            color: var(--ink); text-decoration: none; display: inline-flex;
            align-items: center; gap: 8px; }
.wordmark .mark { display: inline-flex; align-items: center; justify-content: center;
                   width: 22px; height: 22px; border-radius: 50%; background: var(--tertiary);
                   color: var(--ink); font: 800 12px/1 var(--font-body); flex: none;
                   border: var(--border-w) solid var(--shadow-c); }
.wordmark span:not(.mark) { color: var(--muted); font-weight: 600; }

.hero { margin-bottom: var(--sp-hero); }
.sub { color: var(--muted); max-width: 56ch; }
.hint { color: var(--muted); font-size: .87rem; margin-top: var(--sp-tight); }
.opt { color: var(--muted); font-weight: 500; }

/* The "Sticker" card: hard offset shadow, chunky border, no blur. Reserved
   for genuinely discrete units (a form, a collapsed detail) -- a page of
   these stacked edge to edge is the "SaaS card wall" this system is trying
   not to be, so large running content uses .section instead. */
.card { background: var(--panel); border: var(--border-w) solid var(--shadow-c);
        border-radius: var(--radius); padding: var(--sp-group) 26px;
        margin-bottom: var(--sp-group); box-shadow: 6px 6px 0 0 var(--shadow-c); }

.section { padding-top: var(--sp-section); margin-top: var(--sp-section);
           border-top: var(--border-w) dashed var(--rule); }
.section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

/* A label sits close to the field it names (tight) and far from whatever
   came before it (group) -- it's the start of a new thought, not a
   continuation of the last one. */
label { display: block; font: 700 .74rem/1 var(--font-body); color: var(--ink);
        text-transform: uppercase; letter-spacing: .04em;
        margin: var(--sp-group) 0 var(--sp-tight); }
label:first-of-type { margin-top: 0; }
input[type=text], input[type=password], textarea {
  width: 100%; padding: 12px 14px; border: var(--border-w) solid var(--rule);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--ink);
  font: 15px/1.5 var(--font-body); box-shadow: 4px 4px 0 0 transparent;
  transition: box-shadow .15s ease, border-color .15s ease;
}
input:focus, textarea:focus, [contenteditable]:focus {
  outline: none; border-color: var(--accent); box-shadow: 4px 4px 0 0 var(--accent);
}
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
textarea { margin-top: var(--sp-tight); resize: vertical; font-size: .92rem; }
details { margin: var(--sp-rhythm) 0 var(--sp-micro); }
summary { cursor: pointer; color: var(--ink); font: 700 .87rem var(--font-body); }

/* Candy buttons. Pill, chunky border, hard shadow that lifts on hover and
   presses flat on click -- the one place the whole system's "bouncy, tactile"
   feel has to actually be felt, not just read about. */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-full);
  border: var(--border-w) solid var(--shadow-c);
  background: var(--panel); color: var(--ink);
  font: 700 .92rem/1 var(--font-body); cursor: pointer; text-decoration: none;
  box-shadow: 4px 4px 0 0 var(--shadow-c);
  margin: var(--sp-tight) 0;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s cubic-bezier(.34,1.56,.64,1),
              background-color .15s ease;
}
/* inline-flex, not block -- it doesn't margin-collapse with the text above
   or below it the way a paragraph would, so both sides need their own
   margin or the side with none sits flush against its neighbour. Close on
   both sides (tight): a button reads as the direct next step after the
   sentence right above it, not a separate thing waiting at a distance -- the
   card's own padding is what separates one field group from the next, not
   extra air stacked on top of it. The margin is for a button ending a
   stacked form; it fought the buttons that share a row instead (.actions,
   .save-bar, the rail, the header nav), which already space themselves with
   their own gap/flex. */
.actions .btn, .actions button,
.save-bar .btn, .save-bar button,
.rail .btn, .rail button,
.nav .btn, .nav button,
.top .btn, .top button { margin: 0; }
/* And when a button ends a card, its margin-bottom was stacking on top of
   the card's own padding -- roughly double the gap below it as above it.
   The card's padding is already the edge space; the button doesn't need to
   add more of its own against a boundary. */
.card > .btn:last-child, .card > button:last-child { margin-bottom: 0; }
.btn:hover, button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--shadow-c); }
.btn:active, button:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--shadow-c); }
.btn-primary, button.btn-primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--shadow-c);
}
.btn-secondary { background: var(--panel); color: var(--ink); }
.btn-secondary:hover { background: var(--tertiary); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--muted); border-color: transparent;
             box-shadow: none; font-weight: 600; }
.btn-ghost:hover { transform: none; box-shadow: none; color: var(--ink); background: var(--accent-soft); }
/* "ArrowRight, circular background, inside the button" -- the system's own
   named primary-button signature, not a bare arrow appended to the label. */
.btn-icon { display: inline-flex; align-items: center; justify-content: center;
            width: 20px; height: 20px; border-radius: 50%; background: #fff;
            color: var(--accent); font-size: 11px; line-height: 1; flex: none; }
.btn-icon-outline { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn:disabled, button:disabled { cursor: default; opacity: .55; transform: none !important;
                                  box-shadow: 4px 4px 0 0 var(--shadow-c) !important; }

.banner { background: var(--warn-bg); border: var(--border-w) solid var(--shadow-c);
          border-radius: var(--radius); padding: 14px 18px; font-size: .9rem;
          box-shadow: 4px 4px 0 0 var(--shadow-c); }
.banner.bad { background: var(--bad-bg); }
.banner.good-banner { background: var(--good-bg); }
.loaded { padding: 0 4px; margin-top: var(--sp-section); }

.result-head { display: flex; justify-content: space-between; align-items: flex-start;
               gap: 20px; margin-bottom: var(--sp-group); flex-wrap: wrap; }
.result-head h1 { margin-bottom: .15em; }
.role { color: var(--muted); margin: 0; font-weight: 600; }

/* Status as a sticker, not a bracket: a coloured pill with a check/tilde/cross
   glyph inside a small circle, per "never rely on colour alone, and never let
   an icon float without a shape around it." */
.verdicts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stamp { display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem/1 var(--font-body);
         padding: 7px 14px 7px 8px; border-radius: var(--radius-full);
         border: var(--border-w) solid var(--shadow-c); background: var(--panel); color: var(--ink);
         white-space: nowrap; }
.stamp::before { content: "●"; display: inline-flex; align-items: center; justify-content: center;
                  width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 1;
                  background: var(--muted); color: #fff; }
.stamp.good::before, .stamp.fit-strong::before { content: "✓"; background: var(--good); }
.stamp.bad::before, .stamp.fit-skip::before { content: "✕"; background: var(--bad); }
.stamp.fit-possible::before, .stamp.fit-stretch::before { content: "~"; background: var(--warn); }
.stamp.good, .stamp.fit-strong { background: var(--good-bg); }
.stamp.bad, .stamp.fit-skip { background: var(--bad-bg); }
.stamp.fit-possible, .stamp.fit-stretch { background: var(--warn-bg); }

.actions { display: flex; gap: 10px; margin-bottom: var(--sp-section); flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid > .card { margin-bottom: 0; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

dl.row { margin: 0; display: grid; gap: 1px; }
dl.row > div { display: flex; justify-content: space-between; gap: 16px;
               padding: 8px 0; border-bottom: 1px solid var(--rule); }
dl.row > div:last-child { border-bottom: 0; }
dt { color: var(--muted); font-size: .87rem; }
dd { margin: 0; text-align: right; font-size: .9rem; word-break: break-word; max-width: 62%; font-weight: 600; }

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.chips li { font: 700 .76rem var(--font-body); padding: 5px 12px; border-radius: var(--radius-full);
            background: var(--accent-soft); border: var(--border-w) solid var(--shadow-c); color: var(--ink); }
.chips.miss li { background: var(--warn-bg); }

.reqs { list-style: none; padding: 0; margin: 0; }
.req { display: flex; gap: 14px; padding: 15px 0; border-bottom: var(--border-w) dashed var(--rule); }
.req:last-child { border-bottom: 0; }
.tag { flex: 0 0 86px; height: fit-content; display: inline-flex; align-items: center; gap: 5px;
       font: 700 .72rem/1 var(--font-body); padding: 6px 10px; border-radius: var(--radius-full);
       border: var(--border-w) solid var(--shadow-c); white-space: nowrap; }
.tag::before { content: "●"; display: inline-flex; align-items: center; justify-content: center;
               width: 13px; height: 13px; border-radius: 50%; font-size: 8px; background: var(--muted); color: #fff; }
.req.met .tag { background: var(--good-bg); }
.req.met .tag::before { content: "✓"; background: var(--good); }
.req.partial .tag { background: var(--warn-bg); }
.req.partial .tag::before { content: "~"; background: var(--warn); }
.req.unmet .tag { background: var(--bad-bg); }
.req.unmet .tag::before { content: "✕"; background: var(--bad); }
.what { margin: 0; font-size: .93rem; font-weight: 600; }
.ev { margin: 6px 0 0; font-size: .85rem; color: var(--muted);
      border-left: var(--border-w) solid var(--rule); padding-left: 11px; }

.findings { list-style: none; padding: 0; margin: 0; }
.findings li { font-size: .87rem; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.findings li:last-child { border-bottom: 0; }
.findings code { color: var(--muted); margin-right: 6px; background: transparent; padding: 0; }
.lvl { display: flex; align-items: baseline; gap: 6px; font: 700 .8rem var(--font-body);
       text-transform: uppercase; letter-spacing: .03em; }
.lvl span { font: 700 .74rem var(--font-mono); color: inherit; opacity: .6; }
.lvl.error { color: var(--bad); }
.lvl.warn { color: var(--warn); }
.none { color: var(--good); font-size: .9rem; font-weight: 700; }

/* The hero moment: one soft confetti blob behind the verdict, the system's
   own "massive circle behind the text" hero device -- spent once, here,
   and nowhere else on the page. */
.verdict-stamp { position: relative; margin-bottom: var(--sp-section); padding: 10px 0; }
.verdict-stamp::before { content: ""; position: absolute; top: -30px; left: -40px;
                          width: 220px; height: 220px; border-radius: 50%;
                          background: var(--tertiary); opacity: .25; z-index: -1;
                          filter: blur(2px); }
.big { font: 800 3rem/1 var(--font-display); letter-spacing: -.02em; margin: 0 0 .25em; }
.big span { font: 700 1rem var(--font-body); color: var(--muted); margin-left: .2em; }
.big.fit-strong { color: var(--good); }
.big.fit-skip { color: var(--bad); }
.big.fit-possible, .big.fit-stretch { color: var(--warn); }

.decisions { margin: 0; padding-left: 1.2em; }
.decisions li { margin-bottom: .6em; font-size: .92rem; }

.preview-head { display: flex; align-items: baseline; justify-content: space-between;
                gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.edit-hint { margin: 0 0 .9em; max-width: 46ch; }

/* The resume itself is a sticker too -- same hard shadow as every other card
   -- but it never rotates or lifts on hover. It's someone's real document;
   the tactile bounce is for chrome, not for what you're about to send. */
.frame { margin-top: 4px; border-radius: var(--radius); overflow: hidden;
         border: var(--border-w) solid var(--shadow-c); box-shadow: 7px 7px 0 0 var(--shadow-c); }
.preview iframe { width: 100%; height: 780px; border: 0; background: #fff; display: block; }

.save-bar[hidden] { display: none; }
.save-bar { display: flex; align-items: center; justify-content: flex-end;
            gap: 10px; margin-top: var(--sp-related); }
.save-status { color: var(--muted); font-size: .87rem; margin-right: auto; font-weight: 600; }
.disabled-link { opacity: .45; cursor: not-allowed; }
@keyframes flash-bar { 0%, 100% { background: transparent; } 40% { background: var(--warn-bg); } }
.save-bar.flash { animation: flash-bar .9s ease; border-radius: var(--radius); }

/* The rail: pill steps on a dashed line -- the system's own "cards connected
   by a dashed line" device, repurposed as a stepper. "New posting" sits on
   the same sticky bar as its own bright pill, since it scrolling out of
   reach with the header was the actual complaint: the only way back to start
   another posting was scrolling all the way back to the top. */
.rail { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px;
        list-style: none; padding: 12px 0; margin: 0 0 26px; align-items: center;
        background: var(--paper); border-bottom: var(--border-w) dashed var(--rule); flex-wrap: wrap; }
.rail-steps { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 auto 0 0;
              flex-wrap: wrap; position: relative; }
.rail-steps::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%;
                       height: 0; border-top: var(--border-w) dashed var(--rule); z-index: -1; }
.rail a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
          color: var(--muted); font: 700 .78rem var(--font-body); background: var(--paper);
          padding: 5px 12px 5px 6px; border-radius: var(--radius-full);
          border: var(--border-w) solid transparent; }
.rail .dot { width: 8px; height: 8px; border-radius: 50%; border: var(--border-w) solid var(--muted);
             background: var(--paper); flex: none; }
.rail a.active { color: var(--ink); border-color: var(--shadow-c); background: var(--panel); }
.rail a.active .dot { background: var(--accent); border-color: var(--shadow-c); }
.rail a:hover { color: var(--ink); }
.rail .new-posting { flex: none; padding: 7px 16px; font-size: .8rem;
                      box-shadow: 3px 3px 0 0 var(--shadow-c); }
.rail .new-posting:hover { box-shadow: 5px 5px 0 0 var(--shadow-c); }

.steps { list-style: none; padding: 0; margin: var(--sp-group) 0; }
.steps li { display: flex; align-items: center; gap: 11px; padding: 7px 0;
            color: var(--muted); font-size: .93rem; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: var(--border-w) solid var(--rule); flex: none; }
.steps li.done { color: var(--ink); }
.steps li.done .dot { background: var(--good); border-color: var(--shadow-c); }
.steps li.now { color: var(--ink); font-weight: 700; }
.steps li.now .dot { background: var(--accent); border-color: var(--shadow-c);
                     animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.bad { color: var(--bad); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }
input[type=file] { width: 100%; padding: 11px; border: var(--border-w) dashed var(--rule);
                   border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; }
pre.doc { white-space: pre-wrap; word-break: break-word; font: .8rem var(--font-mono);
          color: var(--muted); max-height: 460px; overflow: auto; margin: 14px 0 0;
          background: var(--paper); border: var(--border-w) solid var(--rule);
          border-radius: var(--radius-sm); padding: 14px; }
details.card summary { font: 700 .82rem var(--font-body); color: var(--ink); }

.nav { display: flex; align-items: center; gap: 10px; }
.nav .inline { display: inline; }
.nav .inline button { padding: 9px 16px; }

label.check { display: flex; align-items: center; gap: 9px; font: 600 .92rem var(--font-body);
              color: var(--ink); text-transform: none; letter-spacing: 0; }
label.check input { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .steps li.now .dot, .save-bar.flash { animation: none; }
  .btn, button, .btn:hover, button:hover, .btn:active, button:active {
    transition: none; transform: none;
  }
}