/* BCM portal 0.1.0. Colours, fonts and pills: the family tokens of bcm-app-core core.css (0.5.5), copied as they are,
   so the portal looks like the importer and the work-orders apps. Desktop first, readable on a phone.
   System fonts only, nothing loaded from outside. */
:root{
  --ground:#e9ecea; --screen:#fbfcfb; --ink:#17201f; --muted:#5b6866; --line:#d6dcda;
  --accent:#0e5c66; --accent-ink:#ffffff; --accent-soft:#dcecee;
  --amber:#b86a00; --amber-soft:#fbeed8; --red:#b3261e; --red-soft:#f9e1df; --green:#1f7a45; --green-soft:#dff1e6;
  --chip:#eef1f0; --shadow:0 18px 50px rgba(20,40,40,.18);
  --f-display:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#0c1112; --screen:#141b1c; --ink:#e7eeed; --muted:#9aa9a7; --line:#2a3637;
  --accent:#5fb7c2; --accent-ink:#06282c; --accent-soft:#1c3437;
  --amber:#f0b04a; --amber-soft:#3a2c14; --red:#ff8a80; --red-soft:#3b1d1b; --green:#6fd39a; --green-soft:#16301f;
  --chip:#1f2929; --shadow:0 18px 50px rgba(0,0,0,.5); color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:15px/1.45 var(--f-body)}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding:24px 24px 32px;min-height:100vh;display:flex;flex-direction:column;gap:20px}
.muted{color:var(--muted)} .small{font-size:13px}
.err{color:var(--red);background:var(--red-soft);border:1px solid var(--red);border-radius:10px;padding:10px 12px;margin:0}
.empty{color:var(--muted);text-align:center;padding:24px 8px}

.top{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font:700 28px/1 var(--f-display);letter-spacing:.01em}
.mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font:700 22px/1 var(--f-display)}
.me{display:flex;align-items:center;gap:12px;color:var(--muted)}
button.link{background:none;border:0;color:var(--accent);font:600 15px var(--f-body);cursor:pointer;padding:10px 4px;min-height:44px}

.hello{background:var(--screen);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:40px;max-width:640px;margin:40px auto;display:flex;flex-direction:column;gap:14px}
.hello h1{font:700 34px/1.1 var(--f-display);margin:0;letter-spacing:.01em}
.hello p{margin:0}
.btn{align-self:flex-start;display:inline-block;font:600 16px var(--f-body);border-radius:10px;padding:13px 20px;min-height:44px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);text-decoration:none}

.tools{display:flex;gap:10px}
.search{flex:1;font:16px var(--f-body);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--screen);color:var(--ink);min-height:44px}

.sec{font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:6px;background:var(--screen);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:inherit;text-decoration:none;min-height:132px;transition:border-color .12s,box-shadow .12s}
a.tile:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(20,40,40,.10)}
a.tile:focus-visible,button:focus-visible,input:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile .h{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.tile .n{font:700 18px/1.2 var(--f-display);letter-spacing:.01em}
.tile .l{font-size:14px}
.tile .f{margin-top:auto;font-size:12.5px;color:var(--muted)}
.tile.off{opacity:.7;border-style:dashed}
.tile .go{font-size:12.5px;color:var(--accent);font-weight:600}
.pill{font:600 11.5px var(--f-body);letter-spacing:.04em;padding:2px 7px;border-radius:5px;white-space:nowrap;flex:none}
.pill.live{background:var(--green-soft);color:var(--green)}
.pill.test{background:var(--amber-soft);color:var(--amber)}
.pill.soon{background:var(--chip);color:var(--muted)}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;border-top:1px solid var(--line);padding-top:12px}

/* help pages */
.page{background:var(--screen);border:1px solid var(--line);border-radius:18px;padding:28px 32px;max-width:760px}
.page h1{font:700 30px/1.1 var(--f-display);margin:0 0 12px}
.page h2{font:700 20px/1.2 var(--f-display);margin:22px 0 6px}
.page li{margin:6px 0}
.back{font-weight:600;text-decoration:none}

@media (max-width:600px){
  .wrap{padding:14px 14px 24px}
  .hello{padding:24px;margin:16px auto}
  .hello h1{font-size:28px}
  .grid{grid-template-columns:1fr}
  .tile{min-height:0}
  .page{padding:20px}
}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}