/* Instant Invoice Builder
 *
 * Two layouts in one stylesheet: the app on screen, and the invoice alone on
 * paper. Everything outside .sheet is display:none when printing, so the
 * browser's own "Save as PDF" produces a clean document with no library, no
 * upload and no server round-trip. That is the whole product mechanism.
 */

:root{
  --ink:#0f172a; --soft:#334155; --muted:#64748b; --line:#e2e8f0;
  --bg:#f1f5f9; --card:#fff; --brand:#2563eb; --brand-dark:#1d4ed8;
  --ok:#16a34a; --warn:#b45309;
  --shadow:0 18px 50px rgba(15,23,42,.10);
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--brand)}

/* ---------------------------------------------------------------- chrome */
.site-header{
  background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
.header-inner{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:800}
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--ink);
  color:#fff; display:grid; place-items:center; font-size:17px; flex:none;
}
.brand small{display:block; font-weight:600; font-size:11px; color:var(--muted);
  letter-spacing:.12em; text-transform:uppercase}
/* The supplied logo is a horizontal lockup; height-constrain it and let the
   width follow, so it never dictates the header height. */
.brand-logo{height:40px; width:auto; display:block; flex:none}
.header-actions{margin-left:auto; display:flex; gap:8px; align-items:center}

button{font:inherit}
.btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:999px; padding:10px 16px; font-weight:700; font-size:14px;
  cursor:pointer; min-height:44px; white-space:nowrap;
}
.btn:hover{background:#f8fafc}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{border-color:transparent; background:transparent; color:var(--muted)}
.btn-ghost:hover{background:#f1f5f9; color:var(--ink)}
.btn-sm{padding:6px 11px; min-height:36px; font-size:13px}

/* ------------------------------------------------------------ the sheet */
.sheet-wrap{padding:24px 0 60px}
.sheet{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:44px; max-width:1040px; margin:0 auto;
}

/* Inputs that look like the document until you touch them. The invoice IS the
   form -- a separate form plus preview makes people fill things in twice. */
.f{
  border:1px solid transparent; background:transparent; border-radius:7px;
  padding:5px 7px; font:inherit; color:inherit; width:100%;
  transition:background .12s, border-color .12s;
}
.f:hover{background:#f8fafc; border-color:var(--line)}
.f:focus{outline:none; background:#fff; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.f::placeholder{color:#94a3b8}
textarea.f{resize:vertical; min-height:70px}
.f-lg{font-size:19px; font-weight:800}
.f-right{text-align:right}

.sheet-top{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:start}
.doc-title{font-size:38px; font-weight:900; letter-spacing:-.03em; margin:0 0 10px; text-align:right}
.meta-grid{display:grid; grid-template-columns:auto 150px; gap:6px 12px; align-items:center}
.meta-grid label{font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; text-align:right}

/* Logo: read locally as a data URI, never uploaded anywhere. */
.logo-box{
  width:150px; height:80px; border:2px dashed var(--line); border-radius:10px;
  display:grid; place-items:center; cursor:pointer; color:var(--muted);
  font-size:12px; font-weight:700; text-align:center; padding:6px; overflow:hidden;
}
.logo-box:hover{border-color:var(--brand); color:var(--brand)}
.logo-box img{max-width:100%; max-height:100%; object-fit:contain}
.logo-box input{display:none}

.parties{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:34px 0 8px}
.party h3{font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); margin:0 0 6px}

/* ------------------------------------------------------------ line items */
table.items{width:100%; border-collapse:collapse; margin-top:26px}
table.items th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); padding:9px 7px; border-bottom:2px solid var(--line);
}
table.items th.num, table.items td.num{text-align:right; width:110px}
table.items th.act, table.items td.act{width:38px}
table.items td{padding:3px 0; border-bottom:1px solid var(--line); vertical-align:middle}
.amount{padding:5px 7px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.row-del{
  border:none; background:transparent; color:#cbd5e1; cursor:pointer;
  font-size:19px; line-height:1; padding:4px 6px; border-radius:6px;
}
.row-del:hover{color:#dc2626; background:#fef2f2}

.totals{display:grid; grid-template-columns:1fr 300px; gap:28px; margin-top:22px}
.totals-box{display:grid; gap:7px}
.trow{display:grid; grid-template-columns:1fr 118px; align-items:center; gap:10px}
.trow span:first-child{color:var(--muted); font-size:14px}
.trow .val{text-align:right; font-variant-numeric:tabular-nums}
.trow.grand{border-top:2px solid var(--ink); margin-top:6px; padding-top:11px;
  font-size:21px; font-weight:900}
.rate-in{width:66px; text-align:right}

.notes{margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:28px}
.notes h3{font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); margin:0 0 4px}

.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  max-width:1040px; margin:0 auto 14px; padding:0 20px}
.saved{font-size:13px; color:var(--ok); font-weight:700; opacity:0; transition:opacity .25s}
.saved.show{opacity:1}

/* ------------------------------------------------------------------ copy */
.content{max-width:820px; margin:0 auto; padding:10px 20px 70px}
.content h1{font-size:clamp(27px,4.4vw,40px); letter-spacing:-.03em; margin:0 0 12px}
.content h2{font-size:24px; letter-spacing:-.02em; margin:34px 0 10px}
.content h3{font-size:17px; margin:22px 0 6px}
.content p, .content li{color:var(--soft)}
.content ol, .content ul{padding-left:20px}
.faq dt{font-weight:800; margin-top:16px}
.faq dd{margin:5px 0 0; color:var(--soft)}
.crumb{font-size:13px; color:var(--muted); margin-bottom:8px}
.crumb a{color:var(--muted)}
.related{list-style:none; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:9px}
.related a{
  display:block; padding:11px 13px; background:#fff; border:1px solid var(--line);
  border-radius:11px; text-decoration:none; color:var(--ink); font-weight:600; font-size:14px;
}
.related a:hover{border-color:var(--brand); color:var(--brand)}

footer{background:#fff; border-top:1px solid var(--line); padding:26px 0;
  font-size:13px; color:var(--muted)}

/* Ad slots: reserved, and invisible until real ad code is inserted. :empty
   matches only an element with no children AND no text nodes, so the markup
   must contain no whitespace. Same mechanism as EZCalc. */
.ad-slot:empty{display:none}
.ad-slot{margin:26px auto; max-width:1040px; padding:0 20px}
.ad-slot:not(:empty)::before{content:"Sponsored"; display:block; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}

/* --------------------------------------------------------------- mobile */
@media(max-width:820px){
  .sheet{padding:22px; border-radius:10px}
  .sheet-top{grid-template-columns:1fr; gap:16px}
  .doc-title{text-align:left; font-size:31px}
  .meta-grid{grid-template-columns:auto 1fr}
  .meta-grid label{text-align:left}
  .parties,.notes{grid-template-columns:1fr; gap:18px; margin-top:24px}
  .totals{grid-template-columns:1fr}
  .totals-box{max-width:none}
  /* The items table cannot shrink below readability, so it scrolls in its own
     container rather than forcing the whole page sideways. */
  .items-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
  table.items{min-width:520px}
  /* The brand wrapped to two lines and the tagline spilled out of the 64px
     bar, making the header the tallest thing on a phone screen. */
  /* nowrap alone pushed the Download button off the right edge. The brand has
     to be allowed to shrink -- min-width:0 is what lets a flex item narrow
     below its content width -- and truncate rather than shove the actions out. */
  .brand{font-size:15px; min-width:0; overflow:hidden}
  .brand span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .brand small{display:none}
  .header-actions{flex:none; gap:6px}
  /* The brand mark must never be squeezed; flex items shrink by default. */
  .brand-mark{flex:none}
  /* Arrow only. 'Download' and 'New' keep their words -- they are the
     primary and secondary actions; the shortcut is tertiary. */
  .install-btn .ib-text{display:none}
  .install-btn{padding:9px 13px; font-size:15px}
  .header-inner{gap:8px}
  .header-actions .btn span.long{display:none}

  /* Touch targets. Measured on a 375px phone these came out at 27-39px against
     the 44px guideline, and the row-delete button was the worst of them --
     easy to miss, and easy to hit by accident when aiming for the rate field. */
  .btn-sm{min-height:44px; padding:10px 14px}
  .f{padding:10px 8px}
  .rate-in{padding:8px 6px}
  .row-del{font-size:24px; padding:9px 10px; min-width:44px; min-height:44px}
  table.items td{padding:5px 0}
}

/* ---------------------------------------------------------------- print */
@media print{
  @page{margin:14mm}
  body{background:#fff}
  .site-header,.toolbar,.content,footer,.ad-slot,.no-print,.row-del{display:none !important}
  .sheet-wrap{padding:0}
  .sheet{box-shadow:none; border-radius:0; padding:0; max-width:none}
  .f{border-color:transparent !important; background:transparent !important;
     box-shadow:none !important; padding:2px 0}
  /* Inputs print their value; textareas need their scroll height honoured. */
  textarea.f{min-height:0}
  table.items{page-break-inside:auto}
  tr{page-break-inside:avoid}
  .items-scroll{overflow:visible}

  /* Never print scaffolding the visitor did not fill in. */
  tr.is-empty{display:none}
  .logo-box.is-empty{display:none}
  textarea.f{resize:none}                       /* no drag handle on paper */
  input[type="date"]::-webkit-calendar-picker-indicator{display:none}
  /* An input's placeholder must not print as if it were a value. */
  .f::placeholder{color:transparent}
}

/* ---- Add Shortcut -------------------------------------------------------
   Repeat traffic is the whole point: someone who invoices weekly and has this
   on a home screen returns without searching. The button is always visible and
   only hides once installed -- hiding it where no install API exists means
   desktop Safari and Firefox users never learn the option is there. */
.install-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:999px; padding:9px 14px; font-weight:700; font-size:13px;
  cursor:pointer; min-height:44px; white-space:nowrap;
}
.install-btn:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.install-btn[hidden]{display:none}

.ih-modal{
  position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.ih-modal.open{display:flex}
.ih-card{
  background:#fff; border-radius:18px; padding:26px; max-width:430px; width:100%;
  box-shadow:var(--shadow); position:relative;
}
.ih-card h2{margin:0 0 6px; font-size:20px; letter-spacing:-.02em}
.ih-intro{color:var(--muted); margin:0 0 14px; font-size:15px}
.ih-steps{margin:0; padding-left:20px; color:var(--soft); line-height:1.75}
.ih-close{
  position:absolute; top:12px; right:12px; border:none; background:transparent;
  font-size:26px; line-height:1; color:var(--muted); cursor:pointer;
  width:44px; height:44px; border-radius:10px;
}
.ih-close:hover{background:#f1f5f9; color:var(--ink)}
.ih-note{margin:14px 0 0; font-size:13px; color:var(--muted)}

@media print{.install-btn,.ih-modal{display:none !important}}

@media(max-width:820px){.brand-logo{height:32px}}