/* Amorflex Works — phone first. Same paper-and-ink identity as the Day Board,
   so the two screens read as one desk. Everything a thumb has to hit is at
   least 44px, and nothing important sits under the home bar. */

:root{
  --paper:#F1F2EE; --card:#FFFFFF; --card-2:#FAFAF7;
  --ink:#17191B; --ink-soft:#5C6168; --ink-faint:#878C91;
  --rule:#DDDED7; --rule-soft:#E9EAE4;
  --brass:#8A6415; --brass-soft:#F3EAD6;
  --hot:#B3261E; --hot-soft:#FBEBE9;
  --done:#1C6B4C; --done-soft:#E7F3ED;
  --wa:#128C4A; --wa-soft:#E6F4EC;
  --shadow:0 1px 2px rgba(23,25,27,.06), 0 6px 18px -12px rgba(23,25,27,.18);
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --disp:"Archivo",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#13151A; --card:#1B1E24; --card-2:#20242B;
    --ink:#E9EAE5; --ink-soft:#A0A6AD; --ink-faint:#7D848B;
    --rule:#2C313A; --rule-soft:#242932;
    --brass:#D9A43C; --brass-soft:#30281A;
    --hot:#F28F86; --hot-soft:#35211F;
    --done:#6FCB9F; --done-soft:#192C24;
    --wa:#4FC184; --wa-soft:#162B21;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper); color:var(--ink); font-family:var(--sans);
     font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
     -webkit-text-size-adjust:100%; overscroll-behavior-y:none}
[hidden]{display:none!important}
button{font:inherit; color:inherit}
svg{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

.eyebrow{font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.14em;
         text-transform:uppercase; color:var(--brass)}

/* ---------------- sign in ---------------- */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px 18px}
.gatebox{width:100%; max-width:380px; text-align:center}
.gatebox h1{font-family:var(--disp); font-weight:700; font-size:38px; letter-spacing:-.02em;
            margin:2px 0 6px}
.lede{color:var(--ink-soft); font-size:14px; margin:0 0 22px}
.whorow{display:grid; gap:10px}
.who{display:flex; align-items:center; justify-content:space-between; gap:12px;
     background:var(--card); border:1px solid var(--rule); border-radius:4px;
     padding:16px 18px; cursor:pointer; box-shadow:var(--shadow); text-align:left;
     font-family:var(--disp); font-weight:600; font-size:17px; min-height:56px}
.who:active{background:var(--brass-soft); border-color:var(--brass)}
.who small{font-family:var(--sans); font-weight:400; font-size:12px; color:var(--ink-faint)}

.pinwrap{margin-top:4px}
.pindots{display:flex; gap:14px; justify-content:center; margin:18px 0 8px}
.pindots i{width:13px; height:13px; border-radius:99px; border:1.5px solid var(--rule);
           background:transparent; transition:background .12s, border-color .12s}
.pindots i.on{background:var(--brass); border-color:var(--brass)}
.pinmsg{min-height:20px; font-size:13px; color:var(--hot); margin-bottom:10px}
.pad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.key{background:var(--card); border:1px solid var(--rule); border-radius:4px;
     font-family:var(--mono); font-weight:600; font-size:24px; padding:16px 0;
     cursor:pointer; box-shadow:var(--shadow); min-height:60px}
.key:active{background:var(--brass); border-color:var(--brass); color:#fff}
.key.flat{background:transparent; box-shadow:none; border-color:transparent;
          font-family:var(--disp); font-size:13px; letter-spacing:.06em;
          text-transform:uppercase; color:var(--ink-soft)}
.ghostbtn{display:block; width:100%; margin-top:16px; background:transparent; border:0;
          color:var(--ink-faint); font-size:13px; text-decoration:underline; cursor:pointer;
          padding:10px}

/* ---------------- chrome ---------------- */
.top{position:sticky; top:0; z-index:5; background:var(--paper);
     border-bottom:1px solid var(--rule); padding:14px 16px 10px}
.topin{display:flex; align-items:flex-start; gap:12px}
.top h1{font-family:var(--disp); font-weight:700; font-size:23px; letter-spacing:-.01em;
        margin:1px 0 0}
.outbtn{margin-left:auto; background:transparent; border:1px solid var(--rule);
        border-radius:3px; padding:7px 11px; font-family:var(--disp); font-weight:600;
        font-size:11px; letter-spacing:.07em; text-transform:uppercase;
        color:var(--ink-soft); cursor:pointer}
.tally{display:flex; align-items:center; gap:10px; margin-top:9px;
       font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-soft)}
.bar{flex:1; height:4px; background:var(--rule-soft); border-radius:99px; overflow:hidden;
     max-width:190px}
.bar i{display:block; height:100%; width:0; background:var(--done); transition:width .25s}
.stale{margin-top:8px; font-family:var(--disp); font-weight:600; font-size:10.5px;
       letter-spacing:.1em; text-transform:uppercase; color:var(--hot);
       background:var(--hot-soft); border-radius:2px; padding:3px 7px; display:inline-block}

.view{padding:14px 14px calc(86px + var(--safe-b)); max-width:760px; margin:0 auto;
      outline:none}

.tabs{position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex;
      background:var(--card); border-top:1px solid var(--rule);
      padding-bottom:var(--safe-b)}
.tab{flex:1; background:transparent; border:0; padding:9px 4px 8px; cursor:pointer;
     display:flex; flex-direction:column; align-items:center; gap:3px;
     color:var(--ink-faint); font-family:var(--disp); font-weight:600; font-size:10.5px;
     letter-spacing:.07em; text-transform:uppercase; min-height:56px}
.tab svg{width:21px; height:21px}
.tab.on{color:var(--brass)}

/* ---------------- cards ---------------- */
.groupname{font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.12em;
           text-transform:uppercase; color:var(--ink-soft); margin:16px 2px 8px;
           display:flex; align-items:center; gap:9px}
.groupname:first-child{margin-top:2px}
.groupname i{flex:1; height:1px; background:var(--rule); font-style:normal}

.card{background:var(--card); border:1px solid var(--rule); border-radius:4px;
      box-shadow:var(--shadow); margin-bottom:11px; overflow:hidden;
      border-left:3px solid transparent}
.card.hot{border-left-color:var(--hot)}
.card.carry{border-left-color:var(--brass)}
.card.answered{border-left-color:var(--done); background:var(--card-2)}
.cbody{padding:13px 14px 12px}
.ctop{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:5px}
.code{font-family:var(--mono); font-weight:600; font-size:11.5px; color:var(--ink-faint)}
.flag{font-family:var(--disp); font-weight:600; font-size:9.5px; letter-spacing:.11em;
      text-transform:uppercase; border-radius:2px; padding:2px 6px;
      color:var(--hot); background:var(--hot-soft)}
.flag.carryf{color:var(--brass); background:var(--brass-soft)}
.flag.done{color:var(--done); background:var(--done-soft)}
.what{font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:-.005em;
      margin:0 0 5px; line-height:1.25}
.work{font-size:14px; color:var(--ink-soft); margin:0}
.who2{margin-top:9px; font-size:13px; color:var(--ink-soft); display:flex;
      flex-wrap:wrap; gap:3px 8px; align-items:baseline}
.who2 b{color:var(--ink); font-weight:600}
.tel{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums;
     white-space:nowrap}
.nonum{color:var(--hot); font-weight:500}

.said{margin-top:10px; border-left:3px solid var(--done); background:var(--done-soft);
      border-radius:0 3px 3px 0; padding:8px 11px}
.said.cold{border-left-color:var(--hot); background:var(--hot-soft)}
.said.pend{border-left-color:var(--brass); background:var(--brass-soft)}
.said .lede2{font-family:var(--disp); font-weight:600; font-size:9.5px; letter-spacing:.11em;
             text-transform:uppercase; color:var(--ink-soft); display:block}
.said .body{display:block; font-size:14px; margin-top:2px}
.said .quote{display:block; font-size:13px; color:var(--ink-soft); font-style:italic; margin-top:3px}
.said .nxt{display:block; font-size:13px; margin-top:6px; padding-top:6px;
           border-top:1px dashed var(--rule)}
.said .nxt b{font-family:var(--disp); font-weight:600; font-size:9.5px; letter-spacing:.11em;
             text-transform:uppercase; color:var(--brass); margin-right:6px}

.acts{display:flex; gap:8px; padding:0 14px 13px; flex-wrap:wrap}
.btn{flex:1 1 0; min-width:104px; min-height:46px; display:inline-flex; align-items:center;
     justify-content:center; gap:7px; font-family:var(--disp); font-weight:600;
     font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; border-radius:3px;
     padding:8px 10px; cursor:pointer; text-decoration:none; border:1px solid transparent;
     text-align:center; line-height:1.2}
.btn svg{width:15px; height:15px; flex:none; fill:currentColor; stroke:none}
.btn.wa{background:var(--wa); border-color:var(--wa); color:#fff}
.btn.grp{background:var(--wa-soft); border-color:var(--wa); color:var(--wa)}
.btn.call{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.btn.ask{background:var(--brass-soft); border-color:var(--brass); color:var(--brass);
         flex-basis:100%}
.btn.ask.got{background:var(--done-soft); border-color:var(--done); color:var(--done)}
.btn.ask.open{background:var(--brass); border-color:var(--brass); color:#fff}
.btn.plain{background:transparent; border-color:var(--rule); color:var(--ink-soft)}
.nobtn{flex:1 1 0; min-width:104px; min-height:46px; display:flex; align-items:center;
       justify-content:center; font-family:var(--disp); font-weight:600; font-size:11.5px;
       letter-spacing:.06em; text-transform:uppercase; color:var(--hot);
       background:var(--hot-soft); border-radius:3px; padding:8px}

/* ---------------- the answer panel ---------------- */
.panel{border-top:1px solid var(--rule); background:var(--card-2); padding:14px}
.kindtag{display:inline-block; font-family:var(--disp); font-weight:600; font-size:9.5px;
         letter-spacing:.11em; text-transform:uppercase; color:var(--brass);
         background:var(--brass-soft); border-radius:2px; padding:2px 7px; margin-bottom:9px}
.panq{font-family:var(--disp); font-weight:700; font-size:14px; margin:0 0 9px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:13.5px; font-weight:500; cursor:pointer; background:var(--card);
      color:var(--ink); border:1px solid var(--rule); border-radius:99px;
      padding:9px 14px; text-align:left; line-height:1.25; min-height:40px}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip.sm{font-size:12.5px; padding:7px 12px; min-height:36px}
.step{margin-top:13px; padding-top:12px; border-top:1px solid var(--rule)}
.steplab{font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.1em;
         text-transform:uppercase; color:var(--brass); display:block; margin-bottom:7px}
input[type=date], input[type=text], input[type=tel], input[type=number], textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:3px; padding:11px 12px; width:100%;
  margin-top:8px}
input[type=date]{font-family:var(--mono); font-size:15px}
textarea{min-height:64px; resize:vertical}
input:focus-visible, textarea:focus-visible, .chip:focus-visible, .btn:focus-visible,
.key:focus-visible, .who:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.panfoot{display:flex; gap:9px; margin-top:15px; padding-top:13px;
         border-top:1px solid var(--rule)}
.keep{flex:2; min-height:48px; font-family:var(--disp); font-weight:600; font-size:13px;
      letter-spacing:.05em; text-transform:uppercase; cursor:pointer; border-radius:3px;
      background:var(--done); border:1px solid var(--done); color:#fff}
.keep[disabled]{opacity:.4}
.quiet{flex:1; min-height:48px; font-family:var(--disp); font-weight:600; font-size:12px;
       letter-spacing:.05em; text-transform:uppercase; cursor:pointer; border-radius:3px;
       background:transparent; border:1px solid var(--rule); color:var(--ink-soft)}
.peek{font-size:13px; color:var(--ink-soft); margin-top:11px}
.peek b{color:var(--brass); font-weight:600}

/* ---------------- आज का ब्रीफ ----------------
   It sits above every card on the Today screen because in the morning
   it is the only thing on that screen a thumb is looking for. Brass
   frame rather than a white card, so it does not read as one more row
   of work; the play button is 60px because it is pressed while walking. */
.brief{background:var(--brass-soft); border:1px solid var(--brass);
       border-radius:4px; padding:13px 14px 12px; margin-bottom:14px}
.bhead{display:flex; gap:12px; align-items:flex-start}
.btitle{font-family:var(--disp); font-weight:700; font-size:18px; letter-spacing:-.01em;
        margin:1px 0 2px}
.bmeta{margin:0; font-family:var(--mono); font-size:11.5px; font-weight:600;
       color:var(--ink-soft)}
.bwarn{margin:10px 0 0; font-size:12.5px; line-height:1.4; color:var(--hot);
       background:var(--hot-soft); border-left:3px solid var(--hot);
       border-radius:0 3px 3px 0; padding:7px 10px}
/* a nudge, not a fault: the voice works, there is simply a better one free */
.bwarn.note{color:var(--ink); background:var(--card); border-left-color:var(--brass)}

.btn.bplay{width:100%; flex:none; min-height:60px; margin-top:11px; font-size:14px;
           background:var(--brass); border-color:var(--brass); color:#fff}
.btn.bplay svg{width:19px; height:19px}
.btn.bplay.going{background:var(--ink); border-color:var(--ink); color:var(--paper)}

.brow{display:flex; gap:8px; margin-top:8px}
.bbtn{flex:1 1 0; min-height:46px; display:inline-flex; align-items:center;
      justify-content:center; gap:6px; background:var(--card); color:var(--ink);
      border:1px solid var(--rule); border-radius:3px; cursor:pointer;
      font-family:var(--disp); font-weight:600; font-size:11.5px;
      letter-spacing:.06em}
.bbtn svg{width:16px; height:16px; fill:currentColor; stroke:none; flex:none}
.bbtn:disabled{opacity:.4; cursor:default}
.brates{display:flex; gap:7px; margin-top:9px; flex-wrap:wrap}
.bvoices{display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; align-items:center}
.vlab{flex:1 1 100%; font-family:var(--disp); font-weight:600; font-size:9.5px;
      letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft)}

/* the track has to read against brass paper, not against white */
.bbar{display:block; height:5px; background:rgba(138,100,21,.22); border-radius:99px;
      overflow:hidden; margin-top:11px}
.bbar i{display:block; height:100%; width:0; background:var(--brass); transition:width .3s}
.bnow{margin:8px 0 0; font-size:14.5px; line-height:1.45; color:var(--ink-soft);
      min-height:21px}
.bnow.live{color:var(--ink); font-weight:500}

.bfoot{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; padding-top:9px;
       border-top:1px dashed var(--brass)}
.blink{background:transparent; border:0; padding:4px 0; cursor:pointer;
       font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.07em;
       text-transform:uppercase; color:var(--brass); text-decoration:underline}

.btext{margin-top:11px; max-height:47vh; overflow-y:auto; background:var(--card);
       border:1px solid var(--rule); border-radius:3px; padding:11px 12px}
.bsec{font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.12em;
      text-transform:uppercase; color:var(--brass); margin:13px 0 6px}
.bsec:first-child{margin-top:0}
.bline{margin:0 0 7px; font-size:14px; line-height:1.5; color:var(--ink-soft);
       cursor:pointer; border-left:3px solid transparent; padding-left:8px}
.bline.on{color:var(--ink); font-weight:500; border-left-color:var(--brass);
          background:var(--brass-soft); border-radius:0 3px 3px 0}

/* ---------------- jobs ---------------- */
.tools{display:grid; gap:9px; margin-bottom:12px}
.search{position:relative}
.search input{margin-top:0; padding-left:38px}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%);
            width:17px; height:17px; color:var(--ink-faint)}
.filters{display:flex; gap:7px; overflow-x:auto; padding-bottom:3px;
         -webkit-overflow-scrolling:touch; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters .chip{white-space:nowrap; flex:none}
.stage{font-family:var(--disp); font-weight:600; font-size:9.5px; letter-spacing:.1em;
       text-transform:uppercase; border-radius:2px; padding:2px 7px;
       color:var(--ink-soft); background:var(--rule-soft)}
/* red is kept for what is actually late. A job simply sitting with the vendor
   is normal, so it reads neutral. */
.stage.s-artwork{color:var(--brass); background:var(--brass-soft)}
.stage.s-partin{color:var(--brass); background:var(--brass-soft)}
.stage.s-in{color:var(--done); background:var(--done-soft)}
.stage.s-dispatched{color:var(--done); background:var(--done-soft)}
.facts{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px;
       font-family:var(--mono); font-size:12px; color:var(--ink-soft)}
.facts b{font-family:var(--sans); font-weight:600; color:var(--ink)}
.late{color:var(--hot)}

/* ---------------- report ---------------- */
.report{background:var(--card); border:1px solid var(--rule); border-radius:4px;
        padding:14px; box-shadow:var(--shadow)}
.report pre{margin:0; white-space:pre-wrap; word-break:break-word; font-family:var(--mono);
            font-size:12.5px; line-height:1.55; color:var(--ink)}

.empty{text-align:center; padding:44px 20px; color:var(--ink-faint)}
.empty b{display:block; font-family:var(--disp); font-weight:700; font-size:18px;
         color:var(--ink-soft); margin-bottom:6px}

.toast{position:fixed; left:50%; bottom:calc(74px + var(--safe-b));
       transform:translateX(-50%) translateY(8px); background:var(--ink); color:var(--paper);
       font-size:13.5px; padding:11px 17px; border-radius:3px; box-shadow:var(--shadow);
       opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
       max-width:min(92vw,44ch); z-index:20; text-align:center}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
@media (min-width:620px){
  .view{padding-left:20px; padding-right:20px}
  .what{font-size:18px}
}

/* ---------------- expense slip ---------------- */
.dayline{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
         padding-bottom:12px; border-bottom:1px solid var(--rule-soft)}
.daybig{font-family:var(--mono); font-size:14px; font-weight:600}
.linky{background:none; border:0; padding:6px 0; font-family:var(--sans); font-size:13px;
       font-weight:600; color:var(--brass); cursor:pointer; text-decoration:underline;
       text-underline-offset:3px}
.linky.del{color:var(--hot)}

.amountbox{padding:16px 0 4px; border-bottom:1px solid var(--rule-soft)}
.amtrow{display:flex; align-items:center; gap:8px; margin-top:4px}
.rupee{font-family:var(--mono); font-size:30px; color:var(--ink-faint); line-height:1}
input.bigamt{flex:1; min-width:0; font-family:var(--mono); font-size:38px; font-weight:500;
        line-height:1.05; letter-spacing:-.02em; border:0; background:none; color:var(--ink);
        padding:0; margin:0; width:100%}
input.bigamt:focus{outline:none}
input.bigamt::placeholder{color:var(--rule)}
.gstline{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:13px;
         color:var(--ink-soft); flex-wrap:wrap}
.gstline input{width:96px; margin-top:0; font-family:var(--mono); font-size:15px; padding:8px 10px}
.gstline .tot{margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums;
              font-weight:600; color:var(--ink); font-size:14px}

.shotbtn{display:flex; width:100%; min-height:52px; align-items:center; justify-content:center;
         gap:9px; font-family:var(--disp); font-weight:600; font-size:14px; padding:14px;
         border:1px dashed var(--rule); border-radius:4px; background:var(--card);
         color:var(--ink-soft); cursor:pointer; margin-top:8px}
.shotrow{display:flex; gap:8px}
.shotrow .half{flex:1 1 0; min-width:0; padding:14px 6px; font-size:13px; text-align:center}
.shotrow.busy .half{opacity:.6; pointer-events:none}
.shothint{font-size:11px; color:var(--ink-faint); margin-top:6px}
.shotwrap{display:flex; gap:12px; align-items:flex-start; margin-top:8px}
.shotwrap img{width:92px; height:92px; object-fit:cover; border-radius:4px;
              border:1px solid var(--rule)}
.shotmeta{font-size:12px; color:var(--ink-faint); display:flex; flex-direction:column; gap:2px}

.lightbox{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.92);
          display:flex; align-items:center; justify-content:center; padding:16px; cursor:zoom-out}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain; border-radius:3px}