/* Tablet & below: stack editor/preview, switch to Edit/Preview toggle */
@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
  }
  .stage {
    position: static;
    max-height: none;
    padding: 24px 16px 60px;
  }
  .editor {
    max-width: none;
    padding: 20px 16px 4px;
  }
  .view-toggle {
    display: flex;
  }
  body.mode-edit .stage {
    display: none;
  }
  body.mode-preview .editor {
    display: none;
  }

  /* Prevent iOS Safari auto-zoom-on-focus (needs >=16px inputs) */
  .field input,
  .field select,
  .field textarea,
  .item-row input,
  .it-field input {
    font-size: 16px;
  }

  /* Topbar: wrap action buttons onto their own full-width row */
  .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 14px 16px;
  }
  .topbar-actions {
    width: 100%;
    order: 3;
  }
  .topbar-actions .btn {
    flex: 1;
    justify-content: center;
  }
  .brand-text span {
    display: none;
  }

  /* Paper preview: reflow with flexbox so the seal can move below the header */
  .preview-paper {
    padding: 34px 26px 30px;
    display: flex;
    flex-direction: column;
  }
  .paper-head {
    order: 1;
    padding-right: 0;
  }
  .paper-seal {
    order: 2;
    position: static;
    align-self: flex-end;
    transform: rotate(-3deg);
    margin: -6px 0 6px;
  }
  .paper-title {
    order: 3;
  }
  .paper-meta-grid {
    order: 4;
    grid-template-columns: 1fr 1fr;
  }
  .paper-parties {
    order: 5;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .paper-desc {
    order: 6;
  }
  .paper-items {
    order: 7;
  }
  .paper-totals {
    order: 8;
  }
  .paper-notes {
    order: 9;
  }
  .paper-foot {
    order: 10;
  }
  .paper-title h1 {
    font-size: 32px;
  }
}
@media (min-width: 981px) {
  .editor,
  .stage {
    display: block !important;
  }
}

/* Phones: single-column form fields, card-style line items */
@media (max-width: 640px) {
  .editor {
    padding: 16px 14px 4px;
  }
  .section {
    padding: 16px;
  }
  .row2,
  .row3,
  .adjust-row {
    grid-template-columns: 1fr;
  }
  .logo-upload {
    flex-wrap: wrap;
  }

  .items-head {
    display: none;
  }
  .item-row {
    display: grid;
    grid-template-columns: 1fr 1fr 40px;
    grid-template-areas:
      "desc desc desc"
      "qty rate remove"
      "total total total";
    gap: 8px 10px;
    align-items: end;
    background: var(--shell-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px;
  }
  .item-row .it-desc {
    grid-area: desc;
  }
  .item-row .it-field-qty {
    grid-area: qty;
  }
  .item-row .it-field-rate {
    grid-area: rate;
  }
  .item-row .mini-label {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-faint);
    margin-bottom: 5px;
  }
  .item-row .line-total {
    grid-area: total;
    justify-content: flex-end;
    padding: 8px 0 0;
    margin-top: 2px;
    border-top: 1px dashed var(--panel-border);
    font-size: 14px;
  }
  .item-row .remove-row {
    grid-area: remove;
    justify-self: end;
    align-self: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--panel-border);
  }

  .stage {
    padding: 18px 12px 48px;
  }
  .preview-paper {
    padding: 26px 18px 24px;
  }
  .paper-title h1 {
    font-size: 27px;
  }
  .paper-title .proj {
    font-size: 13px;
  }
  .paper-seal {
    width: 78px;
    height: 78px;
  }
  .paper-seal .seal-label {
    font-size: 7px;
  }
  .paper-seal .seal-num {
    font-size: 9.5px;
  }
  .paper-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    row-gap: 16px;
  }
  .paper-biz-name {
    font-size: 17px;
  }
}

/* ---------- Print ---------- */
@media print {
  body * {
    visibility: hidden;
  }
  .preview-paper,
  .preview-paper * {
    visibility: visible;
  }
  .preview-paper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    box-shadow: none;
    margin: 0;
    padding: 24px 34px;
    min-height: 0;
  }
  .topbar,
  .editor {
    display: none !important;
  }
  @page {
    margin: 12mm;
  }
}