/* PerfectCV web UI, kraft theme (matches logo/saaslogo palette). Transparent layout: separation via spacing, hairlines and type only. */
:root {
  --bg: #141009;
  --panel: #1e1610;
  --panel2: #261c12;
  --line: #e6d3a8;
  --line-dim: #6e5a38;
  --hairline: rgba(230, 211, 168, 0.22);
  --ink: #f2e6c9;
  --muted: #b39a6d;
  --brown: #8b5a2b;
  --tan: #c99a5b;
  --accent: #e8b04b;
  --ok: #7fbf6a;
  --bad: #e06c5b;
  --mono: Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
/* screen-reader-only heading for search engines and assistive tech */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
}
#app { display: flex; min-height: 100vh; }

/* ---- sidebar ---- */
#side {
  width: 264px; flex-shrink: 0;
  background: transparent;
  border-right: 1px solid var(--hairline);
  padding: 28px 22px; display: flex; flex-direction: column; gap: 14px;
  align-items: center; text-align: center;
}
#side .brand {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  font-family: inherit; border-radius: 10px; width: 100%;
}
#side .brand:hover b { color: var(--accent); }
#side .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#side .brand img { height: 56px; width: auto; display: block; }
#side .brand b { font-size: 22px; color: var(--ink); font-weight: normal; letter-spacing: 0.02em; }
#side .btn.small { width: 100%; }
#filelabel { font-size: 13px; color: var(--muted); word-break: break-all; min-height: 18px; }
#credit { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.7; }
#credit a { color: var(--tan); text-decoration: none; }
#credit a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* progress rail: dotted vertical spine */
#steps { list-style: none; margin: 18px 0 0; padding: 4px 0 0; width: 100%; text-align: left; }
#steps li {
  position: relative; display: flex; gap: 12px; align-items: center;
  padding: 13px 0 13px 2px; color: var(--muted); font-size: 14px;
  border-radius: 6px;
}
#steps li:hover { color: var(--ink); }
#steps li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#steps li .dot {
  width: 13px; height: 13px; border-radius: 0; flex-shrink: 0;
  border: 2px solid var(--line-dim); background: transparent;
  position: relative; z-index: 1;
}
#steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 8px; top: 32px; bottom: -8px;
  border-left: 2px dotted var(--line-dim); opacity: 0.85;
}
#steps li.done { color: var(--ink); }
#steps li.done .dot { background: var(--brown); border-color: var(--brown); }
#steps li.done:not(:last-child)::after { border-color: var(--brown); opacity: 0.9; }
#steps li.active { color: var(--accent); }
#steps li.active .dot {
  border-color: var(--accent); background: transparent;
  box-shadow: 0 0 0 5px rgba(232, 176, 75, 0.16);
}

/* ---- buttons: flat rest, pop on hover (shadow spawns instantly, button glides) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  background: transparent; color: var(--ink);
  border: 2px solid var(--line); border-radius: 0;
  padding: 10px 20px; font-family: inherit; font-size: 15px; cursor: pointer;
  text-align: center; text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: none;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 0;
  background: radial-gradient(34px 92px at var(--mx, 50%) 50%, rgba(232, 176, 75, 0.20), transparent 70%);
  opacity: 0; pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn:disabled::after, .btn:disabled:hover::after { opacity: 0; }
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #4a2f16; }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #4a2f16; }
.btn.primary { background: var(--brown); border-color: var(--brown); color: #fff8e8; border-radius: 0; box-shadow: none; }
.btn.primary::after, .btn.primary:hover::after { content: none; }
.btn.primary:hover { background: var(--brown); border-color: var(--tan); color: #fff8e8; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #c99a5b; }
.btn.primary:active { background: var(--brown); color: #fff8e8; transform: translate(1px, 1px); box-shadow: 1px 1px 0 #c99a5b; }
.btn.ghost { border-color: var(--line-dim); color: var(--muted); border-radius: 0; box-shadow: none; }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #4a2f16; }
.btn.ghost:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #4a2f16; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; background: transparent; }
.btn:disabled:hover { transform: none; box-shadow: none; border-color: var(--line-dim); color: var(--muted); }
.btn.small { padding: 8px 12px; font-size: 13px; min-height: 44px; min-width: 44px; border-radius: 0; box-shadow: none; }
.btn.small:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #4a2f16; }
.btn.small:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #4a2f16; }
.btn:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- main: full width ---- */
#main { flex: 1; width: 100%; max-width: none; padding: clamp(20px, 3.5vw, 48px) clamp(20px, 4vw, 56px); position: relative; }
h1 { font-weight: normal; font-size: 26px; margin: 0 0 20px; color: var(--ink); letter-spacing: 0.01em; }
.step { display: none; width: 100%; position: relative; z-index: 1; }
.step.on { display: block; }

/* landing-only document texture (JS-built responsive grid, see buildTexture) */
#step-landing.step.on { display: flex; flex-direction: column; min-height: 82vh; }
#step-landing #hero { flex: 1; display: flex; align-items: center; justify-content: center; }
.land-tex { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.land-tex .t { position: absolute; color: var(--line); }
.land-tex .t svg { display: block; }

/* hero: centered, floats around (never behind text) */
#hero { position: relative; text-align: center; padding: 9vh 16px 10vh; }
.hero-inner { position: relative; z-index: 1; width: 100%; }
#hero img { height: 120px; width: auto; max-width: 100%; }
@media (max-width: 640px) {
  #hero img { height: auto; max-height: 96px; }
}
#hero h1 { font-size: clamp(34px, 5vw, 52px); margin: 12px 0 28px; }
#hero .row { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
#hero .linklike { background: none; border: none; border-radius: 0; color: var(--ink); font-family: inherit; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; padding: 10px 12px; min-height: 44px; min-width: 44px; box-shadow: none; transition: color 0.16s ease, background 0.16s ease; }
#hero .linklike:hover { color: var(--accent); }
#hero .linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#hero .linklike:active { color: var(--accent); }

/* gallery: transparent cards, larger, 3 per row */
#cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 30px; }
.card { background: transparent; border: none; border-radius: 0; padding: 0; cursor: pointer; text-align: left; position: relative; }
.card:hover img { border-color: var(--accent); }
.card.sel img { outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--accent); }
.card.sel b { color: var(--accent); }
/* dark mask + centered action over the selected (or hovered) preview */
.card .mask {
  position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1/1.29;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 8, 4, 0.55); border-radius: 6px;
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.card:hover .mask, .card:focus-within .mask { opacity: 0; visibility: hidden; }
.card.sel .mask { opacity: 1; visibility: visible; }
.card .pick {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  font-family: inherit; font-size: 15px; padding: 12px 28px; border: 2px solid var(--line);
  border-radius: 0; color: var(--ink); background: rgba(20, 16, 9, 0.9);
  box-shadow: none;
  transition: color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
  pointer-events: auto; cursor: pointer;
}
.card.sel .pick { border-color: var(--accent); color: var(--accent); }
.card .pick:hover { border-color: var(--accent); color: var(--accent); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #4a2f16; }
.card .pick:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #4a2f16; }
.card .pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card img {
  width: 100%; aspect-ratio: 1/1.29; object-fit: cover; object-position: top;
  background: #fff; border-radius: 6px; border: 1px solid var(--hairline);
  display: block; transition: border-color 0.16s ease;
}
.card b { display: block; margin-top: 10px; font-size: 15px; font-weight: normal; text-transform: capitalize; letter-spacing: 0.01em; }
.card span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* two columns: transparent panels, equal heights */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; width: 100%; }
.cols.editor-cols { grid-template-columns: 2fr 1fr; }
/* short selects side by side */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row .field { margin: 12px 0; }
/* resume count inputs: three across */
.field-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.field-row3 .field { margin: 12px 0; }
/* one-page convention notice */
.notice { margin-top: 12px; font-size: 13px; color: var(--accent); line-height: 1.5; }
.rowbtns.center { justify-content: center; }
.panel { background: transparent; border: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.panel h2 { margin: 0 0 14px; font-size: 20px; font-weight: normal; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); letter-spacing: 0.01em; }

.field { margin: 12px 0; }
.field label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.field select, .field input[type=text], .field input[type=number], .field textarea, .field input[type=file] {
  width: 100%; background: transparent; color: var(--ink);
  border: 1px solid var(--line-dim); border-radius: 8px; padding: 10px 12px;
  font-family: inherit; font-size: 14px; min-height: 44px;
}
.field input[type=number] { color-scheme: dark; }
.field textarea { min-height: 0; line-height: 1.55; resize: vertical; }
.field select option { background: var(--panel); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.75; }
.field select:hover, .field input:hover, .field textarea:hover { border-color: var(--tan); }
.rowbtns { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.check { display: flex; gap: 10px; align-items: center; margin: 10px 0; font-size: 14px; min-height: 44px; }
.check input { accent-color: var(--brown); width: 18px; height: 18px; flex-shrink: 0; }

/* previews + editor: fixed equal heights, scroll inside */
iframe.preview, embed.preview {
  width: 100%; height: 620px; background: #fff;
  border: 1px solid var(--hairline); border-radius: 8px; display: block;
}
/* editor with highlight overlay: fixed box, code scrolls inside */
#edwrap { position: relative; border: 1px solid var(--line-dim); border-radius: 8px; background: transparent; height: 620px; overflow: hidden; }
#edview, #ed {
  margin: 0; padding: 14px; font-family: var(--mono); font-size: 13px; line-height: 20px;
  /* pre (no wrapping): a textarea and a pre never wrap long lines at the
     same columns, so wrapping made the overlay drift line by line. With
     no wrapping every source line is exactly one visual line in both. */
  white-space: pre; overflow-wrap: normal; word-break: normal; tab-size: 2;
  font-kerning: none; font-variant-ligatures: none;
  letter-spacing: normal; font-stretch: normal;
}
#edview { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#edview .cm { color: #7d8a6a; }
#edview .ky { color: var(--accent); }
#edview .st { color: var(--tan); }
#edview .ur { color: #8fc3e8; text-decoration: underline; }
#edview .nm { color: #d89a9a; }
#ed {
  position: absolute; inset: 0; width: 100%; height: 100%; resize: none;
  background: transparent; color: transparent; caret-color: var(--ink);
  border: none; overflow: auto;
  scrollbar-width: thin; scrollbar-color: var(--brown) transparent;
}
#ed::-webkit-scrollbar { width: 10px; }
#ed::-webkit-scrollbar-track { background: transparent; }
#ed::-webkit-scrollbar-thumb { background: var(--brown); border-radius: 6px; border: 2px solid #141009; }
#ed::-webkit-scrollbar-thumb:hover { background: var(--tan); }
#ed:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }

/* validity log: straight-from-terminal box */
#renderlog {
  background: #0d0a06; border: 1px solid var(--line-dim); border-radius: 10px;
  padding: 14px 16px; font-family: var(--mono); font-size: 13px;
  min-height: 120px; line-height: 1.8;
}
/* overview stays flat, no nested boxes */
#overview {
  background: transparent; border: none; border-radius: 0;
  padding: 0; font-size: 14px; min-height: 120px; line-height: 1.7;
}
#renderlog .ok { color: var(--ok); }
#renderlog .bad { color: var(--bad); }
#renderlog .wr { color: var(--accent); }
/* overview: aligned label/value grid, palette-colored titles */
.ov { display: flex; flex-direction: column; gap: 7px; }
.ov-row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: baseline; }
.ov-k { color: var(--accent); font-weight: bold; letter-spacing: 0.01em; }
.ov-line { border-top: 1px solid var(--accent); opacity: 0.55; margin: 6px 0 2px; }
.ov-v { color: var(--ink); word-break: break-word; overflow-wrap: anywhere; min-width: 0; }
.ov-row > * { min-width: 0; }
/* preview status line under each embed */
.preview-err { margin-top: 10px; font-size: 13px; color: var(--bad); line-height: 1.5; }
.preview-err.info { color: var(--muted); }
.preview-err.warn { color: var(--accent); }

/* spinner */
.spinner {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(230, 211, 168, 0.28); border-top-color: var(--accent);
  display: inline-block; vertical-align: -3px; margin-right: 8px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* info dot next to each validity check */
.q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border: 1px solid var(--line-dim); border-radius: 0;
  color: var(--muted); font-size: 11px; font-style: normal; font-family: Georgia, serif;
  margin-left: 8px; cursor: help; position: relative; vertical-align: 1px;
  box-shadow: none;
}
.q:hover, .q:focus { border-color: var(--accent); color: var(--accent); }
.q::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 240px; white-space: normal;
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line-dim);
  border-radius: 8px; padding: 8px 12px; font-size: 12px; font-family: Georgia, serif; line-height: 1.45;
  opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 5;
}
.q:hover::after, .q:focus::after { opacity: 1; }

/* download: three identical buttons */
.dlrow { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.dlrow .btn { flex: 1 1 0; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .btn { transition: none; }
}

@media (max-width: 1100px) {
  #cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  #app { flex-direction: column; }
  #side { width: 100%; border-right: none; border-bottom: 1px solid var(--hairline); padding: 20px 18px; }
  #steps { max-width: 420px; margin-left: auto; margin-right: auto; }
  .cols { grid-template-columns: 1fr; }
  iframe.preview, embed.preview { height: 480px; }
  #edwrap { height: 420px; }
}
@media (max-width: 640px) {
  #cards { grid-template-columns: 1fr; gap: 28px; }
  #hero { padding-top: 6vh; }
  .dlrow { flex-direction: column; }
  .dlrow .btn { flex: none; width: 100%; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row3 { grid-template-columns: 1fr; gap: 0; }
  .ov-row { grid-template-columns: 150px 1fr; gap: 10px; }
}
/* hover tooltip (landing download button) */
.tip { position: relative; display: inline-block; }
.tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: 260px; white-space: normal;
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line-dim);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.45;
  opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 5;
}
.tip:hover::after, .tip:focus-within::after { opacity: 1; }

/* button motion guard: states still change under reduced motion, just instantly */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn.primary, .btn.ghost, .btn.small, .card .pick, #hero .linklike { transition: none; }
}
/* lens sheen guard: no fade under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn::after { transition: none; opacity: 0; }
}