/* ===================================================================
   Foliovex Resume Builder — app shell
   Matches the plain, trustworthy, "nothing leaves your device" tone
   of the rest of foliovex.com.
=================================================================== */

/* Scoped to .resume-scope (a wrapper div around this tool's own markup)
   rather than :root — this file loads alongside Foliovex's own
   styles.css on the same page (needed for the shared header/footer to
   render correctly), and several variable names collide (--ink, --paper,
   --line, --radius all exist in both files with different values).
   Scoping means this tool's own look stays exactly as designed without
   silently overriding Foliovex's site-wide variables — or being
   overridden by them — for anything outside this container. */
.resume-scope {
  --ink: #14161a;
  --ink-soft: #4b4f58;
  --muted: #7a7d85;
  --paper: #ffffff;
  --bg: #f5f4f1;
  --line: #e4e2dc;
  --accent: #3652ff;
  --accent-soft: #eef0ff;
  --success: #1f8a5f;
  --success-soft: #eaf6f0;
  --warn: #a15c00;
  --warn-soft: #fbf1e2;
  --danger: #c1432c;
  --danger-soft: #fbebe7;
  --radius: 10px;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* * { box-sizing: border-box; } removed here — Foliovex's own
   styles.css already sets this identically, site-wide. */

.resume-scope {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  /* Reuses the SAME keyframe every other page's #app element animates
     with (defined in Foliovex's own styles.css, which this page also
     loads for the shared header/footer — @keyframes are globally
     scoped within a document, not stylesheet-scoped, so referencing it
     here works correctly). Already correctly respects
     prefers-reduced-motion via that same shared stylesheet's universal
     override rule — no separate handling needed here. */
  animation: soft-fade-in 0.35s ease-out;
  /* Below: part of the sticky-footer fix — see #app's comment for the
     full explanation. This needs to be a flex column itself so
     .builder (its child) can correctly receive flex:1 and grow to
     fill whatever space #app actually has, rather than assuming a
     fixed pixel amount. */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Part of the sticky-footer fix above — #app (defined here since this
   page's own #app has no fixed height rule from Foliovex's shared
   styles.css, only an animation) needs to be a flex column with a
   sensible minimum height for .resume-scope's flex: 1 to have
   something real to grow within. 72px is a reasonable estimate of
   Foliovex's shared header height, not a precise measurement — but
   because everything below uses flex: 1 rather than a hardcoded
   height, being slightly off here only means #app is a little taller
   or shorter than perfectly full-height, not a broken layout. */
#app {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 72px);
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  /* Now a flex sibling of .builder within .resume-scope's column
     layout — flex-shrink: 0 guarantees this breadcrumb bar never gets
     squeezed by .builder's flex: 1 grow behavior. */
  flex-shrink: 0;
}
.brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.05rem; }
.crumb { color: var(--muted); font-size: 0.9rem; }
.crumb span { color: var(--ink); font-weight: 600; }
/* Genuine SEO gap fix: this page had zero <h1> anywhere in its static
   HTML — the original design is a compact app UI, not a traditional
   content page with a headline, so there was never a natural place for
   one. Converting the breadcrumb's own page-name text (previously a
   plain <span>) into an <h1> is the lowest-risk fix — zero visual
   change, since these rules reset the browser's default block-level H1
   styling (large font-size, margin) to exactly match the inline
   appearance the span already had. */
.crumb h1 { display: inline; font-size: inherit; font-weight: 600; color: var(--ink); margin: 0; }
.privacy-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid #cdeadd;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Layout ---------- */
/* Edit/Preview switcher — only meaningful once .builder stacks to a
   single column on mobile (see the @media block below), so this stays
   hidden by default rather than showing on desktop where the form and
   preview already sit side by side with nothing to toggle between. */
.mobile-view-toggle { display: none; }
.builder {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 0;
  /* Real bug fix: this was originally "height: calc(100vh - 57px)",
     calculated for this app's own standalone header ALONE — it never
     accounted for Foliovex's shared site header ALSO sitting above it
     once integrated, so .builder was taller than the space actually
     available, pushing the shared footer down awkwardly below it.
     flex: 1 makes this grow to fill whatever height its parent
     (.resume-scope, inside #app) actually has, rather than guessing a
     fixed pixel amount — correct regardless of the real header height,
     and stays correct if that height ever changes. min-height: 0
     overrides flex items' default min-height: auto, which would
     otherwise refuse to shrink below this content's natural height
     and break the internal scroll panes below. */
  flex: 1;
  min-height: 0;
}

.panel { min-width: 0; display: flex; flex-direction: column; }

.form-panel {
  background: var(--paper);
  border-right: 1px solid var(--line);
}
.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 60px;
}

.preview-panel { background: var(--bg); }
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  flex-wrap: wrap;
}
.toolbar-actions { display: flex; align-items: center; gap: 10px; }
.preview-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 32px 20px 60px;
}
.utility-row {
  display: flex;
  gap: 18px;
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.85rem;
}

/* ---------- Form: accordion sections ---------- */
.section-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.section-block summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 16px;
  font-weight: 600;
  background: #fbfaf8;
  display: flex;
  align-items: center;
}
.section-block summary::-webkit-details-marker { display: none; }
.section-block summary::before {
  content: "›";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
  color: var(--muted);
}
.section-block[open] summary::before { transform: rotate(90deg); }
.section-block > *:not(summary) { padding: 4px 16px 16px; }

/* ---------- Photo upload ---------- */
.photo-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.photo-preview {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder-icon { color: var(--muted); font-size: 1.3rem; }
.photo-upload-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.photo-upload-btn { cursor: pointer; display: inline-block; }
.photo-upload-hint { font-size: 0.76rem; color: var(--muted); margin: 2px 0 0; max-width: 32ch; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
/* min-width: 0 needed on grid items specifically — grid (and flex)
   items default to min-width: auto, meaning they refuse to shrink
   below their content's own intrinsic size even when that overflows
   the column. A text input's natural minimum width can easily exceed
   half this panel's space in a 2-column layout, which is exactly what
   was causing fields to spill past the panel's edge. */
.field-grid label { grid-column: span 1; min-width: 0; }
.field-grid label:first-child { grid-column: span 2; }

label { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; color: var(--ink-soft); font-weight: 500; }
label.stack { grid-column: 1 / -1; }
input[type="text"], input[type="email"], textarea, select {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  /* Same reasoning as the grid-item fix above, one level down — the
     input is a flex item inside its <label>, which has the identical
     default min-width: auto problem. width: 100% plus min-width: 0
     together are what actually make it fill and respect its
     container's width instead of the browser's default sizing. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
textarea { resize: vertical; font-family: inherit; }

/* ---------- Repeatable entries ---------- */
.entry-editor {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fdfdfc;
}
.entry-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.entry-editor-head .entry-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.entry-controls { display: flex; gap: 6px; }
.entry-controls button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 2px 5px;
  border-radius: 5px;
}
.entry-controls button:hover { background: var(--line); color: var(--ink); }
.entry-editor .field-grid { margin-bottom: 6px; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 0.85rem; }
.checkbox-row input { width: auto; }

.btn-add {
  border: 1px dashed #c7c5bd;
  background: none;
  color: var(--ink-soft);
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.85rem;
  width: 100%;
}
.btn-add:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary {
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #2841e6; }
.btn-secondary { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-link {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: underline;
  padding: 0;
}
.btn-danger-link:hover { color: var(--danger); }
.file-label { display: inline-flex; align-items: center; }

.page-size-select { flex-direction: row; align-items: center; gap: 6px; font-size: 0.8rem; }
.page-size-select select { padding: 5px 6px; }

/* ---------- Template switcher ---------- */
.template-switcher { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-chip {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.tpl-chip[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Drawer ---------- */
/* Opens via the [hidden] attribute rather than a class, but the
   animation still plays correctly on each appearance — browsers
   restart CSS animations whenever an element goes from display:none
   to actually rendered, which is exactly this transition. A drawer
   sliding in from the right (matching its own flex-end positioning)
   reads as more intentional than the vertical fade used elsewhere on
   the site, so this uses its own motion rather than reusing that one. */
@keyframes drawer-overlay-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-slide-in { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 22, 26, 0.4);
  display: flex; justify-content: flex-end;
  z-index: 50;
  animation: drawer-overlay-fade-in 0.2s ease-out;
}
/* Without this, the drawer is ALWAYS visible regardless of the hidden
   attribute — a class selector and the browser's built-in [hidden]
   rule have equal specificity (0,1,0 each), and author styles always
   win over user-agent defaults at equal specificity, so the
   unconditional "display: flex" above silently overrides "hidden"
   entirely. This restores it with higher specificity (0,2,0), so the
   drawer correctly starts closed and the × button actually closes it. */
.drawer-overlay[hidden] { display: none; }
.drawer {
  width: min(460px, 100%);
  background: var(--paper);
  height: 100%;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0,0,0,0.12);
  animation: drawer-slide-in 0.25s ease-out;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--paper);
}
.drawer-head h2 { margin: 0; font-size: 1.05rem; }
.icon-btn { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); line-height: 1; }
.drawer-body { padding: 16px 20px 60px; }
.drawer-note { font-size: 0.82rem; color: var(--muted); background: #fbfaf8; border: 1px solid var(--line); padding: 10px 12px; border-radius: 8px; }
.drawer-body h3 { font-size: 0.9rem; margin: 22px 0 10px; }
.optional { color: var(--muted); font-weight: 400; font-size: 0.78rem; }

.ats-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ats-item {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 11px; border-radius: 8px; font-size: 0.85rem; line-height: 1.4;
}
.ats-item.pass { background: var(--success-soft); color: #175f42; }
.ats-item.warn { background: var(--warn-soft); color: #7a4600; }
.ats-item.fail { background: var(--danger-soft); color: #922e1c; }
.ats-item .mark { flex-shrink: 0; font-weight: 700; }

#jd-results { margin-top: 14px; font-size: 0.85rem; }
.jd-score { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.jd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jd-tag { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size: 0.76rem; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  /* #app/.resume-scope/.builder now use flex: 1 + min-height: 0 on
     desktop (see the sticky-footer fix above) rather than a hardcoded
     height — on mobile, that flex-grow behavior does not make sense
     once the layout stacks vertically, so it is explicitly turned off
     here rather than left to interact unpredictably with height: auto. */
  #app { min-height: 0; }
  .resume-scope { flex: none; }
  .builder { grid-template-columns: 1fr; flex: none; min-height: auto; height: auto; }
  .preview-scroll { padding: 20px 10px 40px; }
  .site-header { flex-wrap: wrap; }
  .privacy-badge { margin-left: 0; }

  /* Real UX fix: the old approach stacked the full form AND the full
     preview vertically, with the form capped at 60vh in its own
     nested scroll box — meaning constant scrolling within a cramped
     box just to fill in fields, then scrolling the whole page again
     to check the preview, back and forth. This shows one full-height
     mode at a time instead (matching how real mobile editors handle
     "edit vs. preview"), toggled by the buttons added above .builder.
     Desktop is completely unaffected — .mobile-view-toggle only
     becomes visible inside this same breakpoint. */
  .mobile-view-toggle { display: flex; gap: 8px; padding: 10px clamp(16px, 4vw, 24px) 0; }
  .mobile-view-btn {
    flex: 1; min-height: 44px; padding: 10px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--ink-soft); font-weight: 600; font-size: 14px;
  }
  .mobile-view-btn.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .form-panel { border-right: none; max-height: none; }
  .preview-panel { display: none; }
  .builder.mobile-show-preview .form-panel { display: none; }
  .builder.mobile-show-preview .preview-panel { display: flex; }

  /* Touch targets — matches the 44px minimum used throughout the rest
     of Foliovex for anything tappable, since the entry-editor's
     up/down/remove buttons were sized for mouse precision only. */
  .entry-controls button { min-width: 44px; min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .tpl-chip { padding: 10px 14px; }

  /* Every field stacks to a single column — a 2-up form grid on a
     narrow phone screen is a well-known UX anti-pattern (cramped
     fields, harder to tap accurately). label:first-child's existing
     "span 2" rule becomes a harmless no-op on a single-column grid. */
  .field-grid { grid-template-columns: 1fr; }
}

/* The FAQ section added to this page reuses Foliovex's own shared
   .faq-item styling (already loaded here for the header/footer) rather
   than duplicating it — but its toggle icon uses Foliovex's site-wide
   --stamp color, which .resume-scope doesn't define, so it falls back
   to Foliovex's brand green instead of this tool's own accent color.
   Small, deliberate override for visual consistency with the rest of
   the page. */
.resume-scope .faq-item summary::after { color: var(--accent); }