/* ==========================================================================
   SajibUp Free Invoice Generator
   assets/css/invoice.css
   Standalone stylesheet - does not depend on the main site's Bootstrap stack.
   ========================================================================== */

:root{
  --brand:      #28E98C;
  --brand-ink:  #0B3D26;   /* readable text on the brand green */
  --brand-dark: #16C773;   /* hover state */
  --ink:        #1C1D20;
  --ink-soft:   #4A4D52;
  --muted:      #6B7076;
  --line:       #E2E5E9;
  --line-soft:  #EEF0F3;
  --bg:         #F6F7F9;
  --surface:    #FFFFFF;
  --danger:     #C0362C;
  --danger-bg:  #FDECEA;
  --ok:         #1F7A4D;
  --ok-bg:      #E8F7EF;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(28,29,32,.05), 0 8px 24px rgba(28,29,32,.06);
  --focus: 0 0 0 3px rgba(40,233,140,.45);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Manrope", var(--font);
}

*,*::before,*::after{ box-sizing:border-box; }

/* The UA rule for [hidden] is display:none, but any class that sets a display
   value (.btn is display:inline-flex) outranks it. This keeps `hidden` honest
   for every element on the page. */
[hidden]{ display:none!important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

main{ flex:1 0 auto; }
.site-foot{ flex:none; }

h1,h2,h3{ font-family:var(--font-head); color:var(--ink); margin:0 0 .5em; line-height:1.25; }
p{ margin:0 0 1em; }
a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--brand-dark); }

.wrap{ max-width:1380px; margin:0 auto; padding:0 20px; }

.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; border:0!important;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip-link{
  position:absolute; left:0; top:-60px; z-index:100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 var(--r) 0;
  text-decoration:none;
}
.skip-link:focus{ top:0; }

/* --------------------------------------------------------------- top bar */
.site-bar{
  background:var(--ink);
  color:#fff;
  position:sticky; top:0; z-index:30;
}
.bar-inner{
  display:flex; align-items:center; gap:16px;
  min-height:62px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px;
}
.brand{ display:inline-flex; align-items:center; gap:9px; color:#fff; text-decoration:none; font-family:var(--font-head); font-weight:800; }
.brand-mark{
  width:28px; height:28px; border-radius:8px; background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center; font-size:15px; font-weight:800;
}
.bar-tag{
  margin:0; color:#A9AEB4; font-size:13.5px;
  padding-left:16px; border-left:1px solid #34363B;
}
.bar-nav{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* ---------------------------------------------------------------- buttons */
.btn{
  font:inherit; font-weight:600; font-size:14px;
  padding:9px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; background:none; color:inherit; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .06s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:var(--focus); }

.btn-primary{ background:var(--brand); color:var(--brand-ink); }
.btn-primary:hover{ background:var(--brand-dark); }
/* Default ghost sits on a light surface. The dark top bar overrides it below,
   so a ghost button dropped anywhere new is readable without extra rules. */
.btn-ghost{ border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--line-soft); }
.site-bar .btn-ghost{ border-color:#43464C; color:#fff; }
.site-bar .btn-ghost:hover{ background:#2A2C31; }
.history-actions .btn-ghost:hover{ background:var(--danger-bg); color:var(--danger); border-color:#F2C9C4; }
.btn-soft{ background:var(--line-soft); color:var(--ink); border-color:var(--line); }
.btn-soft:hover{ background:#E4E7EB; }
.btn-lg{ padding:13px 22px; font-size:15px; }
.btn-sm{ padding:6px 11px; font-size:13px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* -------------------------------------------------------------- intro/tabs */
.intro{ padding:34px 0 20px; max-width:62ch; }
.intro h1{ font-size:clamp(28px,4vw,38px); letter-spacing:-.02em; margin-bottom:.35em; }
.intro p{ color:var(--ink-soft); font-size:16px; margin:0; }

.pane-switch{ display:none; gap:6px; background:#E7EAEE; padding:4px; border-radius:var(--r); margin:0 0 16px; }
.pane-switch button{
  flex:1; font:inherit; font-weight:600; font-size:14px; padding:9px;
  border:0; background:none; border-radius:var(--r-sm); cursor:pointer; color:var(--ink-soft);
}
.pane-switch button.is-active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.pane-switch button:focus-visible{ outline:none; box-shadow:var(--focus); }

/* ---------------------------------------------------------------- layout */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;
  align-items:stretch;   /* lets the preview column be tall enough to stick */
  padding-bottom:56px;
}

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
  margin:0 0 18px;
  box-shadow:var(--shadow);
}
.card h2{
  font-size:15px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:700; margin:0 0 18px;
}

/* ------------------------------------------------------------------ fields */
.grid{ display:grid; gap:14px 16px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.span-2{ grid-column:1 / -1; }

.field{ display:flex; flex-direction:column; min-width:0; }
.field label,.label-like{
  font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;
}
.opt{ font-weight:400; color:var(--muted); }
.hint{ font-size:12.5px; color:var(--muted); margin:6px 0 0; }

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=file],select,textarea{
  font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:10px 12px;
  width:100%;
  min-width:0;
  transition:border-color .14s ease, box-shadow .14s ease;
}
textarea{ resize:vertical; line-height:1.5; }
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B7076' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:32px;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand-dark); box-shadow:var(--focus);
}
input[aria-invalid="true"]{ border-color:var(--danger); }
input::placeholder,textarea::placeholder{ color:#A4A9AF; }

.combo{ display:flex; gap:8px; }
.combo input{ flex:1 1 auto; }
.combo select{ flex:0 0 96px; width:96px; }

/* ------------------------------------------------------------------- logo */
.logo-field{ margin-bottom:18px; }
.logo-row{ display:flex; gap:16px; align-items:flex-start; }
.logo-drop{
  width:104px; height:104px; flex:none;
  border:1.5px dashed var(--line); border-radius:var(--r);
  display:grid; place-items:center; overflow:hidden; background:var(--line-soft);
}
.logo-drop img{ max-width:100%; max-height:100%; object-fit:contain; }
.logo-placeholder{ font-size:12.5px; color:var(--muted); }
.logo-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.logo-actions .hint{ margin:0; }

/* ------------------------------------------------------------------ items */
.items-head,.item-row{
  display:grid;
  grid-template-columns:1fr 78px 108px 112px 36px;
  gap:8px; align-items:center;
}
.items-head{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:0 0 8px; border-bottom:1px solid var(--line-soft); margin-bottom:10px;
}
.items-head span:nth-child(2),
.items-head span:nth-child(3),
.items-head span:nth-child(4){ text-align:right; }

.item-row{ padding:6px 0; }
.item-row input[type=number]{ text-align:right; }
.item-amount{
  text-align:right; font-variant-numeric:tabular-nums; font-weight:600;
  font-size:14.5px; padding:10px 2px; color:var(--ink); overflow:hidden; text-overflow:ellipsis;
}
.item-del{
  width:32px; height:32px; border-radius:var(--r-sm); border:1px solid transparent;
  background:none; color:var(--muted); cursor:pointer; font-size:19px; line-height:1;
  display:grid; place-items:center;
}
.item-del:hover{ background:var(--danger-bg); color:var(--danger); }
.item-del:focus-visible{ outline:none; box-shadow:var(--focus); }
.btn-add{ margin-top:12px; }

.totals-readout{ justify-content:flex-end; }
.balance-readout{
  font-family:var(--font-head); font-weight:800; font-size:25px;
  font-variant-numeric:tabular-nums; color:var(--ink);
}

.form-actions{ display:flex; gap:10px; flex-wrap:wrap; padding:4px 0 8px; }

/* ---------------------------------------------------------------- preview */
.preview-pane{ min-width:0; }
.preview-sticky{ position:sticky; top:86px; }
.preview-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.preview-head h2{
  font-size:15px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0;
}
.preview-note{ font-size:12.5px; color:var(--muted); }

.page-scaler{ overflow:hidden; }

/* A4 at 96dpi = 794 x 1123 CSS px; scaled to fit by JS */
.invoice-page{
  width:794px; min-height:1123px;
  transform-origin:top left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:var(--shadow);
  padding:56px 56px 48px;
  font-size:13px; line-height:1.5; color:#2A2C31;
  display:flex; flex-direction:column;
}
.invoice-page.paper-letter{ width:816px; min-height:1056px; }

.ip-top{ display:flex; justify-content:space-between; gap:28px; align-items:flex-start; }
.ip-brand{ display:flex; gap:16px; align-items:flex-start; min-width:0; }
.ip-brand img{ max-width:130px; max-height:74px; object-fit:contain; }
.ip-from-name{ font-family:var(--font-head); font-weight:800; font-size:19px; color:var(--ink); margin:0 0 4px; }
.ip-lines{ margin:0; white-space:pre-line; color:#5C6066; font-size:12.5px; }
.ip-title-block{ text-align:right; flex:none; }
.ip-title{
  font-family:var(--font-head); font-weight:800; font-size:31px; letter-spacing:.02em;
  margin:0; color:var(--ink); text-transform:uppercase;
}
.ip-number{ margin:2px 0 0; color:#5C6066; font-size:13px; }

.ip-meta{ display:flex; justify-content:space-between; gap:32px; margin-top:34px; }
.ip-label{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:#8A8F95; margin:0 0 6px;
}
.ip-to-name{ font-weight:700; font-size:14px; margin:0 0 3px; color:var(--ink); }
.ip-dates{ margin:0; flex:none; min-width:210px; }
.ip-dates div{ display:flex; justify-content:space-between; gap:20px; padding:3px 0; }
.ip-dates dt{ color:#8A8F95; font-size:12.5px; }
.ip-dates dd{ margin:0; font-weight:600; font-size:12.5px; font-variant-numeric:tabular-nums; }

.ip-table{ width:100%; border-collapse:collapse; margin-top:28px; }
.ip-table th{
  text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:#fff; background:var(--ink); padding:9px 12px;
}
.ip-table th.num,.ip-table td.num{ text-align:right; }
.ip-table th:first-child,.ip-table td:first-child{ padding-left:12px; }
.ip-table td{
  padding:11px 12px; border-bottom:1px solid #EAECEF; vertical-align:top;
  font-size:12.5px; font-variant-numeric:tabular-nums;
}
.ip-table td:first-child{ white-space:pre-line; font-variant-numeric:normal; }
.ip-table .empty-row td{ color:#A4A9AF; text-align:center; font-style:italic; }

.ip-sums{ display:flex; justify-content:flex-end; margin-top:18px; }
.ip-sums dl{ margin:0; min-width:290px; }
.ip-sums div{ display:flex; justify-content:space-between; gap:24px; padding:5px 0; font-size:12.5px; }
.ip-sums dt{ color:#5C6066; }
.ip-sums dd{ margin:0; font-variant-numeric:tabular-nums; font-weight:600; }
.ip-sums .sum-total{
  border-top:1.5px solid var(--ink); margin-top:7px; padding-top:10px;
}
.ip-sums .sum-total dt{ font-weight:700; color:var(--ink); font-size:14px; }
.ip-sums .sum-total dd{ font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--ink); }

.ip-foot{ margin-top:auto; padding-top:34px; }
.ip-foot .ip-block{ margin-bottom:16px; }
.ip-foot .ip-block p{ margin:0; white-space:pre-line; font-size:12px; color:#5C6066; }
.ip-foot .ip-pay{ background:#F6F7F9; border-left:3px solid var(--brand); padding:12px 14px; border-radius:0 4px 4px 0; }

/* ------------------------------------------------------------ SEO content */
.content-block{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px; margin:0 0 56px; max-width:78ch;
}
.content-block h2{ font-size:22px; margin-top:34px; }
.content-block h2:first-child{ margin-top:0; }
.content-block h3{ font-size:16px; margin-top:22px; }
.content-block li{ margin-bottom:9px; }
.content-block p,.content-block li{ color:var(--ink-soft); }
.content-cta{ margin-top:30px; padding-top:20px; border-top:1px solid var(--line-soft); }

/* ------------------------------------------------------------ policy table */
.policy-table{
  width:100%; border-collapse:collapse; margin:0 0 26px; font-size:14px;
}
.policy-table th{
  text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
  padding:0 14px 9px 0; border-bottom:1.5px solid var(--line);
}
.policy-table td{
  padding:12px 14px 12px 0; border-bottom:1px solid var(--line-soft);
  color:var(--ink-soft); vertical-align:top;
}
.policy-table td:last-child,.policy-table th:last-child{ padding-right:0; }
.content-block code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; background:var(--line-soft); padding:2px 5px; border-radius:4px;
}
@media (max-width:640px){
  .policy-table,.policy-table tbody,.policy-table tr,.policy-table td{ display:block; width:100%; }
  .policy-table thead{ display:none; }
  .policy-table tr{ border-bottom:1px solid var(--line); padding:12px 0; }
  .policy-table td{ border:0; padding:2px 0; }
  .policy-table td:first-child{ font-weight:600; color:var(--ink); }
}

/* ----------------------------------------------------------------- footer */
.site-foot{ background:var(--ink); color:#A9AEB4; padding:26px 0; font-size:13.5px; }
.site-foot p{ margin:0 0 5px; }
.site-foot .foot-note{ font-size:12.5px; color:#7E848B; }
.site-foot a{ color:#fff; text-decoration:none; }
.site-foot a:hover{ color:var(--brand); text-decoration:underline; }

/* ------------------------------------------------- success / history views */
.result-view{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px; margin:8px 0 40px; max-width:860px; box-shadow:var(--shadow);
}
.result-view h1{ font-size:clamp(24px,3.2vw,31px); letter-spacing:-.015em; margin:0 0 20px; }
.result-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.result-head h1{ margin-bottom:6px; }
.result-sub{ color:var(--ink-soft); font-size:14px; margin:0 0 22px; }
.result-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }

.notice{
  display:flex; gap:13px; align-items:flex-start;
  border-radius:var(--r); padding:16px 18px;
}
.notice p{ margin:0; }
.notice-icon{ flex:none; line-height:0; margin-top:2px; }
.notice-ok{ background:var(--ok-bg); border:1px solid #BFE8D2; color:var(--ok); }
.notice-ok .notice-icon{ color:var(--ok); }
.notice-ok p{ color:#15603C; font-size:14.5px; }
.notice-sub{ margin-top:8px!important; font-size:13.5px; color:#3E6B54; }

/* ----------------------------------------------------------- history list */
.history-list{ display:flex; flex-direction:column; gap:10px; }

.history-item{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  transition:border-color .14s ease, background .14s ease;
}
.history-item:hover{ border-color:#CBD1D8; background:#FCFCFD; }
.history-main{ flex:1 1 260px; min-width:0; }
.history-title{
  font-family:var(--font-head); font-weight:700; font-size:15.5px; margin:0; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.history-meta{
  margin:0; font-size:13px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.history-amount{
  font-family:var(--font-head); font-weight:800; font-size:17px;
  font-variant-numeric:tabular-nums; color:var(--ink); flex:none;
}
.history-actions{ display:flex; gap:7px; flex:none; flex-wrap:wrap; }

.history-empty{
  border:1.5px dashed var(--line); border-radius:var(--r);
  padding:36px 22px; text-align:center; color:var(--muted);
}
.history-empty p{ margin:0 0 4px; }
.history-empty .he-sub{ font-size:13.5px; }

@media (max-width:640px){
  .result-view{ padding:22px 18px; }
  .history-item{ gap:10px; }
  .history-amount{ margin-left:auto; }
  .history-actions{ width:100%; }
  .history-actions .btn{ flex:1 1 calc(50% - 4px); }
  .summary-bar{ gap:8px; }
  .stat{ flex:1 1 calc(50% - 4px); padding:12px 13px; }
  .stat-wide{ flex:1 1 100%; }
  .filter-tabs{ width:100%; }
  .filter-tabs button{ flex:1; }
  .backup-box{ padding:18px 16px; }
  .backup-actions .btn{ flex:1 1 100%; }
}

/* --------------------------------------------------- saved profile notice */
.saved-note{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted);
}
.linkish{
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.linkish:hover{ color:var(--danger); }
.linkish:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:3px; }

/* --------------------------------------------------------- summary + tabs */
.result-wide{ max-width:980px; }

.summary-bar{
  display:flex; gap:12px; flex-wrap:wrap;
  margin:0 0 22px;
}
.stat{
  flex:1 1 130px; min-width:0;
  border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:#FCFCFD;
}
.stat-wide{ flex:2 1 220px; }
.stat-value{
  margin:0 0 2px; font-family:var(--font-head); font-weight:800; font-size:20px;
  font-variant-numeric:tabular-nums; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stat-label{
  margin:0; font-size:11.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
}
.stat-alert{ border-color:#F2C9C4; background:var(--danger-bg); }
.stat-alert .stat-value{ color:var(--danger); }
.stat-alert .stat-label{ color:var(--danger); }

.filter-tabs{ display:flex; gap:6px; background:#EEF0F3; padding:4px; border-radius:var(--r); margin:0 0 16px; width:fit-content; }
.filter-tabs button{
  font:inherit; font-weight:600; font-size:13.5px; padding:7px 16px;
  border:0; background:none; border-radius:var(--r-sm); cursor:pointer; color:var(--ink-soft);
}
.filter-tabs button.is-active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.filter-tabs button:focus-visible{ outline:none; box-shadow:var(--focus); }

/* ------------------------------------------------------------------ badges */
.badge{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:20px; flex:none; line-height:1.5;
}
.badge-unpaid{ background:#EEF0F3; color:var(--ink-soft); }
.badge-paid{ background:var(--ok-bg); color:var(--ok); }
.badge-overdue{ background:var(--danger-bg); color:var(--danger); }

.history-title-row{ display:flex; align-items:center; gap:9px; margin:0 0 3px; min-width:0; }
.history-item.is-paid{ background:#FCFDFC; }
.history-item.is-paid .history-amount{ color:var(--muted); }

.btn-mark{ background:var(--ok-bg); color:var(--ok); border-color:#BFE8D2; }
.btn-mark:hover{ background:#D8F1E4; }
.btn-danger:hover{ background:var(--danger-bg); color:var(--danger); border-color:#F2C9C4; }

/* ------------------------------------------------------------- backup box */
.backup-box{
  margin-top:26px; padding:22px;
  border:1px solid var(--line); border-radius:var(--r); background:#FBFCFD;
}
.backup-box h2{ font-size:16px; margin:0 0 8px; }
.backup-box p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; max-width:62ch; }
.backup-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ------------------------------------------------------------------ toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--r);
  font-size:14px; z-index:80; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:90vw;
}
.toast[hidden]{ display:none; }
.toast.is-error{ background:var(--danger); }

/* ------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .pane-switch{ display:flex; }
  .preview-sticky{ position:static; }
  .form-pane[hidden],.preview-pane[hidden]{ display:none; }
}
@media (max-width:640px){
  .bar-tag{ display:none; }
  .bar-nav .btn{ padding:8px 12px; font-size:13px; }
  #btnReset,#btnPrint,#btnHistory{ display:none; }   /* all three live in the form actions on small screens */
  .grid-2{ grid-template-columns:minmax(0,1fr); }
  .card{ padding:18px 16px; }
  .intro{ padding:24px 0 16px; }
  .content-block{ padding:24px 18px; }
  .items-head{ display:none; }
  .item-row{
    grid-template-columns:1fr 1fr 40px;
    grid-template-areas:"desc desc del" "qty rate rate" "amt amt amt";
    gap:8px; padding:14px 0; border-bottom:1px solid var(--line-soft);
  }
  .item-row .i-desc{ grid-area:desc; }
  .item-row .i-qty{ grid-area:qty; }
  .item-row .i-rate{ grid-area:rate; }
  .item-row .item-amount{ grid-area:amt; padding:2px 0 0; }
  .item-row .item-del{ grid-area:del; justify-self:end; }
  .item-row input[type=number]{ text-align:left; }
  .item-amount::before{ content:"Amount: "; color:var(--muted); font-weight:500; }
}

/* ------------------------------------------------------------------ print */
@media print{
  @page{ margin:0; }
  html,body{ background:#fff; }
  .site-bar,.site-foot,.intro,.pane-switch,.form-pane,.preview-head,
  .content-block,.toast,.skip-link,.result-view{ display:none!important; }
  .wrap{ max-width:none; padding:0; }
  .layout{ display:block; padding:0; }
  .preview-pane,.preview-sticky,.page-scaler{ position:static; overflow:visible; }
  /* Ctrl/Cmd+P from the success or history screen still prints the invoice. */
  #builderView[hidden],.preview-pane[hidden]{ display:block!important; }
  .invoice-page{
    transform:none!important; width:auto!important; min-height:0;
    border:0; border-radius:0; box-shadow:none;
    padding:14mm 15mm;
  }
  .ip-table{ page-break-inside:auto; }
  .ip-table tr{ page-break-inside:avoid; }
  .ip-table thead{ display:table-header-group; }
  .ip-sums,.ip-foot{ page-break-inside:avoid; }
  .ip-table th{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .ip-foot .ip-pay{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

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