/* QuoteIron app — brand tokens per brand/brand-guidelines.md */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/BarlowCondensed-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/IBMPlexMono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/IBMPlexMono-600.woff2') format('woff2'); }

:root {
  --iron-950: #171A1E; --iron-800: #22262B;
  --steel-600: #4A5058; --zinc-300: #C6CBD1; --zinc-100: #F0F2F4;
  --torch-500: #FF4F00; --torch-600: #E04500;
  --green-600: #1F7A3D; --yellow-500: #FFC400;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --rad: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zinc-100); color: var(--iron-950); font-family: var(--body); font-size: 16px; line-height: 1.5; }
.hidden { display: none !important; }
.noscroll { overflow: hidden; }
.muted { color: var(--steel-600); }
.mono { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; }
.center { text-align: center; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 3px solid var(--torch-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- layout ---------- */
.app { max-width: 720px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--iron-950); display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
.topbar__logo { height: 22px; display: block; }
.topbar__right { display: flex; gap: 8px; }
.badge { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
.badge--offline { background: var(--iron-800); color: var(--zinc-100); border: 1px solid var(--steel-600); }
.badge--warn { background: var(--yellow-500); color: var(--iron-950); }
.view { flex: 1; padding: 16px 16px 96px; outline: none; }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--iron-950); display: flex; justify-content: center; gap: 2px; padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.tab { flex: 1; max-width: 132px; color: var(--zinc-300); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 8px 4px; border-radius: var(--rad); display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center; }
.tab__icon { font-size: 15px; line-height: 1; }
.tab--current { color: #fff; background: var(--iron-800); }
.tab--action { background: var(--torch-500); color: var(--iron-950); font-weight: 700; font-size: 17px; }
.tab--action:active { background: var(--torch-600); }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.98; margin: 0; font-size: clamp(28px, 7vw, 40px); }
.lead { font-size: 18px; }
.viewhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 16px; flex-wrap: wrap; }
.cathead { margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--iron-950); color: var(--iron-950); font-weight: 600; }

/* ---------- signature: the tag ---------- */
.tag { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid var(--iron-950); border-radius: var(--rad); padding: 3px 10px 3px 7px; font-family: var(--mono); font-weight: 600; font-size: 15px; white-space: nowrap; }
.tag__hole { width: 7px; height: 7px; border-radius: 50%; background: var(--zinc-100); border: 1.5px solid var(--iron-950); flex: none; }
.tag--torch { background: var(--torch-500); border-color: var(--iron-950); color: var(--iron-950); transform: rotate(-2deg); font-size: 18px; }

/* ---------- stamps ---------- */
.stamp { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; border: 2px solid currentColor; border-radius: 3px; padding: 1px 7px; transform: rotate(-2deg); white-space: nowrap; }
.stamp--steel { color: var(--steel-600); }
.stamp--iron { color: var(--iron-950); }
.stamp--green { color: var(--green-600); }
.stamp--yellow { color: var(--iron-950); background: var(--yellow-500); border-color: var(--iron-950); }

/* ---------- cards & rows ---------- */
.card { background: #fff; border: 1px solid var(--zinc-300); border-radius: var(--rad); padding: 16px; margin: 12px 0; }
.card--chase { border: 2px solid var(--yellow-500); }
.rows { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: #fff; border: 1px solid var(--zinc-300); border-radius: var(--rad); padding: 12px 14px; min-height: 56px; }
.row:active { border-color: var(--iron-950); }
.row__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.row__name { font-weight: 600; }
.row__sub { font-size: 13px; }
.row__end { display: flex; align-items: center; gap: 8px; flex: none; }
.row--line { cursor: default; }
.empty { color: var(--steel-600); text-align: center; padding: 28px 16px; }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.fld input, .fld textarea, input[type="search"] {
  font: inherit; font-weight: 500; padding: 12px; border: 1.5px solid var(--zinc-300); border-radius: var(--rad); background: #fff; color: var(--iron-950); width: 100%; min-height: 48px;
}
.fld input:focus, .fld textarea:focus, input[type="search"]:focus { border-color: var(--iron-950); outline: none; }
.fld--inline { flex-direction: row; align-items: center; gap: 10px; }
.fld--inline input { width: 90px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { font-size: 13px; color: var(--steel-600); margin: 0; }
.fldrow { display: flex; align-items: center; gap: 12px; }
.fldrow__label { flex: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 16px; border-radius: var(--rad); padding: 12px 18px; min-height: 48px; border: 2px solid var(--iron-950); }
.btn--torch { background: var(--torch-500); color: var(--iron-950); }
.btn--torch:active { background: var(--torch-600); }
.btn--iron { background: var(--iron-950); color: #fff; }
.btn--ghost { background: transparent; color: var(--iron-950); }
.btn--danger { border-color: #B3261E; color: #B3261E; }
.btn--big { font-size: 20px; padding: 16px 24px; }
.btn--small { font-size: 13px; padding: 6px 12px; min-height: 36px; }
.linkbtn { color: var(--iron-950); text-decoration: underline; text-decoration-color: var(--torch-500); text-decoration-thickness: 2px; font-weight: 600; padding: 8px 0; }
.iconbtn { padding: 8px 10px; color: var(--steel-600); font-size: 15px; min-width: 40px; min-height: 40px; text-align: center; }
.actionbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.searchrow { display: flex; gap: 8px; margin: 12px 0; }
.searchrow input { flex: 1; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips--filter { margin: 12px 0; }
.chip { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; border: 2px solid var(--iron-950); border-radius: 999px; padding: 8px 16px; min-height: 40px; background: #fff; color: var(--iron-950); }
.chip--on { background: var(--iron-950); color: #fff; }

/* ---------- results dropdown ---------- */
.results { background: #fff; border: 1.5px solid var(--iron-950); border-radius: var(--rad); overflow: hidden; margin-top: -6px; }
.result { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border-bottom: 1px solid var(--zinc-300); }
.result:last-child { border-bottom: none; }
.result:hover, .result:focus { background: var(--zinc-100); }

/* ---------- totals ---------- */
.totalcard { border: 2px solid var(--iron-950); }
.totalcard__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 20px; }
.totalcard__row + .totalcard__row { margin-top: 8px; font-size: 14px; font-family: var(--body); font-weight: 500; text-transform: none; }

/* ---------- setup ---------- */
.setup { max-width: 520px; margin: 0 auto; padding-top: 8px; }
.setup__logo { height: 34px; margin: 10px 0 18px; background: var(--iron-950); padding: 8px 12px; border-radius: var(--rad); box-sizing: content-box; }
.setup .display { font-size: clamp(32px, 9vw, 48px); }
.setup .lead em { color: var(--torch-600); font-style: normal; font-weight: 600; }

/* ---------- sheet ---------- */
.sheetwrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheetwrap__scrim { position: absolute; inset: 0; background: rgba(23, 26, 30, 0.6); }
.sheet { position: relative; background: var(--zinc-100); width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; border-radius: 12px 12px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 4px solid var(--torch-500); }
.sheet__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; margin: 0 0 14px; font-size: 24px; }
.sheet__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
@media (min-width: 640px) { .sheetwrap { align-items: center; } .sheet { border-radius: 12px; border: 2px solid var(--iron-950); border-top: 4px solid var(--torch-500); } }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--iron-950); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.25); max-width: 90vw; text-align: center; }

/* ---------- print document ---------- */
.printdoc { display: none; }
@media print {
  body * { visibility: hidden; }
  .app, .tabbar, .topbar, .toast, .sheetwrap { display: none !important; }
  .printdoc, .printdoc * { visibility: visible; display: block; }
  .printdoc { position: absolute; inset: 0; background: #fff; }
  @page { margin: 14mm; }
}
.pd { font-family: var(--body); color: var(--iron-950); font-size: 13px; line-height: 1.45; }
.pd__head { display: flex !important; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--iron-950); padding-bottom: 12px; margin-bottom: 16px; }
.pd__biz { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 24px; }
.pd__contact { font-family: var(--mono); font-size: 11px; }
.pd__doc { text-align: right; }
.pd__type { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.05em; }
.pd__ref, .pd__date { font-family: var(--mono); font-size: 12px; }
.pd__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--steel-600); margin-bottom: 2px; }
.pd__client { margin-bottom: 14px; }
.pd__muted { color: var(--steel-600); font-size: 11px; }
.pd__table { width: 100%; border-collapse: collapse; }
.pd__table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-align: left; border-bottom: 2px solid var(--iron-950); padding: 6px 4px; }
.pd__table td { border-bottom: 1px solid var(--zinc-300); padding: 8px 4px; vertical-align: top; }
.pd__table .r { text-align: right; }
.pd__totals { margin-top: 12px; margin-left: auto; max-width: 300px; }
.pd__totalrow { display: flex !important; justify-content: space-between; padding: 4px 0; }
.pd__grand { font-family: var(--display); font-weight: 700; font-size: 20px; border-top: 3px solid var(--iron-950); padding-top: 8px; }
.pd__stamp { display: inline-block !important; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--green-600); border: 3px solid var(--green-600); border-radius: 4px; padding: 2px 10px; transform: rotate(-4deg); margin-top: 10px; }
.pd__notes { margin-top: 16px; }
.pd__foot { margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--zinc-300); color: var(--steel-600); font-size: 11px; }

/* small screens */
@media (max-width: 380px) {
  .grid2 { grid-template-columns: 1fr; }
  .tab { font-size: 13px; }
}