/* carbon.hosted.cy — built for a phone held in one hand, in a driveway, in the sun. */
:root{
  --ink:#12171c; --ink-2:#4a565f; --ink-3:#7d8994;
  --paper:#e9edf0; --card:#fff; --line:#ccd4da;
  --accent:#0e7a5f; --accent-ink:#0a5c47; --accent-soft:#e2f2ec;
  --due:#b0521a; --due-soft:#fbeee3;
  --bad:#b02020; --bad-soft:#fbe7e7;
  --plate-blue:#003399;
  --r:10px; --pad:14px;
  --shadow:0 1px 0 rgba(18,23,28,.06), 0 2px 8px rgba(18,23,28,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-text-size-adjust:100%; padding-bottom:78px;
}
a{color:var(--accent-ink)}
h1,h2,h3{margin:0 0 .4em; letter-spacing:-.02em; line-height:1.15}
h1{font-size:1.45rem} h2{font-size:1.1rem} h3{font-size:.95rem}
.wrap{max-width:900px; margin:0 auto; padding:0 12px}

/* ---- top bar ---- */
.top{background:var(--ink); color:#fff; position:sticky; top:0; z-index:20}
.top .wrap{display:flex; align-items:center; gap:10px; height:52px}
.top .brand{font-weight:700; letter-spacing:.02em; color:#fff; text-decoration:none}
.top .brand span{color:var(--accent); }
.top .spacer{flex:1}
.top .who{font-size:.8rem; color:#9fb0bb}
.top a.out{color:#9fb0bb; font-size:.8rem; text-decoration:none}

/* ---- bottom nav (thumb zone) ---- */
.nav{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--card);
  border-top:1px solid var(--line); display:flex; padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1; text-align:center; padding:9px 4px 10px; text-decoration:none; color:var(--ink-2); font-size:.7rem}
.nav a b{display:block; font-size:1.15rem; line-height:1.2; font-weight:600}
.nav a.on{color:var(--accent-ink); box-shadow:inset 0 2px 0 var(--accent)}

/* ---- cards & lists ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--pad); margin:12px 0; box-shadow:var(--shadow)}
.card.tight{padding:0; overflow:hidden}
.row{display:flex; align-items:center; gap:12px; padding:12px var(--pad);
  border-bottom:1px solid var(--line); text-decoration:none; color:inherit}
.row:last-child{border-bottom:0}
.row:active{background:var(--accent-soft)}
.row .grow{flex:1; min-width:0}
.row .sub{font-size:.82rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .chev{color:var(--ink-3)}
.eyebrow{font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600; margin:18px 2px 6px}
.empty{padding:26px var(--pad); text-align:center; color:var(--ink-2)}
.empty b{display:block; color:var(--ink); margin-bottom:4px}

/* ---- the plate: the one thing he recognises a car by ---- */
.plate{display:inline-flex; align-items:stretch; border:1.5px solid var(--ink); border-radius:5px;
  overflow:hidden; background:#fff; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-weight:700; letter-spacing:.06em; line-height:1; vertical-align:middle}
.plate i{background:var(--plate-blue); color:#fff; font-style:normal; font-size:.5rem;
  display:flex; align-items:flex-end; justify-content:center; padding:0 3px 3px; letter-spacing:0}
.plate b{padding:5px 7px 4px; font-size:.95rem}
.plate.sm b{padding:3px 5px 2px; font-size:.78rem} .plate.sm i{font-size:.42rem}

/* ---- tags ---- */
.tag{display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 7px; border-radius:99px; background:var(--paper); color:var(--ink-2)}
.tag.ok{background:var(--accent-soft); color:var(--accent-ink)}
.tag.due{background:var(--due-soft); color:var(--due)}
.tag.bad{background:var(--bad-soft); color:var(--bad)}

/* ---- forms ---- */
label{display:block; font-size:.78rem; font-weight:600; color:var(--ink-2); margin:12px 0 4px}
input,select,textarea{width:100%; font:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:11px 12px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
textarea{min-height:90px; resize:vertical}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
.hint{font-size:.75rem; color:var(--ink-3); margin-top:4px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; text-transform:uppercase; letter-spacing:.08em}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px;
  padding:0 18px; border:1px solid var(--ink); border-radius:8px; background:var(--ink); color:#fff;
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.go{background:var(--accent); border-color:var(--accent)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.wide{width:100%}
.btn.sm{min-height:36px; padding:0 12px; font-size:.85rem}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}

/* ---- misc ---- */
.flash{margin:12px 0; padding:11px 14px; border-radius:8px; font-weight:600; font-size:.9rem;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid #bfe0d4}
.flash.err{background:var(--bad-soft); color:var(--bad); border-color:#eec4c4}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px}
.stat b{display:block; font-size:1.6rem; letter-spacing:-.03em; line-height:1.1}
.stat span{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600}
.search{display:flex; gap:8px; margin:12px 0}
.hr{height:1px; background:var(--line); margin:16px 0}
.right{text-align:right} .nowrap{white-space:nowrap}
@media (min-width:760px){
  body{padding-bottom:0}
  .nav{position:static; border-top:0; border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .nav a{flex:0 0 auto; padding:12px 18px; font-size:.85rem; display:flex; gap:8px; align-items:center}
  .nav a b{display:inline; font-size:1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}