/* ==========================================================================
   Editor overlay shell
   ========================================================================== */
.editor-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--surface);
  flex-direction: column;
}

.editor-overlay.is-open { display: flex; }

body.editor-open { overflow: hidden; }

.editor-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.editor-topbar__brand {
  font-weight: 800;
  font-size: 1rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-icon:hover { background: var(--bg); }

.editor-template-switcher select {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}

.save-indicator {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-left: auto;
  white-space: nowrap;
}

.save-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.save-indicator.is-saving .save-dot {
  background: #f59e0b;
  animation: save-pulse .5s ease;
}

@keyframes save-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.editor-export-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--indigo);
  border-color: var(--indigo);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .88rem;
  padding: .5rem 1rem;
  flex-shrink: 0;
}

.editor-export-btn:hover,
.editor-export-btn:focus {
  background: var(--indigo-dark);
  border-color: var(--indigo-dark);
}

/* ==========================================================================
   Editor body: form panel + preview panel
   ========================================================================== */
.editor-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.editor-form-panel {
  flex: 0 0 44%;
  max-width: 620px;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 4rem;
  border-right: 1px solid var(--line);
  background: #fff;
}

.preview-panel {
  position: relative;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: auto;
  background: #eef1f6;
  padding: 2.5rem 2rem;
  display: flex;
  /* flex-start, not center: .resume-page centers itself via its own auto
     margins below. Centering here instead would clip/scroll unreliably
     once the column is narrower than the page (a well-known flexbox
     quirk), which is exactly the "shrinks on medium-width screens" bug. */
  justify-content: flex-start;
  align-items: flex-start;
}

/* ==========================================================================
   Section visibility + order
   Drag-and-drop reorders on desktop (mouse); the up/down arrows are the
   keyboard-accessible path everywhere and the only path on touch screens,
   where the drag handle is hidden since native HTML5 drag doesn't work there.
   ========================================================================== */
.section-order {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.section-order__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .7rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.section-order__header:hover { background: #eef1f6; }

.section-order__title {
  font-weight: 700;
  font-size: .9rem;
}

.section-order__hint {
  flex: 1 1 auto;
  font-size: .75rem;
  color: var(--muted);
}

.section-order__chevron {
  flex-shrink: 0;
  align-self: center;
  color: var(--muted);
  transition: transform .2s ease;
}

.section-order__header.collapsed .section-order__chevron {
  transform: rotate(-90deg);
}

.section-order-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.section-order-row:last-child { border-bottom: none; }

.section-order-row.is-dragging { opacity: .4; }

.section-order-row.is-drop-target {
  background: #eef2ff;
}

.section-order-row__handle {
  flex-shrink: 0;
  cursor: grab;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  touch-action: none;
}

.section-order-row__label {
  flex: 1 1 auto;
  font-size: .88rem;
  font-weight: 600;
}

.section-order-row--hidden .section-order-row__label {
  color: var(--muted);
  font-weight: 500;
}

.section-order-row__actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}

.section-order-row__arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
}

.section-order-row__arrow:hover:not(:disabled) { background: var(--bg); }

.section-order-row__arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Shared hidden-checkbox toggle switch — used by section-order rows and
   the profile photo's "show on resume" control. Deliberately generic (not
   scoped to either feature's name) since both reuse it as-is. */
.toggle-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  margin-left: .15rem;
  cursor: pointer;
}

.toggle-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.toggle-switch__track {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background-color .15s ease;
  pointer-events: none;
}

.toggle-switch__track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
  transition: transform .15s ease;
}

.toggle-switch input:checked + .toggle-switch__track {
  background: var(--indigo);
}

.toggle-switch input:checked + .toggle-switch__track::before {
  transform: translateX(14px);
}

.toggle-switch input:focus-visible + .toggle-switch__track {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .section-order-row__handle { display: none; }
}

/* ==========================================================================
   Profile photo upload (Personal details)
   ========================================================================== */
.photo-field {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.photo-field__preview {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  overflow: hidden;
}

.photo-field__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-field__controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.photo-field__remove,
.photo-field__toggle-label {
  display: none;
}

.photo-field.has-photo .photo-field__remove,
.photo-field.has-photo .photo-field__toggle-label,
.photo-field.has-photo .photo-position {
  display: inline-flex;
}

.photo-field__toggle-label {
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.photo-position {
  display: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.photo-position__option {
  position: relative;
  cursor: pointer;
}

.photo-position__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.photo-position__option span {
  display: inline-block;
  padding: .35rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.photo-position__option:first-child span {
  border-right: 1px solid var(--line);
}

.photo-position__option input:checked + span {
  background: var(--indigo);
  color: #fff;
}

.photo-position__option input:focus-visible + span {
  outline: 2px solid var(--indigo);
  outline-offset: -2px;
}

.resume-page {
  position: relative;
  /* Fixed at true A4 width always — never shrinks to fit a narrower column
     or viewport. margin: 0 auto centers it when there's room to spare;
     once the available space is narrower than the page, the auto margins
     just collapse to 0 and the panel above scrolls to reach the rest. */
  width: 210mm;
  flex-shrink: 0;
  margin: 0 auto;
  aspect-ratio: 210 / 297;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 24px 48px -24px rgba(15, 23, 42, .25);
  overflow: visible;
}

.resume-doc {
  padding: clamp(20px, 4vw, 18mm) clamp(18px, 3.5vw, 16mm);
}

/* Approximate marker for where content crosses into another A4 page —
   the real print engine avoids breaking entries awkwardly, so the exact
   break point in the exported PDF can shift a little from this line. */
.page-break-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed #cbd5e1;
  pointer-events: none;
}

.page-break-marker span {
  position: absolute;
  top: -10px;
  right: 12px;
  background: #f8fafc;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.preview-close {
  display: none;
  /* Fixed, not absolute — .preview-panel is now scrollable (both axes) since
     the resume renders at natural size on mobile, and an absolutely
     positioned child would scroll away with that content instead of
     staying put on screen. */
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  font-size: 1.4rem;
  line-height: 1;
}

/* ==========================================================================
   Accordion form styling
   ========================================================================== */
.accordion-item { border-color: var(--line); }

.accordion-button {
  font-weight: 600;
  font-size: .95rem;
}

.accordion-button:not(.collapsed) {
  background: #eef2ff;
  color: var(--indigo-dark);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  outline: 2px solid var(--indigo);
  outline-offset: -2px;
}

.accordion-button:hover { background: var(--bg); }

.accordion-button:not(.collapsed):hover { background: #eef2ff; }

.accordion-button__icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: .65rem;
  color: var(--muted);
}

.accordion-button:not(.collapsed) .accordion-button__icon {
  color: var(--indigo);
}

.form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.form-hint { font-weight: 400; color: var(--muted); }

.form-control {
  border-radius: var(--radius-sm);
  border-color: var(--line);
  font-size: .92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover {
  border-color: #cbd5e1;
}

.form-control:focus {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px #eef2ff;
}

.form-control::placeholder {
  color: #94a3b8;
}

/* Icon glyph sitting inside a text input (personal details fields). */
.input-icon {
  position: relative;
}

.input-icon .form-control {
  padding-left: 2.25rem;
}

.input-icon__icon {
  position: absolute;
  top: 50%;
  left: .7rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.input-icon .form-control:focus ~ .input-icon__icon {
  color: var(--indigo);
}

/* ==========================================================================
   Repeatable entries (experience / education)
   ========================================================================== */
.entry-list { margin-bottom: .75rem; }

.entry-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fbfcfe;
}

.entry-remove {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.entry-remove:hover { background: #fee2e2; color: #dc2626; }

.add-entry-btn {
  border: 1px dashed #c7d2fe;
  border-radius: var(--radius-sm);
  color: var(--indigo);
  background: #fff;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}

.add-entry-btn:hover {
  background: #eef2ff;
  border-color: var(--indigo);
  color: var(--indigo-dark);
}

/* ==========================================================================
   Bullet rows (experience highlights, one input per bullet)
   ========================================================================== */
.bullet-list { margin-bottom: .5rem; }

.bullet-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.bullet-row__dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  margin-left: .3rem;
}

.bullet-row .form-control { flex: 1 1 auto; }

.bullet-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.bullet-remove:hover { background: #fee2e2; color: #dc2626; }

/* ==========================================================================
   Skill chips
   ========================================================================== */
.skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #eef2ff;
  color: var(--indigo-dark);
  border-radius: 999px;
  padding: .3rem .45rem .3rem .85rem;
  font-size: .85rem;
  font-weight: 500;
}

.skill-chip button {
  border: none;
  background: transparent;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .2rem;
}

.skill-chip button:hover { opacity: 1; }

/* ==========================================================================
   Mobile preview button + fullscreen preview
   ========================================================================== */
.mobile-preview-btn {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 20;
  align-items: center;
  gap: .5rem;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .7rem 1.35rem;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .45);
}

@media (max-width: 991.98px) {
  .editor-body { flex-direction: column; }

  .editor-form-panel {
    flex: 1 1 auto;
    max-width: none;
    border-right: none;
    padding-bottom: 5.5rem;
  }

  .preview-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    /* Top padding clears the fixed close button (top: 1rem, 40px tall)
       plus a gap, so the resume page doesn't start flush against it. */
    padding: 4.75rem 1rem 2rem;
    /* overflow-x/y and justify-content: flex-start already come from the
       base .preview-panel rule — the resume never shrinks on any screen
       size now, so mobile needs no size-related override of its own here. */
  }

  .preview-panel.mobile-open { display: flex; }

  .preview-close { display: inline-flex; }

  .mobile-preview-btn { display: inline-flex; }

  /* Bigger tap targets on touch screens for the small remove/close icons. */
  .entry-remove,
  .bullet-remove {
    width: 36px;
    height: 36px;
  }

  .skill-chip button {
    padding: .35rem;
  }
}

@media (max-width: 480px) {
  .save-indicator .save-text { display: none; }
  .editor-topbar { gap: .5rem; }
}