:root {
  --paper: #f7f8f4;
  --white: #fff;
  --ink: #233e34;
  --muted: #758079;
  --green: #315d47;
  --lime: #d5e6b8;
  --line: #e2e7df;
  --soft: #edf2e9;
  --radius: 16px
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6
}

a {
  color: inherit;
  text-decoration: none
}

a:hover {
  color: var(--green)
}

button,
input,
textarea {
  font: inherit
}

button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent
}

button {
  cursor: pointer
}

button:disabled {
  opacity: .48;
  cursor: not-allowed
}

input:focus,
textarea:focus {
  outline: 2px solid #8daf78;
  outline-offset: 1px
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #8daf78;
  outline-offset: 4px
}

h1,
h2,
h3,
p {
  margin-top: 0
}

h1 {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -1.7px;
  font-weight: 600;
  margin-bottom: 14px;
  overflow-wrap: anywhere
}

h2 {
  font-size: 19px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.4px;
  margin-bottom: 14px
}

h3 {
  font-size: 16px
}

p {
  margin-bottom: 12px
}

input,
textarea {
  width: 100%;
  border: 1px solid #dbe2d8;
  border-radius: 8px;
  padding: 11px 13px;
  background: #fff;
  color: var(--ink);
  line-height: 1.5
}

input::placeholder,
textarea::placeholder {
  color: #99a39b
}

textarea {
  resize: vertical;
  min-height: 65px
}

label,
.input-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 21px 0 8px
}

input[type=file] {
  font-size: 12px;
  padding: 9px
}

input[type=file]::file-selector-button {
  background: var(--soft);
  border: 0;
  border-radius: 4px;
  padding: 7px;
  color: var(--ink);
  margin-right: 9px
}

input[type=checkbox] {
  width: auto;
  accent-color: var(--green)
}

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line)
}

.header-inner {
  max-width: 1240px;
  margin: auto;
  height: 88px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 54px
}

.brand {
  font-size: 23px;
  letter-spacing: -1px;
  font-weight: 700;
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 9px
}

.brand-dot {
  color: #91a974;
  margin-left: -8px
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--ink);
  border-radius: 10px;
  color: var(--lime);
  font-family: Georgia, serif;
  font-size: 22px;
  letter-spacing: -4px;
  padding-right: 5px
}

.brand-mark span {
  color: white
}

.header-inner nav {
  display: flex;
  gap: 28px;
  height: 100%
}

.nav-link {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  padding-top: 2px
}

.nav-link.active {
  color: var(--ink);
  border-color: var(--green);
  font-weight: 600
}

.account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px
}

.account-email {
  font-size: 12px;
  color: var(--muted)
}

.text-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--green);
  font-weight: 600;
  font-size: 13px
}

.header-caption {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px
}

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 40px 80px;
  min-height: calc(100vh - 167px)
}

.site-footer {
  max-width: 1160px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  margin: auto;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted)
}

.site-footer>span:first-child {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink)
}

.site-footer .brand-dot {
  margin-left: 0
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 35px
}

.page-heading p {
  margin-bottom: 0
}

.eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: #7a8b78;
  margin-bottom: 15px
}

.heading-dot {
  color: #89a46c
}

.muted {
  color: var(--muted)
}

.small {
  font-size: 12px;
  line-height: 1.7
}

.strong {
  font-weight: 600
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--green);
  border: 1px solid var(--green);
  color: white;
  border-radius: 8px;
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition: background .15s
}

.button:hover {
  background: #244a37;
  color: white
}

.button-light {
  background: #fff;
  color: var(--ink);
  border-color: #d8e1d2
}

.button-light:hover {
  background: var(--soft);
  color: var(--ink)
}

.full-width {
  width: 100%
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius)
}

.setup-banner {
  background: #eaf0e2;
  border: 1px solid #dce5d1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 23px 26px;
  margin-bottom: 42px
}

.setup-banner p {
  font-size: 12px;
  margin: 3px 0 0;
  color: #6d7a67
}

.setup-banner .button {
  margin-left: auto
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--soft);
  color: #69815d;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.setup-banner .step-number {
  background: #dce7cf
}

.section-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px
}

.section-caption h2 {
  font-size: 15px;
  margin: 0
}

.count {
  font-size: 10px;
  background: #e8ede4;
  color: #7b8973;
  border-radius: 20px;
  padding: 3px 10px
}

.empty-state {
  text-align: center;
  padding: 70px 25px
}

.empty-state h2 {
  font-size: 23px
}

.empty-state p {
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 26px
}

.document-icon {
  position: relative;
  border: 1px solid #cddbc3;
  width: 56px;
  height: 65px;
  border-radius: 9px;
  margin: 0 auto 27px;
  background: #f4f7ef;
  color: #97ac87;
  font-size: 38px;
  line-height: 1.5
}

.document-icon span {
  position: absolute;
  right: -11px;
  bottom: -4px;
  width: 25px;
  height: 25px;
  background: #dbe8c9;
  border: 3px solid white;
  border-radius: 50%;
  font-size: 14px;
  line-height: 19px;
  color: var(--green)
}

.quiet-note {
  font-size: 11px;
  color: #8a958a;
  margin-top: 21px
}

.quiet-note span {
  font-size: 18px;
  margin-right: 7px
}

.table-scroll {
  position: relative;
  overflow-x: auto
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px
}

th {
  font-size: 10px;
  color: #82907d;
  font-weight: 600;
  background: #f9fbf7;
  white-space: nowrap
}

td,
th {
  padding: 17px 21px;
  border-bottom: 1px solid var(--line);
  vertical-align: top
}

tbody tr:last-child td {
  border-bottom: 0
}

.archive {
  overflow: hidden
}

.archive td {
  vertical-align: middle
}

.numeric {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

.quote-link {
  font-weight: 600
}

.quote-link:hover {
  text-decoration: underline
}

.truncate {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.customer-cell {
  max-width: 220px;
  white-space: pre-line;
  overflow-wrap: anywhere
}

.status {
  background: #f1f2ec;
  color: #8a8e77;
  padding: 5px 9px;
  font-size: 10px;
  border-radius: 5px;
  white-space: nowrap
}

.status.sent {
  background: #e9f2e5;
  color: #638153
}

.arrow-link {
  font-size: 21px;
  color: #739068
}

.form-card {
  padding: 28px 30px;
  margin-bottom: 22px
}

.card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px
}

.card-heading h2 {
  margin: 0;
  font-size: 16px
}

.card-heading+label,
.card-heading+.form-grid label {
  margin-top: 12px
}

.field-hint {
  font-size: 11px;
  color: #8a9589;
  margin: 8px 0 0;
  line-height: 1.7
}

.required {
  color: #8da178
}

.optional {
  margin-left: auto;
  font-size: 10px;
  color: #99a18f
}

.company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 28px
}

.company-grid>.card {
  margin-bottom: 0
}

.logo-box {
  height: 150px;
  background: #f8faf5;
  border: 1px dashed #d8e1d0;
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 22px 0
}

.logo-box img {
  max-width: 85%;
  max-height: 120px;
  object-fit: contain
}

.logo-placeholder {
  color: #9ba891;
  font-family: Georgia, serif;
  font-size: 20px
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 12px
}

.aside-note {
  padding: 5px 9px 20px;
  color: #819078;
  font-size: 12px;
  line-height: 1.8
}

.aside-note strong {
  font-weight: 600;
  color: #5f7555
}

.aside-note p {
  margin: 8px 0 0
}

.back-link {
  display: inline-block;
  font-size: 11px;
  color: #7d8d74;
  margin-bottom: 24px
}

.draft-label {
  font-size: 11px;
  color: #849478;
  border: 1px solid #d9e1d2;
  border-radius: 20px;
  padding: 6px 12px;
  white-space: nowrap
}

.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start
}

.form-grid {
  display: grid;
  gap: 16px
}

.three-columns {
  grid-template-columns: 1.4fr 1fr 1fr
}

.item-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 78px 100px 96px 20px;
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px
}

.item-row label,
.item-row .input-label {
  font-size: 10px;
  white-space: nowrap;
  margin: 17px 0 8px
}

.item-row textarea {
  font-size: 12px;
  min-height: 70px
}

.item-row input {
  padding: 10px 8px;
  font-size: 12px
}

.item-total output {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  padding-top: 11px;
  white-space: nowrap
}

.item-total .input-label {
  text-align: right
}

.remove-item {
  border: 0;
  background: none;
  color: #9aab90;
  font-size: 23px;
  line-height: 42px;
  padding: 0;
  margin-top: 36px
}

.remove-item:hover {
  color: #9d4e41
}

.add-row {
  margin-top: 20px;
  font-size: 12px
}

.items-card>.field-hint {
  margin-bottom: 1px
}

.summary-card {
  padding: 28px 24px
}

.summary-card h2 {
  font-size: 23px
}

.summary-card .eyebrow {
  font-size: 9px
}

.summary-company {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0 22px;
  margin-bottom: 23px;
  font-size: 12px;
  overflow-wrap: anywhere
}

.summary-company img {
  max-width: 45px;
  max-height: 35px;
  object-fit: contain
}

.total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  margin-bottom: 15px
}

.total-row output {
  font-weight: 600;
  font-variant-numeric: tabular-nums
}

.vat-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0
}

.vat-control label {
  margin: 0;
  font-size: 12px;
  font-weight: 400
}

.vat-control>div {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #86917d;
  font-size: 12px
}

.vat-control input {
  width: 78px;
  padding: 7px 8px;
  font-size: 12px
}

.grand-total {
  border-top: 1px solid var(--line);
  padding: 22px 0 25px;
  margin-top: 20px
}

.grand-total span {
  display: block;
  font-size: 11px;
  color: #86947e
}

.grand-total output {
  font-size: 30px;
  letter-spacing: -1px;
  font-weight: 600;
  display: block;
  font-variant-numeric: tabular-nums;
  margin-top: 5px
}

.summary-hint {
  text-align: center;
  font-size: 10px;
  margin: 14px 0 0
}

.editor-aside {
  position: sticky;
  top: 25px
}

.editor-aside>.aside-note {
  margin-top: 22px
}

.format-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.format-pills>span:not(.pill-caption) {
  font-size: 9px;
  letter-spacing: .6px;
  border: 1px solid #dbe3d3;
  border-radius: 5px;
  padding: 3px 7px;
  color: #819371;
  background: #f1f5ec
}

.notice {
  padding: 15px 20px;
  border-radius: 9px;
  margin-bottom: 25px;
  font-size: 13px;
  border: 1px solid var(--line)
}

.notice.success {
  background: #eaf3e6;
  color: #42633b;
  border-color: #d8e5d0
}

.notice.error {
  background: #faf0ea;
  color: #97573f;
  border-color: #edd9cb
}

.notice a {
  text-decoration: underline
}

.login-page {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 90px;
  align-items: center;
  padding-top: 75px;
  padding-bottom: 90px
}

.login-intro h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 57px;
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: -2px;
  margin: 25px 0
}

.login-intro h1 em {
  color: #789263;
  font-weight: 400
}

.login-intro>p {
  color: #89917e;
  line-height: 1.9
}

.login-intro>.eyebrow {
  font-size: 9px
}

.login-intro .format-pills {
  margin-top: 36px
}

.pill-caption {
  display: block;
  font-size: 10px;
  color: #9ba58f;
  margin-left: 3px
}

.login-card {
  padding: 38px
}

.login-card h2 {
  font-size: 25px;
  margin-bottom: 7px
}

.login-card>.muted {
  font-size: 12px
}

.login-card form .button {
  margin-top: 28px
}

.login-card>p:last-child {
  font-size: 10px;
  margin: 24px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 20px
}

.document-preview {
  padding: 42px
}

.document-company {
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line)
}

.company-letterhead {
  display: block;
  width: 100%;
  height: auto;
}

.company-header-preview {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.document-company>img {
  max-width: 140px;
  max-height: 70px;
  object-fit: contain;
  margin-bottom: 15px
}

.document-company h2 {
  font-size: 23px;
  margin-bottom: 8px;
  overflow-wrap: anywhere
}

.document-company>.muted {
  font-size: 12px
}

.preserve-lines {
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.document-title {
  margin: 28px 0
}

.document-title .eyebrow {
  margin-bottom: 6px
}

.document-title h2 {
  font-size: 14pt;
  margin-bottom: 6px;
  overflow-wrap: anywhere
}

.document-title p {
  font-size: 12px;
  color: var(--muted)
}

.document-customer {
  margin-bottom: 25px
}

.document-customer .eyebrow {
  font-size: 9px;
  margin-bottom: 5px
}

.document-customer p {
  text-align: right;
  margin-right: 0;
  padding-right: 0;
  font-size: 12px
}

.document-subject {
  margin: 24pt 0;
  font-size: 10pt;
  font-weight: bold;
  line-height: 1.2;
  overflow-wrap: anywhere
}

.document-table {
  font-size: 11px
}

.document-table th,
.document-table td {
  padding: 13px 10px
}

.document-table td:first-child {
  min-width: 150px
}

.document-totals {
  max-width: none;
  margin: 25px 0
}

.final-total {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 13px
}

.document-notes {
  border-top: 1px solid var(--line);
  padding-top: 25px;
  font-size: 12px
}

.document-notes-heading {
  font-size: 10pt;
  font-weight: bold;
  margin-bottom: 8px
}

.document-footer {
  margin-top: 35px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted)
}

.download-list {
  margin-top: 20px
}

.download-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 17px 0;
  font-size: 11px
}

.download-item:last-child {
  padding-bottom: 0
}

.file-badge {
  font-size: 9px;
  font-weight: 600;
  width: 42px;
  border: 1px solid #e0e7d9;
  background: #f4f7ef;
  border-radius: 5px;
  text-align: center;
  padding: 5px 0;
  color: #789068
}

.download-arrow {
  margin-left: auto;
  font-size: 19px;
  color: #7f946e
}

.email-card .eyebrow {
  font-size: 8px;
  letter-spacing: 1px
}

.email-card>.muted {
  font-size: 12px
}

.recipient {
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
  margin: 15px 0 22px
}

.email-warning {
  background: #f7f2e9;
  padding: 12px;
  border-radius: 7px;
  font-size: 10px;
  color: #998065;
  margin-bottom: 20px
}

.email-card button {
  font-size: 11px;
  padding: 13px 9px;
  gap: 9px
}

.delivery-status {
  color: #718b60;
  font-size: 10px;
  margin: 15px 0 0
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.editor-grid>*,
.company-grid>* {
  min-width: 0
}

@media(min-width:1400px) {
  .page {
    padding-top: 65px
  }

  .login-page {
    padding-top: 100px
  }
}

@media(max-width:1050px) {
  .header-inner {
    gap: 30px
  }

  .account-email {
    display: none
  }

  .editor-grid {
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 20px
  }

  .form-card {
    padding: 24px
  }

  .item-row {
    grid-template-columns: minmax(110px, 1fr) 65px 85px 20px
  }

  .item-total {
    grid-column: 1/4;
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    align-items: center
  }

  .item-total .input-label {
    margin: 0
  }

  .item-total output {
    padding: 0
  }

  .remove-item {
    grid-column: 4;
    grid-row: 1
  }

  .three-columns {
    grid-template-columns: 1fr 1fr
  }

  .three-columns>div:first-child {
    grid-column: 1/-1
  }

  .document-preview {
    padding: 28px
  }

  .login-page {
    gap: 50px
  }

  .login-intro h1 {
    font-size: 48px
  }

  .site-footer {
    margin: 0 40px
  }
}

@media(max-width:760px) {
  .header-inner {
    height: auto;
    min-height: 76px;
    padding: 18px 22px;
    gap: 20px;
    flex-wrap: wrap
  }

  .brand {
    font-size: 21px
  }

  .account {
    order: 2
  }

  .header-inner nav {
    order: 3;
    width: 100%;
    gap: 25px;
    height: 35px
  }

  .nav-link {
    padding: 0 0 8px
  }

  .page {
    padding: 32px 22px 55px
  }

  .page-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 26px
  }

  h1 {
    font-size: 33px
  }

  .eyebrow {
    font-size: 9px;
    letter-spacing: 1.2px
  }

  .page-heading p {
    font-size: 12px
  }

  .setup-banner {
    padding: 20px;
    flex-wrap: wrap;
    gap: 14px
  }

  .setup-banner>div {
    flex: 1;
    min-width: 180px
  }

  .setup-banner .button {
    margin-left: 44px
  }

  .company-grid,
  .editor-grid,
  .login-page {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .editor-aside {
    position: static
  }

  .form-card {
    padding: 23px 20px
  }

  .company-grid>.card {
    margin-bottom: 0
  }

  .company-grid>aside>.card {
    margin-bottom: 15px
  }

  .summary-card {
    padding: 25px
  }

  .empty-state {
    padding: 45px 22px
  }

  .empty-state h2 {
    font-size: 21px
  }

  .empty-state p br {
    display: none
  }

  .site-footer {
    margin: 0 22px;
    gap: 20px
  }

  .site-footer>span:last-child {
    max-width: 190px;
    text-align: right;
    font-size: 10px
  }

  .login-intro h1 {
    font-size: 44px
  }

  .login-intro {
    padding: 10px 0 15px
  }

  .login-card {
    padding: 28px
  }

  .login-page {
    gap: 30px
  }

  .header-caption {
    font-size: 10px;
    max-width: 120px;
    text-align: right
  }

  .document-preview {
    padding: 25px 20px
  }

  .draft-label {
    display: none
  }

  .document-table th,
  .document-table td {
    padding: 12px 8px
  }

  .item-row {
    grid-template-columns: minmax(100px, 1fr) 70px 90px 20px;
    gap: 8px
  }

  .item-description {
    grid-column: 1/4
  }

  .item-row>div:nth-child(2) {
    grid-column: 1/2
  }

  .item-row>div:nth-child(3) {
    grid-column: 2/4
  }

  .item-total {
    grid-column: 1/4
  }

  .remove-item {
    grid-column: 4;
    grid-row: 1
  }

  .item-row textarea {
    min-height: 62px
  }

  .three-columns {
    gap: 13px
  }

  .company-grid .aside-note {
    margin-top: 15px
  }

  .format-pills {
    gap: 6px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition: none !important
  }
}

/* A single sheet with the same send action at both ends. */
.quote-sheet { max-width: 980px; margin: 0 auto; }
.quote-sheet .editor-aside { position: static; margin-top: 24px; }
.quote-sheet .summary-card { max-width: 100%; }
.quote-sheet .company-letterhead { display: block; width: 100%; }
.quote-sheet .add-row { width: 100%; padding: 16px; border: 1px dashed var(--border, #cbd5ce); border-radius: 8px; }
.remove-item svg { pointer-events: none; }

.quote-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.page-heading:has(.quote-actions) { flex-wrap: wrap; }
.quote-actions .button { white-space: normal; }
@media (max-width: 600px) {
  .quote-actions { width: 100%; }
  .quote-actions .button { flex: 1 1 140px; }
}

.document-title:has(+ .document-customer) { margin-bottom: 60px; }
.document-customer { text-align: right; }
.document-totals .total-row > :first-child { padding-left: 10px; }
.document-notes { margin-top: 32px; }
.document-location { margin-top: 32px; text-align: right; }
.document-table th:last-child, .document-table td:last-child { padding-right: 10px; }
.document-totals .total-row > :last-child { padding-right: 10px; }
.item-row input[type="number"], #vat_rate { text-align: right; font-variant-numeric: tabular-nums; }

.delete-quote-form { display: inline-block; margin-left: 12px; vertical-align: middle; }
.delete-quote { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 7px; border: 0; border-radius: 8px; background: transparent; color: #a43831; cursor: pointer; }
.delete-quote:hover { background: #fbe9e7; }
.delete-quote:focus-visible { outline: 2px solid #a43831; outline-offset: 2px; }
.danger-button { background: #a43831; }

.cancel-edit[aria-disabled="true"] { opacity: 0.5; cursor: default; }


/* Adapt the web interface without changing the exported document layout. */
.company-letterhead-mobile { display: none; }
.form-grid > *, .item-row > *, .page-heading > * { min-width: 0; }
.quote-link, .document-location, .count { overflow-wrap: anywhere; }

@media (max-width: 1050px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .item-row { grid-template-columns: minmax(0, 1fr) 88px 110px 44px; }
  .button, .text-button, .nav-link, .delete-quote, .arrow-link, .remove-item { min-height: 44px; }
  .delete-quote, .arrow-link, .remove-item { min-width: 44px; }
  .arrow-link { display: inline-flex; align-items: center; justify-content: center; }
}

/* Archive rows become cards so every field and action stays visible. */
@media (max-width: 900px) {
  .archive table, .archive tbody { display: block; }
  .archive thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .archive tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 16px; padding: 20px; border-bottom: 1px solid var(--line);
  }
  .archive tbody tr:last-child { border-bottom: 0; }
  .archive td { display: block; padding: 0; border: 0; min-width: 0; }
  .archive td:first-child, .archive td:nth-child(2), .archive td:last-child { grid-column: 1 / -1; }
  .archive td:first-child { font-size: 15px; }
  .archive .customer-cell { max-width: none; }
  .archive td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px;
    font-weight: 600; color: var(--muted); margin-bottom: 5px; white-space: normal;
  }
  .archive .numeric { white-space: normal; overflow-wrap: anywhere; }
  .archive td:last-child { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
  .archive .delete-quote-form { margin-left: 0; }
}

@media (max-width: 760px) {
  input, textarea, .item-row input, .item-row textarea, .vat-control input { font-size: 16px; min-height: 44px; min-width: 0; }
  input[type="date"] { min-inline-size: 0; max-width: 100%; }
  .header-inner nav { height: auto; }
  .nav-link { display: inline-flex; align-items: center; }
  .company-letterhead, .quote-sheet .company-letterhead { display: none; }
  .company-letterhead-mobile { display: flex; align-items: flex-start; gap: 14px; font-size: 12px; line-height: 1.6; }
  .company-letterhead-mobile > div { min-width: 0; overflow-wrap: anywhere; }
  .company-letterhead-mobile img { width: 48px; max-height: 88px; object-fit: contain; flex-shrink: 0; }
  .item-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 10px; }
  .item-description { grid-column: 1 / 3; }
  .item-row > div:nth-child(2) { grid-column: 1; }
  .item-row > div:nth-child(3) { grid-column: 2 / 4; }
  .item-total { grid-column: 1 / -1; flex-wrap: wrap; }
  .remove-item { grid-column: 3; grid-row: 1; margin-top: 32px; }
  .item-row label, .item-row .input-label { white-space: normal; font-size: 12px; }
  .section-caption { flex-wrap: wrap; gap: 10px; }
  .three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .document-table, .document-table tbody { display: block; }
  .document-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .document-table tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
  }
  .document-table tbody tr:last-child { border-bottom: 0; }
  .document-table td, .document-table td:last-child { display: block; padding: 0; border: 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .document-table td:first-child, .document-table td:last-child { grid-column: 1 / -1; }
  .document-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px;
    font-weight: 600; color: var(--muted); margin-bottom: 5px;
  }
  .document-table .numeric { text-align: right; }
  .document-totals .total-row > :first-child, .document-totals .total-row > :last-child { padding: 0; }
  .document-totals .total-row > :last-child { text-align: right; overflow-wrap: anywhere; min-width: 0; }
}

@media (max-width: 480px) {
  .page { padding: 28px 16px 45px; }
  .header-inner { padding-inline: 16px; }
  .form-card, .document-preview { padding: 20px 16px; }
  .summary-card { padding: 24px 16px; }
  .three-columns { grid-template-columns: minmax(0, 1fr); }
  .three-columns > div:first-child { grid-column: auto; }
  .site-footer { margin-inline: 16px; }
  .section-caption h2 { font-size: 17px; }
}

@media (pointer: coarse) {
  input, textarea, .item-row input, .item-row textarea, .vat-control input { font-size: 16px; }
  .button, .text-button, .nav-link, .delete-quote, .arrow-link, .remove-item { min-height: 44px; }
  .delete-quote, .arrow-link, .remove-item { min-width: 44px; }
}

@media (max-width: 760px) {
  .grand-total output { font-size: clamp(22px, 5vw, 30px); overflow-wrap: anywhere; }
  .total-row > output { min-width: 0; text-align: right; overflow-wrap: anywhere; }
}

/* Independent interface and document language controls. */
.language-switcher { display: flex; flex-shrink: 0; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
.language-switcher button { min-width: 40px; min-height: 40px; padding: 6px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }
.language-switcher button[aria-pressed="true"] { background: var(--soft); color: var(--ink); cursor: default; }
.language-switcher button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
select { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid #dbe2d8; border-radius: 8px; background: white; color: var(--ink); font: inherit; }
select:focus { outline: 2px solid var(--green); outline-offset: 2px; }

@media (max-width: 760px) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
  .header-inner .brand { grid-column: 1; grid-row: 1; }
  .header-inner .language-switcher { grid-column: 2; grid-row: 1; }
  .header-inner nav { grid-column: 1; grid-row: 2; gap: 16px; width: auto; }
  .header-inner .account { grid-column: 2; grid-row: 2; justify-self: end; }
  .header-inner .header-caption { grid-column: 1 / -1; grid-row: 2; justify-self: end; max-width: none; }
  select { font-size: 16px; }
  .language-switcher button { min-width: 44px; min-height: 44px; }
}

@media (pointer: coarse) {
  select { font-size: 16px; }
  .language-switcher button { min-width: 44px; min-height: 44px; }
}

.clone-quote { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 7px; border-radius: 8px; color: var(--green); vertical-align: middle; }
.clone-quote:hover { background: var(--soft); }
.clone-quote:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }