/* ==========================================================================
   Augie's Rentals — Ops. Utilitarian / industrial / local-shop design system.
   ========================================================================== */

:root {
  --cream: #F3F0E8;
  --cream-dim: #EAE5D8;
  --charcoal: #171717;
  --charcoal-soft: #2B2A27;
  --orange: #F26A21;
  --orange-dark: #C6541A;
  --white: #FFFFFF;
  --grey-100: #F3F3F1;
  --grey-300: #D8D5CC;
  --grey-500: #8B877D;
  --grey-700: #55524A;

  --green: #2F7A3C;
  --green-bg: #E4F0E3;
  --amber: #B5751A;
  --amber-bg: #FBEEDA;
  --red: #B23A2E;
  --red-bg: #F7E4E1;
  --grey-inactive: #8B877D;
  --grey-inactive-bg: #ECEAE4;

  --border: var(--charcoal);
  --border-soft: var(--grey-300);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 0 rgba(23,23,23,0.08), 0 1px 3px rgba(23,23,23,0.06);

  --font-display: "Archivo Black", "Arial Black", Helvetica, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.01em; margin: 0; }
h1 { font-size: 1.9rem; text-transform: uppercase; }
h2 { font-size: 1.15rem; text-transform: uppercase; }
h3 { font-size: 0.95rem; text-transform: uppercase; }

p { line-height: 1.5; }
.lede { color: var(--grey-700); margin: 4px 0 0; }
.hint { color: var(--grey-500); font-size: 0.82rem; margin: 4px 0 0; }

/* ---------------------------------------------------------------- layout */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--charcoal);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* mobile browsers: 100vh ignores the address/tab bar and
    can render taller than what's actually visible, pushing the footer
    (including Log out) below the fold -- dvh tracks the real visible area */
  overflow-y: auto; /* belt-and-suspenders: if content ever exceeds the
    visible height regardless, scroll instead of silently clipping it */
}

.sidebar .brand {
  padding: 22px 20px 18px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(243,240,232,0.15);
  text-decoration: none;
  color: var(--cream);
  line-height: 1.25;
}
.sidebar .brand span { color: var(--orange); }

.sidebar nav { padding: 14px 0; flex: 1; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  color: var(--grey-300);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { color: var(--cream); background: rgba(243,240,232,0.06); }
.sidebar nav a.active { color: var(--cream); border-left-color: var(--orange); background: rgba(242,106,33,0.12); }

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px 6px;
  margin-top: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-500);
}
.nav-group-header:hover { color: var(--grey-300); }
.nav-group-header .caret { transition: transform 0.15s ease; }
.nav-group-header[aria-expanded="true"] .caret { transform: rotate(90deg); }
.nav-group-items { display: flex; flex-direction: column; overflow: hidden; }
.nav-group-items.collapsed { display: none; }

.sidebar .sidebar-footer {
  padding: 14px 20px 18px;
  font-size: 0.72rem;
  color: var(--grey-500);
  border-top: 1px solid rgba(243,240,232,0.15);
}

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--charcoal);
  color: var(--cream);
}
.topbar-mobile .brand { font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; }
.topbar-mobile button { background: none; border: 1px solid var(--cream); color: var(--cream); }

main {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 28px 80px;
}

.page-header { margin-bottom: 22px; }
.page-header .row { justify-content: space-between; align-items: flex-start; }

/* ------------------------------------------------------------ primitives */

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.stat-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.stat-card .stat-value { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; }
.stat-card .stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey-700); margin-top: 6px; font-weight: 700; }
.stat-card.accent-green .stat-value { color: var(--green); }
.stat-card.accent-amber .stat-value { color: var(--amber); }
.stat-card.accent-red .stat-value { color: var(--red); }
.stat-card.accent-orange .stat-value { color: var(--orange-dark); }
.stat-card.accent-grey .stat-value { color: var(--grey-700); }

/* -------------------------------------------------------------- buttons */

button, .btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  border: 2px solid var(--charcoal);
  background: var(--orange);
  color: var(--charcoal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.05s ease;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

button.secondary, .btn.secondary {
  background: var(--white);
  color: var(--charcoal);
  border: 2px solid var(--charcoal);
}
button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--orange-dark);
  padding: 8px 4px;
}
button.danger {
  background: var(--red);
  color: var(--white);
  border-color: var(--charcoal);
}
button.big {
  padding: 14px 26px;
  font-size: 0.95rem;
}
button.full { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- forms */

label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--grey-700); display: block; margin-bottom: 4px; }

.rich-text { font-size: 0.92rem; line-height: 1.5; }
.rich-text p { margin: 0 0 10px; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text hr { border: none; border-top: 1px solid var(--border-soft); margin: 10px 0; }
.rich-text ul, .rich-text ol { margin: 0 0 10px; padding-left: 20px; }

input[type=text], input[type=number], input[type=file], input[type=search],
input[type=password], input[type=email],
textarea, select {
  font-family: inherit;
  /* Not font-size: inherit -- inputs are routinely wrapped in a bare
     <label> (label { font-size: 0.78rem } is meant for the caption text,
     not what gets typed into the field), and inheriting that shrinks the
     input below 16px. Below 16px, iOS Safari zooms in on focus and the
     zoom persists through this app's client-side navigation afterward --
     reported as "the page is too zoomed in after logging in in". 1rem
     keeps every input at a real, fixed, zoom-safe size regardless of
     whatever font-size its wrapping label happens to have. */
  font-size: 1rem;
  padding: 9px 11px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--charcoal);
  width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orange); }
textarea { resize: vertical; min-height: 70px; font-family: var(--font-body); }

.field { margin-bottom: 14px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

.checkbox-row { display: flex; align-items: flex-start; gap: 8px; }
.checkbox-row input { width: auto; margin-top: 3px; }

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.badge.status-synced, .badge.status-ok { background: var(--green-bg); color: var(--green); }
.badge.status-ready { background: var(--green-bg); color: var(--green); }
.badge.status-attention, .badge.status-update { background: var(--amber-bg); color: var(--amber); }
.badge.status-waiting { background: var(--grey-inactive-bg); color: var(--grey-inactive); }
.badge.status-failed, .badge.status-error { background: var(--red-bg); color: var(--red); }
.badge.status-active { background: #FCE6D8; color: var(--orange-dark); }
.badge.local { background: var(--grey-100); color: var(--grey-700); border: 1px solid var(--border-soft); }
.badge.live { background: #FCE6D8; color: var(--orange-dark); border: 1px solid var(--orange); }

/* ---------------------------------------------------------------- table */

.data-table { width: 100%; border-collapse: collapse; background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.data-table th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--grey-700); padding: 10px 14px; background: var(--grey-100); border-bottom: 2px solid var(--border);
}
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); font-size: 0.88rem; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover { background: var(--cream-dim); }
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

/* -------------------------------------------------------------- stepper */

.stepper { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.step-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; border: 2px solid var(--border-soft);
  font-size: 0.76rem; font-weight: 700; color: var(--grey-700); background: var(--white);
}
.step-pill .num {
  width: 18px; height: 18px; border-radius: 50%; background: var(--grey-300); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 0.68rem;
}
.step-pill.current { border-color: var(--orange); color: var(--charcoal); background: #FFF4EC; }
.step-pill.current .num { background: var(--orange); }
.step-pill.done { color: var(--green); border-color: var(--green); }
.step-pill.done .num { background: var(--green); }

/* --------------------------------------------------------------- console */

.report-panel {
  background: var(--white);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  max-height: 420px;
  overflow-y: auto;
}
.report-panel .line { padding: 2px 0; }
.report-panel .line.rule { color: var(--grey-300); }
.report-panel .line.heading { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 10px; }
.report-panel .line.ok { color: var(--green); }
.report-panel .line.warn { color: var(--amber); }
.report-panel .line.match { color: var(--grey-700); }

.console {
  background: var(--charcoal);
  color: #EAE6DA;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 380px;
  overflow-y: auto;
  line-height: 1.45;
}

details.tech-details { margin-top: 10px; }
details.tech-details summary {
  cursor: pointer; font-size: 0.78rem; font-weight: 700; color: var(--grey-700);
  text-transform: uppercase; letter-spacing: 0.03em;
}
details.tech-details .console { margin-top: 8px; }

/* ----------------------------------------------------------------- misc */

.status-line { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.86rem; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grey-500); flex-shrink: 0; }
.dot.running { background: var(--orange); animation: pulse 1.1s infinite ease-in-out; }
.dot.ok { background: var(--green); }
.dot.error { background: var(--red); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

hr.divider { border: none; border-top: 2px solid var(--border); margin: 22px 0; }

.empty-state {
  text-align: center; padding: 50px 20px; color: var(--grey-500);
  border: 2px dashed var(--border-soft); border-radius: var(--radius);
}
.empty-state h3 { color: var(--grey-700); margin-bottom: 6px; }

.image-frame {
  border: 2px solid var(--border); border-radius: var(--radius); background: var(--white);
  padding: 10px; text-align: center;
}
.image-frame img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 4px; }
.image-frame .label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey-700); margin-bottom: 8px; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 10px; }
.photo-tile { border: 2px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.photo-tile img { width: 100%; height: 140px; object-fit: cover; display: block; }
.photo-tile > div { padding: 8px 10px; }
.photo-tile .hint { margin: 0; }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--white); border: 2px solid var(--border); border-radius: 8px; }

.file-list { list-style: none; margin: 10px 0 0; padding: 0; }
.file-list li { margin-bottom: 6px; }
.file-list a { color: var(--orange-dark); text-decoration: none; font-size: 0.86rem; font-weight: 600; }
.file-list a:hover { text-decoration: underline; }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.88rem; }
.check-list li:last-child { border-bottom: none; }
.check-icon { font-weight: 800; flex-shrink: 0; }
.check-icon.pass { color: var(--green); }
.check-icon.fail { color: var(--red); }
.check-icon.warn { color: var(--amber); }

.kv-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 0.88rem; }
.kv-list dt { color: var(--grey-700); font-weight: 700; }
.kv-list dd { margin: 0; }

.copy-field {
  border: 2px solid var(--border-soft); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; background: var(--white);
}
.copy-field .field-name { font-weight: 800; font-size: 0.85rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.02em; }
.copy-field .current-proposed { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .copy-field .current-proposed { grid-template-columns: 1fr; } }
.copy-field .col-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; color: var(--grey-500); margin-bottom: 4px; }
.copy-field .col-current { background: var(--grey-100); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 0.85rem; white-space: pre-wrap; }
.copy-field .col-proposed { background: #FFF4EC; border: 1px solid var(--orange); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 0.85rem; white-space: pre-wrap; }
.copy-field .field-actions { margin-top: 10px; display: flex; gap: 8px; }

.source-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; font-size: 0.84rem; }
.source-card .title { font-weight: 700; }
.source-card .domain { color: var(--grey-500); font-size: 0.78rem; }
.source-card .official { color: var(--green); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; }

.pipeline-diagram { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.pipeline-diagram .node { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; background: var(--white); font-weight: 700; font-size: 0.82rem; }
.pipeline-diagram .arrow { color: var(--grey-500); font-size: 1.1rem; }

.confirm-card {
  border: 3px solid var(--orange); border-radius: var(--radius); background: #FFF6EE; padding: 20px 22px;
}
.confirm-card h3 { color: var(--orange-dark); }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(23,23,23,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal {
  background: var(--white); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 24px; width: 420px; max-width: 100%; box-shadow: var(--shadow);
}
.modal h3 { margin-bottom: 8px; }
.modal .row { margin-top: 16px; justify-content: flex-end; }

.warn-box { background: var(--amber-bg); border: 2px solid var(--amber); color: #7A4B12; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.86rem; margin-bottom: 14px; }
.error-box { background: var(--red-bg); border: 2px solid var(--red); color: #7A2620; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.86rem; margin-bottom: 14px; }
.warn-box { background: var(--amber-bg); border: 2px solid var(--amber); color: #6B450F; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.86rem; margin-bottom: 14px; }
.warn-box .headline { font-weight: 800; margin-bottom: 4px; }

/* A field the receipt scan couldn't settle on its own (Expenses page):
   flagged amber until the operator picks a value, rather than saved with
   a guess. See scripts/lib/receipt_ocr.py. */
.field.needs-confirm > label { color: var(--amber); }
.field.needs-confirm input,
.field.needs-confirm select,
.field.needs-confirm textarea { border-color: var(--amber); background: var(--amber-bg); }
.field.needs-confirm .field-note { color: var(--amber); font-weight: 600; }
.info-box { background: var(--green-bg); border: 2px solid var(--green); color: #1E4F26; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.86rem; margin-bottom: 14px; }
.error-box .headline { font-weight: 800; margin-bottom: 4px; }

.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.86rem; }
.activity-list li:last-child { border-bottom: none; }

.chat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.chat-sidebar { position: sticky; top: 0; }
.chat-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.chat-list-item { position: relative; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 28px 8px 10px; cursor: pointer; background: var(--white); }
.chat-list-item:hover { border-color: var(--border); }
.chat-list-item.active { border-color: var(--orange); background: #FFF6EE; }
.chat-list-title { font-size: 0.84rem; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-list-meta { font-size: 0.72rem; color: var(--grey-500); margin-top: 3px; }
.chat-list-delete { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: none; background: transparent; color: var(--grey-500); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 4px; }
.chat-list-delete:hover { background: var(--red-bg); color: var(--red); }

.chat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-thread { flex: 1; min-height: 360px; max-height: 60vh; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-bubble { max-width: 78%; border-radius: var(--radius); padding: 10px 14px; font-size: 0.9rem; line-height: 1.5; }
.chat-bubble.user { align-self: flex-end; background: var(--charcoal); color: var(--white); }
.chat-bubble.assistant { align-self: flex-start; background: var(--grey-100); border: 1px solid var(--border-soft); }
.chat-role { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.6; margin-bottom: 4px; }
.chat-input-row { display: flex; gap: 10px; align-items: flex-end; border-top: 2px solid var(--border); padding: 14px 20px; background: var(--white); }
.chat-input-row textarea { flex: 1; resize: none; font-family: var(--font-body); }
.chat-input-row .btn { flex-shrink: 0; }
.activity-list .time { color: var(--grey-500); font-variant-numeric: tabular-nums; white-space: nowrap; }

.remediation {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--charcoal); color: #EAE6DA; border-radius: var(--radius-sm);
  padding: 8px 12px; font-family: var(--font-mono); font-size: 0.78rem; margin-top: 8px;
}
.remediation button { padding: 4px 10px; font-size: 0.72rem; }

.search-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.search-bar input { flex: 1; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-chip {
  padding: 6px 12px; border-radius: 999px; border: 2px solid var(--border-soft);
  font-size: 0.78rem; font-weight: 700; cursor: pointer; background: var(--white); color: var(--grey-700);
}
.filter-chip.active { border-color: var(--orange); background: #FFF4EC; color: var(--orange-dark); }

@media (max-width: 860px) {
  .sidebar { display: none; position: fixed; z-index: 30; width: 240px; box-shadow: 4px 0 12px rgba(0,0,0,0.25); }
  .sidebar.open { display: flex; }
  .topbar-mobile { display: flex; }
  main { padding: 20px 16px 60px; }

  /* Touch targets: 44px is the Apple HIG minimum. Desktop sizing is
     untouched -- this only grows the tappable area on mobile, not the
     visual weight of the buttons (same padding/font, just a taller
     minimum box), so the existing look carries over unchanged. */
  button, .btn, button.ghost, .btn.ghost { min-height: 44px; }
  .topbar-mobile button { min-height: 44px; min-width: 44px; }

  /* Recent-activity rows: the product-name link's own box was only as
     tall as its text line (~17px) -- a poor tap target even though the
     whole row is visually one unit. "Stretched link": the anchor's hit
     area covers the full row (its li), nothing changes visually, and
     tapping anywhere on the row now works, not just the underlined text. */
  .activity-list li { position: relative; }
  .activity-list a::after { content: ""; position: absolute; inset: 0; }

  /* Same stretched-hit-area treatment for other single-link rows/cells:
     the receipt "Drive ↗" cell (nothing else lives in that cell) and the
     audit page's downloadable-file list. */
  .receipt-cell { position: relative; }
  .receipt-cell a::after { content: ""; position: absolute; inset: 0; }
  .file-list li { position: relative; padding: 4px 0; }
  .file-list a::after { content: ""; position: absolute; inset: 0; }
}

/* FAQ answer preview -- rendered from faq_markdown.py's fixed-shape HTML
   (<p>/<strong>/<em>/<a>), a WYSIWYG preview of what the storefront widget
   will show. */
.faq-answer-preview p { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.5; }
.faq-answer-preview p:last-child { margin-bottom: 0; }
.faq-answer-preview a { color: var(--orange-dark); }

/* Development-environment bar. Deliberately loud and not dismissible: its
   whole job is to be impossible to mistake for production at a glance. Uses
   the existing amber rather than a new colour -- this is a warning, not a
   new part of the brand. */
.env-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--amber);
  color: var(--white);
  text-align: center;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--charcoal);
}