/* TPN mill cost calculator - heritage palette, shared with the ledger app.
   Phone-first: this is used standing at the counter, one thumb, in Telegram. */
:root {
  --bg:#1c1714; --panel:#26201c; --panel2:#2f2823; --line:#3d342d;
  --ink:#f3ece3; --mut:#b3a596; --terra:#c2643a; --ochre:#d7a24b;
  --green:#6fa15a; --red:#cf6b5a; --blue:#6f97c2; --cream:#efe6d8;
}
* { box-sizing:border-box; }
html, body { background:var(--bg); }
body { margin:0; font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
       color:var(--ink); -webkit-text-size-adjust:100%; }
h1,h2 { font-family:"Fraunces",Georgia,serif; font-weight:600; margin:0; }

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

header { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
header h1 { font-size:24px; color:var(--cream); }
.sub { color:var(--mut); font-size:12.5px; }

.note { color:var(--mut); font-size:12px; background:var(--panel); border:1px solid var(--line);
        border-left:3px solid var(--terra); padding:8px 12px; border-radius:6px; margin:0 0 16px; }

/* ---- cards --------------------------------------------------------------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px;
        padding:14px 14px 16px; margin-bottom:14px; }
.ch { font-size:13px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em;
      margin-bottom:14px; display:flex; align-items:center; gap:9px; font-family:inherit;
      font-weight:600; }
.ch .n { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
         border-radius:50%; background:var(--terra); color:#fff; font-size:11.5px;
         letter-spacing:0; flex:0 0 auto; }
.ch .opt { color:var(--mut); font-style:normal; text-transform:none; letter-spacing:0;
           font-weight:400; font-size:11.5px; opacity:.8; }

/* ---- fields -------------------------------------------------------------- */
.f { display:block; margin-bottom:0; }
.f .l { display:block; color:var(--mut); font-size:11.5px; margin-bottom:5px; }
.f .l em { font-style:normal; opacity:.75; }
.f input {
  width:100%; padding:11px 12px; background:var(--panel2); border:1px solid var(--line);
  border-radius:8px; color:var(--ink); font-size:16px;   /* 16px = no iOS zoom-on-focus */
  font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield;
}
.f input::-webkit-outer-spin-button, .f input::-webkit-inner-spin-button {
  -webkit-appearance:none; margin:0; }
.f input:focus { outline:none; border-color:var(--terra); }
.f input::placeholder { color:#6d6055; }

/* a value the app worked out for you, rather than one you typed */
.f input.derived { color:var(--ochre); border-style:dashed; border-color:#5a4a35;
                   background:#241f1a; }
.derived-chip { color:var(--ochre); border:1px dashed #5a4a35; background:#241f1a;
                border-radius:5px; padding:0 5px; }

.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.wide { margin-bottom:12px; }
.hint { color:var(--mut); font-size:11.5px; margin:9px 0 0; }

/* ---- cost lines ---------------------------------------------------------- */
.cost { display:flex; gap:10px; align-items:flex-end; margin-bottom:10px; }
.cost .grow { flex:1 1 auto; min-width:0; }
.sub-amt { color:var(--mut); font-size:11.5px; margin:-4px 0 12px; }
.sub-amt:empty { display:none; }   /* no phantom gap when a line has nothing to say */
.sub-amt b { color:var(--cream); font-weight:600; }
.sub-amt .pct { color:var(--ochre); }

/* segmented toggle */
.seg { display:flex; flex:0 0 auto; border:1px solid var(--line); border-radius:8px;
       overflow:hidden; background:var(--panel2); }
.seg button { background:none; border:none; color:var(--mut); font-size:12px; padding:11px 10px;
              cursor:pointer; white-space:nowrap; font-family:inherit; }
.seg button + button { border-left:1px solid var(--line); }
.seg button.on { background:var(--terra); color:#fff; }

/* "charged" basis picker beside each cost line. A select, not a row of buttons -
   five options do not fit across a phone. */
.f.basis { flex:0 0 auto; width:150px; }
.f.basis select {
  width:100%; padding:11px 30px 11px 11px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:15px;
  font-family:inherit; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),
                   linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.f.basis select:focus { outline:none; border-color:var(--terra); }

.tot-line { display:flex; justify-content:space-between; align-items:baseline;
            border-top:1px solid var(--line); padding-top:11px; margin-top:4px;
            color:var(--mut); font-size:12.5px; }
.tot-line b { color:var(--cream); font-size:17px; font-variant-numeric:tabular-nums; }

/* ---- grades -------------------------------------------------------------- */
.baglabel { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
/* The milled sack size sits in section 1, set off from the purchase figures
   above it - it describes what comes back, not what was bought. */
.baglabel.milled { margin:16px 0 8px; padding-top:16px; border-top:1px solid var(--line); }
.baglabel .l { color:var(--mut); font-size:11.5px; }
.baglabel input { width:86px; padding:10px 10px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:16px; }

.grade { border-left:3px solid var(--line); padding-left:11px; margin-bottom:14px; }
.grade.prime { border-left-color:var(--ochre); }
.grade.s1 { border-left-color:var(--terra); }
.grade.s2 { border-left-color:var(--blue); }
.grade.dust { border-left-color:#6d6055; margin-bottom:4px; }
.gh { font-size:12.5px; font-weight:600; color:var(--cream); margin-bottom:9px; }

.warn { font-size:12px; border-radius:6px; padding:9px 11px; margin-top:12px;
        border:1px solid; line-height:1.5; }
.warn.bad { color:#f0b9ae; border-color:var(--red); background:#33211e; }
.warn.soft { color:#e6cfa0; border-color:#7a6234; background:#2e2718; }

/* ---- the answer ---------------------------------------------------------- */
.card.answer { border-color:var(--terra); }
.headline { text-align:center; padding:6px 0 14px; }
.headline .hv { font-family:"Fraunces",Georgia,serif; font-size:40px; font-weight:600;
                color:var(--ochre); line-height:1.05; font-variant-numeric:tabular-nums; }
.headline .hl { color:var(--mut); font-size:12.5px; margin-top:6px; }

.bagcosts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.bagcost { background:var(--panel2); border:1px solid var(--line); border-radius:9px;
           padding:11px 12px; text-align:center; }
.bagcost .bl { color:var(--mut); font-size:11px; }
.bagcost .bv { font-size:20px; font-weight:600; color:var(--cream); margin-top:3px;
               font-variant-numeric:tabular-nums; }
.bagcost.hi { border-color:var(--ochre); }

.recovery { margin-bottom:16px; }
.recbar { display:flex; height:16px; border-radius:5px; overflow:hidden; background:var(--panel2);
          margin-bottom:9px; }
.recbar span { display:block; height:100%; }
.reckey { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--mut); }
.reckey i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px;
            vertical-align:baseline; font-style:normal; }
.reckey b { color:var(--cream); font-weight:600; font-variant-numeric:tabular-nums; }

table.calc { width:100%; border-collapse:collapse; font-size:12.5px; }
table.calc td { padding:6px 0; border-bottom:1px solid var(--line); color:var(--mut);
                vertical-align:baseline; }
table.calc td.v { text-align:right; color:var(--ink); white-space:nowrap;
                  font-variant-numeric:tabular-nums; }
table.calc tr.sum td { color:var(--cream); font-weight:600; border-bottom:1px solid var(--line); }
table.calc tr.grand td { color:var(--ochre); font-weight:600; font-size:14px; border-bottom:none;
                         padding-top:9px; }
table.calc tr.credit td.v { color:var(--green); }

/* ---- margin block -------------------------------------------------------- */
.margin { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px; }
.margin .mc { background:var(--panel2); border:1px solid var(--line); border-radius:9px;
              padding:10px 11px; text-align:center; }
.margin .mc .ml { color:var(--mut); font-size:10.5px; text-transform:uppercase;
                  letter-spacing:.04em; }
.margin .mc .mv { font-size:17px; font-weight:600; margin-top:3px;
                  font-variant-numeric:tabular-nums; }
.margin .mc.good .mv { color:var(--green); }
.margin .mc.bad .mv { color:var(--red); }

/* ---- actions ------------------------------------------------------------- */
.actions { display:flex; gap:10px; margin-top:4px; }
.btn { flex:1; background:var(--terra); border:1px solid var(--terra); color:#fff;
       padding:13px 14px; border-radius:9px; font-size:14.5px; font-weight:600;
       cursor:pointer; font-family:inherit; }
.btn.ghost { background:var(--panel); border-color:var(--line); color:var(--mut); }
.btn:active { opacity:.75; }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(14px);
         background:var(--panel2); border:1px solid var(--line); color:var(--cream);
         padding:10px 16px; border-radius:99px; font-size:13px; opacity:0;
         pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:20; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- gate ---------------------------------------------------------------- */
#gate { max-width:520px; margin:14vh auto 0; text-align:center; padding:0 24px; }
#gate .big { font-size:42px; margin-bottom:14px; }
#gate h2 { font-family:"Fraunces",Georgia,serif; color:var(--cream); font-size:22px;
           margin-bottom:8px; }
#gate p { color:var(--mut); font-size:14px; line-height:1.55; }
.spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--line);
           border-top-color:var(--terra); margin:0 auto 16px; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- narrow phones ------------------------------------------------------- */
@media(max-width:420px){
  .row3 { grid-template-columns:1fr 1fr; }
  .row3 .f:last-child { grid-column:1 / -1; }
  .headline .hv { font-size:34px; }
  .margin { grid-template-columns:1fr; }
  .cost { flex-wrap:wrap; }
  .cost .seg { width:100%; }
  .cost .seg button { flex:1; }
  .f.basis { width:100%; }
}