/* ==============================
   Brownhill E-Agreement — Global
   ============================== */
:root{
  --bg:#f7f8fb;
  --paper:#ffffff;
  --ink:#0f172a;           /* rich navy-black */
  --muted:#64748b;         /* slate-500 */
  --border:#e5e7eb;        /* neutral-200 */
  --shadow:0 8px 30px rgba(2,6,23,.08);
  --accent:#0ea5e9;        /* sky-500 */
  --accent-ink:#0a6fa0;
  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;
  --focus:0 0 0 3px rgba(14,165,233,.22);

  /* Letterhead theme (gold → brown) */
  --gold-1:#c7a862;
  --gold-2:#b28a3b;
  --gold-3:#96722e;
  --brown:#3a2a1d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:15px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Anchor + focus visibility */
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-ink);text-decoration:underline}
:focus-visible{outline:2px solid transparent; box-shadow:var(--focus); border-radius:6px}

/* ==============================
   Layout
   ============================== */
.container{
  max-width:1100px;
  margin:40px auto;
  padding:0 22px;
}
.card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px;
  box-shadow:var(--shadow);
}

/* Header / Top Bar (app chrome, not the printed letterhead) */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.header strong{font-weight:800;letter-spacing:.2px}
.header a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  margin-left:14px;
}
.header a:hover{color:var(--accent-ink);text-decoration:underline}

/* ==============================
   Printable Letterhead (inside document)
   ============================== */
.letterbar{
  height:10px;
  width:100%;
  background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 35%, var(--gold-3) 70%, var(--brown) 100%);
  border-radius:6px;
  margin:0 0 12px 0;
}
.letterhead{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:6px 4px 10px 4px; margin-bottom:10px;
}
.letterhead .logo{
  max-height:54px; width:auto; display:block;
}
.lh-left{display:flex; align-items:center; gap:10px}
.lh-right{
  text-align:right; font-size:13px; line-height:1.35; color:#3b3b3b;
}
.lh-right div + div{ margin-top:4px }

/* ==============================
   Typography
   ============================== */
.h1{font-size:28px;line-height:1.2;font-weight:800;margin:0 0 12px}
.h2{font-size:20px;line-height:1.3;font-weight:800;margin:24px 0 12px}
.h3{font-size:16px;line-height:1.35;font-weight:800;margin:18px 0 8px}
p{margin:0 0 10px}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.title{
  text-align:center;
  font-weight:900;
  letter-spacing:.2px;
  font-size:24px;
  margin:6px 0 12px;
}
.subtitle{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin:-4px 0 16px;
}
code{
  background:#f8fafc;
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
}

/* ==============================
   Forms
   ============================== */
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:10px 0 6px;
}
input,select,textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder,textarea::placeholder{color:#9ca3af}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--focus);
}
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width: 820px){
  .row{grid-template-columns:1fr}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  border-radius:12px;
  padding:12px 16px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .04s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{background:#12b0f5}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.ghost{
  background:#fff;
  color:var(--accent);
  border:1px solid var(--accent);
}
.btn.success{background:var(--success)}
.btn.danger{background:var(--danger)}
.btn.warning{background:var(--warning);color:#1f2937}

/* Badges */
.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  background:#e0f2fe;
  color:#075985;
}

/* ==============================
   Tables
   ============================== */
.table, .kvs{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:10px 0 16px;
  font-size:14px;
}
.table th, .table td,
.kvs th, .kvs td{
  border:1px solid var(--border);
  padding:10px 12px;
  vertical-align:top;
}
.table th, .kvs th{
  background:#f3f4f6;
  font-weight:800;
  color:#0f172a;
}
.table tr:first-child th:first-child,
.kvs tr:first-child th:first-child{border-top-left-radius:10px}
.table tr:first-child th:last-child,
.kvs tr:first-child th:last-child{border-top-right-radius:10px}
.table tr:last-child td:first-child,
.kvs tr:last-child td:first-child{border-bottom-left-radius:10px}
.table tr:last-child td:last-child,
.kvs tr:last-child td:last-child{border-bottom-right-radius:10px}

/* Key-Value Summary helpers */
.kvs th{width:38%}

/* Horizontal rule */
hr{
  border:none;
  border-top:1px solid var(--border);
  margin:22px 0;
}

/* Stamps / Chips */
.stamp{
  display:inline-block;
  padding:6px 10px;
  border:1px dashed #cbd5e1;
  border-radius:10px;
  background:#f8fafc;
  font-size:12px;
  color:#334155;
}

/* ==============================
   Signature Pad (vanilla canvas)
   ============================== */
.sig{
  border:1px dashed #9ca3af;
  border-radius:12px;
  height:180px;
  width:100%;
  background:#fff;
  touch-action:none; /* prevents scrolling while signing on mobile */
}

/* Owner signature image inside document */
.owner-signature img{
  max-width:260px; height:auto; display:block;
  border:1px solid var(--border); border-radius:8px; background:#fff;
  padding:6px;
}

/* ==============================
   Footer (with logo)
   ============================== */
.footer{
  margin-top:22px;
  padding-top:12px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.footer img {
  max-height: 30px;
  vertical-align: middle;
  margin-right: 8px;
}

/* ==============================
   Utilities
   ============================== */
.no-print{ /* elements hidden in print */ }
.page-break{ page-break-before:always }

/* Spacing utilities */
.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}

/* ==============================
   Print Styles (for “Save as PDF”)
   ============================== */
@media print{
  /* Hide interactive/controls */
  .no-print, .btn, .header a{ display:none !important }

  /* Remove app chrome & shadows */
  body{ background:#fff }
  .container{ max-width:100%; margin:0; padding:0 }
  .card{
    box-shadow:none;
    border:none;
    border-radius:0;
    padding:0;
  }

  /* Page margins */
  @page{ margin: 14mm 12mm 16mm 12mm; }

  /* Tables/fonts slightly denser for print */
  .table, .kvs{ font-size:13px }
  .h1{ font-size:22px }
  .h2{ font-size:16px }
  .h3{ font-size:14px }

  /* Ensure page breaks behave for sections */
  .page-break{ page-break-before:always !important }
}