/* ============================================================
 *  app-dynamic.css — watermark + auth/account UI
 *  Loaded after the prototype CSS so it can layer on top.
 * ============================================================ */

/* ---------- Watermark (free plan) --------------------------
 * Shown on every résumé page sheet in the builder preview and
 * carried into the printed/exported PDF. Removed when the body
 * has .rb-pro (set by pro.jsx when the user is on a paid plan).
 * Uses a tiled, rotated SVG so it can't be cropped out easily.
 */
:root {
  --wm-url: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='340' height='220'>\
<text x='20' y='130' transform='rotate(-30 170 110)' fill='rgba(17,17,20,0.06)' \
font-family='Poppins, Arial, sans-serif' font-size='30' font-weight='800' \
letter-spacing='1'>get-resume.com</text></svg>");
}

.pg-sheet { position: relative; }

body:not(.rb-pro) .pg-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wm-url);
  background-repeat: repeat;
  pointer-events: none;
  z-index: 40;
}

/* Carry the watermark into the print clone + force color in print */
@media print {
  body:not(.rb-pro) .print-page .pg-sheet::after,
  body:not(.rb-pro) .print-page .paper::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--wm-url);
    background-repeat: repeat;
    pointer-events: none;
    z-index: 40;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body:not(.rb-pro) .print-page .paper { position: relative; }
}

/* tiny "remove watermark" nudge under the preview for free users */
.wm-nudge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 6px 12px;
  font: 600 12px/1 var(--font-ui, system-ui);
  color: var(--ink-3); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: all .18s var(--ease, ease);
}
.wm-nudge:hover { color: var(--ink); border-color: var(--acc); }
body.rb-pro .wm-nudge { display: none; }

/* subscription status line in the manage-plan modal */
.up-substatus {
  margin: -8px 0 16px; padding: 9px 12px;
  font: 600 12.5px/1.4 var(--font-ui, system-ui); color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
}
.up-substatus b { color: var(--ink); }

/* ---------- Auth modal (reuses .up-scrim / .up-modal) ------ */
.auth-modal { max-width: 440px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span {
  font: 600 12.5px/1 var(--font-ui, system-ui);
  color: var(--ink-3); letter-spacing: .01em;
}
.auth-field input {
  width: 100%; padding: 12px 14px;
  font: 500 14.5px/1.2 var(--font-ui, system-ui);
  color: var(--ink); background: var(--bg-2);
  border: 1.5px solid var(--line); border-radius: var(--radius-s, 12px);
  outline: none; transition: border-color .16s var(--ease, ease);
}
.auth-field input:focus { border-color: var(--acc); }
.auth-err {
  font: 600 13px/1.4 var(--font-ui, system-ui);
  color: #d23f57; background: rgba(210,63,87,.08);
  border: 1px solid rgba(210,63,87,.22); border-radius: 10px; padding: 9px 12px;
}
.auth-info {
  font: 600 13px/1.4 var(--font-ui, system-ui);
  color: #1d8a52; background: rgba(29,138,82,.08);
  border: 1px solid rgba(29,138,82,.22); border-radius: 10px; padding: 9px 12px;
}
.auth-submit { width: 100%; justify-content: center; margin-top: 2px; }
.auth-magic {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px; background: none; border: 0; cursor: pointer;
  font: 600 13px/1 var(--font-ui, system-ui); color: var(--ink-3);
}
.auth-magic:hover { color: var(--ink); }
.auth-switch {
  margin-top: 14px; text-align: center;
  font: 500 13px/1.4 var(--font-ui, system-ui); color: var(--ink-3);
}
.auth-switch button {
  background: none; border: 0; cursor: pointer; padding: 0;
  font: 700 13px/1 var(--font-ui, system-ui); color: var(--acc-ink, var(--ink));
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---------- Nav account control --------------------------- */
.nav-auth { display: inline-flex; align-items: center; gap: 6px; }
.acct-wrap { position: relative; }
.acct-chip {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--bg-2);
  display: grid; place-items: center; padding: 0;
  transition: border-color .16s var(--ease, ease);
}
.acct-chip:hover { border-color: var(--acc); }
.acct-av {
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  font: 800 13px/1 var(--font-display, system-ui); color: #111;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
}
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 220px; padding: 8px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--radius, 14px); box-shadow: var(--shadow-2);
}
.acct-id { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-id b { font: 700 13.5px/1.2 var(--font-ui, system-ui); color: var(--ink); }
.acct-id span { font: 500 12px/1.2 var(--font-ui, system-ui); color: var(--ink-3); word-break: break-all; }
.acct-item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border: 0; background: none; cursor: pointer; border-radius: 9px;
  font: 600 13px/1 var(--font-ui, system-ui); color: var(--ink-2); text-align: left;
}
.acct-item:hover { background: var(--bg-2); color: var(--ink); }