/* Under the Paint
   Dylan's palette: concrete floor, cast iron, primer rust, vintage copper.
   Every pairing below was measured, not guessed. Contrast ratios in comments. */
:root{
  --ground:#F5F5F3;        /* concrete floor */
  --surface:#FFFFFF;
  --surface-2:#E8E8E4;
  --ink:#1C1E21;           /* cast iron, 15.3:1 on ground */
  --ink-soft:#5C6066;      /* 5.8:1 on ground */
  --rule:#D8D8D3;
  --rust:#D9534F;          /* the brand red: fills and graphics only, 3.6:1 */
  --rust-deep:#A63B37;     /* the same red for text and buttons, 5.8:1 */
  --copper:#E59866;        /* 2.1:1, decoration only, never text */
  --copper-deep:#8A5A2B;   /* copper you can actually read, 5.4:1 */
  --on-rust:#FFFFFF;       /* 6.4:1 on rust-deep */
  /* What each colour is FOR. The main action and an error used to be the
     same red; now they are separate tokens that can differ. */
  --accent:var(--rust-deep);       /* main action fill */
  --on-accent:var(--on-rust);
  --accent-text:var(--rust-deep);  /* brand, days, money, focus */
  --error:var(--rust-deep);        /* errors and destructive actions only */
  --on-error:#FFFFFF;
  --steel:#2F5F85;                 /* links and information, 6.2:1 */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#1C1E21;
    --surface:#26292D;
    --surface-2:#32363B;
    --ink:#F5F5F3;         /* 15.3:1 */
    --ink-soft:#A7ADB3;    /* 7.4:1 */
    --rule:#3A3E44;
    --rust:#D9534F;
    --rust-deep:#E8726D;   /* lifted for dark ground, 5.6:1 */
    --copper:#E59866;      /* 7.2:1 here, so it can carry text */
    --copper-deep:#E59866;
    --on-rust:#1C1E21;
    --on-error:#1C1E21;    /* white on this red was 2.96:1, a fail */
    --steel:#8FB4D3;
    color-scheme:dark;
  }
}

/* Workshop palette (preview). Neutrals unchanged. High-vis orange is the
   one action colour, red is reserved for errors, steel blue for information.
   Measured: orange vs error stays 25.9 dE apart for a deuteranope. */
:root[data-palette="workshop"]{
  --accent:#E8621A;        /* 3.1:1 on ground, ink on it 4.9:1 */
  --on-accent:#1C1E21;
  --accent-text:#B04A0E;   /* 5.0:1 */
  --error:#B3261E;         /* 6.0:1, white on it 6.5:1 */
  --on-error:#FFFFFF;
  --steel:#2F5F85;
  --copper:#E8621A;
  --copper-deep:#B04A0E;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="workshop"]{
    --ground:#141618;
    --surface:#1E2124;
    --surface-2:#2A2E32;
    --ink:#F2F1EE;         /* 16.1:1 */
    --ink-soft:#A3A9B0;    /* 7.7:1 */
    --rule:#33383D;
    --accent:#FF7A2E;      /* 7.0:1 */
    --on-accent:#141618;
    --accent-text:#FF8C45; /* 7.9:1 */
    --error:#E5484D;       /* 4.6:1 */
    --on-error:#141618;
    --steel:#8FB4D3;       /* 8.3:1 */
    --copper:#FF7A2E;
    --copper-deep:#FF8C45;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Roboto",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%}
[hidden]{display:none !important}

h1,h2,h3,.disp{
  font-family:"Oswald","Arial Narrow",sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1.08;
  margin:0;text-wrap:balance;
}
h1{font-size:clamp(28px,7.5vw,38px);font-weight:700;margin-bottom:16px}
h2{font-size:23px;margin-bottom:10px}
.mono,.label{font-family:"Roboto Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
p{margin:0 0 12px}
.lede{color:var(--ink-soft);max-width:46ch}
.loading{color:var(--ink-soft);padding-top:40px}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);border-bottom:1px solid var(--rule)}
.bar-in{max-width:560px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mark{
  font-family:"Oswald",sans-serif;font-weight:700;font-size:20px;
  letter-spacing:.08em;text-transform:uppercase;color:inherit;text-decoration:none;
}
.mark span{color:var(--accent-text)}
.linkish{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}

.wrap{max-width:560px;margin:0 auto;padding-inline:16px;padding-block:28px 60px}

.field{margin-bottom:16px}
.field label{display:block;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;padding:13px;font:inherit;
}
/* Safari gives a date input an intrinsic width it will not go below, which
   pushes it straight out of a narrow column. Strip the native chrome. */
.field input[type=date],.field input[type=number]{
  -webkit-appearance:none;appearance:none;min-width:0;text-align:left;
}
.field input[type=date]::-webkit-date-and-time-value{text-align:left}
.field input:focus{border-color:var(--accent-text)}
.field input.code{font-family:"Roboto Mono",monospace;font-size:26px;letter-spacing:.28em;text-align:center}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > *{flex:1 1 140px;min-width:0}

.btn{
  display:inline-block;background:var(--accent);color:var(--on-accent);
  padding:14px 20px;border-radius:2px;
  font-family:"Oswald",sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.07em;text-transform:uppercase;text-align:center;
}
.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--rule)}
.btn.wide{width:100%}

.msg{font-family:"Roboto Mono",monospace;font-size:12px;padding:10px 0;color:var(--ink-soft)}
.msg.bad{color:var(--error)}

.card{
  display:block;border:1px solid var(--rule);border-left:3px solid var(--copper);
  background:var(--surface);padding:16px;margin-bottom:10px;text-decoration:none;color:inherit;
}
.card h2{margin-bottom:6px}
.card .meta{font-family:"Roboto Mono",monospace;font-size:11px;color:var(--ink-soft);display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1px solid var(--rule);padding:2px 7px;text-transform:uppercase;letter-spacing:.06em}
.pill.sold{border-color:var(--copper-deep);color:var(--copper-deep)}

.empty{border:1px dashed var(--rule);padding:24px;text-align:center;margin-bottom:16px}
hr.rule{border:none;border-top:1px solid var(--rule);margin:28px 0}

/* one build */
.counter{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.counter .big{font-family:"Oswald",sans-serif;font-size:26px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.stamp{font-family:"Roboto Mono",monospace;font-size:11px;color:var(--ink-soft)}
.stats{display:flex;flex-wrap:wrap;gap:22px;padding:16px 0}
.stat .v{font-family:"Oswald",sans-serif;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.entry{padding-block:20px;border-bottom:1px solid var(--rule);display:grid;gap:10px}
.entry:last-child{border-bottom:none}
.entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.entry .day{font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.entry p{margin:0}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag{font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule);padding:3px 7px;color:var(--ink-soft)}
.tag.money{border-color:var(--accent-text);color:var(--accent-text)}
.part{border-left:2px solid var(--copper);padding-left:10px}
.part .pn{font-family:"Roboto Mono",monospace;font-size:11px;color:var(--ink-soft)}
a.card{transition:border-color .15s}
a.card:hover{border-color:var(--accent-text)}

/* the logging sheet */
.scrim{position:fixed;inset:0;background:rgba(28,30,33,.45);z-index:50}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ground);border-top:2px solid var(--ink);
  max-height:88vh;overflow-y:auto;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.sheet-in{max-width:560px;margin:0 auto}
.hint{font-family:"Roboto Mono",monospace;font-size:12px;color:var(--ink-soft);margin-top:5px}
details.more{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
details.more > summary{list-style:none;cursor:pointer;font-family:"Oswald",sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:15px;font-weight:600;padding-bottom:8px}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:" +";font-family:"Roboto Mono",monospace;color:var(--ink-soft)}
details.more[open] > summary::after{content:" –"}
.sheet-actions{display:flex;gap:8px;margin-top:18px}
.sheet-actions .btn{flex:1}

/* photographs */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
.shot{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);background:var(--surface-2);display:block}
.shot.pending{background:repeating-linear-gradient(115deg,var(--surface-2) 0 12px,var(--surface) 12px 26px)}
.addshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;margin-top:6px}
.addshots .shot{aspect-ratio:1}
.addshots .add{aspect-ratio:1;border:1px dashed var(--rule);display:flex;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);padding:4px}

/* public page */
.follow{background:var(--surface);border:1px solid var(--rule);padding:18px;margin-block:22px}
.specs{display:grid;gap:6px;margin:0}
.specs .kv{display:flex;gap:12px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:6px}
.specs dd{margin:0}
.linkish.danger{display:block;margin-top:14px;color:var(--error)}
.entry .edit{margin-top:2px}

/* the importer */
.day-row{border-top:1px solid var(--rule);padding:12px 0;display:grid;gap:8px}
.day-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.day-head .day{font-family:"Oswald",sans-serif;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.day-row input{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:2px;padding:10px;font:inherit}
label.btn{cursor:pointer}

/* featured photograph */
.shots-wrap{display:grid;gap:6px}
.shot.featured{aspect-ratio:3/2;border:1px solid var(--rule)}
.page-hero{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule);margin-bottom:16px;display:block}
.addshots.existing{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.tile{position:relative}
.tile .shot{aspect-ratio:1}
.tile.is-featured .shot{outline:2px solid var(--accent);outline-offset:-2px}
.tile-feature{position:absolute;left:0;right:0;bottom:0;background:rgba(28,30,33,.72);color:#F5F5F3;
  font-family:"Roboto Mono",monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:4px 2px;text-align:center}
.tile.is-featured .tile-feature{background:var(--accent);color:var(--on-accent)}
.tile-remove{position:absolute;top:0;right:0;width:26px;height:26px;line-height:1;
  background:rgba(28,30,33,.72);color:#F5F5F3;font-size:15px}

/* full size photograph */
img.shot,img.page-hero{cursor:zoom-in}
#viewer{position:fixed;inset:0;z-index:90;background:rgba(18,19,21,.94);
  display:flex;align-items:center;justify-content:center;padding:16px}
#viewer img{max-width:100%;max-height:88vh;object-fit:contain;cursor:zoom-out;border:none}
.viewer-close{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;
  width:44px;height:44px;color:#F5F5F3;font-size:28px;line-height:1}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;
  color:#F5F5F3;font-size:34px;line-height:1;background:rgba(28,30,33,.5)}
.viewer-nav.prev{left:4px}
.viewer-nav.next{right:4px}
.viewer-count{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:0;right:0;
  text-align:center;color:#A7ADB3;font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.08em}

/* reference pictures */
.refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin-top:10px}
.refgrid .shot{aspect-ratio:1}
.refgrid .empty{grid-column:1/-1;margin-bottom:0}
/* file inputs: visually hidden rather than display:none, which some phones
   treat as "not really there" and hand back only the first file */
/* The file input IS the button. iOS will not open a picker for a display:none
   or clipped input reached through a label, so the input lies on top at full
   size with no opacity, and the tap lands on it directly. */
.pick{position:relative;overflow:hidden}
.pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:120px;cursor:pointer}

/* on screen messages, because a phone has no console */
#toast{position:fixed;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:120;
  background:var(--ink);color:var(--ground);padding:12px 14px;border-radius:2px;
  font-family:"Roboto Mono",monospace;font-size:12px;line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,.25)}
#toast.bad{background:var(--error);color:var(--on-error)}
#refBox.dropping{outline:2px dashed var(--accent-text);outline-offset:6px}

/* Fitts: the visible cross stays small, the finger target is 44px. */
.tile-remove::after{content:"";position:absolute;inset:-9px}

/* the main action and share sit on one line: one decision, not three */
.actions{display:flex;gap:8px}
.actions #openSheet{flex:1}
.actions #shareBuild{flex:0 0 auto;padding-inline:18px}
.nudge{margin-top:12px;padding:14px;border:1px solid var(--rule);border-left:3px solid var(--accent);
  background:var(--surface);display:grid;gap:10px}
.nudge-actions{display:flex;gap:16px;align-items:center}

/* discover: the photograph is the headline, the day count is the badge */
.nav{display:flex;gap:18px;align-items:center}
.dgrid{display:grid;gap:18px;margin:18px 0 22px}
.dcard{display:block;color:inherit;text-decoration:none;background:var(--surface);border:1px solid var(--rule);border-radius:2px;overflow:hidden;transition:border-color .15s}
.dcard:hover{border-color:var(--accent-text)}
.dcover{position:relative;aspect-ratio:4/3;background:var(--surface-2)}
.dcover img{width:100%;height:100%;object-fit:cover;display:block}
.dday{position:absolute;left:12px;bottom:12px;background:rgba(20,22,24,.8);color:#F5F5F3;
  font-family:"Roboto Mono",monospace;font-size:13px;font-weight:500;letter-spacing:.08em;padding:6px 10px;border-radius:2px}
.dbody{padding:14px 16px 16px}
.dbody h2{margin-bottom:4px}
.dcar{font-size:14px;color:var(--ink-soft);margin-bottom:6px}
.dmeta{font-family:"Roboto Mono",monospace;font-size:12px;color:var(--ink-soft)}
.dago{font-family:"Roboto Mono",monospace;font-size:12px;color:var(--accent-text);margin-top:6px}
.dnudge{border:1px dashed var(--rule);padding:16px;margin:6px 0 10px;color:var(--ink-soft)}
.dnudge strong{color:var(--ink)}


.nav a.linkish{text-decoration:none}
.dmeta span{white-space:nowrap}

/* likes and messages */
.social{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 6px}
.social .btn{flex:1 1 auto}
.socialline{font-family:"Roboto Mono",monospace;font-size:12px;color:var(--ink-soft);margin-top:12px}
.pill.new{border-color:var(--accent-text);color:var(--accent-text)}
.req{border-top:1px solid var(--rule);padding:12px 0}
.req.unread{border-left:3px solid var(--accent);padding-left:10px}
.req-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.req p{margin:8px 0;white-space:pre-wrap}
.req-actions{display:flex;gap:16px;align-items:center}
.req-actions .btn{padding:10px 14px;font-size:14px}
a.btn{text-decoration:none}

/* ============ the new look: preview with ?ui=next or Me > Look ============ */
:root:not([data-ui="next"]) .next-only{display:none}
:root[data-ui="next"] .old-only{display:none}
:root[data-ui="next"] .nav{display:none}
:root[data-ui="next"] .wrap{padding-bottom:130px}
:root[data-ui="next"] .btn{border-radius:14px}
:root[data-ui="next"] .field input,:root[data-ui="next"] .field select,:root[data-ui="next"] .field textarea{border-radius:12px}
:root[data-ui="next"] .card,:root[data-ui="next"] .follow,:root[data-ui="next"] .nudge,:root[data-ui="next"] .dnudge{border-radius:18px}
:root[data-ui="next"] .sheet{border-radius:24px 24px 0 0;border-top:0;box-shadow:0 -12px 40px rgba(0,0,0,.35)}
:root[data-ui="next"] h1.me-name{font-size:clamp(40px,12vw,60px);line-height:.95}

/* pages with a photo hero go dark all the way down */
:root[data-ui="next"] body:has(.dsheet){background:#1A1C1F}
:root[data-ui="next"] body:has(.dsheet) .bar{background:#141618;border-bottom-color:#141618;color:#F5F5F3}
:root[data-ui="next"] body:has(.dsheet) .buildstamp{color:#A3A9B0}

/* hero: the car is the headline, the name sits on it */
.hx{position:relative;margin:-28px -16px 0;aspect-ratio:4/5;max-height:74vh;overflow:hidden;background:#141618}
.hx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hx-blank{background:linear-gradient(160deg,#2A2E32,#141618)}
.hx::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,22,24,.55) 0%,rgba(20,22,24,0) 22%,rgba(20,22,24,0) 42%,rgba(20,22,24,.93) 100%)}
.hx-top{position:absolute;z-index:2;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px}
.glass{background:rgba(20,22,24,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#F5F5F3;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 15px;font-family:"Roboto Mono",monospace;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-foot{position:absolute;z-index:2;left:18px;right:18px;bottom:48px;color:#F5F5F3}
.chip{display:inline-block;background:var(--accent);color:var(--on-accent);font-family:"Roboto Mono",monospace;font-weight:500;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:12px}
.hx-name{font-size:clamp(38px,11vw,58px);line-height:.94;letter-spacing:.005em;margin:0 0 10px;color:#F5F5F3}
.hx-sub{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,243,.78)}

/* the dark panel slides up over the photo; everything inside goes dark by itself */
:root[data-ui="next"] .dsheet{--ground:#1A1C1F;--surface:#24272B;--surface-2:#2E3236;--ink:#F2F1EE;--ink-soft:#A3A9B0;--rule:#34383D;
  --accent-text:#E8726D;--error:#E8726D;--on-error:#141618;
  position:relative;z-index:3;margin:-30px -16px 0;padding:22px 16px 10px;border-radius:26px 26px 0 0;background:var(--ground);color:var(--ink)}
:root[data-ui="next"][data-palette="workshop"] .dsheet{--accent:#FF7A2E;--on-accent:#141618;--accent-text:#FF8C45;--error:#E5484D}

/* bento: big numbers, the day counter gets the colour */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}
.tile{background:var(--surface);border-radius:18px;padding:15px 16px 13px;min-width:0}
.tile.wide{grid-column:1 / -1}
.tv{font-family:"Oswald",sans-serif;font-weight:700;font-size:34px;line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile.wide .tv{font-size:28px;line-height:1.02}
.tl{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px}
.tile.accent{background:var(--accent);color:var(--on-accent)}
.tile.accent .tl{color:inherit;opacity:.78}

/* entries become photo cards */
:root[data-ui="next"] .dsheet .entry{background:var(--surface);border-radius:20px;padding:14px;margin:12px 0;border:0}
:root[data-ui="next"] .dsheet .entry img.shot{border-radius:12px}
:root[data-ui="next"] .dsheet details.more{border-top-color:var(--rule)}

/* discover: the name lives on the photograph */
:root[data-ui="next"] .dcard{position:relative;border:0;border-radius:22px;background:#141618}
:root[data-ui="next"] .dcover{aspect-ratio:4/5}
:root[data-ui="next"] .dbody{position:absolute;left:0;right:0;bottom:0;padding:70px 18px 18px;
  background:linear-gradient(180deg,rgba(20,22,24,0),rgba(20,22,24,.93) 55%);color:#F5F5F3}
:root[data-ui="next"] .dbody h2{font-size:30px;line-height:1;color:#F5F5F3}
:root[data-ui="next"] .dcar,:root[data-ui="next"] .dmeta{color:rgba(245,245,243,.8)}
:root[data-ui="next"] .dago{color:#E59866}
:root[data-ui="next"] .dday{top:14px;bottom:auto;left:14px;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:6px 12px}

/* floating bottom bar with the + in the middle, one thumb from everything */
.tabbar{display:none}
:root[data-ui="next"] .tabbar{position:fixed;z-index:40;left:50%;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(520px,calc(100% - 24px));display:flex;align-items:center;gap:4px;padding:8px;
  border-radius:26px;background:rgba(20,22,24,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;min-height:48px;justify-content:center;
  color:rgba(245,245,243,.6);text-decoration:none;font-family:"Roboto Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;position:relative}
.tabbar .tab.on{color:#F5F5F3}
.tabbar svg{width:22px;height:22px}
.tab-plus{flex:0 0 60px;height:56px;border-radius:18px;background:var(--accent);color:var(--on-accent);font:500 32px/1 "Oswald",sans-serif;display:flex;align-items:center;justify-content:center}
.tab-start{flex:1.4;text-align:center;padding:15px 10px;border-radius:18px;background:var(--accent);color:var(--on-accent);
  font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.badge{position:absolute;top:3px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;padding:0 4px;
  background:#E5484D;color:#141618;font:700 10px/17px "Roboto Mono",monospace;text-align:center}
.picklist{display:grid;gap:8px;margin-top:10px}
.pickrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border:1px solid var(--rule);
  border-radius:14px;background:var(--surface);text-align:left;font-family:"Oswald",sans-serif;font-size:18px;text-transform:uppercase}

/* garages as photo cards, a flag for status or new messages */
.dflag{position:absolute;top:14px;right:14px;background:rgba(20,22,24,.72);color:#F5F5F3;border-radius:999px;padding:6px 11px;
  font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
:root:not([data-ui="next"]) .dflag{border-radius:2px}
.bento .tile:only-child{grid-column:1 / -1}
:root[data-ui="next"] .hero-h1{font-size:clamp(46px,14vw,70px);line-height:.92;margin:18px 0 18px}
/* the money and parts box, up front where it gets filled in */
.buybox{border:1px solid var(--rule);background:var(--surface);padding:14px 14px 4px;margin:0 0 16px}
.buybox > .label{display:block;margin-bottom:10px;color:var(--accent-text)}
.buybox .hint{margin:-6px 0 12px}
:root[data-ui="next"] .buybox{border-radius:16px}
.field textarea{resize:vertical;min-height:84px;line-height:1.45}
.dday{text-transform:uppercase}

/* milestones: a badge on the entry, a track across the build */
.ms{display:inline-flex;align-items:center;gap:6px;justify-self:start;align-self:start;background:var(--accent);color:var(--on-accent);
  font-family:"Roboto Mono",monospace;font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
:root:not([data-ui="next"]) .ms{border-radius:2px}
.entry-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.mstrack{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;margin:0 -16px 4px;padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mstrack::-webkit-scrollbar{display:none}
.mstep{flex:0 0 auto;min-width:94px;padding:10px 11px 9px;border-radius:14px;background:var(--surface);border:1px solid var(--rule);opacity:.55}
:root:not([data-ui="next"]) .mstep{border-radius:2px}
.mstep.done{opacity:1;border-color:var(--accent)}
.mdot{display:block;width:10px;height:10px;border-radius:50%;border:2px solid var(--ink-soft);margin-bottom:8px}
.mstep.done .mdot{background:var(--accent);border-color:var(--accent)}
.ml{display:block;font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;font-size:14px;line-height:1.1;white-space:nowrap}
.md{display:block;font-family:"Roboto Mono",monospace;font-size:10px;color:var(--ink-soft);margin-top:3px;letter-spacing:.06em;text-transform:uppercase}
/* posters */
.poster{margin:6px 0 10px;border-radius:14px;overflow:hidden;background:var(--surface-2);min-height:120px;text-align:center}
.poster img{display:inline-block;max-width:100%;max-height:56vh;width:auto;height:auto;vertical-align:top}
.poster .loading{padding:48px 16px;margin:0}

/* comments: a thread under each entry */
details.cmts{border-top:1px solid var(--rule);padding-top:10px}
details.cmts > summary{list-style:none;cursor:pointer;font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
details.cmts > summary::-webkit-details-marker{display:none}
.cmt-list{display:grid;gap:10px;margin:10px 0}
.cmt{background:var(--surface-2);border-radius:12px;padding:10px 12px}
:root:not([data-ui="next"]) .cmt{border-radius:2px}
.cmt.builder{border-left:3px solid var(--accent)}
.cmt-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:14px}
.cmt p{margin:6px 0 0;white-space:pre-wrap;font-size:15px}
.cmt-form{display:flex;gap:8px;align-items:flex-end}
.cmt-form textarea{flex:1;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;font:inherit;resize:vertical;min-height:44px}
.cmt-form .btn{padding:12px 16px}
.inbox-h{margin-top:22px}
a.cmt-in{display:block;color:inherit;text-decoration:none;border-top:1px solid var(--rule);padding:12px 0}
a.cmt-in.unread{border-left:3px solid var(--accent);padding-left:10px}
a.cmt-in p{margin:6px 0 0}

.cmt-head .pill{font-size:10px;padding:2px 7px;line-height:1.4;letter-spacing:.08em}
.cmt-head .stamp{white-space:nowrap}
.cmt-foot{text-align:right;margin-top:4px}
.cmt-foot .linkish{font-size:10px;display:inline-block;margin:0}

/* cover photo picker */
.coverrow{display:flex;gap:12px;align-items:center}
.coverthumb{flex:0 0 84px;width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
:root:not([data-ui="next"]) .coverthumb{border-radius:2px}
.coverthumb img{width:100%;height:100%;object-fit:cover;display:block}
.coverbtns{flex:1;min-width:0;display:grid;gap:8px;justify-items:start}
.coverbtns .btn{width:100%;text-align:center}