/* =========================================================================
   doc-builder.css — shared layout + print styles for the document tools.
   Imported into each builder page via <style is:global> @import, so the
   design-system tokens from global.css resolve normally.
   ========================================================================= */

.doc { padding-block: var(--space-6) var(--space-10); }
.doc__inner {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

/* ---------- Form column ---------- */
.doc-form {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: grid;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.doc-form__head { display: grid; gap: var(--space-1); }
.doc-form__back {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-primary-700);
}
.doc-form__back :global(.icon),
.doc-form__back .icon { transform: rotate(180deg); }
.doc-form__title { margin: 0; font-size: var(--fs-xl); }
.doc-form__lead { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }

.doc-form__group { display: grid; gap: var(--space-1); }
.doc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.doc-form__fieldset { border: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.doc-form__fieldset legend { padding: 0; margin-bottom: var(--space-1); }
.doc-form textarea.input { resize: vertical; min-height: 70px; font-family: inherit; }

.doc-form__privacy {
  display: flex; align-items: center; gap: 0.4rem;
  margin: var(--space-1) 0 0;
  color: var(--color-green-600); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.doc-form__privacy .icon { color: var(--color-green-600); font-size: 1rem; flex: none; }

.doc-form__error {
  margin: 0; color: var(--color-accent-600); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.doc-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.doc-form__saved { font-size: var(--fs-xs); color: var(--color-green-600); font-weight: var(--fw-bold); }

/* ---------- Preview column (A4 paper) ---------- */
.doc-preview { display: block; }
.paper {
  background: #fff;
  color: #111;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 794px;          /* A4 width @ 96dpi */
  min-height: 1000px;
  margin-inline: auto;
  padding: 56px 64px;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
.paper p { margin: 0 0 0.9em; }

/* Motivation letter */
.paper__from { font-weight: 700; margin-bottom: 0.2em; }
.paper__date { color: #444; margin-bottom: 1.6em; }
.paper__to { margin-bottom: 1.4em; }
.paper__subject { margin-bottom: 1.4em; }
.paper__sign { margin-top: 1.8em; }

/* CV */
.paper--cv { font-size: 14px; line-height: 1.5; }
.cv__head { border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 20px; }
.cv__name { margin: 0; font-family: "Sora", system-ui, sans-serif; font-size: 26px; letter-spacing: -0.02em; }
.cv__contact { margin: 6px 0 0; color: #333; display: flex; flex-wrap: wrap; gap: 14px; }
.cv__contact span:empty { display: none; }
.cv__section { margin-bottom: 18px; }
.cv__heading {
  margin: 0 0 8px; font-family: "Sora", system-ui, sans-serif;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #2354e0;
}
.cv__list { margin: 0; padding-left: 18px; }
.cv__list li { margin-bottom: 4px; }
.cv__list li:empty { display: none; }
.cv__tags { margin: 0; color: #222; }

/* Checklist */
.paper--checklist .ck__head { border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 22px; }
.ck__title { margin: 0; font-family: "Sora", system-ui, sans-serif; font-size: 24px; }
.ck__meta { margin: 6px 0 0; color: #333; display: flex; flex-wrap: wrap; gap: 14px; }
.ck__meta span:empty { display: none; }
.ck__deadline { margin: 6px 0 0; font-weight: 700; }
.ck__deadline:empty { display: none; }
.ck__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ck__item { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.ck__box {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex: none;
  border: 2px solid #111; border-radius: 4px; background: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.ck__box:checked { background: #0f9249; border-color: #0f9249; }
.ck__box:checked::after {
  content: ""; width: 11px; height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}

/* ---------- Brand footer (printed into the document) ---------- */
.paper__brand {
  margin-top: 2.4em;
  padding-top: 0.9em;
  border-top: 1px solid #ddd;
  color: #888;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .doc__inner { grid-template-columns: 1fr; }
  .doc-form { position: static; }
  .paper { padding: 40px 32px; min-height: auto; }
}

/* ---------- Print (print-to-PDF) ---------- */
@media print {
  /* Hide chrome: nav, footer, the form, and everything except the paper. */
  .nav, .footer, .doc-form, .skip-link { display: none !important; }
  body, .doc-body { background: #fff !important; }
  .doc { padding: 0 !important; }
  .doc__inner { display: block !important; }
  .container { max-width: none !important; padding: 0 !important; }
  .paper {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ck__box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 18mm; size: A4; }
}