/* ==========================================================================
   Z-Networks | proposal builder
   Screen: two-pane editor. Print: a clean A4 document, editor hidden.
   Inherits the palette and type system from styles.css.
   ========================================================================== */

.builder {
  display: grid;
  grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
  padding-block: 2rem 4rem;
}
@media (max-width: 1080px) {
  .builder { grid-template-columns: 1fr; }
}

/* --- editor pane -------------------------------------------------------- */

.editor {
  position: sticky;
  top: 88px;
  background: var(--surface);
  border: 1px solid var(--haze);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
@media (max-width: 1080px) {
  .editor { position: static; max-height: none; }
}

.editor__head {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--haze);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}
.editor__head h1 {
  font-size: 1.15rem;
  margin: 0 0 .2rem;
}
.editor__head p { font-size: .84rem; color: var(--slate-soft); margin: 0; }

.editor__body { padding: 1.25rem; }

.fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
.fieldset legend {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--current);
  padding: 0;
  margin-bottom: .85rem;
}

.f { margin-bottom: .85rem; }
.f label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .3rem;
}
.f input[type="text"],
.f input[type="number"],
.f input[type="date"],
.f select,
.f textarea {
  width: 100%;
  font-family: var(--body);
  font-size: .9rem;
  padding: .5rem .6rem;
  border: 1px solid var(--haze);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.f textarea { min-height: 5.5rem; resize: vertical; line-height: 1.55; }
.f--row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.f__hint { font-size: .74rem; color: var(--slate-soft); margin: .3rem 0 0; }

/* --- line item rows ----------------------------------------------------- */

.lines { display: grid; gap: .7rem; }

.line {
  border: 1px solid var(--haze);
  border-radius: var(--radius-sm);
  padding: .75rem;
  background: var(--mist);
}
.line__top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
}
.line__top select { flex: 1; min-width: 0; }
.line__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}
.line__grid label {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-soft);
  display: block;
  margin-bottom: .2rem;
}
.line__grid input {
  width: 100%;
  font-family: var(--mono);
  font-size: .82rem;
  padding: .35rem .4rem;
  border: 1px solid var(--haze);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
.line__kill {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--haze);
  background: var(--surface);
  color: var(--slate-soft);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.line__kill:hover { border-color: #C87B7B; color: #B25555; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--haze);
  position: sticky;
  bottom: 0;
  background: var(--surface);
}

/* ==========================================================================
   The document
   ========================================================================== */

.sheet {
  background: #fff;
  border: 1px solid var(--haze);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20,32,43,.05), 0 24px 60px -30px rgba(20,32,43,.35);
  padding: clamp(1.75rem, 3.4vw, 3.1rem);
  max-width: 830px;
  margin-inline: auto;
  color: var(--slate);
  font-size: .93rem;
  line-height: 1.6;
}

.doc__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--ink);
}
.doc__ref {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.7;
  color: var(--slate-soft);
  text-align: right;
}
.doc__ref b { color: var(--ink); font-weight: 600; }

.doc__parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
  padding-block: 1.4rem;
}
.doc__party span {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: .3rem;
}
.doc__party strong { color: var(--ink); font-size: 1rem; display: block; }
.doc__party em { font-style: normal; font-size: .86rem; }

.doc h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: .6rem 0 .8rem;
}
.doc h2 {
  font-size: 1.02rem;
  color: var(--ink);
  margin: 2rem 0 .7rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--haze);
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.doc h2 i {
  font-family: var(--mono);
  font-style: normal;
  font-size: .68rem;
  color: var(--current);
  letter-spacing: .08em;
}
.doc p { margin: 0 0 .8rem; }
.doc__intro { font-size: 1rem; }

table.doc__t {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
table.doc__t th, table.doc__t td {
  padding: .5rem .55rem;
  text-align: right;
  border-bottom: 1px solid var(--haze);
  white-space: nowrap;
}
table.doc__t th {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate-soft);
  font-weight: 500;
  border-bottom: 1px solid var(--slate-soft);
}
table.doc__t th:first-child,
table.doc__t td:first-child { text-align: left; white-space: normal; }
table.doc__t td { font-family: var(--mono); }
table.doc__t td:first-child { font-family: var(--body); color: var(--ink); }
table.doc__t tfoot td {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 0;
  border-top: 1px solid var(--haze);
}
table.doc__t tfoot tr:last-child td {
  border-top: 2px solid var(--ink);
  font-size: .95rem;
}
td.pos { color: var(--value); }

.doc__save {
  margin-top: 1.1rem;
  background: var(--value-lo);
  border: 1px solid #BEE5E0;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.doc__save div span {
  display: block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #4A7C76;
  margin-bottom: .2rem;
}
.doc__save div b {
  font-family: var(--display);
  font-size: 1.4rem;
  color: #14615A;
  font-weight: 700;
  line-height: 1.15;
}

.doc__terms { display: grid; gap: .5rem; font-size: .86rem; }
.doc__term { display: grid; grid-template-columns: 11rem 1fr; gap: .8rem; }
.doc__term dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate-soft);
  padding-top: .15rem;
}
.doc__term dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
  .doc__term { grid-template-columns: 1fr; gap: .1rem; }
}

.doc__sign {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  align-items: end;
}
.doc__contact { font-family: var(--mono); font-size: .8rem; line-height: 1.8; }
.doc__contact b { color: var(--ink); }
.doc__fine { font-size: .72rem; color: var(--slate-soft); margin-top: 1.2rem; }

.doc__sigLabel {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 1.7rem;
}
.doc__sigLine {
  border-top: 1px solid var(--slate-soft);
  padding-top: .35rem;
  font-size: .75rem;
  color: var(--slate-soft);
}

/* ==========================================================================
   Print — this is the PDF
   ========================================================================== */

@media print {
  @page { size: A4; margin: 15mm 14mm 12mm; }

  :root { --shadow: none; }

  html, body { background: #fff !important; }
  body { font-size: 10.5pt; }

  .masthead, .editor, .actions, .foot, .noprint { display: none !important; }
  .builder { display: block; padding: 0; }
  .wrap { max-width: none; padding: 0; }

  .sheet {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
    font-size: 10.5pt;
  }

  .doc h1 { font-size: 20pt; }
  .doc h2 { font-size: 11.5pt; margin-top: 10pt; page-break-after: avoid; }
  .doc__parties { padding-block: 8pt; }
  .doc__intro { font-size: 10.5pt; }
  table.doc__t { font-size: 9pt; page-break-inside: avoid; }
  .doc__save, .doc__sign, .doc__term { page-break-inside: avoid; }
  .doc__save { margin-top: 7pt; padding: 8pt 10pt; }
  .doc__save div b { font-size: 15pt; }
  .doc__sign { margin-top: 11pt; padding-top: 8pt; }
  .doc p { margin-bottom: .55rem; }
  table.doc__t th, table.doc__t td { padding: .34rem .5rem; }
  .doc__terms { gap: .3rem; }
  .doc__fine { margin-top: .45rem; font-size: 7.6pt; }
  .doc__sigLabel { margin-bottom: .75rem; }
  .doc__save { background: #EAF7F5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}