/* track screens — FLAT mobile kit. Recaptures the prototype's rules:
   · "one lime per viewport" — lime is ONLY the primary action; data stays neutral
   · flat — hairline dividers & whitespace, not boxes inside boxes
   · uppercase Saira headers
   Everything here must earn its place. */

@import url('https://fonts.googleapis.com/css2?family=Saira:wght@500;700;800&display=swap');
:root { --saira: 'Saira', var(--sans); }

.screens-intro { color: var(--muted); max-width: 70ch; }
.legend { display:flex; flex-wrap:wrap; gap:20px; margin:16px 0 0; font-size:12.5px; color:var(--muted); }
.legend b { color:var(--text); font-weight:600; }

/* layout: the two screens side by side, captioned */
.flow { display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; margin-top:30px; }
.col { width:380px; max-width:100%; }
.col .cap-num { font-family:var(--mono); color:var(--lime); font-size:13px; }
.col h2 { font-family:var(--saira); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:21px; margin:2px 0 4px; display:block; }
.col .cap { color:var(--muted); font-size:13px; margin:0 0 16px; }
.col .substate { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin:20px 0 10px; }

/* the phone — the ONLY frame border */
.phone { width:380px; max-width:100%; background:#000; border-radius:40px; padding:9px; box-shadow:0 30px 70px -30px rgba(0,0,0,.85); }
.screen { background:var(--bg); border-radius:31px; overflow:hidden; min-height:680px; display:flex; flex-direction:column; }
.statusbar { height:30px; display:flex; align-items:center; justify-content:center; }
.statusbar::after { content:""; width:120px; height:26px; background:#000; border-radius:0 0 16px 16px; }

/* header: uppercase saira, flat, just a baseline divider */
.hbar { display:flex; align-items:center; gap:12px; padding:6px 18px 14px; border-bottom:1px solid var(--hair); }
.hbar .back { color:var(--muted); font-size:24px; line-height:1; margin-left:-4px; }
.hbar .htitle { font-family:var(--saira); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:18px; }
.hbar .hmeta { font-size:11px; color:var(--faint); margin-top:1px; }
.hbar .hright { margin-left:auto; font-size:12px; color:var(--muted); }
.hbar .live { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.hbar .live .d { width:7px; height:7px; border-radius:99px; background:var(--good); box-shadow:0 0 0 3px rgba(126,217,87,.15); }

.body { flex:1; padding:18px; overflow:hidden; }
.foot { padding:14px 16px 18px; border-top:1px solid var(--hair); display:flex; gap:10px; }

/* big neutral readouts — money/chips are NOT lime */
.read { text-align:left; }
.read .k { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); }
.read .v { font-family:var(--saira); font-weight:800; font-size:46px; line-height:1.05; letter-spacing:-0.01em; }
.read .v small { font-family:var(--sans); font-weight:600; font-size:15px; color:var(--muted); letter-spacing:0; }
.statline { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; color:var(--muted); font-size:13px; }
.statline .s b { color:var(--text); font-weight:600; }
.itm { color:var(--good); }
.bubble { color:var(--warn); }

.rule { height:1px; background:var(--hair); margin:16px 0; }
.nudge { color:var(--muted); font-size:13px; line-height:1.5; }
.nudge b { color:var(--text); font-weight:600; }

/* timeline — flat rows, hairline dividers, no boxes */
.lbl { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin-bottom:4px; }
.tl { }
.tl-row { display:grid; grid-template-columns:40px 20px 1fr auto; align-items:start; gap:10px; padding:13px 0; border-bottom:1px solid var(--hair); }
.tl-row:last-child { border-bottom:none; }
.tl-row .tm { font-family:var(--mono); font-size:11px; color:var(--faint); padding-top:1px; }
.tl-row .ic { color:var(--muted); }
.tl-row .ic svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; }
.tl-row .tx { font-size:14px; line-height:1.4; }
.tl-row .tx .d { color:var(--muted); font-size:12.5px; }
.tl-row .rt { font-family:var(--mono); font-size:13px; color:var(--muted); text-align:right; white-space:nowrap; }
.tl-row .rt.pos { color:var(--good); } .tl-row .rt.neg { color:var(--bad); }
.priv { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); border:1px solid var(--hair-strong); border-radius:4px; padding:0 4px; }

/* buttons — lime ONLY on .cta */
.btn { flex:1; text-align:center; padding:14px; border-radius:13px; font-family:var(--saira); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:14px; }
.cta { background:var(--lime); color:#0a0c09; }
.neu { color:var(--text); border:1px solid var(--hair-strong); }
.dgr { color:var(--bad); border:1px solid #5a2a2a; }

/* composer (log a type): type picker + important fields + details disclosure */
.typebar { display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:6px; }
.typebar::-webkit-scrollbar { display:none; }
.type { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:5px; width:56px; color:var(--faint); font-size:10.5px; }
.type svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
.type.on { color:var(--lime); }
.type.on .tk { color:var(--lime); }

/* a captured field = a flat row: label left, value right, hairline under. No box. */
.f { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 0; border-bottom:1px solid var(--hair); }
.f .fl { font-size:13px; color:var(--muted); }
.f .fl small { display:block; color:var(--faint); font-size:11px; margin-top:1px; }
.f .fv { font-family:var(--mono); font-size:18px; color:var(--text); text-align:right; }
.f .fv.auto { color:var(--faint); }       /* auto-calculated, editable */
.f .fv.ph { color:var(--faint); }          /* placeholder */
.f .caret { color:var(--faint); font-size:13px; }
.disc { display:flex; align-items:center; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--hair); color:var(--muted); font-size:13px; }
.disc .chev { color:var(--faint); }
.tail { display:flex; align-items:center; justify-content:space-between; padding:15px 0 4px; color:var(--muted); font-size:13px; }
.seg { display:inline-flex; border:1px solid var(--hair-strong); border-radius:9px; overflow:hidden; }
.seg span { padding:6px 11px; font-size:12px; color:var(--muted); border-right:1px solid var(--hair-strong); }
.seg span:last-child { border-right:none; }
.seg span.on { background:var(--text); color:var(--bg); font-weight:600; }
.mini-ic { display:inline-flex; align-items:center; gap:6px; }
.mini-ic svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }

/* review screen */
.net { text-align:center; padding:14px 0 6px; }
.net .k { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); }
.net .v { font-family:var(--saira); font-weight:800; font-size:54px; line-height:1.05; }
.net .v.pos { color:var(--good); } .net .v.neg { color:var(--bad); }
.net .sub { color:var(--muted); font-size:13px; margin-top:6px; }
.net .sub b { color:var(--text); font-weight:600; }
.line { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--hair); font-size:14px; }
.line .ll { color:var(--text); display:flex; align-items:center; gap:9px; }
.line .ll svg { width:16px; height:16px; fill:none; stroke:var(--muted); stroke-width:1.7; }
.line .ll .sm { color:var(--faint); font-size:12px; }
.line .lv { font-family:var(--mono); font-size:14px; }
.line .lv.pos { color:var(--good); } .line .lv.neg { color:var(--bad); }
.line.total { border-bottom:none; border-top:1px solid var(--hair-strong); margin-top:2px; padding-top:14px; font-weight:700; }
.line.total .lv { font-size:16px; }

/* hand-review card (real data) — one subtle surface, earns it */
.hand { border:1px solid var(--hair); border-radius:14px; padding:14px; margin-top:6px; }
.hand .hh { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.hand .pos { font-family:var(--saira); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:13px; }
.hand .rvw { font-size:12px; color:var(--lime); }
.cards { display:flex; gap:6px; margin:2px 0 10px; }
.pc { width:34px; height:46px; border-radius:6px; background:var(--panel); border:1px solid var(--hair-strong); display:flex; align-items:center; justify-content:center; font-family:var(--saira); font-weight:700; font-size:16px; }
.pc.r { color:#ff7a7a; } .pc.b { color:var(--text); }
.board { display:flex; align-items:center; gap:6px; margin:2px 0 10px; }
.board .sep { color:var(--faint); margin:0 2px; }
.hand .act { color:var(--muted); font-size:13px; line-height:1.5; }
.hand .act b { color:var(--text); font-weight:600; }
.hand .won { color:var(--good); font-weight:600; }
.src { color:var(--faint); font-size:11px; margin-top:10px; }
.src a { color:var(--muted); }

.pulse-inline { display:flex; gap:18px; }
.pulse-inline .pm { font-size:13px; color:var(--muted); }
.pulse-inline .pm b { font-family:var(--saira); font-weight:800; font-size:20px; color:var(--text); display:block; }

.section { margin-top:22px; }

/* utilities reused on this page */
.fig { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.scr-note { border-left:3px solid var(--hair-strong); padding:8px 14px; color:var(--muted); font-size:13px; }

/* ---- more screens: primary vs secondary fields, sections, ratings, multi-day ---- */
.block { margin-top:64px; }
.block .cap-num { font-family:var(--mono); color:var(--lime); font-size:13px; }
.block h2 { font-family:var(--saira); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:21px; margin:2px 0 4px; }
.block .cap { color:var(--muted); font-size:13px; margin:0 0 8px; max-width:80ch; }
.phones { display:flex; flex-wrap:wrap; gap:30px; margin-top:16px; }
.phones .unit { width:380px; max-width:100%; }
.phones .unit .substate { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin:0 0 10px; }
.phones .unit .substate b { color:var(--text); font-weight:600; }

/* primary stays full-weight; secondary (under Details) is quieter */
.detlabel { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin:18px 0 0; padding-top:14px; border-top:1px solid var(--hair); display:flex; align-items:center; gap:6px; }
.f.sec .fl { color:var(--faint); }
.f.sec .fv { font-size:15px; color:var(--muted); }
.offer { padding:13px 0; border-bottom:1px solid var(--hair); font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.offer .box { width:15px; height:15px; border:1px solid var(--hair-strong); border-radius:4px; flex:0 0 auto; }

/* 1–5 ratings */
.rate { display:flex; gap:6px; align-items:center; }
.rate i { width:13px; height:13px; border-radius:99px; border:1px solid var(--hair-strong); }
.rate i.on { background:var(--text); border-color:var(--text); }

/* multi-day */
.daysep { display:flex; align-items:center; gap:10px; margin:14px 0 6px; }
.daysep .dl { font-family:var(--saira); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--muted); }
.daysep .ln { flex:1; height:1px; background:var(--hair); }
.dayline { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--hair); font-size:13.5px; }
.dayline:last-child { border-bottom:none; }
.dayline .dd { color:var(--muted); }
.dayline .dv { font-family:var(--mono); color:var(--text); }
.dayline .dv .ar { color:var(--faint); margin:0 5px; }