/* ============================================================
   IronDeal — clickable prototype
   Design system ported 1:1 from mockup/index.html (team-approved)
   Neo-brutalism · ink/paper + signal-lime · heavy grotesque
   ============================================================ */

:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --paper2:#F3F3F1;
  --line:#0A0A0A;
  --mut:#7A7A78;
  --signal:#DDFF00;
  --signal-ink:#0A0A0A;
  --danger:#FF3B1D;
  --ok:#00C46A;
  --grot:"Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased;}
html,body{height:100%;}
body{background:#000; color:#fff; font-family:var(--grot); overscroll-behavior:none;}
button{font-family:var(--grot); cursor:pointer;}
input,select,textarea{font-family:var(--grot);}

/* ---------- stage: full-bleed on phones, framed presentation on desktop ---------- */
.stage{height:100dvh; display:flex; align-items:center; justify-content:center;}
.phone{width:100%; height:100dvh; background:#000; flex:none; display:flex; flex-direction:column;}
.screen{position:relative; width:100%; height:100%; background:var(--paper);
  overflow:hidden; color:var(--ink); display:flex; flex-direction:column;}
.notch,.stat{display:none;}
.deck-cap{display:none;}

@media (min-width:768px){
  body{padding:0;}
  .stage{flex-direction:column; gap:18px;}
  .phone{width:390px; height:min(820px,90dvh); border-radius:44px; padding:11px;
    box-shadow:0 0 0 2px #262626, 0 30px 60px -20px rgba(0,0,0,.9);}
  .screen{border-radius:34px;}
  .notch{display:block; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:130px; height:26px; background:#000; border-radius:0 0 16px 16px; z-index:40;}
  .stat{height:44px; flex:none; display:flex; align-items:flex-end; justify-content:space-between;
    padding:0 22px 6px; font-size:12px; font-weight:800;}
  .deck-cap{display:block; text-align:center; color:#6a6a68; font-size:12.5px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;}
  .deck-cap b{color:var(--signal);}
}

/* ---------- app chrome ---------- */
.view{flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column;
  -webkit-overflow-scrolling:touch;}
.pad{padding:0 18px;}
.top{flex:none; display:flex; align-items:center; justify-content:space-between; padding:14px 18px 12px;}
.brand{font-size:16px; font-weight:900; letter-spacing:-.02em; text-transform:uppercase; color:var(--ink);}
.brand .d{-webkit-text-stroke:1px #0A0A0A; color:transparent;}
.ava{width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; font-size:12px;
  font-weight:800; display:flex; align-items:center; justify-content:center; border:none;}
.ico{width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:800;background:#fff;position:relative;}
.belldot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  background:var(--danger);border:2px solid #fff;}
.back{background:none;border:none;font-size:14px;font-weight:700;color:var(--mut);padding:0;}

.nav{flex:none; border-top:2px solid var(--ink); display:flex; justify-content:space-around;
  padding:10px 0 max(14px, env(safe-area-inset-bottom)); background:var(--paper);}
.nav button{font-size:11px; font-weight:800; color:var(--mut); text-align:center; background:none; border:none;}
.nav button.on{color:var(--ink);}
.nav .g{display:block; width:22px; height:22px; margin:0 auto 3px;}
.nav .g svg{width:100%; height:100%; display:block;}
.nav button.on .g svg{stroke-width:2.7;}

/* ---------- type ---------- */
.h-xl{font-size:40px; font-weight:900; line-height:.98; letter-spacing:-.03em; text-transform:uppercase;}
.h-lg{font-size:26px; font-weight:900; line-height:1.02; letter-spacing:-.02em; text-transform:uppercase;}
.h-md{font-size:19px; font-weight:800; letter-spacing:-.01em;}
.mut{color:var(--mut); font-weight:600;}
.meta{font-size:12px; font-weight:700; color:var(--mut);}
.rule{height:3px; background:var(--ink); margin:12px 0; flex:none;}
.rule.sig{background:var(--signal);}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:#000; background:var(--signal);
  padding:5px 10px; border-radius:2px;}

/* ---------- components (from mockup) ---------- */
.card{border:2px solid var(--ink); border-radius:6px; background:#fff; padding:13px 14px; margin-bottom:11px;}
.card.dark{background:var(--ink); color:#fff;}
.card.inset{background:var(--paper2);}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:900; letter-spacing:.04em;
  text-transform:uppercase; padding:4px 8px; border-radius:3px; background:var(--signal); color:#000;}
.tag.line{background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
.tag.wanted{background:var(--ink); color:var(--signal);}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.part{font-size:17px; font-weight:800; letter-spacing:-.01em; margin:7px 0 2px;}
.qty{font-size:13px; font-weight:700;}
.cta{display:block; width:100%; text-align:center; background:var(--ink); color:#fff; font-weight:800;
  font-size:15px; padding:13px; border-radius:6px; border:none; letter-spacing:.01em;}
.cta.sig{background:var(--signal); color:#000;}
.cta.sm{padding:9px 16px; font-size:13px; width:auto; display:inline-block;}
.cta.ghost{background:#fff; color:var(--ink); border:2px solid var(--ink);}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:900; background:var(--signal);
  color:#000; padding:5px 10px; border-radius:20px;}
.pill.dark{background:var(--ink); color:#fff;}
.pill.urgent{background:var(--danger); color:#fff;}
.anon{font-size:11.5px;font-weight:800;color:var(--mut);display:inline-flex;align-items:center;gap:4px;}
.card .anon{display:block;line-height:1.55;}
.nb{white-space:nowrap;}

/* frosted teaser */
.frost{position:relative; border:2px solid var(--ink); border-radius:6px; overflow:hidden; margin-top:6px;}
.frost .blur{padding:13px 14px; filter:blur(4px); opacity:.55;}
.frost .lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; background:rgba(255,255,255,.35); text-align:center; padding:0 14px;}
.lock .lk{font-size:20px;} .lock .lt{font-size:12.5px; font-weight:800;}

/* inputs */
.inp{border:2px solid var(--ink); border-radius:6px; padding:11px 12px; font-size:14px; font-weight:700;
  margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:10px; background:#fff;}
.inp .lab{color:var(--mut); font-size:12px; font-weight:700; flex:none;}
.inp b{font-weight:800;}
.inp .okk{color:var(--ok); font-weight:900; flex:none;}
.search{display:flex; align-items:center; gap:8px; border:2px solid var(--ink); border-radius:6px;
  padding:10px 12px; margin-bottom:10px; background:#fff;}
.search input{border:none; outline:none; flex:1; font-size:14px; font-weight:700; background:transparent; min-width:0;}
.search .g{font-weight:900;}

/* category chips */
.chips{display:flex; gap:7px; overflow-x:auto; padding:2px 18px 12px; scrollbar-width:none; flex:none;}
.chips::-webkit-scrollbar{display:none;}
.chips button{flex:none; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  border:1.5px solid var(--ink); background:#fff; color:var(--ink); padding:7px 11px; border-radius:20px;}
.chips button.on{background:var(--ink); color:var(--signal);}

/* section label */
.sect{font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  margin:6px 0 10px; display:flex; align-items:center; justify-content:space-between;}
.sect .meta{letter-spacing:0;}

/* bottom sheet (login) */
.sheet-veil{position:absolute; inset:0; background:rgba(10,10,10,.55); z-index:60;
  display:flex; align-items:flex-end; animation:fade .18s ease;}
.sheet{background:var(--paper); width:100%; border-top:3px solid var(--ink);
  border-radius:18px 18px 0 0; padding:20px 18px max(20px, env(safe-area-inset-bottom));
  animation:up .22s ease;}
@keyframes fade{from{opacity:0}} @keyframes up{from{transform:translateY(40px)}}

/* empty / coming-soon */
.soon{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 30px; gap:8px;}
.soon .num{font-size:88px; font-weight:900; line-height:1; -webkit-text-stroke:2.5px var(--ink);
  color:transparent; letter-spacing:-.04em;}

/* iOS add-to-home hint */
.ioshint{position:absolute; left:12px; right:12px; bottom:78px; z-index:50; background:var(--ink); color:#fff;
  border-radius:6px; padding:11px 13px; display:flex; align-items:center; gap:10px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5); animation:up .25s ease;}
.ioshint p{font-size:12px; font-weight:700; line-height:1.45; flex:1;}
.ioshint b{color:var(--signal);}
.ioshint button{background:none; border:none; color:#fff; font-size:16px; font-weight:900; padding:2px 4px;}

/* ---------- offer form (screen 3) ---------- */
.bignum{font-size:30px;font-weight:900;letter-spacing:-.02em;margin:2px 0 0;text-transform:uppercase;}
.inp input{border:none;outline:none;flex:1;text-align:right;font-size:16px;font-weight:800;
  background:transparent;min-width:0;color:var(--ink);}
.inp input::placeholder{color:#c9c9c7;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.optrow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;}
.opt{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  border:1.5px solid var(--ink);background:#fff;color:var(--ink);padding:8px 12px;border-radius:20px;}
.opt.on{background:var(--ink);color:var(--signal);}
.photoadd{width:100%;border:2px dashed var(--ink);border-radius:6px;background:#fff;padding:13px 12px;
  display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;color:var(--ink);
  margin-bottom:10px;text-align:left;}
.photoadd.has{background:var(--paper2);border-style:solid;}
.txa{width:100%;border:2px solid var(--ink);border-radius:6px;padding:11px 12px;font-size:14px;
  font-weight:700;min-height:74px;resize:none;outline:none;display:block;}
.txa::placeholder{color:#c9c9c7;}
.banner{border:2px solid var(--ink);border-radius:6px;background:var(--signal);padding:12px 14px;
  font-size:13px;font-weight:700;line-height:1.45;margin-bottom:11px;color:#000;}

/* ---------- photos ---------- */
.thumb{width:64px;height:64px;object-fit:cover;border:2px solid var(--ink);border-radius:6px;
  flex:none;background:var(--paper2);display:block;}
.photo{width:100%;height:170px;object-fit:cover;border:2px solid var(--ink);border-radius:6px;
  display:block;margin-top:12px;}
.photoadd .pv{width:34px;height:34px;object-fit:cover;border:1.5px solid var(--ink);
  border-radius:4px;flex:none;}

/* ---------- post-a-wanted (screen 4) ---------- */
.fab{position:absolute;right:14px;bottom:86px;z-index:45;background:var(--signal);color:#000;
  border:2px solid var(--ink);border-radius:6px;padding:12px 15px;font-size:13px;font-weight:900;
  letter-spacing:.03em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink);}
.fab:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.flab{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  display:block;margin:2px 0 7px;color:var(--ink);}
.sugg{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 10px;}
.sugg:empty{margin:0;}
.sugg .opt{padding:6px 10px;font-size:10.5px;background:var(--paper2);border-style:dashed;}
.cta.danger{background:#fff;color:var(--danger);border:2px solid var(--danger);}

/* ---------- AI assist block (screen 5, from mockup) ---------- */
.ai{border:2px dashed var(--ink);border-radius:6px;padding:12px;background:var(--paper2);margin-bottom:11px;}
.ai .ail{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#000;
  background:var(--signal);display:inline-block;padding:3px 7px;border-radius:3px;margin-bottom:8px;}
.ai .txa{background:#fff;min-height:60px;margin-bottom:9px;}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:700;
  padding:5px 0;border-bottom:1px solid #e6e6e4;}
.kv:last-child{border-bottom:none;}
.kv b{font-weight:800;text-align:right;}
.kv b.hl{background:var(--signal);padding:0 5px;}
.thinking{font-size:12.5px;font-weight:800;padding:8px 0 2px;animation:pulse 1s infinite;}
@keyframes pulse{50%{opacity:.35;}}

/* qty stepper (screen 7, from mockup) */
.stepper-n{display:flex;align-items:center;border:2px solid var(--ink);border-radius:6px;
  overflow:hidden;margin-bottom:8px;background:#fff;}
.stepper-n button{width:46px;height:46px;background:#fff;border:none;border-right:2px solid var(--ink);
  font-size:22px;font-weight:800;flex:none;}
.stepper-n button:last-child{border-right:none;border-left:2px solid var(--ink);}
.stepper-n .v{flex:1;text-align:center;font-size:18px;font-weight:900;}

/* chooser sheet buttons */
.choice{display:block;width:100%;text-align:left;border:2px solid var(--ink);border-radius:6px;
  background:#fff;padding:14px;margin-bottom:10px;}
.choice.dark{background:var(--ink);color:#fff;}
.choice .ct{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.01em;}
.choice .cs{font-size:12px;font-weight:600;color:var(--mut);margin-top:3px;line-height:1.4;}
.choice.dark .cs{color:#bdbdbb;}

/* ---------- chat thread (screen 8) ---------- */
.chat-head{flex:none;padding:10px 14px;border-bottom:2px solid var(--ink);display:flex;
  align-items:center;gap:10px;background:#fff;}
.chat-head .cinfo{flex:1;min-width:0;}
.chat-head .cname{font-size:14.5px;font-weight:900;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-head .csub{font-size:10.5px;font-weight:700;color:var(--mut);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-msgs{flex:1;overflow-y:auto;padding:12px 14px;background:var(--paper2);}
.bub{max-width:80%;border:2px solid var(--ink);border-radius:10px;background:#fff;
  padding:8px 11px;margin-bottom:8px;font-size:13.5px;font-weight:600;line-height:1.45;
  width:fit-content;}
.bub.me{margin-left:auto;background:var(--ink);color:#fff;}
.bub .bimg{display:block;width:180px;max-width:100%;border-radius:5px;}
.bub.typing{color:var(--mut);font-weight:900;letter-spacing:3px;}
.sysline{text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mut);margin:10px 16px;line-height:1.6;}
.cardmsg{border:2px solid var(--ink);border-radius:8px;background:#fff;padding:11px 12px;
  margin:2px 0 10px;}
.cardmsg.dark{background:var(--ink);color:#fff;}
.chat-in{flex:none;display:flex;gap:8px;padding:10px 12px max(12px, env(safe-area-inset-bottom));
  border-top:2px solid var(--ink);background:#fff;align-items:center;}
.chat-in input{flex:1;border:2px solid var(--ink);border-radius:20px;padding:10px 14px;
  font-size:14px;font-weight:600;outline:none;min-width:0;}
.chat-in button{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);
  background:#fff;font-size:15px;font-weight:900;}
.chat-in button.snd{background:var(--signal);}

/* ---------- booking stepper (screen 9, from mockup) ---------- */
.step{display:flex;align-items:flex-start;gap:11px;margin-bottom:2px;}
.dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;background:#fff;}
.dot.done{background:var(--ink);color:#fff;}
.dot.now{background:var(--signal);border-color:var(--ink);}
.stemline{width:2px;background:var(--ink);height:18px;margin-left:9px;opacity:.35;}
.step .sl{font-size:14px;font-weight:800;}
.step .ss{font-size:11.5px;font-weight:600;color:var(--mut);margin-top:1px;line-height:1.4;}
.step.pend .sl{opacity:.4;}
.step.pend .dot{opacity:.4;}

/* ---------- lime Wanted cards (demand = hi-vis open call) ---------- */
.card.want{background:var(--signal);border-color:var(--signal);}
.card.want .qty{color:var(--ink);}
.card.want .anon{color:rgba(10,10,10,.66);}
.card.want .meta{color:rgba(10,10,10,.55);}
.card.want .thumb{border-color:var(--ink);}
.card.want .cta.ghost{background:transparent;}

/* ---------- dark For Sale cards (supply = night market) ---------- */
.price-hero{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--signal);margin:3px 0 1px;}
.card.dark .qty{color:#d6d6d4;}
.card.dark .anon{color:#bdbdbb;}
.card.dark .meta{color:#9a9a98;}
.card.dark .thumb{border-color:rgba(255,255,255,.85);}
.pill.linew{background:transparent;border:1.5px solid #fff;color:#fff;}
.cta.ghostw{background:transparent;color:#fff;border:2px solid #fff;}

/* ---------- bell (screen 11) ---------- */
.card.nunread{box-shadow:inset 4px 0 0 var(--signal);}
.card.read{opacity:.55;}

/* utility */
.grow{flex:1;}
.footpad{padding-bottom:20px;}
.stack-b{margin-top:auto;}