/* Shop Locator
   The person using this is on a cheap Android phone, outdoors, in a hurry.
   Pure white ground, heavy black text, one red for actions, turmeric for
   attention, green for done. No web fonts: every Android already has Noto
   Sans Devanagari, and a font download on a weak connection is a dead app. */

:root{
  --ink:#14110f;
  --ink-2:#5c534c;
  --ink-3:#938a82;
  --rule:#ded7cf;
  --red:#b01b2e;
  --red-dk:#8c1424;
  --turmeric:#f0a500;
  --green:#12704f;
  --wash:#f7f4f0;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Noto Sans","Noto Sans Devanagari",Arial,sans-serif;
  font-size:17px;line-height:1.45;
  -webkit-tap-highlight-color:rgba(176,27,46,.12);
}
:focus-visible{outline:3px solid var(--turmeric);outline-offset:2px}

/* ---- header ---- */
.bar{background:var(--red);color:#fff;padding:12px 0;position:sticky;top:0;z-index:30}
.bar-in{max-width:640px;margin:0 auto;padding:0 14px;display:flex;
        align-items:center;justify-content:space-between;gap:12px}
.bar-txt{min-width:0}
.bar-title{font-size:19px;font-weight:700;letter-spacing:-.01em;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-sub{font-size:13px;opacity:.88;margin-top:1px}
.langbtn{color:#fff;text-decoration:none;font-size:14px;font-weight:700;
         border:2px solid rgba(255,255,255,.6);border-radius:20px;
         padding:5px 13px;white-space:nowrap}

.wrap{max-width:640px;margin:0 auto;padding:16px 14px 92px}

h2{font-size:19px;margin:24px 0 10px;font-weight:700}
h2:first-child{margin-top:2px}
p{margin:0 0 13px;max-width:62ch}
.muted{color:var(--ink-2)}
.small{font-size:14px}

.note{padding:12px 14px;border-radius:8px;margin-bottom:14px;font-size:15px;
      border-left:5px solid var(--green);background:#eef6f2}
.note-err{border-left-color:var(--red);background:#fbeef0}
.note-warn{border-left-color:var(--turmeric);background:#fdf4e3}

/* ---- buttons ---- */
.btn{display:block;width:100%;text-align:center;padding:14px 14px;border:0;
     border-radius:9px;background:var(--red);color:#fff;font-size:17px;
     font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit;
     line-height:1.25}
.btn:active{background:var(--red-dk)}
.btn-go{background:var(--green)}
.btn-line{background:#fff;color:var(--ink);border:2px solid var(--rule)}
.btn-sm{padding:11px 12px;font-size:15px}
.btn-row{display:flex;gap:9px;margin:11px 0}
.btn-row .btn{flex:1}
.btn small{display:block;font-size:12px;font-weight:600;opacity:.85;margin-top:1px}

/* ---- forms ---- */
label{display:block;font-size:14px;font-weight:600;margin:15px 0 5px}
label .hint{font-weight:400;color:var(--ink-2)}
input[type=text],input[type=tel],input[type=password],input[type=date],
input[type=number],input[type=file],select,textarea{
  width:100%;padding:13px 12px;font-size:17px;font-family:inherit;color:var(--ink);
  border:2px solid var(--rule);border-radius:8px;background:#fff}
textarea{min-height:72px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--turmeric);
  outline-offset:1px;border-color:var(--ink)}
.two{display:flex;gap:10px}
.two>*{flex:1}
.check{font-weight:400;display:flex;align-items:center;gap:10px;margin:10px 0}
.check input{width:auto;transform:scale(1.3)}

/* ---- tabs ---- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.tabs a,.tabs button{white-space:nowrap;font-size:14px;padding:9px 14px;
  border-radius:20px;border:2px solid var(--rule);text-decoration:none;
  color:var(--ink);background:#fff;font-family:inherit;font-weight:600;cursor:pointer}
.tabs .on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- THE ROUTE LIST ----
   Compact rows so eight to ten fit on screen and stop 27 can be found by
   scanning. The photo comes out only when a row is opened. */
.stops{border-top:1px solid var(--rule)}
.srow{border-bottom:1px solid var(--rule)}
.shead{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;
       width:100%;background:none;border:0;text-align:left;font-family:inherit;
       color:inherit;cursor:pointer}
.snum{flex:0 0 30px;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;
      color:var(--ink-3);padding-top:6px;text-align:right}
.sthumb{flex:0 0 46px;width:46px;height:46px;border-radius:7px;object-fit:cover;
        background:var(--wash);border:1px solid var(--rule)}
.sthumb-none{display:flex;align-items:center;justify-content:center;
             color:var(--ink-3);font-size:19px}
.sbody{flex:1;min-width:0}
.sname{font-size:17px;font-weight:700;line-height:1.25;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sland{font-size:13px;color:var(--ink-2);
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.samt{flex:0 0 auto;text-align:right;padding-top:3px;font-size:15px;
      font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* today's deliveries stand out; the rest stay readable but quiet */
.srow.quiet .sname{font-weight:600;color:var(--ink-2)}
.srow.quiet .snum,.srow.quiet .sland{color:var(--ink-3)}
.srow.quiet .sthumb{opacity:.6}
.srow.done{border-left:5px solid var(--green);padding-left:6px}
.srow.done .samt{color:var(--green);font-size:14px}
.srow.open{background:var(--wash)}

.sdetail{padding:2px 2px 16px}
.sphoto{display:block;width:100%;max-height:230px;object-fit:cover;
        border-radius:9px;background:var(--wash);margin-bottom:12px}
.sland-full{font-size:16px;border-left:4px solid var(--turmeric);
            padding:2px 0 2px 11px;margin:10px 0}
.meta{font-size:14px;color:var(--ink-2);margin:5px 0}
.meta b{color:var(--ink);font-weight:600}
.doneline{color:var(--green);font-weight:700;font-size:15px;margin-top:8px}

/* ---- payment / reason panels ---- */
.panel{border:2px solid var(--rule);border-radius:10px;padding:12px;margin-top:10px}
.paygrid{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center}
.paygrid label{margin:0;font-weight:600;font-size:16px;display:flex;
               align-items:center;gap:9px}
.paygrid input[type=checkbox]{width:auto;transform:scale(1.3)}
.paygrid input[type=number]{width:120px;padding:9px 10px;font-size:16px;
                            text-align:right}
.paygrid .amtcell{justify-self:end}
.tally{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--wash);
       font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.tally.ok{background:#eef6f2;color:var(--green)}
.tally.bad{background:#fdf4e3;color:#8a5d00}
.reasons label{margin:0 0 2px;font-weight:400;font-size:16px;
               display:flex;align-items:center;gap:10px;padding:9px 4px;
               border-bottom:1px solid var(--rule)}
.reasons label:last-of-type{border-bottom:0}
.reasons input[type=radio]{width:auto;transform:scale(1.3)}

/* ---- map ---- */
.map{height:340px;border:2px solid var(--rule);border-radius:10px}
.map-sm{height:250px;margin-top:6px}
.leaflet-container{border-radius:8px;font:inherit}

/* ---- generic rows, tables ---- */
.row{display:flex;justify-content:space-between;gap:12px;padding:13px 2px;
     border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:12px;
      white-space:nowrap;align-self:flex-start}
.p-live{background:#eef6f2;color:var(--green)}
.p-wait{background:#fdf4e3;color:#8a5d00}
.p-back{background:#fbeef0;color:var(--red)}
.p-none{background:var(--wash);color:var(--ink-2)}

.menu{display:grid;gap:11px}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:13px;
        padding:16px 15px;border:2px solid var(--rule);border-radius:10px;
        text-decoration:none;color:var(--ink)}
.menu b{display:block}
.menu span{font-size:13px;color:var(--ink-2)}
.count{background:var(--turmeric);color:#14110f;font-weight:700;font-size:15px;
       border-radius:16px;padding:3px 12px;white-space:nowrap}
.count-0{background:var(--wash);color:var(--ink-2)}

table.data{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:18px}
table.data th{text-align:left;border-bottom:2px solid var(--ink);padding:8px 6px;font-size:13px}
table.data td{border-bottom:1px solid var(--rule);padding:8px 6px;vertical-align:top}
.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.diff{background:#fdf4e3;padding:1px 5px;border-radius:4px}

/* ---- footer nav ---- */
.footnav{position:fixed;left:0;right:0;bottom:0;background:#fff;
         border-top:1px solid var(--rule);display:flex;z-index:25;
         padding-bottom:env(safe-area-inset-bottom)}
.footnav a{flex:1;text-align:center;padding:14px 6px;text-decoration:none;
           color:var(--ink);font-size:14px;font-weight:600}
.footnav a:active{background:var(--wash)}

.gps{padding:12px 13px;border-radius:8px;background:var(--wash);font-size:15px;
     margin-top:8px}
.gps.good{background:#eef6f2;color:var(--green);font-weight:600}
.gps.bad{background:#fbeef0;color:var(--red);font-weight:600}

@media print{
  .bar,.footnav,.btn,.btn-row,form,.tabs{display:none!important}
  body{font-size:12px}
  .wrap{max-width:none;padding:0}
  .srow{page-break-inside:avoid}
  .sdetail{display:block!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Beat name where the day's list crosses from the first beat into the second */
.beatline{font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--ink-2);
          background:var(--wash);padding:7px 10px;margin:0 -2px;
          border-bottom:1px solid var(--rule)}
.stops .beatline:first-child{margin-top:0}