/* field.css: the Field look, shared by every app page.
   Chosen 30 Sep 2026. Loaded AFTER each page's own <style>, so it only
   restyles: nothing here changes what a page shows or does. Each app keeps
   its own accent colour (amber tabs in CS and Supply, and so on) so it stays
   recognisable; the frame around it (header, tabs, type) is now one family.
   Work surfaces stay white and readable. Delete the <link> to go back. */

:root{
  --f-ink:#07111D;      /* header navy, as on the dashboard */
  --f-ink2:#0C1A2B;     /* tab strip */
  --f-blue:#1B5FA8;     /* the edge under every header */
  --f-dim:#B9C8D8;      /* small text on navy */
}

body{font-family:Barlow,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select,textarea{font-family:inherit}

/* ---- headers: header.top (CS, Supply, Fire Ops, Interview, Guide),
        .topbar (Schedule, Dispatch, Stibnite), .band/.mast (Policies) ---- */
header.top,.topbar,.band{background:var(--f-ink) !important;border-bottom:2px solid var(--f-blue)}
header.top .ttl,.topbar .t,header.top > div > b,.band .mast h1{
  font-family:"Barlow Condensed",Barlow,sans-serif !important;font-weight:800 !important;
  text-transform:uppercase;letter-spacing:.02em;font-size:21px !important;line-height:1.1}
header.top .ttl small,header.top > div > small,.band .mast .sub{
  font-family:Barlow,sans-serif;text-transform:none;letter-spacing:0;font-weight:500;
  font-size:12px;color:var(--f-dim)}
.backpill{font-family:Barlow,sans-serif;font-weight:700}

/* ---- tabs and top-bar buttons: condensed, larger, easier to hit ---- */
.tabs{background:var(--f-ink2) !important;border-top:0 !important}
.tab{font-family:"Barlow Condensed",Barlow,sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;min-height:44px}
.topbar button{font-family:"Barlow Condensed",Barlow,sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;min-height:40px}

/* ---- the light top bars (Schedule, Dispatch, Stibnite) now sit on navy ---- */
.topbar .t{color:#F2F6FA !important}
.topbar .sep{background:#2A405A !important}
.topbar button{color:#B9C8D8;background:transparent}
.topbar button:hover{color:#FFFFFF}
.topbar button[aria-current="true"]{color:var(--f-ink) !important;background:#FFFFFF !important}
.topbar .avail{color:#B9C8D8}
.topbar .backpill{background:#FFFFFF1F;color:#F2F6FA;border-color:transparent}

/* ---- phones: long titles on two lines at most ---- */
@media(max-width:620px){
  header.top .ttl,.topbar .t,header.top > div > b,.band .mast h1{font-size:17px !important}
  .topbar .t{font-size:15px !important}
  .tab{font-size:15px;padding:10px 12px}
  .topbar button{font-size:14px;padding:6px 9px}
}

/* ---- section labels and headings ---- */
h1,h2{font-family:"Barlow Condensed",Barlow,sans-serif;letter-spacing:.03em}

/* ---- cards and the side menu ---- */
.card{border-radius:10px}
.rail{background:var(--f-ink) !important}

/* Policies: keep the back link on one line beside the bigger title */
.band .mast a{white-space:nowrap}