/* Resume editor — Figma 388:1145 */

.page-resume { background: var(--panel); }
/* The content gutter is the canonical one in base.css — no page override. */

/* --- toolbar --------------------------------------------------------------- */

.rz-back { font-size: 14px; font-weight: 500; color: var(--accent); }
.rz-back:hover { text-decoration: underline; }

.rz-top { display: flex; align-items: flex-start; gap: 20px; }
.rz-title { font-family: var(--font-hand); font-size: 45px; font-weight: 400; margin-top: 8px; }
.rz-actions { margin-left: auto; display: flex; gap: 21px; margin-top: 16px; }

.segmented {
  display: flex; gap: 0;
  width: 172px; height: 42px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.segmented button {
  flex: 1 1 0;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-2);
}
.segmented button.is-on { background: var(--accent); color: #fff; }

.rz-export { width: 172px; height: 42px; font-size: 14px; }

.rz-divider { margin: 15px 0 32px; }

/* --- card grid ------------------------------------------------------------- */

/* Two columns that split the whole content area end to end.
   minmax(0, 1fr) so the tracks can shrink past their content's intrinsic width. */
.rz-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px;
  align-items: start;
  width: 100%;
}
.rz-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.rz-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--sh-2);
  padding: 17px;
  /* drag feedback (see "drag to reorder" below) rides on these two. */
  transition: border-color .15s ease, opacity .12s ease;
}
.rz-card__head { display: flex; align-items: center; gap: 8px; }
.rz-grip {
  color: var(--ink-3); font-size: 16px; cursor: grab; letter-spacing: -2px;
  flex: 0 0 auto;
  touch-action: none;   /* the grip starts a drag; don't let it scroll the page */
}
.rz-grip:hover { color: var(--ink-2); }
.rz-grip:active { cursor: grabbing; }
.rz-card__title {
  font-family: var(--font-serif); font-size: 19px; margin-left: 22px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rz-card__badge {
  margin-left: auto;
  flex: 0 0 auto;
  width: 97px; height: 22px; border-radius: 10px;
  background: var(--accent-tint); color: var(--accent);
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  display: grid; place-items: center;
}
.rz-card__collapse {
  color: var(--ink-2); width: 24px; flex: 0 0 24px; text-align: center;
  font-size: 18px; margin-left: 12px;
}
/* The ⋮ button is now wrapped so its popover has a positioning context. The
   wrapper takes over the button's old flex slot (24px, 18px in from the badge)
   and the button simply fills it, so the head is laid out exactly as before. */
.rz-card__menu-wrap {
  position: relative;
  display: flex;
  width: 24px; flex: 0 0 24px;
  margin-left: 18px;
}
.rz-card__menu { width: 100%; color: var(--ink-2); text-align: center; font-size: 20px; }
.rz-card__menu[aria-expanded="true"] { color: var(--accent); }
.rz-card__head + .divider { margin: 16px 0; }
.rz-card.is-collapsed .rz-card__body { display: none; }
.rz-card.is-collapsed .rz-card__head + .divider { display: none; }

/* --- inputs ---------------------------------------------------------------- */

.rz-input, .rz-textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--ink);
}
.rz-input { height: 32px; }
.rz-textarea { min-height: 68px; resize: vertical; line-height: 1.55; }
.rz-textarea--tall { min-height: 80px; }
.rz-input::placeholder, .rz-textarea::placeholder { color: var(--placeholder-ink); }
.rz-input:focus, .rz-textarea:focus { outline: none; border-color: var(--accent-line); }

.rz-entry {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 13px 13px;
  margin-bottom: 12px;
}
.rz-entry__grip { position: absolute; left: 11px; top: 8px; font-size: 13px; color: var(--ink-3); letter-spacing: -2px; }
.rz-entry__remove {
  position: absolute; right: 11px; top: 4px;
  font-size: 16px; color: var(--ink-3); line-height: 1;
  width: 20px; height: 20px;
}
.rz-entry__remove:hover { color: var(--accent); }
.rz-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 13px; }
.rz-fields--wide { grid-template-columns: minmax(0, 1fr); }
.rz-fields > .rz-span2 { grid-column: 1 / -1; }

.rz-add { align-self: flex-start; font-size: 14px; font-weight: 500; color: var(--accent); }
.rz-add:hover { text-decoration: underline; }
/* Replaces the inline `style="margin-top:…"` the "+ Add skill" and certs
   "+ Add entry" buttons used to carry; both now sit at the same 14px. */
.rz-add--spaced { margin-top: 14px; }

/* --- skills chips ---------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 15px;
  border-radius: 15px;
  background: var(--accent-tint); color: var(--accent);
  font-size: 13px; font-weight: 500;
}
.chip button { color: inherit; font-size: 13px; line-height: 1; opacity: .8; }
.chip button:hover { opacity: 1; }

/* --- certifications -------------------------------------------------------- */

.cert-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cert-row__grip { font-size: 13px; color: var(--ink-3); letter-spacing: -2px; flex: 0 0 auto; }
/* Name takes the slack, date keeps its frame width.
   :last-of-type is per element type, so the trailing <button> added below does
   not steal the match from the second <input> — the date field still gets it. */
.cert-row .rz-input:first-of-type { flex: 1 1 auto; width: auto; min-width: 0; }
.cert-row .rz-input:last-of-type { flex: 0 0 140px; width: 140px; }
/* Same read as .rz-entry__remove, but sized for the flex row instead of
   being absolutely positioned in a card corner. */
.cert-row__remove {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  font-size: 16px; line-height: 1;
  color: var(--ink-3);
}
.cert-row__remove:hover { color: var(--accent); }

/* --- add category ---------------------------------------------------------- */

/* Wrapper so the button can be swapped for the inline input in place. */
.rz-addcat { width: 100%; }

.rz-add-category {
  height: 56px;
  width: 100%;
  border: 1.5px dashed var(--accent);
  border-radius: 14px;
  background: var(--bg);
  color: var(--accent);
  font-size: 15px; font-weight: 500;
  transition: background .15s ease;
}
.rz-add-category:hover { background: var(--accent-tint); }

/* --- section options menu -------------------------------------------------- */

/* Popover hung below-right of the ⋮ button, inside .rz-card__menu-wrap.
   Absolute so opening it never reflows the card head. Closed state is the
   `hidden` attribute, handled globally in base.css. */
.rz-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 6px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--sh-4);
  text-align: left;          /* the head centres its buttons; items are flush left */
}

.rz-menu__item {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.rz-menu__item:hover,
.rz-menu__item:focus-visible { background: var(--accent-tint); color: var(--accent); }

/* e.g. "Move up" on the topmost card — inert, and it should look it. */
.rz-menu__item[disabled] { opacity: .4; cursor: default; }
.rz-menu__item[disabled]:hover,
.rz-menu__item[disabled]:focus-visible { background: transparent; color: var(--ink-2); }

.rz-menu__item--danger { color: var(--accent); }
.rz-menu__item--danger:hover,
.rz-menu__item--danger:focus-visible { background: var(--accent); color: #fff; }

/* Delete, after the first click ("Click again to delete"). */
.rz-menu__item--armed,
.rz-menu__item--armed:hover,
.rz-menu__item--armed:focus-visible { background: var(--accent); color: #fff; }

.rz-menu__sep {
  height: 1px;
  margin: 5px 4px;
  border: 0;
  background: var(--border-soft);
}

/* Keyboard focus uses the one global ring from base.css
   (`:focus-visible { outline: 2px solid var(--accent) }`) — no second
   treatment here. Menu items only pull the ring inside the 6px popover
   padding so it is not clipped by the rounded edge. */
.rz-menu__item:focus-visible { outline-offset: -2px; }

/* --- inline text input ----------------------------------------------------- */

/* Stands in for the removed prompt() dialogs on "+ Add Category" and
   "+ Add skill": the trigger button is swapped for this row in place. */
.rz-inline {
  display: flex;
  flex-wrap: wrap;          /* allowed to wrap rather than crush the field */
  align-items: center;
  gap: 8px;
  width: 100%;
}
/* Beats .rz-input's width: 100% on specificity, not on !important. */
.rz-inline .rz-inline__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 36px;
}
.rz-inline .btn { flex: 0 0 auto; }

/* Used inside .rz-addcat, where it replaces the 56px dashed button — the
   matching min-height keeps the column from jumping on the swap. */
.rz-inline--cat { min-height: 56px; align-items: center; }

/* --- section rename -------------------------------------------------------- */

/* Sits where <h2 class="rz-card__title"> was, which JS hides with [hidden]. */
.rz-card__title-input {
  margin-left: 22px;
  flex: 1 1 auto;
  width: auto;              /* over .rz-input's 100% */
  min-width: 0;
  max-width: 280px;
  height: 30px;             /* over .rz-input's 32px */
  font-family: var(--font-serif);
  font-size: 16px;
}

/* --- drag to reorder ------------------------------------------------------- */

.rz-card.is-dragging { opacity: .5; cursor: grabbing; }
/* Brief highlight on the card that just landed. */
.rz-card.is-drop-target { border-color: var(--accent-line); }
/* Outline, not border, so marking the receiving column shifts nothing. */
.rz-col.is-drop-zone {
  border-radius: 16px;
  outline: 2px dashed var(--accent-line);
  outline-offset: 8px;
}

/* --- preview mode ---------------------------------------------------------- */

.rz-preview { display: none; }
.page-resume.is-preview .rz-cols { display: none; }
.page-resume.is-preview .rz-preview { display: block; }

.rz-paper {
  max-width: 816px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--sh-3);
  padding: 56px 64px;
  min-height: 1056px;
}
.rz-paper h1 { font-family: var(--font-serif); font-size: 30px; }
.rz-paper h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px; margin: 28px 0 12px;
}
.rz-paper p { font-size: 13.5px; color: var(--ink-2); }
.rz-paper .rz-paper__role { font-size: 14px; font-weight: 600; color: var(--ink); }
.rz-paper ul { margin: 6px 0 0 18px; list-style: disc; }
.rz-paper li { font-size: 13.5px; color: var(--ink-2); }
.rz-paper__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rz-paper__tag { font-size: 13px; color: var(--ink-2); }

/* --- narrow ---------------------------------------------------------------- */

@media (max-width: 1100px) {
  .rz-cols { grid-template-columns: minmax(0, 1fr); }
  .rz-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .rz-top { flex-wrap: wrap; }
  .rz-actions { margin-left: 0; }
  .rz-fields { grid-template-columns: minmax(0, 1fr); }
  /* The menu is right-anchored so it grows leftwards and can never spill off
     the right edge; this only stops it running past the left one. */
  .rz-menu { min-width: 0; max-width: calc(100vw - 40px); }
  .rz-menu__item { white-space: normal; }
}

/* --- print ----------------------------------------------------------------- */

@media print {
  .rz-menu { display: none !important; }
}

/* The editor is a dense two-column form; the full-size bird sat on top of the
   right-hand cards, so this page gets the small one. */
.page-resume .mascot { width: var(--mascot-sm); }

/* --- phones ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .rz-title { font-size: 34px; }
  .rz-actions { width: 100%; gap: 10px; margin-top: 10px; }
  .segmented, .rz-export { flex: 1 1 0; width: auto; }
  .rz-divider { margin: 12px 0 18px; }
  .rz-cols { gap: 16px; }
  .rz-col { gap: 16px; }
  .rz-card { padding: 14px; border-radius: 14px; }
  .rz-card__title { margin-left: 8px; font-size: 18px; }
  .rz-card__badge { width: auto; padding: 0 8px; }
  .rz-card__menu-wrap, .rz-card__collapse { margin-left: 4px; width: 32px; flex-basis: 32px; height: 32px; align-items: center; }
  .rz-paper { padding: 24px 18px; min-height: 0; border-radius: 6px; }
}