/* ==========================================================================
   tracker.css — page-only compositions for tracker.html (Mileage & Pupil Tracker)
   Sandbox build, Sept 27, 2026. Tokens only (var(--…)); no colour literals.
   Everything here draws a picture of the app or its paperwork with plain
   HTML, so none of it is focusable and every mock sits inside a
   figure role="img" with a spoken description.

    1  Hero
    2  "What a driver logs" cards + mini controls (tiles, steppers, odometer, times)
    3  "Does this look right?" stage
    4  Mileage report paper (extends site.css .paper)
    5  Living workbook sheet
    6  Evening email + Trips page panel
    7  Price card extras
   ========================================================================== */


/* 1. HERO ---------------------------------------------------------------- */
.tr-hero::after{   /* the same faint instrument grid as the home hero */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--line-hair) 1px, transparent 1px), linear-gradient(90deg, var(--line-hair) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 72% 34%, var(--ink-strong) 0%, transparent 75%);
  mask-image:radial-gradient(70% 60% at 72% 34%, var(--ink-strong) 0%, transparent 75%);
}
.tr-hero > .wrap{position:relative;z-index:1}
.tr-hero-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(32px, 5vw, 72px);align-items:center}
.tr-hero h1{margin-top:16px}
.tr-hero h1 .dim{display:block}
.tr-hero .lead{max-width:600px}
.tr-hero-visual{display:flex;flex-direction:column;align-items:center}
.tr-hero-visual .device-note{margin-top:18px}
@media (max-width: 1020px){
  .tr-hero-grid{grid-template-columns:1fr}
}


/* 2. WHAT A DRIVER LOGS --------------------------------------------------- */
.log-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.log-card > .label{display:flex;align-items:center;gap:8px;color:var(--accent)}
.log-card > .label .ic{width:16px;height:16px}
.log-card .body-2{margin-top:0}
.log-card .body-2 i{font-style:normal;font-weight:700;color:var(--ink-strong)}
.mini{
  margin-top:auto;padding:14px;border-radius:var(--r-md);
  background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line-strong);
}

/* trip-type tiles (the app's A–D tiles, drawn small) */
.tt-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}
.tt{
  display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 10px;border-radius:var(--r-md);
  font-size:var(--fs-small);font-weight:700;line-height:1.2;color:var(--ink-strong);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.tt.is-on{background:var(--surface-3);box-shadow:inset 0 0 0 2px var(--ink-strong), var(--sh-2)}
.tt .ic{width:18px;height:18px;margin-left:auto;color:var(--ink-strong)}
.tt-code{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;
  font-family:var(--font-display);font-size:.95rem;font-weight:800;color:var(--ink-strong);
  background:var(--surface-inset);box-shadow:inset 0 0 0 1.5px var(--line-control);
}

/* pupil steppers */
.pc-rows{display:grid;gap:10px}
.pc-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px}
.pc-step{display:inline-flex;align-items:center;gap:6px}
.pc-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--ink-strong);
  background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.pc-btn .ic{width:18px;height:18px;stroke-width:2.6}
.pc-num{
  min-width:52px;height:38px;display:grid;place-items:center;border-radius:10px;
  font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--ink-strong);font-variant-numeric:tabular-nums;
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.pc-total{
  display:inline-flex;align-items:baseline;gap:10px;margin-top:12px;padding:7px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-meta);font-weight:700;color:var(--ink-strong);background:var(--accent-tint);
}
.pc-total b{font-family:var(--font-display);font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}

/* odometer: carried start -> typed end = miles */
.odo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.odo-box{
  display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:var(--r-md);min-width:0;
  background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.odo-box.is-carried{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.odo-box b{font-family:var(--font-display);font-size:1.3rem;font-weight:800;line-height:1.1;color:var(--ink-strong);font-variant-numeric:tabular-nums}
.odo-note{font-size:var(--fs-label);color:var(--ink-3);line-height:1.3}
.odo-arrow{width:20px;height:20px;color:var(--ink-3)}
.odo-miles{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding-top:10px;
  border-top:1px dashed var(--line-strong);font-size:var(--fs-meta);font-weight:700;color:var(--ink-2);
}
.odo-miles b{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--ink-strong);font-variant-numeric:tabular-nums}

@media (max-width: 360px){
  .odo{grid-template-columns:1fr}
  .odo-arrow{transform:rotate(90deg);justify-self:center}
  .pc-num{min-width:44px}
}

/* start / end times */
.mini-row{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink-2)}
.mini-row b{color:var(--ink-strong)}
.time-row{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;margin-top:12px}
.time-box{
  display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.time-box b{font-family:var(--font-display);font-size:1.3rem;font-weight:800;line-height:1.1;color:var(--ink-strong);font-variant-numeric:tabular-nums}
.time-box small{margin-left:5px;font-size:.62em;font-weight:800;color:var(--ink-2)}


/* 3. "DOES THIS LOOK RIGHT?" STAGE ----------------------------------------- */
.guard-stage{
  position:relative;margin:0 auto;width:100%;max-width:460px;padding:18px 18px 22px;border-radius:var(--r-2xl);
  background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line-strong), var(--sh-2);
}
.guard-ghost{display:grid;gap:10px;opacity:.38;padding:4px 4px 0}
.gh-head{display:flex;align-items:center;gap:12px}
.gh-back{
  display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px 0 8px;border-radius:var(--r-sm);
  font-size:var(--fs-meta);font-weight:700;color:var(--ink-strong);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.gh-back .ic{width:16px;height:16px}
.gh-title b{display:block;font-size:var(--fs-body);color:var(--ink-strong);line-height:1.2}
.gh-title span{font-size:var(--fs-meta);color:var(--ink-2)}
.gh-tiles{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;margin-top:6px}
.gh-tiles span{height:46px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line-strong)}
.gh-tiles span:first-child{box-shadow:inset 0 0 0 2px var(--ink-strong)}
.guard{
  position:relative;z-index:1;margin:-58px 0 0;padding:22px 20px 18px;border-radius:var(--r-xl);
  background:var(--surface-3);
  box-shadow:inset 0 3px 0 var(--warn), inset 0 0 0 1px var(--line-strong), var(--sh-3);
}
.guard-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--warn);background:var(--warn-tint)}
.guard-icon .ic{width:26px;height:26px}
.guard-title{margin-top:14px;font-family:var(--font-display);font-size:1.45rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--ink-strong)}
.guard-lines{list-style:none;display:grid;gap:10px;margin-top:12px}
.guard-lines li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);line-height:1.45;color:var(--ink)}
.guard-lines .ic{width:18px;height:18px;margin-top:2px;color:var(--warn)}
.guard-doors{display:grid;gap:10px;margin-top:18px}
.guard-door{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 14px;border-radius:var(--r-md);
  font-weight:800;text-align:center;color:var(--ink-strong);
  background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.guard-door.is-act{color:var(--on-accent);background:var(--accent-fill);box-shadow:var(--sh-fill)}
.guard-fine{margin-top:12px;font-size:var(--fs-meta);color:var(--ink-3)}
.guard-cap{margin-top:16px}


/* 4. MILEAGE REPORT PAPER (builds on site.css §26) ------------------------ */
.tr-paper .paper-stats{grid-template-columns:repeat(4, minmax(0,1fr))}
.tr-paper .paper-stat span{white-space:normal;line-height:1.25;display:block;margin-top:2px}
.paper-h{
  margin-top:16px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-ink-2);
}
.tr-paper .paper-table{margin-top:6px}
.tr-paper .paper-table th:not(:first-child),.tr-paper .paper-table td:not(:first-child){text-align:right}
.tr-paper .paper-table td:first-child{white-space:nowrap}
.tr-paper .paper-table .code{
  display:inline-grid;place-items:center;width:17px;height:17px;margin-right:6px;border-radius:4px;
  font-size:9.5px;font-weight:800;color:var(--p-ink);background:var(--p-fill);box-shadow:inset 0 0 0 1px var(--p-line);
}
.tr-paper .paper-table .muted td{color:var(--p-ink-3)}
.tr-paper .paper-table .total td{font-weight:800;border-top:2px solid var(--p-ink);border-bottom:0}
.tr-paper .paper-note{margin-top:10px;font-size:10px;line-height:1.45;color:var(--p-ink-2)}
@media (max-width: 560px){
  .tr-paper .paper-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .tr-paper .paper-table{font-size:10px}
  .tr-paper .paper-table th,.tr-paper .paper-table td{padding:5px 3px}
}


/* 5. LIVING WORKBOOK SHEET ------------------------------------------------- */
.sheet{
  width:100%;max-width:560px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-strong);
}
.sheet-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-1);box-shadow:inset 0 -1px 0 var(--line-hair)}
.sheet-ico{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;color:var(--accent);background:var(--accent-tint)}
.sheet-ico .ic{width:20px;height:20px}
.sheet-name{min-width:0}
.sheet-name b{display:block;font-size:var(--fs-small);line-height:1.25;color:var(--ink-strong)}
.sheet-name span{display:block;font-size:var(--fs-label);color:var(--ink-3)}
.sheet-bar .chip{margin-left:auto;flex:none}
.sheet-grid{width:100%;border-collapse:collapse;font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.sheet-grid th,.sheet-grid td{padding:9px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-hair)}
.sheet-grid th + th,.sheet-grid td + td{box-shadow:inset 1px 0 0 var(--line-hair)}
.sheet-grid th:first-child,.sheet-grid td:first-child{text-align:left}
.sheet-grid thead th{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3);background:var(--surface-1)}
.sheet-grid tbody td{color:var(--ink)}
.sheet-grid tbody td:first-child{font-weight:700;color:var(--ink-2)}
.sheet-grid .is-gap td{padding:3px 12px;color:var(--ink-3);letter-spacing:.2em}
.sheet-grid .is-new td{background:var(--accent-tint)}
.sheet-grid .is-new td:first-child{color:var(--ink-strong)}
.sheet-grid .is-total td{font-weight:800;color:var(--ink-strong);background:var(--surface-1);border-bottom:0;box-shadow:inset 0 1.5px 0 var(--line-control)}
.sheet-grid .is-total td + td{box-shadow:inset 0 1.5px 0 var(--line-control), inset 1px 0 0 var(--line-hair)}
.sheet-tabs{display:flex;align-items:stretch;gap:2px;padding:0 6px;background:var(--surface-inset);box-shadow:inset 0 1px 0 var(--line-strong)}
.sheet-tab{display:inline-flex;align-items:center;padding:9px 10px;font-size:var(--fs-label);font-weight:700;color:var(--ink-3)}
.sheet-tab.is-on{color:var(--ink-strong);background:var(--surface-2);box-shadow:inset 0 2px 0 var(--accent)}
.sheet-tab.is-status{margin-left:auto;gap:6px;color:var(--ink-2)}
.sheet-tab.is-status .ic{width:15px;height:15px;color:var(--accent)}
.sheet-cap{margin-top:14px}
@media (max-width: 560px){
  .sheet-grid th,.sheet-grid td{padding:8px 8px}
}
@media (max-width: 360px){   /* 320 px phones: the five columns were 7 px wider than the card */
  .sheet-grid th,.sheet-grid td{padding:8px 5px}
}


/* 6. EVENING EMAIL + TRIPS PAGE ------------------------------------------- */
.loose-grid{align-items:start}
.loose{display:flex;flex-direction:column;gap:10px}
.loose .label{display:flex;align-items:center;gap:8px}
.loose .label .ic{width:16px;height:16px;color:var(--accent)}
.loose-visual{margin-top:14px}
.loose .body-2 b{font-weight:700}

.mail{
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);
  box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-strong);
}
.mail-head{display:grid;gap:3px;padding:14px 18px;background:var(--surface-1);box-shadow:inset 0 -1px 0 var(--line-hair);font-size:var(--fs-meta);color:var(--ink-3)}
.mail-head span b{font-weight:600;color:var(--ink-2)}
.mail-subject{margin-top:6px;font-size:var(--fs-body);font-weight:750;line-height:1.35;color:var(--ink-strong)}
.mail-body{padding:16px 18px 18px;font-size:var(--fs-small);line-height:1.5;color:var(--ink)}
.mail-body ul{list-style:none;display:grid;gap:10px}
.mail-body li{display:flex;gap:10px}
.mail-body li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--warn)}
.mail-body li span{min-width:0}
.mail-body li b{font-weight:700}
.mail-link{margin-top:14px;font-weight:700;color:var(--accent)}

.tpanel{
  border-radius:var(--r-lg);padding:16px;background:var(--surface-1);
  box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-strong);
}
.tpanel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tpanel-title{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--ink-strong)}
.tpanel-add{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px 0 10px;border-radius:10px;
  font-size:var(--fs-meta);font-weight:700;color:var(--on-accent);background:var(--accent-fill);box-shadow:var(--sh-fill);
}
.tpanel-add .ic{width:16px;height:16px;stroke-width:2.6}
.tpanel-sec{margin-top:16px;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3)}
.rv{
  margin-top:10px;padding:12px 14px 14px;border-radius:var(--r-md);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-hair), inset 3px 0 0 var(--warn);
}
.rv-head{font-size:var(--fs-meta);font-weight:700;color:var(--ink-strong)}
.rv-detail{margin-top:4px;font-size:var(--fs-meta);line-height:1.45;color:var(--ink-2)}
.rv-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rv-act{
  display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 12px;border-radius:9px;
  font-size:var(--fs-meta);font-weight:700;color:var(--ink-strong);
  background:var(--surface-inset);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.rv-act .ic{width:15px;height:15px;stroke-width:2.6}
.rv-act.is-ok{color:var(--st-clear);box-shadow:inset 0 0 0 1.5px var(--st-clear);background:transparent}


/* 7. PRICE CARD EXTRAS ----------------------------------------------------- */
.tr-plan .addon-row .meta{margin-top:2px}
.tr-plan > .label + .addon-row{border-top:0;margin-top:4px}
.tr-price-title .dim{display:block}
.tr-plan .addon-row.is-total{border-top:1.5px solid var(--line-control)}
.tr-plan .addon-row.is-total .price{font-size:1.25rem}
.tr-plan .plan-note{margin-top:4px}