/* Shadeland internal app - styles
   Brand values from OS/Brand/colours.md. Never invent a fourth brand colour;
   use tints of navy or blue. Yellow is an accent and NEVER text. */

:root{
  /* Brand */
  --navy:#235774;
  --blue:#27AAE1;
  --yellow:#FFDD00;
  --white:#FFFFFF;
  /* Screen tints - UI only, never send to a printer */
  --paper:#F2F8FC;
  --line:#D3E4EF;
  --navy90:#2E6486;
  --ink:#1B2E3A;
  --muted:#5C7387;
  --ok:#1B7F4B;
  --warn:#8A5A00;

  --tap:48px;              /* nothing tappable is smaller than this */
  --radius:12px;
  --shadow:0 1px 3px rgba(27,46,58,.10), 0 4px 16px rgba(27,46,58,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:17px;              /* deliberately large: read standing up, bad light */
  line-height:1.45;
  -webkit-text-size-adjust:100%;
}

/* ---------- App frame ---------- */
.app{max-width:760px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--white)}

header.bar{
  background:var(--navy);color:var(--white);
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;
}
.bar .mark{font-family:Anton,Impact,sans-serif;letter-spacing:.5px;font-size:20px;text-transform:uppercase}
/* The logo carries the brand; its alt text is styled to read as the wordmark if it fails. */
.bar .logo{display:block;height:34px;width:auto;border:0;
  font-family:Anton,Impact,sans-serif;font-size:20px;letter-spacing:.5px;color:var(--white)}
.bar .who{margin-left:auto;font-size:13px;text-align:right;line-height:1.35;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.bar .who-n{font-weight:700;font-size:14px}
.bar .who-d{opacity:.75;font-size:12px}
.bar button.link{background:none;border:0;color:var(--white);font:inherit;font-size:12px;
  text-decoration:underline;padding:2px 0 0;cursor:pointer;opacity:.8}
.bar button.link:hover{opacity:1}
@media (max-width:420px){ .bar .logo{height:28px} .bar .who-d{display:none} }

/* ---------- Banner: always says which data you are looking at ---------- */
.banner{padding:10px 16px;font-size:14px;border-bottom:1px solid var(--line);background:var(--paper)}
.banner.live{color:var(--ok)}
.banner.saved{color:var(--warn);background:#FFF8E6}
.banner.error{color:#8A1B1B;background:#FDECEC}

/* ---------- Search ---------- */
.searchwrap{position:sticky;top:0;z-index:10;background:var(--white);padding:12px 16px;border-bottom:1px solid var(--line)}
input[type=search],input[type=email],input[type=password]{
  width:100%;height:var(--tap);padding:0 14px;font:inherit;
  border:2px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink);
}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(39,170,225,.25)}
.hint{font-size:13px;color:var(--muted);margin-top:8px}

/* ---------- Results ---------- */
main{flex:1;padding:8px 16px 96px}
.row{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  box-shadow:var(--shadow);padding:14px;margin:10px 0;
}
.row h3{margin:0 0 2px;font-size:17px;color:var(--navy);font-weight:600}
.row .sub{font-size:14px;color:var(--muted);margin-bottom:10px}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.fig{background:var(--paper);border-radius:8px;padding:8px 10px}
.fig .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.fig .v{font-size:19px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.fig.retail .v{color:var(--ink)}
/* A missing cost must not look like a price. It reads as words, not a number. */
.fig .v .notset{font-size:14px;font-weight:400;color:var(--muted);font-style:italic}
.gst{font-size:12px;color:var(--muted);margin-top:8px}
.empty{text-align:center;color:var(--muted);padding:48px 16px}

/* ---------- Tabs: one today, built for more ---------- */
nav.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--white);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  max-width:760px;margin:0 auto;
}
nav.tabs button{
  flex:1;min-height:var(--tap);background:none;border:0;font:inherit;font-size:13px;
  color:var(--muted);padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
}
nav.tabs button[aria-current=page]{color:var(--navy);font-weight:600;box-shadow:inset 0 3px 0 var(--yellow)}
/* A 375 px phone (overnight review D5, 31/10/2026): labels were cut off ("Show") or wrapped ("To quote"), and buttons
   fell under the 48 px tap size. Labels never wrap now, every button is at least 56 px wide, and when they do not
   all fit the bar scrolls sideways (app.js brings the open tab into view). */
nav.tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{white-space:nowrap;min-width:56px;flex:1 0 auto;padding:10px 8px}
@media (max-width:420px){nav.tabs button{font-size:12px;padding:10px 6px}}
/* THE `hidden` ATTRIBUTE LOSES TO `display:flex`. The rep price finder was hidden for show
   weekend on 22/09/2026 by putting `hidden` on this nav, the attribute was there in the
   file, and the bar carried on rendering for everybody because the rule above sets display
   and the browser's own `[hidden]{display:none}` is weaker than a class rule. Checked in the
   source and reported as fixed; Graeme found it still on screen. Read the RESULT, not the
   markup. This line is what actually hides it - delete it and the attribute together to put
   the price finder back. */
nav.tabs[hidden]{display:none}
/* Same trap, one level down: a hidden BUTTON inside the bar. Added 29/09/2026 when the bar came
   back for Tasks with the Prices button still hidden. */
nav.tabs button[hidden]{display:none}

/* ---------- Sign in ---------- */
.signin{max-width:380px;margin:0 auto;padding:40px 24px;text-align:left}
.signin h1{font-family:Anton,Impact,sans-serif;text-transform:uppercase;color:var(--navy);font-size:30px;margin:0 0 6px;letter-spacing:.5px}
.signin p.lead{color:var(--muted);margin:0 0 24px;font-size:15px}
label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin:14px 0 6px}
button.primary{
  width:100%;min-height:var(--tap);margin-top:20px;border:0;border-radius:var(--radius);
  background:var(--navy);color:var(--white);font:inherit;font-weight:600;font-size:17px;cursor:pointer;
}
button.primary:active{background:var(--navy90)}
button.primary[disabled]{opacity:.55;cursor:default}
.msg{margin-top:14px;font-size:14px}
.msg.bad{color:#8A1B1B}
.msg.good{color:var(--ok)}

@media (prefers-reduced-motion:no-preference){.row{transition:box-shadow .15s ease}}