/* Rev Auto Club — My Garage app theme (Brand Guide v2)
   Drop-in for index.html: load AFTER the Tailwind CDN script and replace the
   Inter Google Fonts link with the Archivo + Michroma request below. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900&family=Michroma&display=swap");

:root {
  --rev-black:#000; --rev-ink:#1D1D1D; --rev-white:#fff;
  --rev-gray-100:#F4F4F4; --rev-gray-200:#E3E3E3; --rev-gray-300:#D6D6D6; --rev-gray-500:#818385; --rev-gray-700:#4A4A4A; --rev-gray-800:#333;
  --rev-red:#A71F1A; --rev-red-hover:#8C1915;
  --font-headline:'Archivo',Helvetica,Arial,sans-serif; --font-label:'Michroma',sans-serif; --font-body:'Archivo',Helvetica,Arial,sans-serif; --font-mono:ui-monospace,Menlo,monospace;
  --shadow-sticky-header:0 2px 12px rgba(0,0,0,.06);
}

/* Base */
html { background:var(--rev-gray-100); }
body { font-family:var(--font-body); color:var(--rev-ink); -webkit-font-smoothing:antialiased; }
a { color:var(--rev-ink); } a:hover { color:var(--rev-red); }
* { border-radius:0 !important; } /* radius 0 everywhere — removes every Tailwind rounded-* in one rule */
.shadow-sm,.shadow-md,.shadow-lg,.shadow { box-shadow:none !important; } /* no card shadows; separation by rule or ground */

/* Type roles */
.rev-h { font-family:var(--font-headline); font-stretch:125%; font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:1.02; }
.rev-h1 { font-size:28px; } .rev-h2 { font-size:24px; }
.rev-label { font-family:var(--font-label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.rev-eyebrow { font-family:var(--font-label); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--rev-gray-700); }
.rev-h4 { font-family:var(--font-label); font-size:13px; letter-spacing:.18em; text-transform:uppercase; }
.rev-price { font-weight:600; font-variant-numeric:tabular-nums; }
.rev-mono { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--rev-gray-500); }

/* Buttons — Michroma, square, 44px min. One red per viewport. */
.rev-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:16px 28px; font-family:var(--font-label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; line-height:1; border:0; cursor:pointer; transition:background .15s,color .15s; text-decoration:none; }
.rev-btn-sm { min-height:44px; padding:14px 20px; font-size:11px; }
.rev-btn-primary { background:var(--rev-red); color:#fff; } .rev-btn-primary:hover { background:var(--rev-red-hover); }
.rev-btn-secondary { background:var(--rev-black); color:#fff; } .rev-btn-secondary:hover { background:var(--rev-ink); }
.rev-btn-outline { background:#fff; color:var(--rev-ink); border:1px solid var(--rev-ink); } .rev-btn-outline:hover { background:var(--rev-black); color:#fff; }
.rev-btn[disabled] { opacity:.5; cursor:not-allowed; }
.rev-link { color:var(--rev-red); font-weight:600; text-decoration:none; } .rev-link:hover { color:var(--rev-red-hover); }

/* Fields — 48px, 1px ink border, red 2px focus ring */
.rev-field { width:100%; box-sizing:border-box; min-height:48px; padding:14px 16px; font:15px var(--font-body); color:var(--rev-ink); background:#fff; border:1px solid var(--rev-ink); outline:none; }
.rev-field:focus { outline:2px solid var(--rev-red); outline-offset:1px; }
.rev-field[readonly] { color:var(--rev-gray-700); background:var(--rev-gray-100); }
textarea.rev-field { min-height:120px; resize:vertical; }
.rev-field-label { display:block; margin-bottom:8px; font-family:var(--font-label); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
input[type=checkbox] { accent-color:var(--rev-red); width:18px; height:18px; }

/* Surfaces */
.rev-card { background:#fff; border:1px solid var(--rev-gray-200); }
.rev-band { background:var(--rev-black); color:#fff; } .rev-band .muted { color:var(--rev-gray-300); }
.rev-ground { background:var(--rev-gray-100); }
.rev-list > * { border-bottom:1px solid var(--rev-gray-200); } .rev-list { border-top:1px solid var(--rev-gray-200); }
.rev-badge { display:inline-block; background:#000; color:#fff; font-family:var(--font-label); font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:6px 8px; line-height:1; }

/* Filter tabs (Active / Prospects / Archived) */
.rev-tabs { display:flex; border-bottom:1px solid var(--rev-gray-200); }
.rev-tab { padding:12px 16px; margin-bottom:-1px; font-family:var(--font-label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rev-gray-700); border-bottom:2px solid transparent; background:none; }
.rev-tab.active { color:#000; border-bottom-color:var(--rev-red); }

/* App shell */
.rev-header { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--rev-gray-200); height:56px; display:grid; grid-template-columns:56px 1fr 56px; align-items:center; }
.rev-header-title { text-align:center; font-family:var(--font-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.rev-tabbar { position:sticky; bottom:0; z-index:20; background:#fff; border-top:1px solid var(--rev-gray-200); display:grid; grid-template-columns:repeat(4,1fr); padding-bottom:env(safe-area-inset-bottom); }
.rev-tabbar .nav-btn { height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--rev-gray-700); border-top:2px solid transparent; margin-top:-1px; }
.rev-tabbar .nav-btn.active { color:#000; border-top-color:var(--rev-red); }
.rev-tabbar .nav-btn span { font-family:var(--font-label); font-size:8px; letter-spacing:.14em; text-transform:uppercase; }
.rev-tabbar svg,.rev-header svg { stroke-width:1.5; }
@media (min-width:820px) {
  .rev-header { height:72px; grid-template-columns:auto 1fr auto; box-shadow:var(--shadow-sticky-header); border-bottom:0; padding:0 24px; }
  .rev-tabbar { display:none; }
  #app { max-width:none; }
}

/* Dashboard tiles */
.rev-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--rev-gray-200); border:1px solid var(--rev-gray-200); }
.rev-tile { background:#fff; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:16px; }
.rev-tile:hover { background:var(--rev-gray-100); }
.rev-tile-icon { width:56px; height:56px; border:1px solid var(--rev-ink); display:flex; align-items:center; justify-content:center; }
.rev-tile-icon.solid { background:#000; color:#fff; border-color:#000; }

/* Status marks (replace green/amber pills) */
.rev-check { display:inline-block; width:14px; height:8px; border-left:3px solid var(--rev-red); border-bottom:3px solid var(--rev-red); transform:rotate(-45deg); }
.rev-mark-pending { color:var(--rev-red); font-weight:700; }
.rev-mark-later { color:var(--rev-gray-500); }

/* Toast */
.toast { background:#000 !important; border-radius:0 !important; font-family:var(--font-body); font-size:14px; padding:14px 20px; box-shadow:var(--shadow-sticky-header); }