/* ============================================================
   Overstory FieldOps — mono-editorial system
   Imported from HomeQueue.dc.html design file
   ============================================================ */

:root{
  /* Palette */
  --canvas:#f5f0e6;
  --canvas-dim:#eee6d0;
  --wrap:#e8e2d0;
  --divider:#0a0a0a;
  --row-divider:#d9d2bd;

  --ink:#0a0a0a;
  --body:#3a3a3a;
  --muted:#6a6a6a;
  --muted-soft:#a0a0a0;

  --ok:#1a7f3c;
  --emergency:#a02020;
  --high:#8a5a10;
  --routine:#2a6a3a;

  /* Map palette */
  --foliage:#dce7d2;
  --road:#f4c98b;
  --river:#bcd8e8;
  --terrain:#eee6d0;

  /* Type */
  --sans:'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:'Instrument Serif', Georgia, serif;

  /* Motion */
  --ease:cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast:160ms;
  --dur-med:280ms;
  --dur-hero:520ms;
}

*, *::before, *::after{ box-sizing:border-box; }
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html, body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  background:var(--wrap);
  color:var(--ink);
  display:flex; justify-content:center; min-height:100vh;
  padding:24px 12px;
  line-height:1.4;
}

h1,h2,h3,h4,h5,h6{ margin:0; text-wrap:balance; font-weight:500; letter-spacing:-0.015em; }
p{ margin:0; text-wrap:pretty; }

.num, .mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

.eyebrow{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em;
  color:var(--muted);
}
.eyebrow.strong{ color:var(--ink); }

.hairline{ border-top:1px solid var(--divider); }
.hairline-soft{ border-top:1px solid var(--row-divider); }

/* ============================================================
   Phone frame
   ============================================================ */
.phone{
  width:412px; max-width:100%;
  background:var(--canvas);
  border-radius:36px;
  border:8px solid #0a0a0a;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05);
  display:flex; flex-direction:column;
  height:880px;
  position:relative;
  isolation:isolate;
}

.devicebar{
  height:44px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px;
  font-family:var(--mono);
  font-size:13px; font-weight:600;
  color:var(--ink); background:var(--canvas);
}
.devicebar .dots{ display:flex; gap:6px; align-items:center; }
.signalbars{ display:flex; align-items:flex-end; gap:2px; height:10px; }
.signalbars i{ display:block; width:3px; background:var(--ink); border-radius:1px; }
.signalbars i:nth-child(1){ height:4px; } .signalbars i:nth-child(2){ height:6px; }
.signalbars i:nth-child(3){ height:8px; } .signalbars i:nth-child(4){ height:10px; }
.battery{
  width:22px; height:11px; border:1.3px solid var(--ink);
  border-radius:3px; position:relative; padding:1.5px;
}
.battery::after{
  content:""; position:absolute; right:-4px; top:3px;
  width:2px; height:5px; background:var(--ink);
  border-radius:0 1px 1px 0;
}
.battery i{ display:block; height:100%; width:78%; background:var(--ink); border-radius:1px; }

.screen{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--canvas); position:relative;
}
.screen::-webkit-scrollbar{ width:0; }

/* ============================================================
   Header slab
   ============================================================ */
.slab{
  border-bottom:1px solid var(--divider);
  padding:18px 0 14px;
  animation:heroRise var(--dur-hero) var(--ease) 40ms both;
}
@keyframes heroRise{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
.slab-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px;
}
.wordmark{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.2em;
  color:var(--ink);
}
.wordmark .mark{
  width:8px; height:8px; background:var(--ink);
  transform:rotate(45deg); display:inline-block;
}
.connpill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  border:1px solid var(--ink);
  border-radius:2px;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em;
  color:var(--ink); background:var(--canvas); cursor:pointer;
}
.connpill .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(26,127,60,0.18);
  animation:onlinePulse 2200ms var(--ease) infinite;
}
.connpill.offline .dot{
  background:var(--emergency);
  box-shadow:0 0 0 3px rgba(160,32,32,0.18);
  animation:none;
}
@keyframes onlinePulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(26,127,60,0.18); }
  50%    { box-shadow:0 0 0 8px rgba(26,127,60,0.04); }
}

.hero-strip{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:22px; padding:0 12px;
}
.hero-date{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--muted);
}
.hero-title{
  font-family:var(--sans); font-weight:400;
  font-size:48px; line-height:0.98; letter-spacing:-0.02em;
  margin-top:8px;
}
.hero-title.sm{ font-size:32px; }
.hero-title.md{ font-size:40px; }
.hero-badge{ text-align:right; }
.hero-badge .num{ font-size:11px; color:var(--muted); display:block; }

/* Stat grid */
.statgrid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:0; margin-top:22px;
  border-top:1px solid var(--divider);
  border-bottom:1px solid var(--divider);
  animation:heroRise var(--dur-hero) var(--ease) 160ms both;
}
.statgrid.two{ grid-template-columns:repeat(2, 1fr); }
.statcell{
  padding:14px 14px;
  border-right:1px solid var(--divider);
}
.statgrid > .statcell:first-child{ margin-left:16px; }
.statgrid > .statcell:last-child{
  border-right:none; margin-right:16px;
}
.statlbl{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.15em; color:var(--muted);
}
.statval{
  font-family:var(--mono); font-size:22px; font-weight:500;
  margin-top:4px; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.statval .u{ font-size:11px; color:var(--muted); margin-left:3px; }

/* ============================================================
   Map ribbon
   ============================================================ */
.mapribbon{
  position:relative; height:132px;
  background:var(--terrain);
  border-bottom:1px solid var(--divider);
  overflow:hidden; cursor:pointer;
}
.mapribbon svg{ position:absolute; inset:0; width:100%; height:100%; }
.mapribbon .coord{
  position:absolute; left:12px; top:10px;
  font-family:var(--mono); font-size:9px; color:var(--muted);
  background:rgba(245,240,230,0.8); padding:2px 6px;
}
.mapribbon .openpill{
  position:absolute; left:12px; bottom:12px;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em;
  background:var(--canvas); border:1px solid var(--ink);
  padding:4px 8px;
}

/* ============================================================
   Next-up stripe
   ============================================================ */
.nextup{
  padding:16px 12px;
  background:var(--ink); color:var(--canvas);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.nextup .lbl{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--muted-soft);
}
.nextup .title{
  font-size:15px; font-weight:500; margin-top:3px;
  letter-spacing:-0.01em;
}
.checkin-btn{
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em;
  background:var(--canvas); color:var(--ink);
  border:none; padding:9px 12px; cursor:pointer;
  white-space:nowrap;
  transition:transform 120ms var(--ease);
}
.checkin-btn:active{ transform:scale(0.96); }

/* ============================================================
   Job timeline rows
   ============================================================ */
.joblist{ padding:6px 0 24px; }
.jobrow{
  display:grid; grid-template-columns:52px 1fr;
  border-bottom:1px solid var(--row-divider);
  cursor:pointer; position:relative;
  animation:slideUp var(--dur-hero) var(--ease) both;
  animation-delay:calc(240ms + var(--i,0) * 80ms);
}
@keyframes slideUp{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}
.jobrow:last-child{ border-bottom:none; }

.jobrail{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 0 0;
}
.jobseq{
  width:28px; height:28px;
  border:1.5px solid var(--ink); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:700;
  background:var(--canvas); color:var(--ink);
  z-index:2;
}
.jobseq.solid{ background:var(--ink); color:var(--canvas); }
.jobseq.done{ background:var(--ok); color:#fff; border-color:var(--ok); }
.jobrail::after{
  content:""; flex:1; width:1.5px;
  background:var(--ink); margin-top:2px; opacity:0.35;
}
.jobrow:last-child .jobrail::after{ opacity:0; }

.jobbody{ padding:14px 20px 16px 4px; min-width:0; }
.jobmeta{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px;
}
.jobid{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--muted);
}
.joburg{
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em;
  display:inline-flex; align-items:center; gap:5px;
}
.joburg .dot{ width:6px; height:6px; border-radius:50%; }
.joburg.emergency{ color:var(--emergency); }
.joburg.emergency .dot{ background:var(--emergency); }
.joburg.high{ color:var(--high); }
.joburg.high .dot{ background:var(--high); }
.joburg.routine{ color:var(--routine); }
.joburg.routine .dot{ background:var(--routine); }

.jobtitle{
  font-size:16.5px; font-weight:500; margin-top:4px;
  letter-spacing:-0.015em; line-height:1.25;
}
.jobaddr{ font-size:12.5px; color:var(--body); margin-top:3px; }
.jobstats{
  display:flex; gap:14px; margin-top:10px;
  font-family:var(--mono); font-size:10.5px; color:var(--body);
}
.jobstats .eta{ margin-left:auto; color:var(--muted); }
.jobstatus{
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em;
  display:inline-block; margin-top:6px;
  padding:3px 7px;
}
.jobstatus.completed{ background:var(--ok); color:#fff; }
.jobstatus.in-progress{ background:var(--ink); color:var(--canvas); }

.endnote{
  padding:20px;
  font-family:var(--mono); font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.14em;
  text-align:center;
}

/* ============================================================
   Bottom nav
   ============================================================ */
.bottomnav{
  display:flex;
  border-top:1px solid var(--divider);
  background:var(--canvas);
  flex:0 0 auto;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.navbtn{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none;
  padding:10px 4px; cursor:pointer;
  color:var(--muted);
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em;
  position:relative;
  transition:background-color var(--dur-fast) var(--ease);
}
.navbtn .navic{ font-size:14px; }
.navbtn.active{ background:var(--ink); color:var(--canvas); }
.navbadge{
  position:absolute; top:4px; right:24%;
  background:var(--ink); color:var(--canvas);
  font-family:var(--mono); font-size:9px; font-weight:700;
  min-width:16px; height:16px;
  border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 4px;
}
.navbtn.active .navbadge{ background:var(--canvas); color:var(--ink); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  font-family:var(--mono);
  font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em;
  border:none; border-radius:0;
  padding:0 16px; height:44px;
  cursor:pointer; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform 120ms var(--ease), background-color var(--dur-fast) var(--ease);
}
.btn:active{ transform:scale(0.98); }
.btn-primary{
  background:var(--ink); color:var(--canvas);
}
.btn-primary:disabled{
  background:var(--muted-soft); color:var(--canvas); cursor:not-allowed;
}
.btn-secondary{
  background:var(--canvas); color:var(--ink);
  border:1px solid var(--ink);
}
.btn-row{ display:flex; gap:0; border-top:1px solid var(--ink); }
.btn-row .btn{ flex:1; border-right:1px solid var(--ink); }
.btn-row .btn:last-child{ border-right:none; }
.btn-sm{ height:36px; padding:0 12px; font-size:10.5px; }

/* ============================================================
   Detail / secondary views
   ============================================================ */
.backrow{
  padding:14px 12px 6px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--row-divider);
}
.backbtn{
  width:32px; height:32px;
  background:none; border:1px solid var(--ink);
  color:var(--ink); border-radius:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; cursor:pointer;
  transition:transform 120ms var(--ease);
}
.backbtn:active{ transform:scale(0.94); }

.detail-head{
  padding:16px 12px 18px;
  border-bottom:1px solid var(--divider);
}
.detail-head .eyebrow{ margin-bottom:6px; display:block; }

.section{
  padding:14px 12px;
  border-bottom:1px solid var(--row-divider);
}
.section:last-child{ border-bottom:none; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px;
}
.section-title{
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--ink);
}
.section-side{
  font-family:var(--mono); font-size:9.5px; color:var(--muted);
}

.kv{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid var(--row-divider);
  font-size:13.5px;
}
.kv:last-child{ border-bottom:none; }
.kv > span:first-child{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--muted);
}
.kv > span:last-child{
  font-weight:500; text-align:right;
  font-variant-numeric:tabular-nums;
}
.kv.pos > span:last-child{ color:var(--routine); }
.kv.neg > span:last-child{ color:var(--emergency); }

ul.instr{
  margin:0; padding-left:0; list-style:none;
  font-size:13.5px; color:var(--body); line-height:1.55;
}
ul.instr li{
  padding:8px 0 8px 22px; position:relative;
  border-bottom:1px solid var(--row-divider);
}
ul.instr li::before{
  content:"—"; position:absolute; left:0; top:8px;
  font-family:var(--mono); color:var(--muted);
}
ul.instr li:last-child{ border-bottom:none; }

.timerbox{
  background:var(--ink); color:var(--canvas);
  padding:22px 16px; text-align:center;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.timerbox .lbl{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--muted-soft);
}
.timerbox .clock{
  font-family:var(--mono); font-size:44px; font-weight:500;
  margin-top:8px; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.timerbox .est{
  font-family:var(--mono); font-size:10.5px;
  color:var(--muted-soft); margin-top:8px;
  text-transform:uppercase; letter-spacing:0.14em;
}
.timerbox .estbar{
  margin-top:14px; height:4px;
  background:rgba(245,240,230,0.14); overflow:hidden;
}
.timerbox .estbar i{
  display:block; height:100%;
  background:var(--canvas);
  transition:width 500ms var(--ease);
}
.timerbox .estbar i.over{ background:var(--high); }

.summary-hero{
  background:var(--ink); color:var(--canvas);
  padding:22px 16px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.summary-hero .lbl{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--muted-soft);
}
.summary-hero .val{
  font-family:var(--mono); font-size:40px; font-weight:500;
  letter-spacing:-0.02em; margin-top:6px; line-height:1;
}
.summary-hero .sub{
  font-family:var(--mono); font-size:10.5px; color:var(--muted-soft);
  margin-top:8px; text-transform:uppercase; letter-spacing:0.14em;
}
.summary-hero .diff{
  display:inline-block; margin-top:12px;
  padding:4px 10px;
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em;
  background:var(--canvas); color:var(--ink);
}
.summary-hero .diff.over{ background:var(--emergency); color:var(--canvas); }

/* Chips + inputs */
.chiprow{
  display:flex; gap:0; flex-wrap:wrap;
  margin-bottom:14px;
  border:1px solid var(--ink);
}
.chip{
  flex:1 0 33%;
  padding:10px 12px;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.12em;
  background:var(--canvas); color:var(--ink);
  cursor:pointer; border:none;
  border-right:1px solid var(--row-divider);
  border-bottom:1px solid var(--row-divider);
  transition:background-color var(--dur-fast) var(--ease);
}
.chip.active{ background:var(--ink); color:var(--canvas); }

textarea, input[type=text]{
  width:100%;
  font-family:var(--sans); font-size:14px;
  background:var(--canvas); color:var(--ink);
  border:1px solid var(--ink); border-radius:0;
  padding:12px 14px; resize:vertical;
  line-height:1.5;
}
textarea:focus, input:focus{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--ink);
}
label.fl{
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--muted);
  display:block; margin-bottom:8px;
}

.photogrid{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:6px;
}
.phototile{
  width:72px; height:72px; object-fit:cover;
  border:1px solid var(--ink);
}
.addphoto{
  width:72px; height:72px;
  background:transparent; border:1px dashed var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:22px; color:var(--ink);
  cursor:pointer;
}
.addphoto:active{ transform:scale(0.96); }

.checklist-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--row-divider);
  font-size:13.5px;
}
.checklist-item:last-child{ border-bottom:none; }
.cbx{
  width:22px; height:22px;
  border:1.5px solid var(--ink);
  background:var(--canvas);
  display:inline-flex; align-items:center; justify-content:center;
  color:transparent; cursor:pointer;
  font-family:var(--mono); font-weight:700; font-size:14px;
  transition:background-color var(--dur-fast) var(--ease);
}
.cbx.checked{ background:var(--ink); color:var(--canvas); }

/* AI card */
.aicard{
  background:var(--canvas-dim);
  border:1px solid var(--ink);
  padding:14px;
  margin-top:12px;
}
.aicard .aihead{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.aicard .lbl{
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--ink);
}
.aicard .conf{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  background:var(--ink); color:var(--canvas);
  padding:3px 7px;
}
.aicard .assess{
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em;
  display:inline-block; margin-bottom:8px;
  border:1px solid var(--ink); padding:3px 7px;
}
.aicard p{
  margin:0 0 6px; font-size:13px; line-height:1.55; color:var(--ink);
}
.aicard .step{
  display:flex; gap:8px; align-items:flex-start;
  font-size:12.5px; margin-top:8px; line-height:1.5;
  padding-top:8px; border-top:1px solid var(--row-divider);
}
.aicard .step b{
  font-family:var(--mono); font-weight:700;
  text-transform:uppercase; letter-spacing:0.12em;
  font-size:10.5px;
}
.aicard.pending{ background:var(--canvas); }
.aicard.pending p{ color:var(--muted); }

/* Issue block on detail */
.issue-block{
  border-bottom:1px solid var(--row-divider);
  padding:12px 0;
}
.issue-block:last-child{ border-bottom:none; }
.issue-block .badge-row{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em;
}
.issue-block .cat{
  color:var(--ink); border:1px solid var(--ink); padding:3px 7px;
}
.issue-block .synced{ color:var(--muted); align-self:center; }
.issue-block p.notes{
  font-size:13px; margin:8px 0 0; color:var(--body); line-height:1.55;
}

/* Signature pad */
.sigwrap{
  border:1px solid var(--ink); background:var(--canvas); margin-bottom:6px;
}
canvas#sigpad{ width:100%; height:140px; display:block; touch-action:none; }

/* Sync view */
.sync-hero{
  text-align:center; padding:28px 20px 20px;
  border-bottom:1px solid var(--divider);
}
.sync-hero .ring{
  width:96px; height:96px; border:1.5px solid var(--ink);
  border-radius:50%; margin:0 auto 16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:28px;
}
.sync-hero .title{
  font-size:32px; font-weight:400; letter-spacing:-0.02em; line-height:1;
}
.sync-hero .sub{
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  margin-top:8px; text-transform:uppercase; letter-spacing:0.14em;
}
.progresswrap{
  margin:16px 20px 0; height:4px; background:var(--row-divider);
  overflow:hidden;
}
.progressbar{
  height:100%; background:var(--ink); width:0%;
  transition:width 300ms var(--ease);
}

.sync-section{
  padding:16px 12px;
  border-bottom:1px solid var(--row-divider);
}
.sync-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.sync-section-head b{
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em;
}
.sync-section-head .count{
  font-family:var(--mono); font-size:10.5px;
  border:1px solid var(--ink); padding:2px 8px; font-weight:600;
}
.queueitem{
  display:flex; align-items:center; gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--row-divider);
}
.queueitem:last-child{ border-bottom:none; }
.queueitem .qicon{
  width:32px; height:32px; border:1px solid var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; flex:0 0 auto;
}
.queueitem .qtext{ min-width:0; flex:1; }
.queueitem .qtext b{
  font-size:13px; font-weight:500; display:block;
  letter-spacing:-0.005em;
}
.queueitem .qtext span{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-transform:uppercase; letter-spacing:0.1em;
}
.queueitem .qsize{
  font-family:var(--mono); font-size:10px; color:var(--muted); font-weight:600;
  flex:0 0 auto;
}
.sync-empty{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.14em;
  text-align:center; padding:16px 0;
}

/* History chart */
.chart-block{
  padding:14px 12px;
  border-bottom:1px solid var(--row-divider);
}
.chart-type-lbl{
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em;
  margin-bottom:8px;
}
.chartbar-row{
  display:flex; align-items:center; gap:10px;
  margin-bottom:6px;
}
.chartbar-label{
  flex:0 0 78px;
  font-family:var(--mono); font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.12em; font-weight:600;
}
.chartbar-track{
  flex:1; height:14px;
  border:1px solid var(--ink); position:relative; background:var(--canvas);
}
.chartbar-fill{
  height:100%; transform-origin:left; animation:barGrow 700ms var(--ease) both;
}
@keyframes barGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.chartbar-fill.est{
  background:repeating-linear-gradient(
    45deg, var(--ink), var(--ink) 2px,
    transparent 2px, transparent 5px
  );
}
.chartbar-fill.act{ background:var(--ink); }
.chartbar-val{
  flex:0 0 auto;
  font-family:var(--mono); font-size:10.5px; color:var(--ink);
  font-weight:600; font-variant-numeric:tabular-nums;
}
.chartlegend{
  display:flex; gap:14px; margin-top:12px;
  font-family:var(--mono); font-size:9.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.14em;
}
.chartlegend span{ display:inline-flex; align-items:center; gap:6px; }
.chartlegend i{
  width:12px; height:8px; display:inline-block; border:1px solid var(--ink);
}
.chartlegend i.est{
  background:repeating-linear-gradient(
    45deg, var(--ink), var(--ink) 2px,
    transparent 2px, transparent 5px
  );
}
.chartlegend i.act{ background:var(--ink); }

/* Site map on detail */
.sitemap{
  height:132px; background:var(--terrain);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  overflow:hidden; position:relative;
}
.sitemap svg{ position:absolute; inset:0; width:100%; height:100%; }

/* Full-screen map */
.fullmap-wrap{ position:absolute; inset:0; background:var(--terrain); }
.fullmap-svg{ position:absolute; inset:0; width:100%; height:100%; }
.fullmap-topbar{
  position:absolute; top:0; left:0; right:0; z-index:5; padding:14px 12px;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, var(--canvas) 0%, rgba(245,240,230,0) 100%);
}
.fullmap-title{
  font-family:var(--mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em;
}
.mapsheet{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  background:var(--canvas);
  border-top:1px solid var(--ink);
  max-height:56%; display:flex; flex-direction:column;
}
.mapsheet-handle{
  width:36px; height:3px; background:var(--ink);
  margin:8px auto 4px;
}
.mapsheet-head{
  padding:6px 12px 10px;
  display:flex; justify-content:space-between; align-items:center;
}
.mapsheet-head b{
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em;
}
.mapsheet-head span{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.12em;
}
.mapsheet-list{ overflow-y:auto; padding:0; }
.mapstop-row{
  display:grid; grid-template-columns:52px 1fr auto;
  align-items:center; gap:10px;
  padding:12px;
  border-bottom:1px solid var(--row-divider);
  cursor:pointer;
}
.mapstop-row.selected{ background:var(--canvas-dim); }
.mapstop-info b{
  display:block; font-size:14px; font-weight:500; letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mapstop-info span{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.12em;
}
.mapstop-dist{
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  text-align:right; font-weight:600;
}
.mapsheet-footer{
  padding:12px; border-top:1px solid var(--ink);
}

/* Toast */
.toast{
  position:absolute; left:12px; right:12px; bottom:80px;
  background:var(--ink); color:var(--canvas);
  padding:12px 14px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em;
  text-align:center; z-index:100;
  animation:slideUp 220ms var(--ease);
}

.caption-small{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  margin-top:10px; line-height:1.5;
  text-transform:uppercase; letter-spacing:0.12em;
}
.hint{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  text-align:center; margin-top:8px;
  text-transform:uppercase; letter-spacing:0.14em;
}
.empty{
  text-align:center; padding:60px 20px;
  font-family:var(--mono); font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.14em;
}
.empty .ic{ font-size:36px; margin-bottom:10px; display:block; }
.badge-pill{
  font-family:var(--mono); font-size:10px; font-weight:600;
  border:1px solid var(--ink); padding:3px 8px;
  display:inline-block; text-transform:uppercase; letter-spacing:0.12em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}