/*
 * /business shared styles.
 *
 * ── Palette rule, stated once ──────────────────────────────────────────────
 * This file defines NO colours of its own. Every surface and every piece of
 * ink aliases a platform token from base.v1.css, which themes light/dark for
 * us. Apps written before the 2026-06-16 light-default flip hardcoded a dark
 * palette and became near-white text on a near-white body; aliasing is the
 * documented fix and it also means the 43 paid themes work here for free.
 *
 * Two specific rules worth not forgetting:
 *   - `--accent` is a FILL. It is #b8911e in light, which is 2.66:1 on the page
 *     background and fails AA as text. Accent-coloured TEXT uses `--accent-text`.
 *   - base.v1.css has a catch-all `a:not([class*="btn"])...` rule at roughly
 *     (0,8,2) specificity that repaints ordinary links. Anything meant to look
 *     like a button therefore carries a class containing "btn", which the
 *     :not() list excludes — that is why the button classes are named as they are.
 */

:root {
  --biz-bg: var(--bg);
  --biz-fg: var(--text);
  --biz-dim: var(--dim);
  --biz-bright: var(--bright);
  --biz-card: var(--card);
  --biz-border: var(--border);
  --biz-radius: 14px;
  --biz-shadow: 0 1px 2px rgba(20, 18, 30, 0.04), 0 8px 24px rgba(20, 18, 30, 0.06);
}

.biz {
  max-width: 1060px;
  margin: 0 auto;
  padding: 26px 20px 72px;
  color: var(--biz-fg);
}
.biz-narrow { max-width: 760px; }

/* ── type ─────────────────────────────────────────────────────────────── */
.biz h1 {
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.biz h2 {
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 40px 0 14px;
}
.biz h3 { font-size: 17px; margin: 22px 0 8px; letter-spacing: -0.01em; }
.biz p { line-height: 1.68; margin: 0 0 14px; }

.biz .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 10px;
}
.biz .lede { font-size: clamp(16px, 2vw, 18.5px); line-height: 1.62; color: var(--biz-dim); margin: 0 0 26px; }
.biz .muted { color: var(--biz-dim); }
.biz .small { font-size: 13.5px; }

/* ── buttons ──────────────────────────────────────────────────────────────
 * "btn" in the class name is load-bearing: it opts these out of the shared
 * catch-all link rule so their own colour actually applies. */
.biz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: filter .15s ease, background-color .15s ease;
}
.biz-btn-primary { background: var(--accent); color: #1a1408; }
.biz-btn-primary:hover { filter: brightness(1.07); }
.biz-btn-ghost {
  background: transparent;
  color: var(--biz-bright);
  border-color: var(--biz-border);
}
.biz-btn-ghost:hover { background: var(--biz-card); }
.biz-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.biz-btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 9px; }
.biz-btn-danger { background: transparent; color: var(--biz-bright); border-color: var(--biz-border); }
.biz-btn-danger:hover { border-color: #cd3232; color: #cd3232; }

.biz-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; }

/* ── cards ────────────────────────────────────────────────────────────── */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.biz-card {
  background: var(--biz-card);
  border: 1px solid var(--biz-border);
  border-radius: var(--biz-radius);
  padding: 20px;
  box-shadow: var(--biz-shadow);
}
a.biz-card { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.biz-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,18,30,.05), 0 14px 32px rgba(20,18,30,.10); }
.biz-card h3 { margin: 12px 0 6px; font-size: 17px; color: var(--biz-bright); }
.biz-card p { font-size: 14.2px; line-height: 1.58; color: var(--biz-dim); margin: 0; }
.biz-card .ic { color: var(--accent-text); display: block; }
.biz-card .tag {
  display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text);
}

/* ── forms ────────────────────────────────────────────────────────────── */
.biz-field { margin: 0 0 15px; }
.biz-field > label {
  display: block; font-size: 13.5px; font-weight: 650;
  color: var(--biz-bright); margin: 0 0 6px;
}
.biz-field .hint { font-size: 12.5px; color: var(--biz-dim); margin: 5px 0 0; line-height: 1.5; }

/* The generic `input[type=text]` rule in some app stylesheets hardcodes a dark
 * background and outranks weaker app rules; these are explicit about both
 * surface and ink so the field can never end up dark-on-dark or light-on-light. */
.biz input[type="text"],
.biz input[type="email"],
.biz input[type="tel"],
.biz input[type="number"],
.biz input[type="date"],
.biz input[type="time"],
.biz input[type="url"],
.biz select,
.biz textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--biz-bright);
  background: var(--biz-card);
  border: 1px solid var(--biz-border);
  border-radius: 10px;
  outline: none;
}
.biz textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.biz input:focus, .biz select:focus, .biz textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 145, 30, 0.18);
}
.biz input::placeholder, .biz textarea::placeholder { color: var(--biz-dim); opacity: .8; }

.biz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.biz-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .biz-row, .biz-row-3 { grid-template-columns: 1fr; } }

.biz-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; }
.biz-check input { margin-top: 3px; }

/* Honeypot — off-screen rather than display:none, because some bots skip
 * hidden fields but happily fill positioned ones. */
.biz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── notices ──────────────────────────────────────────────────────────── */
.biz-note {
  border-left: 3px solid var(--accent);
  background: var(--biz-card);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  margin: 18px 0;
  font-size: 14.2px;
  line-height: 1.6;
}
.biz-error {
  border-left-color: #cd3232;
  color: var(--biz-bright);
}
.biz-ok { border-left-color: #207d4c; }

/* ── tables ───────────────────────────────────────────────────────────── */
/* Wide tables scroll sideways rather than forcing the page to. On a phone a
 * 6-column payroll summary genuinely cannot fit, and the clipped edge reads as
 * "broken" unless something signals that it moves — so this carries the classic
 * pure-CSS scroll shadow: two cover gradients attached `local` (they travel with
 * the content) sitting over two shadow gradients attached `scroll` (fixed to the
 * box). At the far left the cover hides the left shadow; scroll right and it
 * slides away to reveal it. No JS, and it self-corrects on resize. */
.biz-tablewrap {
  overflow-x: auto;
  margin: 18px 0;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--biz-bg) 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--biz-bg) 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(60, 56, 84, 0.20), rgba(255, 255, 255, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(60, 56, 84, 0.20), rgba(255, 255, 255, 0)) right center / 14px 100% no-repeat scroll;
}
.biz-table { width: 100%; border-collapse: collapse; font-size: 14.2px; min-width: 520px; }
.biz-table th, .biz-table td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--biz-border);
  vertical-align: top;
}
.biz-table th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--biz-dim); font-weight: 700; }
.biz-table td { color: var(--biz-fg); }
.biz-table tfoot td { font-weight: 700; color: var(--biz-bright); border-bottom: none; }
.biz-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── slot picker ──────────────────────────────────────────────────────── */
.biz-days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; }
.biz-day {
  flex: 0 0 auto; min-width: 66px; padding: 10px 8px; border-radius: 11px;
  border: 1px solid var(--biz-border); background: var(--biz-card);
  text-align: center; cursor: pointer; font-family: inherit; color: var(--biz-fg);
}
.biz-day[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(184,145,30,.2); }
.biz-day[disabled] { opacity: .38; cursor: not-allowed; }
.biz-day .dow { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--biz-dim); }
.biz-day .dnum { display: block; font-size: 19px; font-weight: 700; color: var(--biz-bright); line-height: 1.3; }
.biz-day .cnt { display: block; font-size: 11px; color: var(--biz-dim); }

.biz-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; margin: 6px 0 4px; }
.biz-slot {
  padding: 11px 6px; border-radius: 10px; border: 1px solid var(--biz-border);
  background: var(--biz-card); color: var(--biz-bright); font-size: 14.5px;
  font-weight: 600; cursor: pointer; font-family: inherit; text-align: center;
}
.biz-slot[aria-pressed="true"] { background: var(--accent); color: #1a1408; border-color: var(--accent); }

/* ── misc layout ──────────────────────────────────────────────────────── */
.biz-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .biz-split { grid-template-columns: 1fr; } }

.biz-copyrow { display: flex; gap: 8px; align-items: stretch; margin: 8px 0 4px; }
.biz-copyrow input { flex: 1; font-size: 13.5px !important; }

.biz-steps { counter-reset: s; list-style: none; padding: 0; margin: 18px 0; }
.biz-steps li {
  counter-increment: s; position: relative; padding-left: 42px;
  margin: 0 0 18px; line-height: 1.6;
}
.biz-steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #1a1408;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}

.biz-hr { border: none; border-top: 1px solid var(--biz-border); margin: 38px 0; }

.biz-pricecard { text-align: left; }
.biz-pricecard .amt { font-size: 34px; font-weight: 700; color: var(--biz-bright); letter-spacing: -0.02em; }
.biz-pricecard .per { font-size: 14px; color: var(--biz-dim); }
.biz-pricecard ul { margin: 16px 0 0; padding-left: 20px; line-height: 1.75; font-size: 14.3px; }

.biz-print-only { display: none; }
@media print {
  /* ★ The bottom nav's real id is `#dl-bottom-nav` — read out of the live DOM,
   * not guessed. An earlier `#dl-chrome-bottom` here matched nothing, so the
   * whole ecosystem nav printed across the bottom of every invoice a business
   * sent to its client. The top bar is `#dl-chrome-bar` and the footer is
   * `#dl-footer`; all three are listed explicitly. */
  .biz-noprint,
  #dl-chrome-bar,
  #dl-bottom-nav,
  #dl-footer,
  footer { display: none !important; }
  .biz { max-width: none; padding: 0; }
  .biz-print-only { display: block; }

  /* ★ Paper is white, and the fixed bars are hidden above — so drop both the
   * page tint and the padding chrome reserves for those bars, or the invoice
   * prints with a lavender band at the top and a gap where the bottom nav was.
   *
   * A plain `body { background:#fff !important }` does NOT work: base.v1.css
   * declares `html.dl-chrome-present body { background:#f4f2fa !important }` at
   * specificity (0,1,2), and !important on both sides means SPECIFICITY decides,
   * not importance. Matching its selector exactly ties the specificity, and this
   * stylesheet is linked after the chrome ones, so source order settles it. */
  html.dl-chrome-present,
  html.dl-chrome-present body {
    background: #fff !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}