/* Kaiwhai Quotes — same warm safari/earthy theme as the Kaiwhai Dashboard and
   Kaiwhai Proposals: cream background, bark sidebar, gold accents, white cards. */

@font-face {
  font-family: "Geist";
  src: url("assets/geist.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --cream: #faf6ef;
  --sand: #f3ece0;
  --sand-deep: #e8ddc9;
  --bark: #5b4636;
  --bark-light: #6f5644;
  --espresso: #3a2c20;
  --gold: #c9a36a;
  --gold-deep: #b08d52;
  --terracotta: #b5683e;
  --sage: #7c8466;
  --muted: #8a7a68;
  --line: #e3d8c5;
  --topbar-h: 3.4rem;
}

* { box-sizing: border-box; }

/* the sticky topbar + tab strip must not cover scroll targets
   (scrollIntoView, focus scrolls) */
html { scroll-padding-top: calc(var(--topbar-h) + 3.1rem); }

/* the hidden attribute must always win, even over display rules below */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--espresso);
  font-size: 16px;
  line-height: 1.55;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sand-deep); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

h1, h2, h3 { font-weight: 600; color: var(--bark); }
h2 { font-size: 1.5rem; margin: 0 0 0.2em; }
h3 { font-size: 1.1rem; margin: 1.4em 0 0.6em; }
.hint { color: var(--muted); margin-top: 0.2em; font-size: 0.95rem; }
.hint.error { color: var(--terracotta); }
.sec-hint { font-weight: 400; font-size: 0.82rem; color: var(--muted); margin-left: 0.4rem; }

/* ---------- auth ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--cream);
}
.auth-card {
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 10px 34px rgba(58, 44, 32, 0.08);
  border-radius: 16px;
  padding: 2.2rem;
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.auth-logo { width: 104px; height: auto; }
.auth-card h1 { font-size: 1.4rem; }
.auth-card form { text-align: left; }

/* ---------- app layout: full-height bark sidebar, section bar above the content ---------- */
#app { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* the section bar sits to the right of the sidebar, above the content:
   pick a section, the sidebar shows that section's pages */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--bark);
  border-bottom: 1px solid var(--bark-light);
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* six sections: on a narrow window the bar scrolls sideways rather than wrapping */
.topbar-nav {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav a {
  color: var(--sand);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.42rem 1.15rem;
  border-radius: 999px;
  transition: background-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-nav a:hover { background: var(--bark-light); }
.topbar-nav a.active { background: var(--gold); color: var(--espresso); font-weight: 500; }
@media (max-width: 760px) {
  .topbar { padding: 0 0.6rem; }
  .topbar-nav a { padding: 0.42rem 0.75rem; font-size: 0.9rem; }
}

/* ---------- open tabs ----------
   A strip of the pages you have on the go, directly under the section bar. */
.tabstrip {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  padding: 0.3rem 0.7rem 0;
  position: sticky;
  top: var(--topbar-h);
  z-index: 40;
}
.tabstrip-tabs {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabstrip-tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--sand-deep);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
}
.tab.active { background: var(--cream); }
.tab-face {
  font: inherit;
  font-size: 0.86rem;
  color: var(--bark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.42rem 0.15rem 0.42rem 0.8rem;
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab.active .tab-face { font-weight: 600; }
.tab-x {
  font: inherit;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.6rem 0.35rem 0.35rem;
}
.tab-x:hover { color: var(--terracotta); }
.tab-new {
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--bark);
  background: none;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  cursor: pointer;
  padding: 0 0.75rem;
  flex-shrink: 0;
}
.tab-new:hover { background: var(--sand-deep); }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--bark);
  color: var(--sand);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.4rem 1.25rem;
}
.sidebar-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--cream);
  padding: 2px;
}
.brand-name { font-weight: 600; color: var(--cream); line-height: 1.2; }
.brand-sub { font-size: 0.78rem; color: var(--gold); }

/* the app-wide pages only — every working page lives in the top bar */
.sidebar-nav { flex: 1; padding: 0 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  color: var(--sand);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background-color 0.15s;
}
.sidebar-nav a svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-nav a:hover { background: var(--bark-light); }
.sidebar-nav a.active { background: var(--gold); color: var(--espresso); font-weight: 500; }

.sidebar-foot {
  border-top: 1px solid var(--bark-light);
  padding: 1rem 1.25rem;
  font-size: 0.8rem;
}
#user-email { color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#signout-btn {
  margin-top: 0.5rem;
  background: none;
  border: none;
  color: var(--sand);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
#signout-btn:hover { color: var(--cream); text-decoration: underline; }

main { flex: 1; max-width: 980px; padding: 2rem 2.4rem; min-width: 0; }
/* The quotes & confirmations views keep their original wider column;
   the proposals views keep their original 980px. body[data-view] is set by route(). */
body[data-view="quotes"] main, body[data-view="quote"] main, body[data-view="newquote"] main,
body[data-view="pricelists"] main, body[data-view="confirmations"] main,
body[data-view="confirmation"] main, body[data-view="newconf"] main,
body[data-view="templates"] main { max-width: 1040px; }
body[data-view="home"] main { max-width: 1240px; }

@media (max-width: 820px) {
  #app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .sidebar-nav { flex-direction: row; padding-bottom: 0.75rem; }
  .sidebar-nav a { padding: 0.5rem 0.7rem; }
  .sidebar-brand { padding-bottom: 0.8rem; }
  .sidebar-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.25rem; }
  .sidebar-foot #signout-btn { margin-top: 0; }
  main { padding: 1.2rem; }
}

/* ---------- forms ---------- */
label { display: block; font-weight: 500; margin: 1rem 0 0.3rem; color: var(--bark); }
input, textarea, select {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--espresso);
}
input::placeholder, textarea::placeholder { color: #b3a48f; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--gold);
  outline-offset: -1px;
  border-color: var(--gold);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .two-col, .three-col { grid-template-columns: 1fr; } }

.big-form, .upload-card {
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 12px;
  padding: 1.5rem;
}
.upload-card { margin-bottom: 1.6rem; }
.form-message { min-height: 1.4em; font-weight: 500; }
.form-message.error { color: var(--terracotta); }
.form-message.ok { color: var(--sage); }

/* ---------- buttons ---------- */
.btn {
  font: inherit;
  font-weight: 500;
  font-size: 0.92rem;
  border: 1px solid var(--line);
  background: var(--sand);
  color: var(--bark);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.btn:hover { background: var(--sand-deep); }
.btn:disabled { opacity: 0.55; cursor: wait; }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.btn-primary:hover { background: var(--gold-deep); }
.btn-big { width: 100%; padding: 0.85rem; font-size: 1rem; margin-top: 1.3rem; }
.btn-small { padding: 0.3rem 0.8rem; font-size: 0.82rem; }
.btn-danger { color: var(--terracotta); }
.btn-link {
  border: none;
  background: none;
  color: var(--gold-deep);
  text-decoration: underline;
  padding: 0.4rem 0;
  border-radius: 0;
}
.btn-link:hover { background: none; color: var(--bark); }
/* a link that looks like a button (so Cmd-click still opens it in a new tab) */
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.list-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.9rem 0 1.1rem; }

/* ---------- cards / lists ---------- */
.card-list { display: flex; flex-direction: column; gap: 0.75rem; }
.card {
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  transition: box-shadow 0.15s;
}
.card.clickable { cursor: pointer; }
.card.clickable:hover { box-shadow: 0 0 0 1px var(--gold); }
.card-main { flex: 1; min-width: 200px; }
.card-title { font-weight: 600; color: var(--bark); }
.card-sub { color: var(--muted); font-size: 0.86rem; }
.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.card-amount { font-weight: 600; color: var(--bark); white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge.draft { background: var(--sand); color: var(--muted); }
.badge.sent { background: rgba(201, 163, 106, 0.28); color: #7a5f33; }
.badge.accepted { background: rgba(124, 132, 102, 0.22); color: var(--sage); }
.badge.declined { background: rgba(181, 104, 62, 0.16); color: var(--terracotta); }
.badge.confirmed { background: rgba(124, 132, 102, 0.22); color: var(--sage); }
.badge.cancelled { background: rgba(181, 104, 62, 0.16); color: var(--terracotta); }

/* ---------- quote builder ---------- */
.pick-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.pick-list.tall { max-height: 340px; overflow-y: auto; }
.pick-list { background: #fff; }
.pick-search { margin-bottom: 0.6rem; }
.pick-item { border-bottom: 1px solid var(--line); }
.pick-item:last-child { border-bottom: none; }
.pick-item.picked { background: #fdf8ec; }
.pick-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0.9rem;
}
.pick-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-price { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.pick-price.changed { color: var(--bark); font-weight: 600; }
.pick-line-total { min-width: 90px; text-align: right; font-weight: 600; color: var(--bark); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The per-line editor, revealed under a row once it is ticked: re-price,
   rename, or discount that line for this quote only. */
.pick-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  padding: 0 0.9rem 0.55rem 0.9rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.pick-extra label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; font-weight: 400; font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.pick-extra input, .pick-extra select { padding: 0.25rem 0.4rem; font-size: 0.85rem; border-radius: 6px; width: auto; }
.pick-extra input[type="checkbox"] { width: auto; }
.pick-extra .rate-in { width: 6.2rem; }
.pick-extra .name-in { width: 11rem; }
.pick-was { font-style: italic; }
.link-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--gold-deep);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.link-btn:hover { color: var(--bark); }

/* discount / extra-charge widget, used per line and for the whole quote */
.adj-value { width: 5rem; }
.adj-amount { font-weight: 600; color: var(--bark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-adjust {
  display: grid;
  grid-template-columns: 1fr 6.5rem max-content max-content;
  gap: 0.6rem;
  align-items: center;
}
.quote-adjust input, .quote-adjust select { margin: 0; }
@media (max-width: 700px) { .quote-adjust { grid-template-columns: 1fr max-content; } }
.checkline { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem; font-weight: 400; }
.checkline input { width: auto; margin: 0; }

.qty {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.qty button {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--sand);
  color: var(--bark);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.qty button:hover { background: var(--sand-deep); }
.qty input {
  width: 3.2rem;
  text-align: center;
  padding: 0.3rem 0.2rem;
  border-radius: 8px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.custom-row {
  display: grid;
  grid-template-columns: 1fr 110px 70px max-content max-content max-content;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.custom-row label { display: inline; margin: 0; font-weight: 400; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.custom-adj { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.custom-adj select { width: auto; margin: 0; }
@media (max-width: 700px) {
  .custom-row { grid-template-columns: 1fr 100px; }
  .custom-row > * { min-width: 0; }
  .custom-row label { white-space: normal; }
  /* the discount control needs the full width once the row folds in two */
  .custom-adj { grid-column: 1 / -1; flex-wrap: wrap; }
}

.total-bar {
  position: sticky;
  bottom: 0;
  margin-top: 1.4rem;
  background: var(--bark);
  color: var(--cream);
  border-radius: 12px;
  padding: 0.9rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 8px 28px rgba(58, 44, 32, 0.3);
}
.total-label { color: var(--gold); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.9rem; }
.total-amount { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.total-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.6rem; }
.total-was { font-size: 1.05rem; text-decoration: line-through; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* ---------- price list review table ---------- */
.item-row {
  display: grid;
  grid-template-columns: 130px 1fr 120px max-content max-content;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.item-row select, .item-row input { padding: 0.4rem 0.6rem; font-size: 0.92rem; }
.item-row .perday-label { display: flex; align-items: center; gap: 0.3rem; margin: 0; font-weight: 400; font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.item-row .perday-label input { width: auto; }
.item-del {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
}
.item-del:hover { color: var(--terracotta); background: var(--sand); }
.item-sec-head { margin: 1rem 0 0.4rem; font-weight: 600; color: var(--bark); font-size: 0.95rem; }
.review-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 700px) { .item-row { grid-template-columns: 110px 1fr 90px max-content max-content; } }

/* ---------- detail view ---------- */
.detail-card {
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 0.9rem;
}
.detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.3rem; margin: 1rem 0; }
.detail-grid dt { font-weight: 600; color: var(--bark); }
.detail-grid dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.status-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.9rem 0; }
.history { border-top: 1px solid var(--line); margin-top: 1.3rem; padding-top: 0.9rem; }
.history ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.history li { color: var(--muted); font-size: 0.88rem; margin: 0.25rem 0; }

.lines-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.lines-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  padding: 0.4rem 0.5rem;
}
.lines-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); }
.lines-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lines-table .sec td { font-weight: 600; color: var(--bark); background: var(--sand); }
.lines-table .grand td { font-weight: 700; font-size: 1.05rem; border-top: 2px solid var(--bark); border-bottom: none; }
.lines-table .note td { color: var(--muted); border-bottom: none; }
.lines-table .note.strong td { color: var(--espresso); font-weight: 600; border-top: 1px solid var(--line); }
.lines-table .note .indent { padding-left: 1.6rem; }
.lines-table .savings td { color: var(--gold-deep); font-style: italic; border-bottom: none; }

/* ---------- toast ---------- */
#toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--espresso);
  color: var(--cream);
  padding: 0.7rem 1.3rem;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(58, 44, 32, 0.3);
  z-index: 100;
  max-width: 90vw;
}

details summary { cursor: pointer; color: var(--muted); margin: 1.2rem 0 0.6rem; }

/* ---------- dictation (speech to text) ---------- */
.dict-wrap { position: relative; display: block; }
.dict-wrap input, .dict-wrap textarea { padding-right: 2.5rem; }
.dict-btn {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  padding: 0.28rem;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dict-area .dict-btn { top: 0.55rem; transform: none; }
.dict-btn svg { width: 100%; height: 100%; }
.dict-btn:hover { color: var(--bark); background: var(--sand); }
.dict-wrap.listening .dict-btn { color: var(--terracotta); animation: dict-pulse 1.2s ease-in-out infinite; }
@keyframes dict-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.dict-ghost { display: none; }
.dict-wrap.listening .dict-ghost {
  display: block;
  position: absolute;
  inset: 0;
  padding: 0.65rem 2.5rem 0.65rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
}
.dict-wrap:not(.dict-area).listening .dict-ghost { white-space: pre; overflow-wrap: normal; }
.dict-wrap.listening input, .dict-wrap.listening textarea { color: transparent; caret-color: var(--espresso); }
.dict-done { color: var(--espresso); }
.dict-interim { color: #bdad93; }

/* ---------- show/hide password ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 2.6rem; }
.pw-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  padding: 0.3rem;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-toggle svg { width: 100%; height: 100%; }
.pw-toggle:hover { color: var(--bark); background: var(--sand); }

/* ---------- the printed quote (US Letter, landscape) ---------- */
#print-root { background: #fff; }
/* Screen and print must agree on the content box, or the sheet that paginates
   correctly on screen breaks in the wrong place on paper. On screen the sheet is
   the whole 279.4 x 215.9mm with 14/16mm padding; in print @page takes a 6mm
   margin and the padding drops to 8/10mm. Both leave 247.4 x 187.9mm of content. */
.q-page {
  width: 279.4mm;
  min-height: 215.9mm;
  padding: 14mm 16mm;
  margin: 0 auto;
  background: #fff;
  color: #3a2c20;
  font-size: 11pt;
  line-height: 1.5;
  position: relative;
  display: flex;
  flex-direction: column;
}
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 8mm; margin-bottom: 8mm; }
/* 34mm was a twelfth of the A4 page's height; on the landscape sheet's 188mm of
   content that same block ate nearly a fifth of it. 26mm restores the proportion
   the letterhead was drawn at. */
.q-head img { width: 26mm; height: auto; }
.q-title { text-align: right; }
.q-title .q-doc { font-size: 20pt; font-weight: 700; color: #5b4636; letter-spacing: 0.04em; }
.q-title .q-tag { font-size: 9pt; color: #b08d52; font-style: italic; }
/* Two label/value pairs per row: the landscape sheet is 69mm wider than the A4
   page this box was drawn for, and running the pairs down a single column threw
   that width away and cost height the short sheet cannot spare. */
.q-meta {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  gap: 1mm 8mm;
  background: #faf6ef;
  border: 1px solid #e3d8c5;
  border-radius: 3mm;
  padding: 5mm 7mm;
  margin-bottom: 7mm;
}
.q-meta dt { font-weight: 600; color: #5b4636; }
.q-meta dd { margin: 0; }
.q-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.q-table th {
  text-align: left;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a7a68;
  border-bottom: 1.5pt solid #5b4636;
  padding: 1.6mm 2mm;
}
.q-table td { padding: 1.6mm 2mm; border-bottom: 0.5pt solid #e3d8c5; }
.q-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-table .sec td {
  font-weight: 700;
  color: #5b4636;
  background: #f3ece0;
  border-bottom: none;
  padding-top: 3mm;
}
.q-table .grand td {
  font-weight: 700;
  font-size: 12pt;
  color: #3a2c20;
  border-top: 1.5pt solid #5b4636;
  border-bottom: none;
  padding-top: 3mm;
}
.q-table .note td { color: #8a7a68; border-bottom: none; }
.q-table .note.strong td { color: #3a2c20; font-weight: 600; border-top: 0.5pt solid #e3d8c5; }
.q-table .note .indent { padding-left: 8mm; }
.q-table .savings td { color: #b08d52; font-style: italic; border-bottom: none; }
.q-note { margin-top: 5mm; font-size: 9pt; color: #8a7a68; white-space: pre-wrap; }
.q-foot { margin-top: auto; padding-top: 6mm; text-align: center; font-size: 9pt; color: #8a7a68; }
.q-foot .q-tagline { color: #b08d52; font-style: italic; margin-top: 1mm; }

.q-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-top: 4mm; }
.q-inc h3 {
  font-size: 12pt;
  color: #5b4636;
  margin: 0 0 3mm;
  padding-bottom: 1.5mm;
  border-bottom: 1.5pt solid #c9a36a;
}
.q-inc ul { margin: 0; padding-left: 5mm; }
.q-inc li { margin: 1.6mm 0; font-size: 10pt; }
.q-contact {
  margin-top: 8mm;
  background: #5b4636;
  color: #faf6ef;
  border-radius: 3mm;
  padding: 5mm 7mm;
  text-align: center;
  font-size: 10pt;
}
.q-contact strong { color: #c9a36a; }

/* ---------- confirmation document pages ---------- */
.c-date { color: #8a7a68; font-size: 9.5pt; margin-bottom: 4mm; }
.c-dear { font-weight: 700; font-size: 12pt; color: #3a2c20; margin-bottom: 3mm; }
.c-body { font-size: 10pt; margin: 0 0 3mm; }
.c-small { font-size: 8.5pt; color: #8a7a68; }
.c-h {
  font-size: 12.5pt;
  color: #5b4636;
  margin: 4mm 0 2.5mm;
  padding-bottom: 1.5mm;
  border-bottom: 1.5pt solid #c9a36a;
}
.c-ul { margin: 0 0 3mm; padding-left: 5mm; }
.c-ul li { font-size: 9.5pt; margin: 1.2mm 0; }
.c-term-head { font-weight: 700; font-size: 9pt; color: #5b4636; margin-top: 2.2mm; }
.c-terms { font-size: 7.8pt; line-height: 1.45; margin: 0.8mm 0 0; }
/* The terms and the closing information are the two blocks of solid prose in the
   document. On the short landscape sheet they only fit if they use the width, so
   both run in two columns — and a heading must not be left stranded at the foot
   of one column with its paragraph in the next. */
.c-cols { columns: 2; column-gap: 9mm; }
.c-cols .c-term-head { break-after: avoid; margin-top: 0; }
.c-cols > :first-child { margin-top: 0; }
.c-cols .c-terms, .c-cols .c-body, .c-cols .c-ul { break-inside: avoid; }
/* A term is its heading and its text as one unit — never split down a column. */
.c-term { break-inside: avoid; }
.c-term > :first-child { margin-top: 0; }
ul.c-terms { columns: 2; column-gap: 6mm; }
/* ...but a two-column bullet list inside a two-column block is unreadable. */
.c-cols ul.c-terms { columns: 1; }

/* The letter and the trip/bank tables sit side by side rather than stacked: on
   the short sheet the stack ran 38mm over, and the prose is nowhere near wide
   enough to need the full 247mm measure anyway. */
.c-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10mm; align-items: start; }
/* Inside half a sheet the four-across meta box would be cramped — back to pairs. */
.c-split .q-meta { grid-template-columns: max-content 1fr; }
.c-split > div > :first-child { margin-top: 0; }
ul.c-terms li { font-size: 7.8pt; margin: 0.6mm 0; }
.c-sig-row { display: flex; gap: 14mm; margin-top: 9mm; }
.c-sig { flex: 1; font-size: 8pt; color: #8a7a68; }
.c-sig-line { border-bottom: 0.4mm solid #3a2c20; height: 6mm; margin-bottom: 1.2mm; }

/* On screen, the print pages preview inside the detail view */
.q-preview-wrap {
  background: var(--sand);
  border-radius: 12px;
  padding: 1.2rem;
  overflow-x: auto;
  margin-top: 1rem;
}
/* A sheet is a real 279.4mm wide — wider than the column it previews in, so it
   used to run off the right-hand edge. previewPages() scales each sheet down to
   the column width; the box around it carries the height the scaled sheet takes
   up, because a transformed element still occupies its untransformed space. */
.q-page-fit {
  overflow: hidden;
  margin: 0 auto 1.2rem;
  box-shadow: 0 4px 18px rgba(58, 44, 32, 0.18);
}
.q-page-fit > .q-page {
  transform-origin: top left;
  margin: 0;
}

/* A quote with a quote deck previews the deck itself (quotedeck.js): pdf.js
   draws each page of the deck's PDF on a canvas, sharper than the screen
   needs, and the canvas is fitted to the column here, so a phone shows whole
   pages with no sideways scrolling and can pinch-zoom into them. */
.qd-preview {
  background: var(--sand);
  border-radius: 12px;
  padding: 1.2rem;
  margin-top: 1rem;
}
.qd-preview-pages canvas {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.2rem;
  background: #fff;
  box-shadow: 0 4px 18px rgba(58, 44, 32, 0.18);
}
.qd-preview-pages canvas:last-child { margin-bottom: 0; }
.qd-preview-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
@media (max-width: 560px) {
  .qd-preview { padding: 0.5rem; border-radius: 8px; }
  .qd-preview-pages canvas { margin-bottom: 0.5rem; }
}

@media print {
  body { background: #fff; }
  body.printing-quote #app,
  body.printing-quote .auth-wrap,
  body.printing-quote #toast { display: none !important; }
  body.printing-quote #print-root { display: block !important; }
  /* The @page rule (US Letter landscape, 6mm margin) is injected by printPages().
     Inside that margin the sheet is 267.4 x 203.9mm, and 8/10mm of padding leaves
     the same 247.4 x 187.9mm of content the screen sheet has — so the pagination
     worked out on screen is the pagination that prints. min-height is a hair under
     the printable height: exactly 203.9mm rounds up on some engines and throws a
     blank sheet after every page. */
  .q-page {
    page-break-after: always;
    padding: 8mm 10mm;
    width: auto !important;
    min-height: 203mm !important;
  }
  .q-page:last-child { page-break-after: auto; }
  /* Never split a total, a signature block or a table row down the middle. */
  .q-table tr, .c-sig-row, .q-contact, .c-term-head { break-inside: avoid; }
  .c-term-head { break-after: avoid; }
}

/* ====================================================================
   Kaiwhai Office merge — blocks carried over from the Proposals app
   ==================================================================== */

/* proposal statuses + AI generation badges */
.badge.won { background: rgba(124, 132, 102, 0.22); color: var(--sage); }
.badge.lost { background: rgba(181, 104, 62, 0.16); color: var(--terracotta); }
.badge.generating { background: var(--sand); color: var(--gold-deep); }
.badge.failed { background: rgba(181, 104, 62, 0.16); color: var(--terracotta); }

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--gold);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -0.15em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- email preview modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 44, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal {
  background: var(--cream);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgba(58, 44, 32, 0.25);
  padding: 1.5rem 1.75rem;
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}
.modal h3 { margin: 0 0 0.75rem; }
.modal-row { margin: 0.15rem 0; color: var(--espresso); }
.modal-label {
  display: block;
  margin: 0.9rem 0 0.35rem;
  font-weight: 600;
  color: var(--bark);
}
.modal-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--espresso);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.7rem 0.85rem;
  resize: vertical;
}
.modal-textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* ---------- proposal delete ----------
   Scoped to the proposals views and the Templates page so the quotes-side
   list Archive buttons keep their original terracotta look (the base
   .btn-danger rule above). */
#view-proposals .btn-danger, #view-proposal .btn-danger, #view-templates .btn-danger {
  color: #8c3b25;
  border-color: #d9b5a5;
}
#view-proposals .btn-danger:hover, #view-proposal .btn-danger:hover, #view-templates .btn-danger:hover {
  background: #f6e4dc;
  border-color: #c08b74;
}
.card .card-delete { margin-left: 0.6rem; }

/* ---------- clients to follow up (spreadsheet) ----------
   The sheet uses the full window width and squeezes its columns to fit —
   cells wrap their text instead of the page scrolling sideways. */
body[data-view="followup"] main { max-width: none; }
.fu-toolbar { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0; flex-wrap: wrap; }
.fu-toolbar select { width: auto; padding: 0.3rem 0.6rem; font-size: 0.82rem; }
.fu-status { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
.fu-scroll {
  overflow-x: auto;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 12px;
}
/* Fits the window with no side-scroll on a normal screen; the 760px floor
   only kicks in on very narrow windows/phones, where scrolling beats
   unreadably thin columns. */
.fu-grid { display: grid; min-width: max(100%, 760px); }
.fu-cell {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-width: 0;
}
.fu-head {
  display: flex;
  align-items: center;
  background: var(--sand);
}
.fu-head input {
  border: none;
  border-radius: 0;
  background: none;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--bark);
  padding: 0.55rem 0.2rem 0.55rem 0.15rem;
  min-width: 0;
}
.fu-grip {
  cursor: grab;
  user-select: none;
  color: var(--muted);
  font-size: 0.7rem;
  padding: 0.55rem 0.1rem 0.55rem 0.4rem;
  flex-shrink: 0;
}
.fu-grip:hover { color: var(--bark); }
.fu-grip:active { cursor: grabbing; }
.fu-drop-before { box-shadow: inset 3px 0 0 var(--gold); }
.fu-drop-after { box-shadow: inset -3px 0 0 var(--gold); }
.fu-head input:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.fu-coldel {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.2rem 0.45rem;
  flex-shrink: 0;
}
.fu-coldel:hover { color: var(--terracotta); }
.fu-cell textarea {
  border: none;
  border-radius: 0;
  resize: none;
  overflow: hidden;
  min-height: 2.5rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.92rem;
  background: transparent;
}
.fu-cell textarea:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.fu-cell .dict-wrap textarea { padding-right: 1.9rem; }
.fu-cell .dict-btn { right: 0.15rem; width: 1.5rem; height: 1.5rem; }
.fu-actions, .fu-actions-head { padding: 0.35rem 0.6rem; border-right: none; }
.fu-actions { display: flex; align-items: flex-start; gap: 0.35rem; }
.fu-empty { padding: 1rem; margin: 0; }
.fu-create-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* ---------- style guide editor ---------- */
#style-editor, #conf-style-editor { margin-top: 0.4rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88rem; }
.style-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }

/* ---------- templates: one page, three kinds of deck ---------- */
.tgroup { margin-bottom: 2.2rem; }
.tgroup > h3 {
  margin: 1.8rem 0 0.2rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--gold);
}
.tgroup h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.3rem 0 0.55rem;
}
.tgroup details { margin-top: 1.2rem; }
.tgroup summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }

/* ---------- home ---------- */
.home-head { margin-bottom: 1.1rem; }
.home-start { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.home-search { margin-bottom: 1.5rem; }
.home-results {
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 12px;
  margin-top: 0.5rem;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: 22rem;
  overflow-y: auto;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  align-items: start;
}
.panel {
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 12px;
  padding: 0.9rem 1.2rem 1.2rem;
  min-width: 0;
}
.panel h3 { margin-top: 0.3rem; }
.panel-wide { grid-column: 1 / -1; }
.panel-body { display: flex; flex-direction: column; gap: 0.2rem; }
.panel-body .hint { margin: 0.3rem 0 0; }

/* one clickable line inside a panel */
.hrow {
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  color: var(--espresso);
  background: none;
  border: none;
  border-left: 3px solid var(--sand-deep);
  border-radius: 0 8px 8px 0;
  padding: 0.4rem 0.55rem;
}
.hrow-link { cursor: pointer; }
.hrow-link:hover { background: var(--sand); }
.hrow.urgent { border-left-color: var(--terracotta); }

.pipe-row {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr 2.2rem;
  align-items: center;
  gap: 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--espresso);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.3rem;
  cursor: pointer;
}
.pipe-row:hover { background: var(--sand); }
.pipe-name { color: var(--muted); }
.pipe-track { background: var(--sand); border-radius: 999px; height: 0.55rem; overflow: hidden; }
.pipe-fill { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.pipe-n { text-align: right; font-weight: 600; color: var(--bark); font-variant-numeric: tabular-nums; }

/* name and status on the first line, the trip's details underneath — keeps
   long camp and group names readable in a narrow panel */
.trip {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  font: inherit;
  text-align: left;
  color: var(--espresso);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
}
.trip + .trip { border-top: 1px solid var(--line); }
.trip:hover { background: var(--sand); }
.trip-name { font-size: 0.95rem; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.trip-sub { grid-column: 1 / -1; font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }

#home-year { overflow-x: auto; }
.year-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.4rem; min-width: 430px; }
.year-col { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 0; }
.year-n { font-size: 0.75rem; font-weight: 600; color: var(--bark); height: 1.1em; font-variant-numeric: tabular-nums; }
.year-bar {
  width: 100%;
  height: 72px;
  background: var(--sand);
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.year-fill { width: 100%; background: var(--gold); border-radius: 6px; }
.year-m { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.year-col.has .year-m { color: var(--bark); font-weight: 500; }

.act {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 0.6rem;
  align-items: baseline;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--espresso);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}
.act:hover { background: var(--sand); }
.act-who { font-weight: 600; color: var(--bark); }
.act-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-when { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

.hit {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.6rem;
  align-items: center;
  font: inherit;
  text-align: left;
  color: var(--espresso);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
}
.hit:hover { background: var(--sand); }
.hit-kind { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.hit-main { min-width: 0; display: flex; flex-direction: column; }
.hit-name, .hit-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-name { font-size: 0.93rem; }
.hit-sub { font-size: 0.78rem; color: var(--muted); }