/* The map page styles are lifted from map_page.py; the read/review steps and the login page are new. */
:root { --bg:#fff; --fg:#1d1d1f; --muted:#555; --panel:#f6f6f4; --line:#d8d8d4; --accent:#1f5fbf; --warn:#a00000; --doubt:#fff4d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#161616; --fg:#eee; --muted:#aaa; --panel:#222; --line:#3a3a3a; --accent:#6ea0ff; --warn:#ff7a7a; --doubt:#3a3210; } }
:root[data-theme="dark"] { --bg:#161616; --fg:#eee; --muted:#aaa; --panel:#222; --line:#3a3a3a; --accent:#6ea0ff; --warn:#ff7a7a; --doubt:#3a3210; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font-family: system-ui, sans-serif; }
#wrap { display:flex; height:100%; }
#side { width:300px; padding:14px 16px; background:var(--panel); border-right:1px solid var(--line); overflow:auto; font-size:14px; }
#mapbox { flex:1; position:relative; } #map { position:absolute; inset:0; }
.rose { position:absolute; left:14px; top:14px; width:96px; height:96px; z-index:5; background:rgba(255,255,255,.9); border-radius:50%; padding:4px; pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,.4); }
h1 { font-size:16px; margin:0 0 4px; } .muted { color:var(--muted); font-size:12px; }
fieldset { border:1px solid var(--line); border-radius:6px; margin:12px 0; padding:8px 10px; } legend { font-weight:600; font-size:13px; }
label { display:block; margin:5px 0; cursor:pointer; } label.off { color:var(--muted); cursor:default; }
.sw { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; vertical-align:-1px; border:1px solid #0004; }
button { margin:4px 4px 0 0; padding:5px 9px; border:1px solid var(--line); border-radius:5px; background:var(--bg); color:var(--fg); cursor:pointer; font:inherit; }
button.on { outline:2px solid #2a6fdb; } button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); padding:8px 16px; font-weight:600; }
button.link { border:none; background:none; color:var(--accent); padding:0; margin:0 0 8px; }
#side table { border-collapse:collapse; width:100%; font-size:13px; } #side td { padding:2px 0; vertical-align:top; } td.v { text-align:right; font-weight:600; }
@media (max-width:700px) { #wrap { flex-direction:column; } #side { width:auto; max-height:45%; border-right:none; border-bottom:1px solid var(--line); } }
/* steps 1 and 2 */
body:not(.mapping) { overflow:auto; }
.page { max-width:1100px; margin:0 auto; padding:16px; box-sizing:border-box; }
.top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding:10px 16px; }
.top h1 { font-size:18px; margin:0; } .top .who { font-size:13px; color:var(--muted); }
.privacy { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-size:13px; margin:12px 0; }
.status { margin-top:8px; font-size:14px; min-height:1.2em; } .status.error, .flag { color:var(--warn); } .status.ok { color:inherit; }
.banner { background:#b00000; color:#fff; padding:8px 12px; border-radius:6px; font-weight:600; margin:8px 0; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:8px 16px; }
.grid label { font-size:13px; } .grid input, .grid select { width:100%; box-sizing:border-box; padding:5px; font:inherit; }
table.calls { border-collapse:collapse; width:100%; font-size:13px; margin:6px 0 14px; }
table.calls th, table.calls td { border-bottom:1px solid var(--line); padding:4px 6px; text-align:left; vertical-align:top; }
table.calls td.t { max-width:420px; } table.calls tr.doubt { background:var(--doubt); }
table.calls input, table.calls select { font:inherit; padding:3px; }
textarea { width:100%; box-sizing:border-box; font: 12px ui-monospace, monospace; }
#step-map { height:100%; } body.mapping .top { display:none; }
.wide { overflow-x:auto; }
/* login */
.login { max-width:380px; margin:12vh auto; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.login input { width:100%; box-sizing:border-box; padding:8px; font:inherit; margin:6px 0 10px; }
/* The pages set data-theme="dark" on <html> (Mark, 2026-11-02): the dark theme always, whatever the computer's setting. */
/* ---- 2026-11-02: the logo, the sign-in page and the landing layout. Everything above is unchanged; these rules use the same
   theme variables, so the page keeps its original colours (dark on a dark-mode computer). ---- */
:root { --logo-ink:#1a2744; --logo-sub:#4a5a7a; --logo-link:#1a2744; --logo-gold:#c9943a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --logo-ink:#e8edf5; --logo-sub:#8899bb; --logo-link:#c9943a; } }
:root[data-theme="dark"] { --logo-ink:#e8edf5; --logo-sub:#8899bb; --logo-link:#c9943a; }
/* the logo: logo-light.svg colours in the light theme, logo-dark.svg colours in the dark theme */
.logo .lk { stroke:var(--logo-link); } .logo .lkmask { stroke:var(--bg); }
.logo .ink { fill:var(--logo-ink); } .logo .gold { fill:var(--logo-gold); } .logo .subink { fill:var(--logo-sub); }
[hidden] { display:none !important; }
/* header: logo + product name, on every screen */
.top { align-items:center; } .brand { display:flex; align-items:center; gap:12px; } .top .logo { height:40px; width:auto; }
.top h1 { font-size:16px; color:var(--muted); font-weight:600; padding-left:12px; border-left:1px solid var(--line); }
body.app.mapping .top { display:flex; }
/* the shell: left panel (steps + the map controls) and the centre (the map, the upload card over it, or the calls page) */
body.app { display:flex; flex-direction:column; overflow:hidden; }
body.app.reviewing { display:block; overflow:auto; }
#shell { flex:1; display:flex; min-height:0; }
#rail { flex:none; display:flex; flex-direction:column; background:var(--panel); border-right:1px solid var(--line); min-height:0; }
#rail #side { border-right:none; flex:1; }
body.reviewing #rail { display:none; }
#centre { flex:1; position:relative; min-width:0; overflow:auto; }
#step-map { position:absolute; inset:0; display:flex; height:auto; }
.steps { list-style:none; margin:0; padding:10px 12px; display:flex; gap:6px; border-bottom:1px solid var(--line); font-size:14px; }
.steps li { flex:1; display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:6px; color:var(--muted); border:1px solid transparent; }
.steps li[aria-current="step"] { color:var(--fg); font-weight:600; background:var(--bg); border-color:var(--line); border-left:3px solid var(--logo-gold); }
.steps .n { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:700; flex:none; }
/* the upload card, centred over the map */
#step-read { position:absolute; inset:0; z-index:10; max-width:none; margin:0; padding:5vh 16px; display:flex; justify-content:center; align-items:flex-start; overflow:auto; pointer-events:none; }
.uploadcard { pointer-events:auto; width:100%; max-width:640px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:22px 26px; box-shadow:0 8px 30px rgba(0,0,0,.45); }
.cardhead { margin:0 0 4px; font-size:22px; } .sub { color:var(--muted); margin:0 0 14px; }
.formrow { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.field { flex:1; min-width:200px; font-weight:600; font-size:14px; } .field.county { flex:0 1 180px; }
.field input { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:8px 10px; font:inherit; font-size:16px; font-weight:400; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--fg); }
.hint { display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:3px; }
.dropzone { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:24px 16px 20px; border:2px dashed var(--line); border-radius:10px; background:var(--panel); text-align:center; cursor:pointer; margin:0; }
.dropzone:hover, .dropzone.over { border-color:var(--accent); } .dropzone.has { border-style:solid; border-color:var(--accent); }
.dropzone:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.dropicon { width:40px; height:40px; color:var(--muted); } .droptext { font-size:16px; }
.dropzone .choose { padding:6px 12px; border:1px solid var(--accent); border-radius:5px; color:var(--accent); font-weight:600; background:var(--bg); }
.dropzone input[type=file] { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.filelist { list-style:none; margin:8px 0 0; padding:0; } .filelist li { padding:5px 10px; border:1px solid var(--line); border-radius:5px; margin:4px 0; }
button.big { padding:10px 22px; font-size:16px; margin-top:14px; min-width:200px; }
.uploadcard .privacy { margin:14px 0 8px; }
.samplebadge { position:absolute; z-index:6; top:14px; left:124px; padding:6px 12px; border-radius:6px; background:var(--doubt); color:var(--fg); border:1px solid var(--line); font-weight:700; font-size:14px; box-shadow:0 1px 4px rgba(0,0,0,.4); }
/* sign-in page */
.login .logo { width:250px; height:auto; display:block; margin:0 0 4px -6px; }
.alert { border:1px solid var(--warn); border-left-width:5px; padding:10px 12px; border-radius:6px; margin:10px 0; }
.alert b:first-child { color:var(--warn); } .alert p { margin:6px 0 0; }
html.js .nojs { display:none; }
@media (max-width:700px) {
  body.app { overflow:auto; } #shell { flex-direction:column; } #rail { border-right:none; border-bottom:1px solid var(--line); }
  #rail #side { width:auto; max-height:40vh; } #centre { min-height:75vh; } #step-read { padding:12px 8px; }
}