/* ============================================================
   AVMOD design system — data-plate / mil-spec
   Shared by: AVMOD App.html, AVMOD Components & Tokens.html
   Source of truth for tokens + components. Phone-first ≤430px.
   ============================================================ */

:root{
  /* chrome + surfaces */
  --navy:#0E2036; --navy2:#16263B; --paper:#F4F6F9; --card:#FFFFFF;
  --ink:#1A2A3E; --mut:#5E7186; --line:#DCE3EB;
  /* signal */
  --sig:#2E78C7; --sigD:#1F5FA8;
  /* category chips */
  --rf:#7A4FC9; --isr:#2E8B6E; --ew:#C24747; --com:#2E78C7;
  --avi:#B07B2E; --sw:#5E7186; --wpn:#8A6D3B; --en:#3E8E9E;
  /* branch bands */
  --usaf:#2A5DB0; --navyb:#1B6E8C; --usmc:#A93232; --army:#3E7A3E; --uscg:#C9722A;
  /* contractor tier bands */
  --prime:#1F5FA8; --integ:#46566B;
  /* feed kinds */
  --awd-bg:#E7F3EC; --awd-fg:#1F6B41; --opp-bg:#FFF3E0; --opp-fg:#9A5B12;
  --news-bg:#E9F0FA; --news-fg:#1F5FA8;
  /* field states */
  --est-fg:#9A5B12; --est-bg:#FBF3E3; --est-ln:#EBD9B4;
  --flag-fg:#C24747; --flag-bg:#FBEAEA; --flag-ln:#F0CFCF;
  /* skeleton */
  --sk-a:#E3E9F1; --sk-b:#F0F4F9; --sk-band:#C9D3DF; --sk-na:#22354C; --sk-nb:#2C4159;
  /* plate ID band thickness */
  --band:4px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--ink);font-size:15px;line-height:1.45}
.cond{font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.hide{display:none!important}
/* title-case content everywhere EXCEPT the Package pages (per spec) */
/* buttons don't inherit text-transform, so target them explicitly too */
.tc, .tc button{text-transform:capitalize}

/* ---------- app shell (scoped to body.app) ---------- */
body.app{background:var(--paper);max-width:430px;margin:0 auto;min-height:100vh;
         display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:1px solid var(--line)}
body.app .appbar{position:sticky;top:0;z-index:20}
body.app main{flex:1;padding:14px 14px 86px}
body.app .tabbar{position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;
                 padding:6px 0 max(6px,env(safe-area-inset-bottom));z-index:30}
.screen{display:none}
.screen.on{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.on{animation:none}}

/* ---------- top bar ---------- */
.appbar{position:relative;color:#1b2532;padding:13px 16px 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.14) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, rgba(0,0,0,.035) 1px, rgba(0,0,0,.035) 2px),
    linear-gradient(180deg, #c6cacd 0%, #abb0b4 52%, #999ea2 100%);
  border-bottom:1px solid #777d81;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(16,32,54,.20)}
.appbar::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background-repeat:no-repeat;
  background-image:
    radial-gradient(circle 3.5px at 12px 12px, #e6e8ea, #bcc0c3 46%, #80868a 80%, rgba(128,134,138,0) 100%),
    radial-gradient(circle 3.5px at calc(100% - 12px) 12px, #e6e8ea, #bcc0c3 46%, #80868a 80%, rgba(128,134,138,0) 100%),
    radial-gradient(circle 3.5px at 12px calc(100% - 11px), #e6e8ea, #bcc0c3 46%, #80868a 80%, rgba(128,134,138,0) 100%),
    radial-gradient(circle 3.5px at calc(100% - 12px) calc(100% - 11px), #e6e8ea, #bcc0c3 46%, #80868a 80%, rgba(128,134,138,0) 100%)}
.appbar .brand{display:flex;align-items:baseline;gap:9px}
.appbar .brand b{font-family:'Barlow Condensed';font-size:23px;font-weight:700;letter-spacing:.07em;color:#000;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.appbar .brand span{font-size:10.5px;color:#000;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.appbar .sub{font-size:11.5px;color:#000;margin-top:2px;text-transform:capitalize;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.appbar .bar-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.appbar .user{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.appbar .user .who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.12}
.appbar .user .ul{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#000;white-space:nowrap}
.appbar .user .un{font-family:'Barlow Condensed';font-size:14px;font-weight:600;letter-spacing:.04em;color:#000;margin-top:1px;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.appbar .signout{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid rgba(0,0,0,.30);border-radius:7px;background:linear-gradient(180deg,#b7bbbe,#969b9f);flex:0 0 auto;position:relative;z-index:5;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 1px rgba(0,0,0,.14)}
.appbar .signout svg{width:15px;height:15px;stroke:#2c343d;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- shared bits ---------- */
.eyebrow{font-family:'Barlow Condensed';font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:600;margin:18px 0 8px}
.eyebrow:first-child{margin-top:2px}
.back{display:inline-flex;align-items:center;gap:6px;color:#9DB4CE;font-size:12px;letter-spacing:.04em;margin-bottom:9px;background:none;border:none;padding:0}
.back svg{width:14px;height:14px;stroke:#9DB4CE;fill:none;stroke-width:2}
/* layered breadcrumb — replaces single back button on detail/package screens */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 11px;padding-top:1px}
.crumbs .cr{font-family:'Barlow Condensed';font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:none;border:none;padding:0;line-height:1.15}
.crumbs button.cr{color:var(--sigD)}
.crumbs .cr.cur{color:var(--ink)}
.crumbs .crsep{font-family:'Barlow Condensed';font-size:12px;font-weight:600;color:var(--mut);opacity:.6;flex:0 0 auto;line-height:1}

/* hero (navy chrome) */
.hero{background:var(--navy);border-radius:12px;color:#fff;padding:14px 15px 15px;position:relative;overflow:hidden}
.hero .band{position:absolute;top:0;left:0;right:0;height:var(--band)}
.hero .role{font-size:11.5px;color:#9DB4CE;letter-spacing:.04em}
.hero h1{font-family:'Barlow Condensed';font-weight:700;font-size:30px;letter-spacing:.04em;line-height:1.02;margin:5px 0 3px}
.hero .meta{font-size:12px;color:#B7C7DA}
.hero .wingtype{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono';font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9DB4CE;margin-top:7px}
.hero .wingtype svg{width:18px;height:18px;stroke:#9DB4CE;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* stat strip */
.strip{display:flex;gap:8px;margin:10px 0 4px}
.stat{flex:1;background:var(--navy);border-radius:10px;color:#fff;padding:10px 9px;min-width:0;border:none;text-align:left;font-family:inherit}
button.stat{cursor:pointer;transition:background .12s}
button.stat:active{background:var(--navy2)}
.stat .n{font-family:'Barlow Condensed';font-weight:700;font-size:23px;line-height:1;letter-spacing:.02em}
.stat .n.mono{font-family:'IBM Plex Mono';font-weight:600;font-size:17px}
.stat .l{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9DB4CE;margin-top:5px;line-height:1.2}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.chip{font-family:'IBM Plex Mono';font-size:10px;font-weight:600;letter-spacing:.06em;color:#fff;padding:2px 6px;border-radius:4px}
.c-rf{background:var(--rf)}.c-isr{background:var(--isr)}.c-ew{background:var(--ew)}.c-com{background:var(--com)}
.c-avi{background:var(--avi)}.c-sw{background:var(--sw)}.c-wpn{background:var(--wpn)}.c-en{background:var(--en)}

/* plate card (platform · contractor · base share this) */
.plate{background:var(--card);border:1px solid var(--line);border-top-width:var(--band);border-radius:10px;
       padding:11px 13px 12px;margin-bottom:9px;box-shadow:0 1px 2px rgba(16,32,54,.05);display:block;width:100%;text-align:left}
.plate .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.plate .desig{font-family:'Barlow Condensed';font-weight:700;font-size:21px;letter-spacing:.03em;line-height:1}
.plate .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600;padding-top:3px;white-space:nowrap}
.plate .tagcol{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.plate .wing{width:19px;height:19px;stroke:var(--mut);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.plate .role{font-size:12px;color:var(--mut);margin-top:3px}
.plate .counts{display:flex;gap:14px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.plate .counts .ct{display:flex;flex-direction:column}
.plate .counts .ct .v{font-family:'IBM Plex Mono';font-weight:600;font-size:14px;color:var(--ink)}
.plate .counts .ct .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:1px}

/* ID band helpers: branch (platforms · bases) + tier (contractors) */
.b-usaf{border-top-color:var(--usaf)}.b-navy{border-top-color:var(--navyb)}.b-usmc{border-top-color:var(--usmc)}
.b-army{border-top-color:var(--army)}.b-uscg{border-top-color:var(--uscg)}
.b-prime{border-top-color:var(--prime)}.b-integ{border-top-color:var(--integ)}

/* filter pills */
.pills{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;margin-bottom:4px;-ms-overflow-style:none;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:12.5px;
      font-weight:600;letter-spacing:.02em;color:var(--mut);white-space:nowrap}
.pill.on{background:var(--sigD);border-color:var(--sigD);color:#fff}

/* feed items */
.feed-filter{margin-top:2px}
.item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:0 1px 2px rgba(16,32,54,.05)}
.item .kind{display:inline-block;font-family:'IBM Plex Mono';font-size:9.5px;font-weight:600;letter-spacing:.08em;
            padding:2px 6px;border-radius:4px;margin-bottom:6px}
.k-award{background:var(--awd-bg);color:var(--awd-fg)}.k-opp{background:var(--opp-bg);color:var(--opp-fg)}.k-news{background:var(--news-bg);color:var(--news-fg)}
.item h3{font-size:14px;font-weight:600;line-height:1.3;margin-bottom:4px}
.item .src{font-size:11px;color:var(--mut)}
.item .src .mono{color:var(--ink)}
.item .money{font-family:'IBM Plex Mono';font-weight:600;font-size:12.5px;color:var(--ink);margin-top:5px}
.item .money .typ{color:var(--mut);font-weight:500}
button.item{display:block;width:100%;text-align:left;font-family:inherit}

/* detail rows */
.row{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;box-shadow:0 1px 2px rgba(16,32,54,.05)}
.row .rt{font-size:14px;font-weight:600}
.row .rs{font-size:12px;color:var(--mut);margin-top:2px}
.row .money{font-family:'IBM Plex Mono';font-weight:600;font-size:13px;margin-top:5px}
.row .money .typ{color:var(--mut);font-weight:500}
button.row{display:block;width:100%;text-align:left;font-family:inherit}
.linkrow{display:flex;justify-content:space-between;align-items:center}
.linkrow svg{width:16px;height:16px;stroke:var(--mut);fill:none;stroke-width:2;flex:0 0 auto}
.parked{border-style:dashed;background:transparent;color:var(--mut);box-shadow:none}
.parked .rt{color:var(--mut)}
.fms{display:inline-block;font-family:'IBM Plex Mono';font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--mut);
     border:1px dashed var(--line);border-radius:4px;padding:2px 6px}
.note{font-size:12px;color:var(--ink);line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px}

/* map */
.mapwrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0E2036;height:200px;position:relative}
.mapwrap .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(157,180,206,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(157,180,206,.12) 1px,transparent 1px);background-size:34px 34px}
.mapwrap .pin{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(46,120,199,.25)}
.mapwrap .cap{position:absolute;left:10px;bottom:9px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9DB4CE}
.toggle{display:flex;gap:0;margin:10px 0 8px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.toggle button{flex:1;background:var(--card);border:none;padding:7px 0;font-size:12px;font-weight:600;color:var(--mut);letter-spacing:.04em}
.toggle button.on{background:var(--sigD);color:#fff}

/* empty state — dashed panel, provenance/cadence copy */
.empty{border:1px dashed var(--line);border-radius:10px;padding:16px 14px;color:var(--mut);font-size:12.5px;text-align:center;line-height:1.5}
.empty .mono{font-size:11px}

/* ---------- PACKAGE ---------- */
.pkg-id{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.badge{font-family:'IBM Plex Mono';font-size:10px;font-weight:600;letter-spacing:.08em;padding:3px 7px;border-radius:4px}
.badge.awd{background:var(--awd-bg);color:var(--awd-fg)}
.badge.rfp{background:var(--opp-bg);color:var(--opp-fg)}
.pkg-id .ref{font-family:'IBM Plex Mono';font-size:11px;color:#9DB4CE;letter-spacing:.04em}
/* the three core facts */
.triad{display:flex;gap:7px;margin:10px 0 2px}
.tri{flex:1;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 10px;text-align:left}
.tri .k{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600}
.tri .v{font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.02em;line-height:1.05;margin-top:3px}
.tri .chip{margin-top:5px}
/* candidate (pre-award) / confirmed contractor (awarded) */
.cand{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;box-shadow:0 1px 2px rgba(16,32,54,.05);display:block;width:100%;text-align:left}
.cand .ch{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cand .nm{font-family:'Barlow Condensed';font-weight:700;font-size:17px;letter-spacing:.02em}
.cand .rank{font-family:'IBM Plex Mono';font-size:10px;color:var(--mut);letter-spacing:.06em}
.conf{display:flex;align-items:center;gap:6px;margin-top:2px}
.conf .bar{display:flex;gap:2px}
.conf .seg{width:13px;height:5px;border-radius:1px;background:var(--line)}
.conf.hi .seg:nth-child(-n+3){background:var(--isr)} .conf.med .seg:nth-child(-n+2){background:var(--avi)} .conf.lo .seg:nth-child(-n+1){background:var(--mut)}
.conf .lvl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:600}
.why{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ev{font-family:'IBM Plex Mono';font-size:9.5px;font-weight:500;letter-spacing:.03em;color:var(--sigD);background:#EAF1FA;border:1px solid #D4E3F4;padding:2px 6px;border-radius:4px}
/* send action + handoff envelopes */
.send{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--sigD);color:#fff;border:none;
      border-radius:10px;padding:13px;font-family:'Barlow Condensed';font-weight:700;font-size:17px;letter-spacing:.06em;margin:4px 0 2px;text-transform:uppercase}
.send svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.env{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:7px}
.env .ic{width:30px;height:30px;border-radius:7px;background:var(--paper);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.env .ic svg{width:16px;height:16px;stroke:var(--sigD);fill:none;stroke-width:2}
.env .et{font-size:13px;font-weight:600}
.env .es{font-size:11px;color:var(--mut);margin-top:1px}
.env .floor{font-family:'IBM Plex Mono';font-size:8.5px;font-weight:600;letter-spacing:.06em;color:var(--isr);margin-left:auto;flex:0 0 auto;text-transform:uppercase}

/* package spec rows */
.spec{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:8px}
.spec .r{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 13px;border-bottom:1px solid var(--line)}
.spec .r:last-child{border-bottom:none}
.spec .k{font-size:11.5px;color:var(--mut);letter-spacing:.01em;flex:0 0 43%;padding-top:1px}
.spec .v{font-size:12.5px;font-weight:600;text-align:right;flex:1;line-height:1.35}
.spec .v.mn{font-family:'IBM Plex Mono';font-weight:600;font-variant-numeric:tabular-nums}
.spec .v .typ{color:var(--mut);font-weight:500}

/* ---------- FIELD STATES (apply anywhere a field renders) ---------- */
/* TBD / unknown — muted, first-class. Never blank, never a dash alone. */
.tbd{color:var(--mut)!important;font-weight:500!important}
/* EST — amber tag on estimated values. Tag text may read EST / ANTICIPATED. */
.est{font-family:'IBM Plex Mono';font-size:8.5px;font-weight:600;letter-spacing:.05em;color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-ln);border-radius:3px;padding:1px 4px;margin-left:5px;text-transform:uppercase;vertical-align:1px}
/* SOURCE CONFLICT — red flag, retains the disagreement (range), never resolves silently */
.flag{display:inline-flex;align-items:center;gap:3px;font-family:'IBM Plex Mono';font-size:8.5px;font-weight:600;letter-spacing:.04em;color:var(--flag-fg);background:var(--flag-bg);border:1px solid var(--flag-ln);border-radius:3px;padding:1px 5px;margin-top:4px}
.flag svg{width:10px;height:10px;stroke:var(--flag-fg);fill:none;stroke-width:2}

/* ---------- LOADING SKELETONS ---------- */
.skb{display:block;height:10px;border-radius:4px;background:linear-gradient(90deg,var(--sk-a) 25%,var(--sk-b) 45%,var(--sk-a) 65%);background-size:200% 100%;animation:skm 1.3s linear infinite}
.skb.inv{background:linear-gradient(90deg,var(--sk-na) 25%,var(--sk-nb) 45%,var(--sk-na) 65%);background-size:200% 100%}
.skb.rd{border-radius:20px}
@keyframes skm{from{background-position:130% 0}to{background-position:-70% 0}}
@media (prefers-reduced-motion:reduce){.skb{animation:none;background:var(--sk-a)}.skb.inv{background:var(--sk-na)}}
.sk-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:9px;box-shadow:0 1px 2px rgba(16,32,54,.05)}
.sk-card.banded{border-top:var(--band) solid var(--sk-band)}
.sk-hero{background:var(--navy);border-radius:12px;padding:16px 15px;position:relative;overflow:hidden}
.sk-hero .band{position:absolute;top:0;left:0;right:0;height:var(--band);background:var(--sk-nb)}
.sk-strip{display:flex;gap:8px;margin:10px 0 4px}
.sk-stat{flex:1;background:var(--navy);border-radius:10px;padding:13px 9px}
.sk-pills{display:flex;gap:7px;padding:2px 0 4px;margin-bottom:4px}
.sk-counts{display:flex;gap:14px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.sk-specr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 13px;border-bottom:1px solid var(--line)}
.sk-specr:last-child{border-bottom:none}
.sk-triad{display:flex;gap:7px;margin:10px 0 2px}
.sk-tri{flex:1;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 10px}
.sk-send{height:46px;border-radius:10px;margin:4px 0 2px}

/* ---------- bottom nav ---------- */
.tabbar{background:#fff;border-top:1px solid var(--line);display:flex}
.tabbar button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mut);padding:4px 0}
.tabbar button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar button .lbl{font-family:'Barlow Condensed';font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.tabbar button.on{color:var(--sigD)}