/**
 * resume-builder.css
 * Responsive editor and A4-style resume / CV preview (mobile-first).
 */

main[data-tool-page="resume-builder"] > .container {
  width: min(100%, var(--container-wide));
}

main[data-tool-page="resume-builder"] .page-layout--sidebar {
  grid-template-columns: minmax(0, 1fr);
}

main[data-tool-page="resume-builder"] .page-sidebar {
  display: none;
}

main[data-tool-page="resume-builder"] .tool-content,
main[data-tool-page="resume-builder"] .tool-premium-cta,
main[data-tool-page="resume-builder"] .tool-faq {
  width: min(100%, var(--container-narrow));
  margin-inline: auto;
}

.tool-workspace--resume {
  padding: 0;
  overflow: hidden;
}

.tool-workspace--resume > .tool-privacy {
  margin: var(--space-4);
}

.resume-builder {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--border-default);
}

.resume-mobile-tabs {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border-default);
}

.resume-mobile-tabs__btn {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  color: var(--text-muted);
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.resume-mobile-tabs__btn[aria-selected="true"] {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border-default));
}

.resume-editor {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.resume-editor__toolbar,
.resume-preview-pane__header,
.resume-actions,
.resume-entry__header,
.resume-editor__demo-actions,
.resume-more__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.resume-editor__toolbar {
  margin-bottom: var(--space-5);
}

.resume-editor__toolbar h2 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.resume-editor__toolbar p {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.resume-editor__demo-actions {
  justify-content: flex-start;
}

.resume-editor__section {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.resume-editor__section + .resume-editor__section {
  margin-top: var(--space-3);
}

.resume-editor__section > summary {
  padding: 0.9rem 1rem;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style-position: inside;
}

.resume-editor__section[open] > summary {
  border-bottom: 1px solid var(--border-soft);
}

.resume-editor__section > :not(summary) {
  margin: var(--space-4);
}

.resume-form-grid {
  display: grid;
  gap: var(--space-4);
}

.resume-date-row {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.resume-month-input {
  min-height: 2.85rem;
}

.resume-textarea {
  min-height: 6.5rem;
}

.resume-textarea--sm {
  min-height: 4.25rem;
}

.resume-color-input {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.3rem;
  background: var(--input-background);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.resume-file-input {
  padding-block: 0.55rem;
  font-size: 0.78rem;
}

.resume-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.resume-check--chip {
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
}

.resume-section-toggles {
  margin-top: var(--space-4);
}

.resume-section-toggles__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.resume-section-toggles__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.resume-entry {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.resume-entry__header h4 {
  margin: 0;
  font-size: var(--font-size-sm);
}

.resume-entry__controls {
  display: inline-flex;
  gap: var(--space-1);
}

.resume-entry__btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
}

.resume-entry__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 1.25rem;
  cursor: pointer;
}

.resume-entry__remove:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border-default));
}

.resume-entry__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.resume-field--span {
  grid-column: 1 / -1;
}

.resume-field--current {
  display: flex;
  align-items: end;
}

.resume-hints {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.resume-hints:empty {
  display: none;
}

.resume-hints__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
}

.resume-hints__list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--space-2);
}

.resume-hints__item {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.resume-hints__item--warn {
  color: var(--warning);
}

.resume-actions {
  justify-content: flex-start;
  margin: 0;
  padding: var(--space-4) clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  grid-column: 1 / -1;
}

.resume-actions__tip {
  flex-basis: 100%;
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.resume-actions__status {
  flex-basis: 100%;
  min-height: 1.3em;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.resume-more {
  margin-top: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.resume-more > summary {
  padding: 0.85rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.resume-more__actions {
  justify-content: flex-start;
  padding: 0 var(--space-4) var(--space-4);
}

.resume-preview-pane {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  background:
    radial-gradient(circle at 20% 10%, var(--primary-soft), transparent 25rem),
    var(--surface-subtle);
  border-top: 1px solid var(--border-default);
}

.resume-preview-pane__header {
  margin-bottom: var(--space-4);
}

.resume-preview-pane__header > div {
  display: grid;
}

.resume-preview-pane__header span {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.resume-preview-pane__header small {
  color: var(--text-muted);
}

.resume-preview-pane__badge {
  padding: 0.3rem 0.55rem;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.resume-preview-wrap {
  overflow: auto;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}

.resume-preview-wrap--scaled {
  overflow: hidden;
}

.resume-document--classic {
  border-top: 0.2rem solid var(--resume-accent);
}

/* Document preview — print-white page, not theme surface */
.resume-document {
  --resume-accent: #4463eb;
  --resume-name: #111827;
  --resume-heading: #111827;
  --resume-muted: #667085;
  --resume-body: #344054;
  --resume-rule: #d0d5dd;
  --resume-sidebar-bg: #eef2ff;
  width: 100%;
  min-width: 0;
  min-height: 48.1rem;
  padding: 2.35rem 2.5rem;
  color: var(--resume-body);
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  line-height: 1.45;
}

.resume-theme-font--sans {
  font-family: Inter, Arial, sans-serif;
}

.resume-theme-font--serif {
  font-family: Georgia, "Times New Roman", serif;
}

.resume-document--modern {
  border-top: 0.35rem solid var(--resume-accent);
}

.resume-document--compact {
  font-size: 0.7rem;
  line-height: 1.35;
  padding: 1.75rem 2rem;
  min-height: 48.1rem;
}

/* Theme typography wins over layout defaults */
.resume-document.resume-theme-font--sans {
  font-family: Inter, Arial, sans-serif;
}

.resume-document.resume-theme-font--serif {
  font-family: Georgia, "Times New Roman", serif;
}

.resume-document--banner {
  padding: 0;
  overflow: hidden;
}

.resume-document--sidebar {
  padding: 0;
  overflow: hidden;
}

.resume-document p,
.resume-document h2,
.resume-document h3,
.resume-document ul {
  margin: 0;
}

.resume-document__header {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.15rem;
}

.resume-document__banner {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.75rem 2.5rem;
  color: #ffffff;
  background: var(--resume-accent);
}

.resume-document__banner .resume-document__identity h2,
.resume-document__banner .resume-document__headline,
.resume-document__banner .resume-document__contact {
  color: #ffffff;
}

.resume-document__banner .resume-document__headline {
  opacity: 0.92;
}

.resume-document__banner .resume-document__contact {
  opacity: 0.88;
}

.resume-document__banner .resume-document__photo {
  border-color: rgba(255, 255, 255, 0.45);
}

.resume-document__body {
  padding: 1.5rem 2.5rem 2.35rem;
}

.resume-document__shell {
  display: grid;
  grid-template-columns: minmax(10.5rem, 0.34fr) minmax(0, 0.66fr);
  min-height: 48.1rem;
}

.resume-document__rail {
  padding: 1.5rem 1.15rem;
  background: var(--resume-sidebar-bg);
  border-right: 1px solid var(--resume-rule);
}

.resume-document__rail .resume-document__photo {
  margin-bottom: 1rem;
}

.resume-document__rail-contact {
  margin-bottom: 0.95rem;
}

.resume-document__contact-item {
  margin-top: 0.3rem;
  color: var(--resume-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}

.resume-document__main {
  padding: 1.75rem 1.75rem 2.1rem;
}

.resume-document__main .resume-document__identity {
  margin-bottom: 1.1rem;
}

.resume-document__photo {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: cover;
  border-radius: 0.35rem;
  border: 1px solid var(--resume-rule);
}

.resume-document__identity {
  flex: 1;
  min-width: 0;
}

.resume-document__identity h2 {
  color: var(--resume-name);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.resume-document--modern .resume-document__identity h2 {
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}

.resume-document--compact .resume-document__identity h2 {
  font-size: 1.25rem;
}

.resume-document--banner .resume-document__identity h2 {
  font-size: 1.65rem;
}

.resume-document__headline {
  margin-top: 0.2rem;
  color: var(--resume-accent);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}

.resume-document__contact {
  margin-top: 0.4rem;
  color: var(--resume-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.resume-document__section + .resume-document__section {
  margin-top: 0.95rem;
}

.resume-document__heading {
  margin-bottom: 0.45rem;
  padding-bottom: 0.2rem;
  color: var(--resume-heading);
  border-bottom: 1px solid var(--resume-rule);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resume-document--modern .resume-document__heading {
  border-bottom-color: var(--resume-accent);
  color: var(--resume-accent);
}

.resume-document--banner .resume-document__heading,
.resume-theme--navy .resume-document__heading,
.resume-theme--burgundy .resume-document__heading,
.resume-theme--forest .resume-document__heading {
  color: var(--resume-accent);
  border-bottom-color: color-mix(in srgb, var(--resume-accent) 35%, var(--resume-rule));
}

.resume-document__summary,
.resume-document__note,
.resume-document__skills {
  color: var(--resume-body);
  font-family: Inter, Arial, sans-serif;
}

.resume-document__entry + .resume-document__entry {
  margin-top: 0.7rem;
}

.resume-document__entry-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.resume-document__entry-head strong {
  display: block;
  color: var(--resume-name);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.82rem;
}

.resume-document__org {
  display: block;
  color: var(--resume-body);
  font-family: Inter, Arial, sans-serif;
  font-weight: 600;
}

.resume-document__meta,
.resume-document__dates {
  color: var(--resume-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.7rem;
  white-space: nowrap;
}

.resume-document__bullets {
  margin-top: 0.3rem;
  padding-left: 1.1rem;
  color: var(--resume-body);
  font-family: Inter, Arial, sans-serif;
}

.resume-document__bullets li + li {
  margin-top: 0.15rem;
}

.resume-document__simple-list {
  padding-left: 1.1rem;
  color: var(--resume-body);
  font-family: Inter, Arial, sans-serif;
}

.resume-document__simple-list li + li {
  margin-top: 0.2rem;
}

.resume-document__note {
  margin-top: 0.25rem;
}

/* Phone: editor/preview tabs + sticky primary actions */
@media (max-width: 759px) {
  .resume-mobile-tabs {
    display: grid;
    position: sticky;
    top: var(--header-height, 4rem);
    z-index: 5;
  }

  .resume-builder[data-mobile-pane="editor"] .resume-preview-pane {
    display: none;
  }

  .resume-builder[data-mobile-pane="preview"] .resume-editor {
    display: none;
  }

  .resume-builder[data-mobile-pane="preview"] .resume-preview-pane {
    border-top: 0;
  }

  .resume-actions--primary {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding: var(--space-3) clamp(1rem, 2vw, 1.5rem) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-top: 1px solid var(--border-default);
    backdrop-filter: blur(8px);
  }

  .resume-actions--primary .btn--lg {
    flex: 1 1 calc(50% - 0.5rem);
    min-height: 2.85rem;
  }

  .resume-document__entry-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .resume-document__dates {
    white-space: normal;
  }

  .resume-document__shell {
    grid-template-columns: 1fr;
  }

  .resume-document__rail {
    border-right: 0;
    border-bottom: 1px solid var(--resume-rule);
  }
}

@media (min-width: 760px) {
  .resume-form-grid--2,
  .resume-form-grid--setup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resume-date-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(9rem, 0.7fr);
    align-items: end;
  }

  .resume-date-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resume-document {
    min-width: 34rem;
  }
}

@media (min-width: 1200px) {
  .resume-builder {
    grid-template-columns: minmax(29rem, 0.95fr) minmax(38rem, 1.05fr);
  }

  .resume-form-grid--setup {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .resume-preview-pane {
    border-top: 0;
    border-left: 1px solid var(--border-default);
  }

  .resume-preview-pane__header {
    position: sticky;
    top: calc(var(--header-height) + 0.75rem);
    z-index: 2;
  }

  .resume-preview-wrap {
    position: sticky;
    top: calc(var(--header-height) + 4.5rem);
    max-height: calc(100vh - var(--header-height) - 6rem);
  }
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  body.resume-printing > * {
    display: none !important;
  }

  body.resume-printing main,
  body.resume-printing .container,
  body.resume-printing .page-layout,
  body.resume-printing .page-content,
  body.resume-printing .tool-workspace,
  body.resume-printing .resume-builder,
  body.resume-printing .resume-preview-pane,
  body.resume-printing .resume-preview-wrap,
  body.resume-printing .resume-document {
    display: block !important;
  }

  body.resume-printing .page-hero,
  body.resume-printing .tool-privacy,
  body.resume-printing .resume-editor,
  body.resume-printing .resume-mobile-tabs,
  body.resume-printing .resume-actions,
  body.resume-printing .resume-preview-pane__header,
  body.resume-printing .page-sidebar,
  body.resume-printing .tool-content,
  body.resume-printing .tool-premium-cta,
  body.resume-printing .tool-adsense,
  body.resume-printing .tool-faq {
    display: none !important;
  }

  body.resume-printing main,
  body.resume-printing .container,
  body.resume-printing .page-layout,
  body.resume-printing .page-content,
  body.resume-printing .tool-workspace,
  body.resume-printing .resume-builder,
  body.resume-printing .resume-preview-pane,
  body.resume-printing .resume-preview-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    height: auto !important;
  }

  body.resume-printing .resume-document {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.resume-printing .resume-document__banner,
  body.resume-printing .resume-document__rail,
  body.resume-printing .resume-document__photo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Keep sidebar two-column even if the print engine uses a narrow viewport */
  body.resume-printing .resume-document__shell {
    display: grid !important;
    grid-template-columns: minmax(10.5rem, 0.34fr) minmax(0, 0.66fr) !important;
  }

  body.resume-printing .resume-document__rail {
    border-right: 1px solid var(--resume-rule) !important;
    border-bottom: 0 !important;
  }

  body.resume-printing .resume-preview-wrap {
    height: auto !important;
  }
}