/* ============================================================
   Résumé Review — double layout
   Left: the mistakes / changes.   Right: the original résumé.
   Click a mistake → it highlights on the document, and back.
   ============================================================ */

:root {
  --ember:#d6552f; --ink:#15140f; --paper:#fdfcfa; --canvas:#e7e3da;
  --text:#211f1b; --muted:#6f6a60; --hair:#e3ded3;
  --rail-bg:#15140f; --rail-fg:#efe9dc; --rail-mut:#928c7d;
  --error:#d6402f; --warn:#d99211; --info:#2f5fd6; --note:#6f6a60;
  --font-disp:"Fraunces",Georgia,serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--font-body); color:var(--text); background:var(--ink);
  -webkit-font-smoothing:antialiased; display:flex; min-height:100vh;
}
a { color:inherit; }

/* ───────────── LEFT: review panel ───────────── */
.review {
  width:46%; max-width:620px; min-width:380px;
  background:var(--rail-bg); color:var(--rail-fg);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0;
  border-right:1px solid #000;
}
.review__head { padding:26px 30px 20px; border-bottom:1px solid #2a281f; }
.kicker {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ember);
}
.review__head h1 {
  font-family:var(--font-disp); font-weight:400; font-size:30px;
  letter-spacing:-.02em; margin:8px 0 6px; line-height:1.04;
}
.review__sub { font-size:13px; color:var(--rail-mut); line-height:1.5; }
.scorebar { display:flex; gap:18px; margin-top:16px; }
.score { display:flex; flex-direction:column; gap:2px; }
.score b { font-family:var(--font-disp); font-size:22px; font-weight:500; }
.score span { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rail-mut); }
.score--error b { color:var(--error); }
.score--warn  b { color:var(--warn); }
.score--info  b { color:var(--info); }

.filters { display:flex; flex-wrap:wrap; gap:7px; padding:16px 30px; border-bottom:1px solid #2a281f; }
.chip {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--rail-mut); background:#211f17; border:1px solid #322f24;
  border-radius:20px; padding:6px 12px; cursor:pointer; transition:.15s;
}
.chip[aria-pressed="true"] { color:#fff; background:var(--ember); border-color:var(--ember); }
.chip:hover { color:var(--rail-fg); }

.issues { flex:1; overflow-y:auto; padding:16px 22px 40px; display:flex; flex-direction:column; gap:11px; }

.issue {
  border:1px solid #2c2a20; border-left:3px solid var(--c,var(--note));
  border-radius:11px; background:#1c1a13; padding:14px 16px; cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s;
}
.issue:hover { background:#221f17; }
.issue[data-sev="error"] { --c:var(--error); }
.issue[data-sev="warn"]  { --c:var(--warn); }
.issue[data-sev="info"]  { --c:var(--info); }
.issue[data-sev="note"]  { --c:var(--note); }
.issue.is-active { background:#2a261b; box-shadow:0 0 0 1px var(--c); }
.issue__top { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.issue__tag {
  font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c); border:1px solid var(--c); border-radius:5px; padding:2px 6px;
}
.issue__loc { font-size:11px; color:var(--rail-mut); margin-left:auto; font-family:var(--font-mono); }
.issue__title { font-size:14.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:7px; }
.issue__why { font-size:12.5px; color:#cfc8b8; line-height:1.5; }
.fix { display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:12.5px; }
.fix__row { display:flex; gap:8px; align-items:flex-start; }
.fix__mark { font-family:var(--font-mono); font-size:10px; padding-top:2px; width:14px; flex:none; }
.fix__before { color:#e0a59a; text-decoration:line-through; text-decoration-color:#7a3b32; }
.fix__after  { color:#a8d8b9; }
.issue__hint { font-size:11px; color:var(--rail-mut); margin-top:9px; font-style:italic; }

.review__foot { padding:16px 30px; border-top:1px solid #2a281f; }
.btn {
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:14px; font-weight:600; text-decoration:none;
  background:var(--ember); color:#fff; border:0; border-radius:11px; padding:13px; width:100%;
  transition:filter .15s;
}
.btn:hover { filter:brightness(1.08); }

/* ───────────── RIGHT: document ───────────── */
.docwrap {
  flex:1; background:radial-gradient(120% 80% at 50% -10%, #efece4, var(--canvas) 60%);
  padding:44px 40px 80px; overflow-y:auto; height:100vh;
}
.doc {
  width:210mm; max-width:100%; margin:0 auto; background:var(--paper); color:var(--text);
  padding:18mm 16mm; border-radius:2px; font-size:10.6pt; line-height:1.5;
  box-shadow:0 1px 2px rgba(40,34,20,.06), 0 24px 60px -28px rgba(40,34,20,.45);
}
.doc__note {
  font-family:var(--font-mono); font-size:9pt; color:var(--muted); text-align:center;
  margin-bottom:14px; letter-spacing:.04em;
}
.d-name { font-family:var(--font-disp); font-weight:400; font-size:28pt; letter-spacing:-.02em; color:var(--ink); }
.d-contact { font-size:9.3pt; color:var(--muted); margin-top:8px; }
.d-sec { margin-top:18px; }
.d-sec__t { font-family:var(--font-mono); font-size:9.5pt; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--hair); padding-bottom:5px; margin-bottom:10px; }
.d-job { margin-bottom:12px; }
.d-job__h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.d-org { font-size:11pt; font-weight:700; color:var(--ink); }
.d-date { font-family:var(--font-mono); font-size:8.6pt; color:var(--muted); white-space:nowrap; }
.d-role { font-size:9.6pt; font-weight:600; color:var(--ember); margin:1px 0 5px; }
.d-bul { list-style:none; display:flex; flex-direction:column; gap:3px; }
.d-bul li { position:relative; padding-left:14px; font-size:9.7pt; color:#34312b; }
.d-bul li::before { content:""; position:absolute; left:2px; top:.55em; width:4px; height:4px; border-radius:50%; background:var(--ember); }
.d-skills { display:flex; flex-direction:column; gap:5px; }
.d-skills div { display:grid; grid-template-columns:118px 1fr; gap:12px; font-size:9.5pt; }
.d-skills dt { font-weight:700; }

/* highlights on the document */
.hl {
  background:transparent; color:inherit; border-radius:3px; padding:0 2px;
  cursor:pointer; position:relative; transition:background .15s;
  text-decoration:underline; text-decoration-style:wavy; text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.hl[data-sev="error"] { text-decoration-color:var(--error); }
.hl[data-sev="warn"]  { text-decoration-color:var(--warn); }
.hl[data-sev="info"]  { text-decoration-color:var(--info);  }
.hl[data-sev="note"]  { text-decoration-color:var(--note);  }
.hl:hover { background:#f2e7d7; }
.hl.is-active {
  background:#ffe9b0; box-shadow:0 0 0 2px #f4c451; text-decoration:none;
  animation:pulse 1.1s ease;
}
@keyframes pulse { 0%{background:#ffd66b;} 100%{background:#ffe9b0;} }

/* ───────────── responsive ───────────── */
.mtoggle { display:none; }
@media (max-width:900px) {
  body { flex-direction:column; }
  .review { width:100%; max-width:none; min-width:0; height:auto; position:static; }
  .issues { max-height:none; }
  .docwrap { height:auto; padding:24px 14px 60px; }
  .doc { padding:26px 20px; font-size:11px; }
}