/* ARELMap — shared look for the desktop and the field app.
   RLR palette + Titillium Web (platform reference p.10) and the locked TundRA
   style sheet v1.0: signals = results only, buttons by meaning, square 3-4px
   corners, accent bars on the top edge. The residual scale is for maps only. */
@font-face{font-family:'Titillium Web';font-weight:300;src:url(/static/fonts/TitilliumWeb-Light.ttf)}
@font-face{font-family:'Titillium Web';font-weight:400;src:url(/static/fonts/TitilliumWeb-Regular.ttf)}
@font-face{font-family:'Titillium Web';font-weight:700;src:url(/static/fonts/TitilliumWeb-Bold.ttf)}
:root{
  --navy:#0E1A2F;--navy-600:#1F2E49;--navy-400:#4A5768;--navy-300:#7C8695;--navy-200:#B4BBC5;--navy-100:#E9ECF0;--navy-50:#F5F7F9;
  --red:#B60B29;--red-100:#F6E9E9;--pass:#1B7A43;--pass-bg:#E4F2EA;--check:#F2A900;--warning-text:#8A5608;--warning-bg:#FBF0DD;
  --line:#D7DCE3;--white:#FFFFFF;--body:#2A3646;--shadow:0 1px 2px rgba(14,26,47,.08);
  --font:'Titillium Web',system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:var(--navy-50);color:var(--body);font-size:15px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:#1d4ed8}
h1,h2,h3{color:var(--navy);margin:0}
.over{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-400)}
.muted{color:var(--navy-300)}
.small{font-size:13px}
.mono{font-family:var(--mono);color:var(--navy);font-weight:600;font-size:.92em}
.b{font-weight:700;color:var(--navy)}
.red{color:var(--red)}
.nowrap{white-space:nowrap}

/* signals: colour + word + drawn shape */
.sig{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;line-height:1.3}
.sig svg{width:11px;height:11px;flex-shrink:0}
.s-pass{background:var(--pass);color:var(--white)}
.s-check{background:var(--check);color:var(--navy)}
.s-fail{background:var(--red);color:var(--white)}
.s-done{background:var(--navy);color:var(--white)}
.s-pending{background:var(--navy-100);color:var(--navy-400)}
.s-draft{background:var(--white);color:var(--navy);border:1px dashed var(--navy-300)}

/* buttons by meaning */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:3px;font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--navy-200);cursor:pointer;background:var(--white);color:var(--navy);text-decoration:none;white-space:nowrap}
.btn:disabled,.btn.locked{background:var(--navy-100);color:var(--navy-300);border-color:transparent;cursor:not-allowed}
.btn.sm{padding:6px 12px;font-size:12px}
.b-go{background:var(--pass);color:var(--white);border-color:var(--pass)}
.b-att{background:var(--check);color:var(--navy);border-color:var(--check)}
.b-danger{background:var(--red);color:var(--white);border-color:var(--red)}
.b-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.b-sec{background:var(--white);color:var(--navy);border-color:var(--navy-200)}

.card{background:var(--white);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);padding:16px 20px}
.card>.ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.kpi{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:4px;padding:11px 16px;box-shadow:var(--shadow);min-height:76px}
.kpi .v{font-size:28px;font-weight:700;color:var(--navy);line-height:1.15}
.kpi .v small{font-size:15px;font-weight:400;color:var(--navy-400)}
.kpi .v.red{color:var(--red)}
.kpi.k-check{border-top-color:var(--check)}.kpi.k-fail{border-top-color:var(--red)}.kpi.k-pass{border-top-color:var(--pass)}
table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-400);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t th.sort{cursor:pointer}
table.t td{padding:9px 10px;border-bottom:1px solid var(--navy-100);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:var(--navy-50)}
table.t tr.tint-check td{background:var(--warning-bg)}
table.t tr.tint-fail td{background:var(--red-100)}
table.t tr.excl td{color:var(--navy-300);text-decoration:line-through}
.tw{overflow-x:auto}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp{flex:1}
.stack{display:flex;flex-direction:column;gap:16px}
.alert{padding:10px 14px;border-radius:3px;border-left:4px solid var(--navy);background:var(--white)}
.alert.a-check{border-left-color:var(--check);background:var(--warning-bg);color:var(--warning-text)}
.alert.a-fail{border-left-color:var(--red);background:var(--red-100);color:var(--red)}
.alert.a-pass{border-left-color:var(--pass);background:var(--pass-bg);color:var(--pass)}
label.f{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-400);margin:12px 0 4px}
input.i,select.i,textarea.i{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:3px;background:var(--white)}
input.i:focus,select.i:focus,textarea.i:focus{outline:2px solid var(--navy-200);border-color:var(--navy-400)}
.empty{padding:22px;text-align:center;color:var(--navy-300)}
.bar{height:8px;background:var(--navy-100);border-radius:2px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--navy);transition:width .3s}
.seg{display:inline-flex;border:1px solid var(--navy-200);border-radius:3px;overflow:hidden;background:var(--white)}
.seg button{border:0;background:transparent;padding:7px 14px;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-400);cursor:pointer;border-right:1px solid var(--navy-100)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--navy);color:var(--white)}
.ul-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.ul-tabs button{border:0;background:none;padding:9px 14px;font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-400);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.ul-tabs button.on{color:var(--navy);border-bottom-color:var(--red)}
.chip{display:inline-block;background:var(--navy);color:var(--white);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:2px}
.legend{display:flex;align-items:flex-end;gap:0;flex-wrap:wrap}
.legend .lg{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--navy-400)}
.legend .lg i{display:block;width:36px;height:12px}
.legend .unit{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-400);margin-right:10px;align-self:center}
.hatch{background:repeating-linear-gradient(45deg,var(--navy-50),var(--navy-50) 6px,var(--navy-100) 6px,var(--navy-100) 12px)}
.modal-bg{position:fixed;inset:0;background:rgba(14,26,47,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--white);border-radius:4px;border-top:3px solid var(--navy);max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:20px 24px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px}
.kv>div:nth-child(odd){color:var(--navy-400)}
.kv>div:nth-child(even){color:var(--navy);font-weight:700;text-align:right}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:var(--white);padding:11px 20px;border-radius:3px;z-index:60;font-weight:700;box-shadow:0 4px 18px rgba(14,26,47,.3)}
.wm{font-size:22px;letter-spacing:.01em;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.wm b{font-weight:700}.wm span{font-weight:300}
.wm svg{width:26px;height:22px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pass);margin-right:6px}
.dot.live{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,122,67,.6)}70%{box-shadow:0 0 0 7px rgba(27,122,67,0)}100%{box-shadow:0 0 0 0 rgba(27,122,67,0)}}
canvas.map{display:block;width:100%;image-rendering:pixelated;cursor:crosshair;background:var(--white)}