/* ============================================================
   Works Monitor — entry register
   Palette: ledger paper #F6F4EE · slate ink #1E2B38 · rule #C7C3B6
            seal teal #0E6B5C (actions, drawn geometry)
            objection maroon #8F1D22 (COLLISION UI ONLY)
            registrar amber #A26A0B (warnings, hints)
   Type:    Noto Serif (headings) · Noto Sans / Noto Sans Gujarati (body)
            IBM Plex Mono (sanction refs, register numbers)
   ============================================================ */
:root {
  --paper: #F6F4EE;
  --card:  #FCFBF7;
  --ink:   #1E2B38;
  --muted: #5B6672;
  --rule:  #C7C3B6;
  --teal:  #0E6B5C;
  --teal-soft: #E3EEEB;
  --maroon:#8F1D22;
  --maroon-soft:#F7E9E9;
  --amber: #A26A0B;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 "Noto Sans", "Noto Sans Gujarati", sans-serif;
}
[lang="gu"], .gu { font-family: "Noto Sans Gujarati", "Noto Sans", sans-serif; }
.mono { font-family: "IBM Plex Mono", monospace; letter-spacing: .02em; }

/* ---------------- masthead ---------------- */
.masthead {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 28px;
  background: var(--ink); color: var(--paper);
  border-bottom: 4px double var(--rule);
}
.seal {
  width: 52px; height: 52px; flex: none;
  border: 2px solid var(--paper); border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Noto Sans Gujarati", sans-serif; font-size: 15px; font-weight: 600;
}
.masthead h1 {
  margin: 0; font: 700 21px/1.2 "Noto Serif", serif; letter-spacing: .01em;
}
.masthead-sub { margin: 3px 0 0; font-size: 12.5px; color: #B9C2CB; }
.whoami { margin-left: auto; text-align: right; }
.whoami label { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: #B9C2CB; margin-bottom: 3px; }
.whoami input {
  background: transparent; border: 1px solid #55636F; border-radius: 3px;
  color: var(--paper); padding: 5px 9px; width: 170px;
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
}

/* ---------------- form sheet ---------------- */
.sheet { max-width: 980px; margin: 26px auto 80px; padding: 0 20px; }
.block {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--teal);
  margin-bottom: 22px; padding: 20px 24px 24px;
  position: relative;
}
.block::before {          /* section number as a register margin mark */
  content: attr(data-n);
  position: absolute; top: -1px; left: -4px;
  background: var(--teal); color: var(--card);
  font: 600 12px/1 "IBM Plex Mono", monospace;
  padding: 5px 8px 6px;
}
.block h2 {
  margin: 0 0 16px 26px;
  font: 600 17px/1.3 "Noto Serif", serif;
}
.block h2 .gu { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 8px; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
.span2 { grid-column: span 2; }
.field label { display: block; font-size: 12.5px; font-weight: 600;
  margin-bottom: 4px; color: var(--ink); }
.field label b { color: var(--maroon); }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 3px;
  background: #FFFFFF; color: var(--ink);
  font: 14px/1.4 "Noto Sans", "Noto Sans Gujarati", sans-serif;
}
.field input:focus, .field select:focus, .field textarea:focus,
.tool:focus-visible, .primary:focus-visible, .alert-btn:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px;
}
.hidden { display: none; }
.hint { font-size: 12px; color: var(--amber); font-weight: 500; }

/* map */
.map-tools { display: flex; gap: 8px; align-items: center; margin: 14px 0 8px; flex-wrap: wrap; }
.tool {
  border: 1px solid var(--rule); background: #FFF; color: var(--ink);
  padding: 6px 12px; border-radius: 3px; font: 500 13px "Noto Sans", sans-serif;
  cursor: pointer;
}
.tool.active { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.tool:disabled { opacity: .45; cursor: not-allowed; }
.geom-status { font-size: 12.5px; color: var(--muted); }
#map { height: 380px; border: 1px solid var(--rule); }

/* amount in words */
.amount-words {
  background: var(--teal-soft); border: 1px dashed var(--teal);
  padding: 10px 14px; border-radius: 3px;
  display: flex; flex-direction: column; gap: 4px; font-size: 13.5px;
}
.amount-words .confirm { display: flex; gap: 8px; align-items: center;
  font-weight: 600; font-size: 13px; margin-top: 4px; }

.actions { display: flex; align-items: center; gap: 16px; }
.primary {
  background: var(--teal); color: #FFF; border: none; border-radius: 3px;
  padding: 12px 22px; font: 600 15px "Noto Sans", "Noto Sans Gujarati", sans-serif;
  cursor: pointer;
}
.primary:disabled { opacity: .55; cursor: wait; }
#saveStatus { font-size: 13.5px; }
#saveStatus.ok { color: var(--teal); font-weight: 600; }
#saveStatus.err { color: var(--maroon); font-weight: 600; }

/* ---------------- collision memo (maroon lives ONLY here) ---------------- */
dialog { border: none; padding: 0; background: transparent; max-width: 760px; width: 94vw; }
dialog::backdrop { background: rgba(30, 43, 56, .55); }
.memo {
  background: var(--card); border: 1px solid var(--maroon);
  border-top: 6px solid var(--maroon); padding: 22px 26px;
  max-height: 88vh; overflow-y: auto;
}
.memo-head h3 {
  margin: 0; font: 700 19px "Noto Serif", serif; color: var(--maroon);
}
.memo-head p { margin: 4px 0 0; color: var(--maroon); font-size: 13.5px; }
.memo-lede { font-size: 14px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.coll-card {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  border: 1px solid var(--rule); border-left: 4px solid var(--maroon);
  background: var(--maroon-soft); padding: 12px 14px; margin: 10px 0;
  font-size: 13.5px;
}
.coll-card .ref { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--muted); }
.coll-card .score { font: 600 22px "Noto Serif", serif; color: var(--maroon); text-align: right; }
.coll-card .why { grid-column: span 2; color: var(--muted); font-size: 12.5px; }
#miniMap { height: 230px; border: 1px solid var(--rule); margin: 12px 0; }
#reasonCount { color: var(--muted); }
.memo-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.alert-btn {
  background: var(--maroon); color: #FFF; border: none; border-radius: 3px;
  padding: 10px 18px; font: 600 14px "Noto Sans", "Noto Sans Gujarati", sans-serif; cursor: pointer;
}
.alert-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 680px) {
  .grid { grid-template-columns: 1fr; }
  .span2 { grid-column: span 1; }
  .masthead { flex-wrap: wrap; }
  .whoami { margin-left: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}



table.reg{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
    background:var(--card);
    border:1px solid var(--rule);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

table.reg th{
    background:var(--paper);
    color:var(--ink);
    text-align:left;
    font:600 11.5px "Noto Sans";
    text-transform:uppercase;
    letter-spacing:.05em;
    padding:10px 12px;
    border-bottom:2px solid var(--ink);
    position:sticky;
    top:0;
    z-index:2;
}


:root {
  --primary: #0b7285;
  --primary-light: #0d9488;
  --primary-bg: #e9fbfa;
  --danger: #a61b3f;
  --danger-light: #fff5f5;
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --bg-app: #f4f6f9;
  --bg-card: #ffffff;
  --border-color: #d9dee7;
  --border-light: #edf1f5;
  
  --font-sans: 'Noto Sans', 'Noto Sans Gujarati', sans-serif;
  --font-serif: 'Noto Serif', serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}


.masthead {
  background: linear-gradient(135deg, #094e5a, var(--primary));
  color: #ffffff;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.seal {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.masthead h1 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.masthead-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.whoami {
  margin-left: auto;
  text-align: right;
  background: rgba(0, 0, 0, 0.15);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.whoami label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}

/* Common Container Block styling */
.block {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
}

.block h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gu {
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text-muted);
}


.tool {
  background-color: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(11, 114, 133, 0.3);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tool:hover:not(:disabled) {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.tool:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

.tool.active {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

#logout {
  background-color: transparent;
  color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, 0.3);
}

#logout:hover {
  background-color: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}


.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tile b {
  display: block;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  color: #0f172a;
  margin-top: 6px;
}

.tile span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

table.reg tbody tr {
  transition: background-color 0.2s ease;
}

table.reg tbody tr:hover td {
  background-color: var(--primary-bg);
}

table.reg tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 0 var(--primary-light);
  font-weight: 600;
}

/* Scheme Bars Structure */
#schemeBars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scheme-row {
  border-bottom: 1px solid var(--border-light);
  padding: 12px 0;
}

.scheme-row:last-child {
  border-bottom: none;
}

.scheme-row label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scheme-row .bar i {
  display: block;
  height: 100%;
}

.scheme-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}


.map-tools {
  background-color: #f8fafc;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.geom-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}


@media (max-width: 1024px) {
  .ledger {
    grid-template-columns: repeat(3, 1fr);
  }
  .two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .whoami {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
  .ledger {
    grid-template-columns: repeat(2, 1fr);
  }
  .map-tools {
    flex-direction: column;
    align-items: stretch;
  }
  .geom-status {
    margin-left: 0;
    text-align: center;
  }
}

* { box-sizing: border-box; }
html, body { 
  margin: 0; padding: 0; background: var(--paper); color: var(--ink);
  font-family: 'Noto Sans Gujarati', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 0 20px 120px; }

header.top { 
  position: sticky; top: 0; z-index: 1000; background: var(--teal); color: #fff;
  margin: 0 -20px 20px; padding: 20px; box-shadow: var(--shadow);
}
header.top h1 { font-size: 20px; margin: 0; }
header.top .sub { font-size: 13px; opacity: 0.9; }

/* Improved Inputs */
label.f { display: block; font-size: 14px; font-weight: 600; margin: 18px 0 8px; color: #495057; }
input, select, textarea { 
  width: 100%; font-size: 16px; padding: 14px; border: 2px solid var(--rule); 
  border-radius: 8px; background: #fff; transition: all 0.2s;
}
input:focus, select:focus, textarea:focus { 
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.15); 
}

/* Tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { 
  border: 2px solid var(--rule); border-radius: 10px; background: #fff;
  padding: 16px; text-align: center; font-size: 14px; font-weight: 600;
  transition: all 0.2s; cursor: pointer; display: flex; flex-direction: column; align-items: center;
}
.tile.sel { border-color: var(--teal); background: #E0F2F1; color: var(--teal-dk); }

/* Buttons */
.bigbtn { 
  width: 100%; height: 50px; border: none; border-radius: 8px;
  background: var(--teal); color: #fff; font-weight: 700; font-size: 16px;
  cursor: pointer; transition: background 0.2s;
}
.bigbtn:active { transform: scale(0.98); }
.bigbtn.sec { background: transparent; border: 2px solid var(--teal); color: var(--teal); }

/* Sticky Bar */
.bar { 
  position: fixed; bottom: 0; width: 100%; background: #fff;
  border-top: 1px solid var(--rule); padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.bar-in { max-width: 560px; margin: 0 auto; display: flex; gap: 12px; }

/* UI feedback */
.err-inline { color: var(--maroon); font-size: 13px; margin-top: 4px; }
.rev { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 10px; box-shadow: var(--shadow); }

:root { --teal:#0E6B5C; --teal-dk:#0A5246; --maroon:#8F1D22; --paper:#FAF7F0;
  --ink:#1E2A26; --mut:#6E6757; --rule:#DDD5C2; --card:#FFFFFF; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; background:var(--paper); color:var(--ink);
  font: 16px/1.5 "Noto Sans Gujarati", sans-serif; }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 14px 110px; }

header.top { position: sticky; top:0; z-index:1000; background:var(--teal); color:#fff;
  margin: 0 -14px 14px; padding: 12px 16px 10px; }
header.top h1 { font-size:18px; font-weight:700; margin:0; }
header.top .sub { font-size:12px; opacity:.85; }
.dots { display:flex; gap:6px; margin-top:10px; }
.dots span { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.3); }
.dots span.on { background:#FFD400; }

.step { display:none; }
.step.on { display:block; animation: fade .18s ease; }
@keyframes fade { from {opacity:0; transform:translateY(6px)} to {opacity:1} }
h2.q { font-size:17px; font-weight:700; margin: 4px 0 2px; }
p.h { font-size:13.5px; color:var(--mut); margin: 0 0 14px; }

label.f { display:block; font-size:14px; font-weight:600; margin: 14px 0 6px; }
label.f small { font-weight:400; color:var(--mut); }
input, select, textarea { width:100%; font: 17px "Noto Sans Gujarati", sans-serif;
  padding: 13px 14px; border: 1.5px solid var(--rule); border-radius: 10px;
  background:#fff; min-height:50px; }
input:focus, select:focus, textarea:focus { outline:none; border-color: var(--teal); }
.err-inline { color: var(--maroon); font-size: 13.5px; margin-top: 6px; min-height: 18px; }

.tiles { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.tile { border:1.5px solid var(--rule); border-radius:12px; background:#fff;
  padding: 16px 12px; text-align:center; font-size:15px; font-weight:600;
  min-height: 76px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; cursor:pointer; user-select:none; }
.tile svg { width:28px; height:28px; stroke: var(--teal); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.tile.sel { border-color: var(--teal); background:#E9F5F1; box-shadow: 0 0 0 2px var(--teal) inset; }
.tile.more { color: var(--mut); font-weight:600; }
#allTypes { margin-top:10px; }

.bigbtn { display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:54px; border:none; border-radius:12px;
  background: var(--teal); color:#fff; font: 700 17px "Noto Sans Gujarati"; cursor:pointer; }
.bigbtn:active { background: var(--teal-dk); }
.bigbtn.sec { background:#fff; color:var(--teal); border:1.5px solid var(--teal); }
.bigbtn:disabled { opacity:.5; }

.bar { position: fixed; left:0; right:0; bottom:0; z-index:1100;
  background: #fffdf7; border-top:1px solid var(--rule);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px; }
.bar-in { display:flex; gap:10px; max-width:560px; margin:0 auto; width:100%; }
.bar .bigbtn { flex:2; } .bar .bigbtn.sec { flex:1; }

#map { height: 46vh; min-height:260px; border-radius:12px; border:1.5px solid var(--rule); margin-top:10px; }
.gpsline { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.chip { font-size:13.5px; padding: 10px 14px; border-radius: 22px; border:1.5px solid var(--rule);
  background:#fff; cursor:pointer; font-weight:600; min-height:44px; display:inline-flex; align-items:center; }
.chip.ok { border-color: var(--teal); color: var(--teal); }
.chip.warn { border-color: #A26A0B; color:#A26A0B; }
#geoNote { font-size:13.5px; color:var(--mut); margin-top:8px; min-height:20px; }

.photoTile { border: 2px dashed var(--rule); border-radius:12px; background:#fff;
  min-height: 120px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; color:var(--mut); font-weight:600; cursor:pointer; }
.photoTile svg { width:34px; height:34px; stroke:var(--teal); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
#photoPrev img { width:100%; border-radius:12px; border:1.5px solid var(--rule); display:block; margin-top:10px; }

.rev { background:#fff; border:1.5px solid var(--rule); border-radius:12px; padding: 4px 14px; }
.rev .row { display:flex; justify-content:space-between; gap:12px;
  padding: 11px 0; border-bottom:1px solid #F0EBDD; font-size:14.5px; }
.rev .row:last-child { border-bottom:none; }
.rev .k { color:var(--mut); flex-shrink:0; }
.rev .v { text-align:right; font-weight:600; }
.rev .v.mono { font: 500 13px "IBM Plex Mono"; }
.rev img { width: 84px; border-radius:8px; }

#conflict { border:1.5px solid var(--maroon); border-top:5px solid var(--maroon);
  border-radius: 0 0 12px 12px; background:#FDF3F2; padding: 12px 14px; margin-top:14px; display:none; }
#conflict h3 { font-size:15px; color:#6d1418; margin:0 0 6px; }
.citem { background:#fff; border-left:4px solid var(--maroon); padding:9px 11px;
  font-size:13.5px; margin-bottom:6px; }
.citem .m { font: 500 12px "IBM Plex Mono"; color:#6d1418; }
#orWrap textarea { min-height:70px; }
#orC { font: 500 12px "IBM Plex Mono"; color:var(--mut); }

#toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color:#fff; font-size:14px; padding: 10px 18px;
  border-radius: 24px; z-index: 2000; display:none; max-width: 90%; }
#draftBanner { background:#FFF6DC; border:1.5px solid #E5C566; border-radius:10px;
  padding: 10px 12px; font-size:14px; display:none; margin-bottom:12px; }
#draftBanner .chip { min-height:38px; padding:6px 14px; margin-left:6px; }
.okBig { text-align:center; padding: 40px 10px; }
.okBig .tick { width:74px; height:74px; border-radius:50%; background:var(--teal);
  color:#fff; font-size:38px; display:flex; align-items:center; justify-content:center;
  margin: 0 auto 16px; }
.okBig .ref { font: 500 15px "IBM Plex Mono"; color: var(--teal); }