/* ============================================================
   JEWELLERY COUNTER: red velvet tray
   Black is the velvet a jeweller lays pieces on (sidebar, rate strip, bill total),
   white is the bill paper, and ruby red marks the two things that need a hand on them:
   the next action and money owed. Each piece on a bill is a price tag, hole and red
   thread included, carrying the weight line Gross + Wastage - Stone = Net.
   Bodoni is kept for headings and the figures a customer reads aloud: weights and totals.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400..900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #F4F1F1; --card: #FFFFFF; --wash: #F7F4F4; --line: #E6E0E1; --line2: #CDC5C6;
  --ink: #000000; --ink2: #2B2526; --muted: #6E6466;
  --ruby: #C8102E; --ruby-dk: #9E0B23; --ruby-bg: #FCECEE; --ruby-lt: #FF6B7D; /* ruby-lt: red text on black */
  --on-black: #FFFFFF; --on-black2: #B9B1B2; --black-line: rgba(255,255,255,.14);
  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 4px; --r-ctl: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: rgba(200,16,46,.5); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ruby); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ruby); outline-offset: 2px; }
.mono, .num { font-variant-numeric: tabular-nums; }
body.jw { padding-left: 96px; min-height: 100vh; }
/* the page behind the cards: a faint dot grid, and fine gold line drawings (printed into every page by
   partials/jnav.php) of a necklace, the gold thread from the shop photo, a jhumka, bangles and a ring, fixed at
   the edges of the screen so they show in the margins and gaps; the header band at the top stays clear and the
   cards stay plain white. Every 5 seconds the drawings trace themselves in again, chain first and then beads and
   pendant. All the timing starts from --jphase, set from the clock, so another page carries straight on. */
body.jw { background: var(--bg) radial-gradient(circle, rgba(169,132,79,.20) 1px, transparent 1.6px) 0 0 / 24px 24px fixed; }
body.jw.inv-pg { background: #E8E3E4; }
.jbg > span { position: fixed; z-index: -1; display: block; pointer-events: none; }
.jbg svg { display: block; width: 100%; height: auto; }
.jbg__necklace { width: 440px; left: -150px; top: calc((100vh - 330px) * .40); }
.jbg__thread   { width: 520px; right: -230px; top: calc((100vh - 173px) * .36); }
.jbg__jhumka   { width: 56px; right: 9px; top: calc((100vh - 78px) * .21); }
.jbg__bangles  { width: 250px; right: 6px; bottom: 8px; }
.jbg__ring     { width: 120px; left: 128px; bottom: 22px; }
.jbg__tikka    { display: none !important; }
body.inv-pg .jbg { display: none; }
.jd { stroke-dasharray: 1 1; animation: jdraw 5s linear infinite both; animation-delay: calc(var(--jphase, 0ms) + var(--d, 0s)); }
@keyframes jdraw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  30% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  97% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
/* a maang tikka hangs from the top edge in the gap between the sidebar and the content, with the ring standing
   right below it at the bottom of the same gap (the gap's centre: 96px sidebar, then a quarter of what is left
   beside the 1280px column, plus half the 40px page padding). Only when the gap is wide enough; below that the
   ring keeps its corner and there is no tikka. Both redraw with the rest. */
@media screen and (min-width: 1440px) {
  .jbg__tikka { display: block !important; --tw: 56px; top: 0; width: var(--tw); left: calc(96px + (100vw - 96px - var(--wrap)) / 4 + 20px - var(--tw) / 2); }
  .jbg__ring { --rw: 72px; width: var(--rw); left: calc(96px + (100vw - 96px - var(--wrap)) / 4 + 20px - var(--rw) / 2); }
}
@media screen and (min-width: 1700px) {
  .jbg__tikka { --tw: 90px; }
  .jbg__ring { --rw: 120px; }
}
@media (prefers-reduced-motion: reduce) { .jd { animation: none !important; stroke-dasharray: none; } }

/* going to another page: Chrome and Edge keep showing this page until the next one is fully drawn, then swap it in a
   single frame, with no blank repaint and no cross-fade. A cross-fade washed the whole screen, background included,
   for a moment; with an instant swap the background (timed by the clock, so the same on both pages) stays still.
   Other browsers simply load the page as before. */
@view-transition { navigation: auto; }
.sb { view-transition-name: jw-sidebar; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
::view-transition-old(*) { display: none; }
.wt { color: var(--ruby); font-weight: 700; }
.muted { color: var(--muted); font-size: 13.5px; }

/* ---------- black velvet sidebar ---------- */
.sb { position: fixed; inset: 0 auto 0 0; z-index: 60; width: 96px; display: flex; flex-direction: column; align-items: center; padding: 18px 0 16px; background: var(--ink); overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.sb::-webkit-scrollbar { width: 6px; } .sb::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.sb__brand img { display: block; width: 44px; height: 44px; padding: 5px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px var(--ruby); }
.sb__nav { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 22px; padding: 0 8px; }
.sb__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 8px; border-radius: var(--r-ctl); text-decoration: none; color: var(--on-black2); transition: background .15s, color .15s; }
.sb__ic { display: grid; place-items: center; width: 44px; height: 34px; }
.sb__lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.sb__item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb__item.is-on { background: var(--ruby); color: #fff; }
.sb__item.is-on .sb__lbl { font-weight: 750; }
.sb__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 14px; }
.sb__who { text-decoration: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ruby-lt); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 15px; }
.sb__out { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-ctl); color: var(--on-black2); }
.sb__out:hover { background: rgba(255,255,255,.1); color: #fff; }
/* ordinary desktop and laptop windows (or a zoomed-in browser): tighter spacing, and the account and sign-out side by
   side, so all eleven items fit and the sidebar never needs to scroll */
@media screen and (min-width: 761px) and (max-height: 1040px) {
  .sb { padding: 12px 0 10px; }
  .sb__nav { margin-top: 10px; gap: 2px; }
  .sb__item { padding: 4px 0 3px; }
  .sb__ic { height: 24px; }
  .sb__foot { flex-direction: row; padding-top: 8px; gap: 6px; }
}
.mtop, .dock { display: none; }
.sb__item.is-loading .sb__ic svg, .dock__item.is-loading svg { visibility: hidden; }
.sb__item.is-loading .sb__ic { position: relative; }
.sb__item.is-loading .sb__ic::after, .dock__item.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: jspin .7s linear infinite; }
@keyframes jspin { to { transform: rotate(360deg); } }
.pgload { position: fixed; inset: 0 0 auto 0; z-index: 999; height: 3px; pointer-events: none; }
.pgload[hidden] { display: none; }
.pgload i { display: block; height: 100%; width: 0; background: var(--ruby); }
.pgload.is-go i { animation: pgload 8s cubic-bezier(.08,.8,.2,1) forwards; }
@keyframes pgload { 0% { width: 0; } 10% { width: 35%; } 40% { width: 65%; } 100% { width: 92%; } }
.pg-busy, .pg-busy * { cursor: progress; }

/* ---------- page frame ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 34px 40px 80px; }
/* the content column grows on big monitors instead of leaving most of the screen empty: 1280 px up to an 1800 px wide
   screen, 1440 px from 1800 px (a 1920 desktop), 1760 px from 2300 px (a 2560 monitor, with slightly larger text);
   the steps keep the gap beside the content wider than the hanging tikka */
:root { --wrap: 1280px; }
@media screen and (min-width: 1800px) { :root { --wrap: 1440px; } }
@media screen and (min-width: 2300px) { :root { --wrap: 1760px; } body.jw { font-size: 16px; } }
.plate { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line2); }
.plate small { display: block; font-size: 14px; color: var(--muted); }
.plate h1 { margin: 4px 0 0; font-family: var(--serif); font-size: clamp(34px, 4vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.plate .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the next bill number on New bill (the old page's VNO) */
.billno { display: flex; flex-direction: column; align-items: flex-end; margin-right: 8px; }
.billno span { font-size: 12.5px; color: var(--muted); }
.billno b { font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 6; }

/* home page: the shop photo as a banner, washed white on the left so the shop name reads */
.plate--hero { position: relative; min-height: 230px; align-items: flex-end; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 34%, rgba(255,255,255,0) 66%), #F3E9DC url('jewel-hero.jpg') 100% 50% / cover no-repeat; }
.plate--hero h1 { font-size: clamp(38px, 4.6vw, 60px); }
.plate--hero small { color: #4A4042; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card__head h2 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.layout > * { min-width: 0; }   /* a card never forces the page wider than the screen */
.main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; } .span-all { grid-column: 1 / -1; }
details > summary { list-style-position: inside; }
details > summary::marker { color: var(--ruby); }

/* ---------- fields ---------- */
.fld { display: block; min-width: 0; }
.fld[hidden], [hidden] { display: none !important; }
.fld > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--ink2); }
.req { color: var(--ruby); font-style: normal; }
.ctl { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--line2); border-radius: var(--r-ctl); background: #fff; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
textarea.ctl { height: auto; padding: 12px 14px; }
select.ctl { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.ctl:hover { border-color: #9C9294; }
.ctl:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(200,16,46,.14); }
.ctl[readonly] { background: var(--wash); border-color: var(--line); color: #3D3637; }
.ctl.num { text-align: right; font-variant-numeric: tabular-nums; }
.hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); }

/* % or g / rupees or %: a two-way switch glued to its number box */
.unit { display: flex; }
.unit .ctl { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.unit .sw { display: flex; flex: none; border: 1.5px solid var(--line2); border-left: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; overflow: hidden; }
.unit .sw label { position: relative; display: grid; place-items: center; min-width: 44px; padding: 0 10px; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; background: #fff; }
.unit .sw label + label { border-left: 1px solid var(--line); }
.unit .sw input { position: absolute; opacity: 0; pointer-events: none; }
.unit .sw label:has(input:checked) { background: var(--ink); color: #fff; }
.unit .sw label:has(input:focus-visible) { outline: 3px solid var(--ruby); outline-offset: -3px; }

/* ---------- buttons: ruby = the next step, ink = save/find, plain = everything else ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: #fff; color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn:hover { background: var(--wash); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #2B2526; border-color: #2B2526; }
.btn--ruby { background: var(--ruby); border-color: var(--ruby); color: #fff; }
.btn--ruby:hover { background: var(--ruby-dk); border-color: var(--ruby-dk); }
.btn--red { border-color: var(--ruby); color: var(--ruby); }
.btn--red:hover { background: var(--ruby-bg); }
.btn--block { width: 100%; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------- notices ---------- */
.notice { margin-bottom: 18px; padding: 13px 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--ink); font-weight: 600; }
.notice.bad { background: var(--ruby-bg); border-color: #F3C7CE; border-left-color: var(--ruby); color: #7A0A1C; }
.notice.warn { background: var(--ink); border-color: var(--ink); border-left-color: var(--ruby); color: #fff; }
.notice.warn a { color: var(--ruby-lt); }
.notice a { font-weight: 700; }

/* ---------- figures ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.kpi { padding: 18px 22px; border-left: 1px solid var(--line); min-width: 0; text-decoration: none; }
.kpi:first-child { border-left: 0; }
.kpi > span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.kpi b { display: block; margin: 6px 0 2px; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.05; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.kpi b small { font-family: var(--font); font-size: .42em; font-weight: 700; color: var(--muted); }
.kpi small { color: var(--muted); font-size: 12.5px; }
.kpi.is-wt b { color: var(--ink); }
.kpi.is-red b { color: var(--ruby); }
.kpi.is-ruby { background: var(--ruby); color: #fff; }
.kpi.is-ink { background: var(--ink); color: #fff; }
.kpi.is-ruby > span, .kpi.is-ruby small, .kpi.is-ruby b small { color: #FFD9DE; }
.kpi.is-ink > span, .kpi.is-ink small, .kpi.is-ink b small { color: var(--on-black2); }
a.kpi:hover > span { text-decoration: underline; text-underline-offset: 3px; }

/* today's rates: the velvet tray, each purity punched like a hallmark */
.rates { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-bottom: 22px; border-radius: var(--r); overflow: hidden; background: var(--ink); color: #fff; }
.rates__lbl { display: flex; flex-direction: column; justify-content: center; padding: 16px 24px; border-right: 3px solid var(--ruby); }
.rates__lbl b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.rates__lbl small { color: var(--on-black2); font-size: 12.5px; }
.rate { flex: 1 1 140px; padding: 14px 22px; border-left: 1px solid var(--black-line); }
.rates__lbl + .rate { border-left: 0; }
.rate span { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border: 1px solid rgba(255,255,255,.55); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.rate span::before { content: ""; width: 9px; height: 8px; background: var(--ruby-lt); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rate b { display: block; margin-top: 6px; font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.rate b small { display: block; margin-top: 3px; font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ruby-lt); white-space: nowrap; }
.rate.is-old b { color: var(--on-black2); }
.rates__act { display: flex; align-items: center; padding: 0 22px; }
.rates__act a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--r-ctl); background: var(--ruby); color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.rates__act a:hover { background: var(--ruby-dk); }

/* ---------- tables ---------- */
.dt-wrap { overflow-x: auto; margin: 0 -24px -22px; border-top: 1px solid var(--line); }
.dt { width: 100%; border-collapse: collapse; font-size: 14px; }
.dt th { padding: 11px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: left; white-space: nowrap; border-bottom: 1.5px solid var(--ink); background: #fff; }
.dt td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt tr th:first-child, .dt tr td:first-child { padding-left: 24px; }
.dt tr th:last-child, .dt tr td:last-child { padding-right: 24px; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt .m { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt .w { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ruby); font-weight: 700; text-align: right; }
.dt td a { text-decoration: none; }
.dt td a:hover { text-decoration: underline; }
.dt tbody tr:hover td { background: var(--wash); }
.dt tfoot td { padding: 12px 14px; border-top: 2px solid var(--ink); font-weight: 800; }
.dt tr.is-void td { opacity: .5; text-decoration: line-through; }
.dt tr.is-void td:last-child { text-decoration: none; }
.empty-row td { padding: 34px 16px; text-align: center; color: var(--muted); }
.tag { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid var(--line2); border-radius: 2px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #fff; color: var(--ink2); }
.tag.stock { border-color: var(--ink); color: var(--ink); }
.tag.sold { background: var(--ink); border-color: var(--ink); color: #fff; }
.tag.due { background: var(--ruby-bg); border-color: #F0B9C2; color: var(--ruby-dk); }
.tag.void { background: #EEEAEA; border-color: #EEEAEA; color: #5C5355; }
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; gap: 12px; align-items: end; }
.inline-form { display: inline; margin: 0; }
.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list b { display: block; font-weight: 700; } .list small { color: var(--muted); }
.list a { text-decoration: none; } .list a:hover b { text-decoration: underline; text-decoration-color: var(--ruby); }
.list .amt { margin-left: auto; text-align: right; font-family: var(--serif); font-size: 19px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.list .amt.due { color: var(--ruby); }
.ini { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink); font-family: var(--serif); font-size: 17px; font-weight: 700; }
.facts { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); font-weight: 600; } .facts dd { margin: 0; word-break: break-word; }

/* ---------- the weight line, drawn as the piece's price tag ----------
   rounded nose on the left, a punched hole, and a red thread running out of it */
.wline { position: relative; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 14px; padding: 14px 20px 14px 46px; border: 1.5px solid var(--ink); border-radius: 28px var(--r-ctl) var(--r-ctl) 28px; background: #fff; font-variant-numeric: tabular-nums; }
.wline::before { content: ""; position: absolute; left: 17px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--bg); }
.wline::after { content: ""; position: absolute; left: -18px; top: 50%; width: 41px; height: 2px; margin-top: -1px; background: var(--ruby); border-radius: 2px; transform: rotate(-8deg); transform-origin: right center; }
.wline > div { display: flex; flex-direction: column; }
.wline span { font-size: 12px; font-weight: 700; color: var(--muted); }
.wline b { font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.wline i { font-style: normal; font-size: 22px; font-weight: 400; color: var(--muted); padding-bottom: 1px; }
.wline .net span { color: var(--ruby); }
.wline .net b { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1; color: var(--ruby); font-variant-numeric: lining-nums tabular-nums; }
.wline .val { margin-left: auto; padding-left: 16px; border-left: 1px dashed var(--line2); text-align: right; }
.wline .val b { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.wline--sm { gap: 4px 10px; padding: 11px 16px 11px 42px; }
.wline--sm b, .wline--sm i { font-size: 17px; }
.wline--sm .net b { font-size: 24px; }
.wline--sm::before { left: 15px; }
.card .wline--sm::after { left: -14px; width: 35px; }

/* ---------- billing ---------- */
.scan { display: flex; gap: 10px; }
.scan > .btn { height: 54px; flex: none; }
.scan .ctl { height: 54px; padding-left: 48px; font-size: 17px; border-color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 5v14M7 5v14M11 5v14M14 5v14M18 5v14M20 5v14'/%3E%3C/svg%3E") no-repeat 15px center; }
.pick { position: relative; flex: 1; }
.pick__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: 340px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.pick__list[hidden] { display: none; }
.pick__list li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 3px; cursor: pointer; }
.pick__list li:hover, .pick__list li.is-act { background: var(--ruby-bg); }
.pick__list li b { display: block; font-weight: 700; }
.pick__list li small { color: var(--muted); font-variant-numeric: tabular-nums; }
.pick__list li .pw { margin-left: auto; font-weight: 800; color: var(--ruby); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick__none { padding: 12px; color: var(--muted); cursor: default !important; }
.card:has(.pick) { overflow: visible; }

.piece { border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.piece + .piece { margin-top: 14px; }
.piece__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; border-radius: var(--r) var(--r) 0 0; }
.piece__no { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--serif); font-size: 14px; font-weight: 700; }
.piece__name { flex: 1; min-width: 0; }
.piece__name b { display: block; font-size: 16px; } .piece__name small { color: var(--muted); }
.piece__rm { flex: none; width: 34px; height: 34px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.piece__rm:hover { background: var(--ruby-bg); color: var(--ruby); }
.piece__in { display: grid; grid-template-columns: 1fr 1.35fr 1fr 1fr; gap: 12px; padding: 14px 16px 6px; }
.piece__in .ctl { height: 42px; }
.piece__in--mk { grid-template-columns: 1fr 1.35fr 1fr 1fr .9fr; }   /* making typed on each item */
/* an item typed in (not from stock): its name and purity are boxes in the card's head */
.piece__name--edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.piece__name--edit input { flex: 1 1 200px; height: 38px; }
.piece__name--edit select { flex: 0 0 100px; width: 100px; height: 38px; }
.piece .wline { margin: 10px 16px 16px 30px; }
.empty-bill { padding: 40px 20px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line2); border-radius: var(--r); }
.empty-bill b { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }

/* the receipt column */
.sum { position: sticky; top: 20px; padding: 22px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--ruby); border-radius: var(--r); }
.sum h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.sum__rows { margin: 10px 0 0; }
.sum__rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink2); }
.sum__rows > div b { font-variant-numeric: tabular-nums; }
.sum__rows .w b { color: var(--ruby); }
.sum__total { display: flex; align-items: flex-end; justify-content: space-between; margin: 14px 0 6px; padding: 16px 18px; border-radius: var(--r); background: var(--ink); color: #fff; }
.sum__total span { font-size: 13px; font-weight: 600; color: var(--on-black2); }
.sum__total b { font-family: var(--serif); font-size: 38px; font-weight: 700; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.sum .fld { margin-top: 12px; }
.sum .fld > span { font-size: 12.5px; }
.ctl:disabled { background: var(--wash); color: var(--muted); }
/* GST: the rate for this bill, and whether the customer is in another state (IGST instead of CGST + SGST) */
.gstrow { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: end; }
.chk { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.chk input { width: 18px; height: 18px; flex: none; accent-color: var(--ruby); }
.pays { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pays .fld { margin-top: 0; }
.sum__bal { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; padding: 11px 14px; border-radius: var(--r); background: var(--wash); font-size: 14px; font-weight: 600; }
.sum__bal b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sum__bal.is-credit { background: var(--ruby-bg); color: var(--ruby-dk); }
.sum__bal.is-clear { background: #fff; border: 1.5px solid var(--ink); color: var(--ink); }
.sum__after { margin: -4px 0 12px; padding: 9px 14px; border: 1px dashed #F0B9C2; border-radius: var(--r); font-size: 13.5px; color: var(--ink2); }
.sum__after div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.sum__after b { font-variant-numeric: tabular-nums; }
.sum__after .tot { margin-top: 4px; padding-top: 6px; border-top: 1px solid #F0B9C2; font-weight: 800; color: var(--ruby-dk); }
.sum__save { width: 100%; height: 54px; border: 0; border-radius: var(--r-ctl); background: var(--ruby); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; transition: background .15s; }
.sum__save:hover { background: var(--ruby-dk); }
.sum__save:disabled { background: #D9D2D3; color: #6E6466; cursor: not-allowed; }
.kbd { display: block; margin-top: 8px; text-align: center; font-size: 12px; color: var(--muted); }
.who { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr; gap: 12px; }
.taxbox { margin-top: 10px; }
.taxbox > summary { cursor: pointer; font-size: 13.5px; }
.sum h2 .stepno { width: 26px; height: 26px; font-size: 13px; }
.who .ctl { height: 44px; }
.who__due { grid-column: 1 / -1; font-size: 13px; font-weight: 600; }

/* ---------- schemes ---------- */
.facts-box { display: grid; gap: 6px; padding: 12px 14px; border: 1px dashed var(--line2); border-radius: var(--r); font-size: 13.5px; }
.facts-box div { display: flex; justify-content: space-between; gap: 10px; }
.facts-box b { font-variant-numeric: tabular-nums; }
.facts-box .facts-box__warn { display: block; margin-top: 4px; padding: 8px 10px; border-radius: var(--r); background: var(--ruby-bg); color: var(--ruby-dk); font-weight: 600; }
.facts-box .facts-box__warn[hidden] { display: none; }
/* a pop-up question */
.jdlg { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 0; border-top: 5px solid var(--ruby); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0,0,0,.3); color: var(--ink); }
.jdlg::backdrop { background: rgba(0,0,0,.45); }
.jdlg h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.jdlg p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.jdlg__btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.mgrid-wrap { overflow-x: auto; }
.mgrid th.mc, .mgrid td.mc { width: 34px; padding: 6px 2px !important; text-align: center; }
.mgrid th.mc.is-now { color: var(--ruby); }
.mgrid .cell { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; font-size: 13px; font-weight: 800; background: transparent; }
.mgrid .cell.paid { background: var(--ink); color: #fff; }
.mgrid .cell.paid.won { background: var(--ruby); }
.mgrid .cell.due { background: var(--ruby-bg); color: var(--ruby); border: 1.5px solid #F0B9C2; cursor: pointer; }
.mgrid .cell.later { border: 1.5px dashed var(--line2); cursor: pointer; }
.mgrid .cell.off { color: var(--line2); }
.mgrid button.cell:hover:not(:disabled) { border-color: var(--ruby); }
.mkey { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.mkey span { display: inline-flex; align-items: center; gap: 6px; }
.mkey .cell { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; font-style: normal; }
.mkey .cell.paid { background: var(--ink); color: #fff; } .mkey .cell.paid.won { background: var(--ruby); }
.mkey .cell.due { background: var(--ruby-bg); color: var(--ruby); border: 1.5px solid #F0B9C2; } .mkey .cell.later { border: 1.5px dashed var(--line2); }
.draw-card { border-top: 4px solid var(--ruby); }
/* a member's payment page: months to tick, and the receipt */
.mticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
@media screen and (max-width: 1100px) { .layout--pay-first > aside { order: -1; } }   /* phones and tablets: take the payment first, the month list after */
.mticks label { display: flex; flex-direction: column; gap: 1px; padding: 8px 30px 8px 10px; border: 1.5px solid var(--line2); border-radius: var(--r-ctl); cursor: pointer; position: relative; }
.mticks label.is-due { border-color: #F0B9C2; background: var(--ruby-bg); }
.mticks input { position: absolute; top: 9px; right: 9px; width: 16px; height: 16px; accent-color: var(--ruby); }
.mticks span { font-weight: 700; font-size: 13.5px; }
.mticks small { font-size: 11.5px; color: var(--muted); }
.mticks label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.srcpt { max-width: 420px; margin: 0 auto 14px; padding: 22px 24px; background: #fff; border: 1px solid var(--line2); border-top: 5px solid var(--ruby); border-radius: 2px; }
.srcpt header { text-align: center; padding-bottom: 10px; border-bottom: 2px dashed var(--line2); }
.srcpt header b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ruby); }
.srcpt header small { color: var(--muted); }
.srcpt h2 { margin: 12px 0 10px; text-align: center; font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.srcpt dl { display: grid; grid-template-columns: 90px 1fr; gap: 5px 10px; margin: 0; font-size: 14px; }
.srcpt dt { color: var(--muted); } .srcpt dd { margin: 0; font-weight: 600; }
.srcpt__amt { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; padding: 12px 0; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.srcpt__amt b { font-family: var(--serif); font-size: 26px; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 6; }
.srcpt__sum { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.srcpt footer { display: flex; justify-content: space-between; margin-top: 38px; font-size: 12px; color: var(--muted); }
.srcpt footer span:last-child { padding-top: 4px; border-top: 1px solid #000; min-width: 120px; text-align: center; }
.srcpt-bar { display: flex; justify-content: center; gap: 10px; margin: 0 auto 26px; }
.srcpts { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; }
.srcpts .srcpt { margin: 0; break-inside: avoid; page-break-inside: avoid; }
@media print { .srcpts { display: block; } .srcpts .srcpt { margin: 0 auto 10mm; } }
.draw-card h2 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.draw-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-size: 12.5px; color: var(--muted); }
.draw-or::before, .draw-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.draw-names { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r); background: var(--wash); font-size: 13.5px; }
.prize-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prize-form .ctl { height: 34px; width: auto; flex: 1 1 120px; font-size: 13px; }

/* ---------- gold schemes, made for first-time computer users: big targets, one job per screen ---------- */
.btn--big { height: 54px; padding: 0 26px; font-size: 16.5px; }
.ctl--big { height: 54px; font-size: 18px; }
.narrow { max-width: 620px; }
/* a big, plain Back button at the top left of every scheme screen */
.backbtn { margin-bottom: 14px; gap: 6px; font-size: 15px; }
.card > .backbtn { margin-bottom: 18px; }
.sum.sum--flow { position: static; }   /* a payment box with more cards under it scrolls with the page */
.backlink { display: inline-block; margin-bottom: 10px; font-weight: 700; color: var(--ink2); text-decoration: none; }
.backlink:hover { color: var(--ruby); }
.empty-big { padding: 34px 20px; text-align: center; }
.empty-big h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.empty-big p { margin: 0 0 18px; color: var(--muted); }
.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.scard { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--ruby); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.scard:hover { box-shadow: 0 10px 30px rgba(0,0,0,.10); transform: translateY(-2px); }
.scard__top b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.15; }
.scard__top small { color: var(--muted); }
.scard__big { margin-top: 6px; font-family: var(--serif); font-size: 32px; font-weight: 700; font-variation-settings: "opsz" 6; }
.scard__big small { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--muted); }
.scard__line { font-size: 14.5px; color: var(--ink2); }
.scard__bar { height: 6px; margin: 6px 0 2px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.scard__bar i { display: block; height: 100%; background: var(--ruby); }
.scard__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 14px; }
.scard__status .ok, .scard__status .no { padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.scard__status .ok { background: #EAF5EE; color: #1E6B3A; }
.scard__status .no { background: var(--ruby-bg); color: var(--ruby-dk); }
.scard__status small { color: var(--muted); }
.scard__go { margin-top: 10px; font-weight: 800; color: var(--ruby); }
/* one scheme: its name, then big tabs */
.shead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.shead h1 { margin: 0; font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 600; line-height: 1.05; }
.shead p { margin: 8px 0 0; font-size: 15.5px; color: var(--ink2); }
.stabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.stab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px; padding: 12px 8px; background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14.5px; text-align: center; }
.stab:hover { border-color: var(--ink); }
.stab__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wash); font-size: 18px; font-weight: 800; }
.stab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.stab.is-on .stab__ic { background: var(--ruby); color: #fff; }
.stab em { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ruby); color: #fff; font-style: normal; font-size: 12px; line-height: 22px; }
.stab em.n { background: var(--wash); color: var(--ink2); }
.stab.is-on em.n { background: rgba(255,255,255,.18); color: #fff; }
/* Take payment: one row per customer, one button */
.plist { margin: 14px 0 0; padding: 0; list-style: none; }
.plist li + li { margin-top: 8px; }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; }
.prow:hover { border-color: var(--ink); background: var(--wash); }
.prow__who b { display: block; font-size: 16.5px; } .prow__who small { color: var(--muted); }
.prow__state { text-align: right; font-weight: 800; font-size: 16px; }
.prow__state small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.prow__state.is-due { color: var(--ruby); } .prow__state.is-ok { color: #1E6B3A; }
/* ticking several customers to take their payments together */
.seltools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.plist li { display: flex; align-items: stretch; gap: 8px; }
.plist li[hidden] { display: none; }
.plist .prow { flex: 1; min-width: 0; }
.ptick { display: grid; place-items: center; width: 52px; flex: none; border: 1.5px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; }
.ptick input { width: 24px; height: 24px; accent-color: var(--ruby); cursor: pointer; }
.plist li.is-ticked .ptick, .plist li.is-ticked .prow { border-color: var(--ruby); background: var(--ruby-bg); }
.selbar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px 12px 20px; border-radius: var(--r-ctl); background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 16px; }
.selbar[hidden] { display: none; }
.bstep { margin: 18px 0 10px; font-weight: 800; font-size: 16.5px; }
.bwhat--stack { grid-template-columns: 1fr; }
.bmode.bmode--months { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); margin-bottom: 10px; }
.bmode.bmode--3 { grid-template-columns: repeat(3, 1fr); }
.bmode--months span, .bmode--3 span { padding: 10px 8px; align-items: center; }
.bmode--months span { text-align: center; } .bmode--months small { font-size: 12.5px; opacity: .8; }
.bmode--months[hidden] { display: none; }
/* gold loan: where the interest stands, and the 'pay everything' figure */
.intbox { display: grid; gap: 2px; padding: 14px 16px; margin-bottom: 4px; border-radius: var(--r); }
.intbox.is-due { background: var(--ruby-bg); color: var(--ruby-dk); } .intbox.is-ok { background: #EAF5EE; color: #1E6B3A; }
.intbox span { font-size: 14.5px; } .intbox__state { font-size: 19px; font-weight: 900; } .intbox small { font-size: 13px; opacity: .85; }
.payfull { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); }
.payfull span { color: var(--muted); font-size: 14px; } .payfull b { font-size: 26px; font-weight: 900; }
.payfull[hidden] { display: none; }
.txt-due { color: var(--ruby); font-weight: 800; }
.kcalc { margin: -6px 0 22px; padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); font-size: 14.5px; color: var(--muted); }
.kcalc b { color: var(--ink); font-weight: 800; }
.kpi .kbal { display: grid; gap: 1px; margin-top: 4px; font-size: 14px; }
.kpi .kbal span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; white-space: nowrap; max-width: 240px; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; margin: 0; }
.kpi .kbal em { font-style: normal; font-weight: 800; margin-left: auto; }
.tag.int { background: #FFF4DB; color: #8A5A00; border-color: #F1D79A; }
.bstep:first-of-type { margin-top: 4px; }
.bwhat, .bmode { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.bwhat label, .bmode label { position: relative; cursor: pointer; }
.bwhat input, .bmode input { position: absolute; opacity: 0; }
.bwhat span, .bmode span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px; border: 1.5px solid var(--line2); border-radius: var(--r-ctl); }
.bmode span { align-items: center; justify-content: center; min-height: 56px; font-weight: 800; font-size: 16.5px; }
.bwhat small { color: var(--muted); }
.bwhat input:checked + span, .bmode input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.bwhat input:checked + span small { color: var(--on-black2); }
.bwhat input:focus-visible + span, .bmode input:focus-visible + span { outline: 3px solid var(--ruby); outline-offset: 2px; }
.blist { margin: 6px 0 4px; }
.bstep small { margin-left: 6px; font-weight: 600; font-size: 13px; color: var(--muted); }
.ball { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.blist li.brow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; }
.blist li.brow.is-skip { opacity: .5; }
.brow__how { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.brow__how label { position: relative; cursor: pointer; }
.brow__how input[type=radio] { position: absolute; opacity: 0; }
.brow__how span { display: grid; place-items: center; min-width: 64px; height: 40px; padding: 0 12px; border: 1.5px solid var(--line2); border-radius: var(--r-ctl); font-weight: 800; font-size: 14px; }
.brow__how input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.brow__how input[value=UPI]:checked + span { border-color: #1D4E89; background: #1D4E89; }
.brow__how input[value=Bank]:checked + span { border-color: var(--ruby); background: var(--ruby); }
.brow__how input:focus-visible + span { outline: 3px solid var(--ruby); outline-offset: 2px; }
.brow__bank { width: 130px; height: 40px; }
.brow__bank[hidden] { display: none; }
.blist .brow .amt { min-width: 92px; }
.bsplit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.bsplit > div { display: flex; flex-direction: column; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r); }
.bsplit > div span { font-size: 13px; font-weight: 700; color: var(--muted); }
.bsplit > div b { font-family: var(--serif); font-size: 24px; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 6; }
.bsplit > div small { color: var(--muted); }
.bsplit > div.is-zero { opacity: .45; }
@media screen and (max-width: 760px) {
  .blist li.brow { grid-template-columns: minmax(0, 1fr) auto; }
  .brow__how { grid-column: 1 / -1; justify-content: flex-start; }
  .brow__how span { min-width: 74px; height: 44px; }
  .bsplit { grid-template-columns: 1fr; }
}
@media screen and (max-width: 760px) {
  .selbar { bottom: 80px; } .selbar .btn { width: 100%; }
  .ptick { width: 44px; }
}
/* Paid / Not paid */
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.mchips a { padding: 6px 12px; border: 1.5px solid var(--line2); border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.mchips a.is-later { color: var(--muted); border-style: dashed; }
.mchips a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ptotals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ptotals > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding: 16px 20px; border-radius: var(--r); }
.ptotals p { margin: 0; font-weight: 800; font-size: 17px; }
.ptotals b { font-family: var(--serif); font-size: 40px; line-height: 1; font-variation-settings: "opsz" 6; vertical-align: -4px; margin-right: 4px; }
.ptot__amt { text-align: right; font-size: 15px; }
.ptot__amt strong { display: block; font-size: 36px; font-weight: 900; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ptotals .ok { background: #EAF5EE; color: #1E6B3A; } .ptotals .no { background: var(--ruby-bg); color: var(--ruby-dk); }
.blines { margin: 0; padding: 0; list-style: none; min-width: 210px; } .blines small { white-space: nowrap; } .blines li { line-height: 1.35; } .blines li + li { margin-top: 3px; }
.pcols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pcol__h { margin: 0 0 4px; font-size: 16px; } .pcol__h.ok { color: #1E6B3A; } .pcol__h.no { color: var(--ruby-dk); }
.rowbtns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
/* Lucky draw */
.draw-what { margin: 6px 0 14px; font-size: 17px; }
.draw-step { margin: 16px 0 8px; font-weight: 800; }
.ini.win { border-color: var(--ruby); background: var(--ruby); color: #fff; font-family: var(--font); }
.list li.winner { align-items: flex-start; }
.layout--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.facts--big { grid-template-columns: 140px 1fr; gap: 12px 14px; font-size: 15.5px; }
.facts-box--big { gap: 10px; padding: 16px 18px; font-size: 15.5px; }
.facts-box--big b { font-size: 17px; }
@media screen and (max-width: 1100px) { .stabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 760px) {
  .stabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stab { min-height: 70px; font-size: 13.5px; }
  .prow { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .prow__btn { grid-column: 1 / -1; width: 100%; }
  .pcols, .ptotals { grid-template-columns: 1fr; }
  .scards { grid-template-columns: 1fr; }
  .shead h1 { font-size: 30px; }
}

/* the drop-down under a text box (assets/combo.js) */
.combo { position: absolute; z-index: 1000; margin: 0; padding: 6px; list-style: none; overflow-y: auto; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.combo[hidden] { display: none; }
.combo li { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 15px; }
.combo li b { font-weight: 700; } .combo li small { color: var(--muted); font-size: 13px; }
.combo li:hover, .combo li.is-act { background: var(--ruby-bg); }
.combo li.combo__more { cursor: default; color: var(--muted); font-size: 13px; }
.combo li.combo__more:hover { background: none; }
input[data-combo] { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
input[data-combo][type=search]::-webkit-search-cancel-button { margin-right: 18px; }

/* ---------- simple pages: number steps, big figures, filter tabs, find bar ---------- */
.setgroup { margin: 8px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.setgroup small { margin-left: 6px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted); }
.setgroup:first-of-type { margin-top: 0; }
/* Staff logins */
.roleinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.roleinfo > div { padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--r); }
.roleinfo b { display: block; font-size: 16px; } .roleinfo span { color: var(--muted); font-size: 14px; }
.stafflist li { flex-wrap: wrap; align-items: flex-start; }
.stafflist li.is-off { opacity: .7; }
.staff__who { flex: 1 1 260px; min-width: 0; }
.list .staff__who small b { display: inline; } .staff__who .tag { margin-top: 6px; }
.staff__edit { flex: 0 0 auto; }
.staff__edit > summary { list-style: none; } .staff__edit > summary::-webkit-details-marker { display: none; }
.staff__edit[open] { flex: 1 1 100%; }
.staff__panel { display: grid; gap: 12px; margin-top: 12px; padding: 14px; border-radius: var(--r); background: var(--wash); }
/* Gold rates: one big box per purity */
.rategrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ratebox { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1.5px solid var(--line2); border-radius: var(--r-ctl); }
.ratebox.is-today { border-color: #1E6B3A; background: #F3FAF5; }
.ratebox__p { font-family: var(--serif); font-size: 28px; font-weight: 700; }
.ratebox__in { display: flex; align-items: center; gap: 8px; font-style: normal; }
.ratebox__in i { font-style: normal; font-weight: 800; color: var(--muted); }
.ratebox__in .ctl { flex: 1; font-size: 22px; font-weight: 800; }
.ratebox small { font-weight: 700; color: var(--muted); } .ratebox.is-today small { color: #1E6B3A; }
/* the Today page: the first job of the day, then big tiles for everything else */
.startcard { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; padding: 18px 22px; background: #fff; border: 2px solid var(--ruby); border-radius: var(--r); color: var(--ink); text-decoration: none; }
.startcard b { display: block; font-size: 19px; } .startcard small { color: var(--muted); font-size: 14.5px; }
.startcard > span:nth-child(2) { flex: 1 1 260px; }
.startcard__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ruby); color: #fff; font-size: 20px; font-weight: 800; }
.todo-h { margin: 0 0 12px; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.todo { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 26px; }
.todo__tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.todo__tile:hover { border-color: var(--ruby); transform: translateY(-2px); }
.todo__ic { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 6px; border-radius: 50%; background: var(--ruby-bg); color: var(--ruby); }
.todo__tile b { font-size: 16.5px; } .todo__tile small { color: var(--muted); font-size: 13.5px; }
@media screen and (max-width: 760px) { .todo { grid-template-columns: 1fr 1fr; gap: 10px; } .todo__tile { padding: 14px; } .startcard .btn { width: 100%; } }
.stepno { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border-radius: 50%; background: var(--ruby); color: #fff; font-family: var(--font); font-size: 15px; font-weight: 800; vertical-align: 3px; }
.bigfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.bigfacts > div { padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.bigfacts span { display: block; font-size: 14px; font-weight: 700; color: var(--muted); }
.bigfacts b { display: block; margin-top: 4px; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 6; }
.bigfacts small { color: var(--muted); }
.ftabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ftabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r-ctl); color: var(--ink); font-weight: 800; font-size: 15.5px; text-decoration: none; }
.ftabs a em { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--wash); font-style: normal; font-size: 13px; line-height: 24px; text-align: center; }
.ftabs a.is-alert em { background: var(--ruby); color: #fff; }
.ftabs a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ftabs a.is-on em { background: rgba(255,255,255,.2); color: #fff; }
.findbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.periodbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.periodbar .btn { height: 46px; font-size: 15px; }
.periodbar details { flex: 1 1 auto; }
.periodbar summary { list-style: none; display: inline-flex; } .periodbar summary::-webkit-details-marker { display: none; }
.findbar .ctl { flex: 1 1 260px; }
.prow__who .tag { margin-top: 6px; margin-right: 4px; }
/* the 3 loan photos: big boxes to tap */
.docpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.docpick__box { position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.docpick__box input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.docpick__img { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border: 2px dashed var(--line2); border-radius: var(--r); background: var(--wash); }
.docpick__img { position: relative; }
.docpick__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.docpick__img img:not([hidden]) + .docpick__plus, .docpick__img:has(img:not([hidden])) .docpick__plus { display: none; }
.docpick__plus { font-size: 34px; font-weight: 300; color: var(--muted); }
.docpick__box:hover .docpick__img, .docpick__box:focus-within .docpick__img { border-color: var(--ruby); }
.docpick__box.is-set .docpick__img { border-style: solid; border-color: var(--ink); }
.docpick__box.is-set .docpick__plus { font-size: 18px; font-weight: 800; color: var(--ruby); }
.docpick__name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (max-width: 760px) { .docpick { grid-template-columns: 1fr 1fr; } .ftabs a { flex: 1 1 auto; justify-content: center; } }

/* ---------- gold loans ---------- */
.valuebox { padding: 10px 14px; border-radius: var(--r); background: var(--wash); }
.valuebox b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 6; }
.upl .ctl { height: auto; padding: 9px 10px; font-size: 13px; }
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.doc { display: flex; flex-direction: column; gap: 8px; }
.doc__view { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.doc__view img { width: 100%; height: 100%; object-fit: cover; }
.doc__pdf { font-weight: 800; color: var(--ruby); }
.doc__none { color: var(--muted); font-size: 13px; }
.doc__up { position: relative; }
.doc__up input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media screen and (max-width: 760px) { .docs { grid-template-columns: 1fr 1fr; } }

/* ---------- books ---------- */
.booktabs { display: flex; margin: 0 0 16px; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); overflow: hidden; width: max-content; max-width: 100%; }
.booktabs a { padding: 10px 22px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.booktabs a + a { border-left: 1.5px solid var(--ink); }
.booktabs a:hover { background: var(--wash); }
.booktabs a.is-on { background: var(--ink); color: #fff; box-shadow: inset 0 -3px 0 var(--ruby); }
.dt.book .book__open td, .dt.book .book__close td { background: var(--wash); font-weight: 700; }
.dt.book .book__close td { border-top: 1.5px solid var(--ink); }
.dt.book .book__daytot td { background: #fff; font-size: 13px; color: var(--muted); font-weight: 600; }
.dt tr.grp td { background: var(--wash); font-weight: 800; color: var(--ruby-dk); }
.print-only { display: none; }

/* ---------- printed bill ---------- */
.inv-pg { background: #E8E3E4; }
.inv-bar { max-width: 820px; margin: 0 auto 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.inv-bar span { display: flex; gap: 8px; flex-wrap: wrap; }
.inv { position: relative; max-width: 820px; margin: 0 auto; padding: 30px 32px 24px; background: #fff; border: 1px solid #CFC7C8; border-top: 6px solid var(--ruby); border-radius: 2px; color: #000; }
.inv__top { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 3px double #000; }
.inv__shop b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ruby); }
.inv__shop small { display: block; font-size: 13px; color: #444; }
.inv__title { text-align: right; }
.inv__title h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .06em; }
.inv__title p { margin: 4px 0 0; font-size: 14px; }
.inv__to { display: flex; justify-content: space-between; gap: 18px; margin: 14px 0; font-size: 14px; }
.inv__to span { display: block; font-size: 11.5px; font-weight: 700; color: #666; }
.inv table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv th { padding: 7px 6px; background: #000; color: #fff; text-align: left; font-size: 11.5px; font-weight: 700; }
.inv td { padding: 7px 6px; border-bottom: 1px solid #DDD; vertical-align: top; }
.inv .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv tfoot td { border-top: 2px solid #000; border-bottom: 0; font-weight: 800; }
.inv__foot { display: grid; grid-template-columns: 1fr 300px; gap: 24px; margin-top: 14px; }
.inv__terms { font-size: 12px; color: #444; }
.inv__terms b { display: block; margin-bottom: 4px; color: #000; }
.inv__tot div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; border-bottom: 1px dotted #CCC; }
.inv__tot div b { font-variant-numeric: tabular-nums; }
.inv__tot .big { margin-top: 4px; padding: 8px 0; font-size: 20px; font-weight: 800; border-bottom: 2px solid #000; border-top: 2px solid #000; }
.inv__tot .big b { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.inv__words { margin-top: 10px; font-size: 12.5px; }
.inv__sign { display: flex; justify-content: space-between; margin-top: 46px; font-size: 12px; color: #444; }
.inv__sign i { display: block; width: 160px; border-top: 1px solid #000; margin-bottom: 4px; }
.inv__void { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); border: 4px solid var(--ruby); color: var(--ruby); padding: 6px 22px; font-size: 44px; font-weight: 900; text-align: center; background: rgba(255,255,255,.85); }
.inv__void small { display: block; font-size: 12px; font-weight: 700; }

/* ---------- sign-in ---------- */
.gate { min-height: 100vh; display: grid; grid-template-columns: 1.7fr 1fr; background: #fff; }
/* the sign-in picture is shown whole (its four captions run edge to edge, so it is never cropped) and the space
   around it is filled with a soft blurred copy of the same picture, so it blends in at any screen shape */
.gate__art { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: clamp(24px, 3.5vw, 44px); background: #D9C3AA; overflow: hidden; }
.gate__art::before { content: ""; position: absolute; inset: -60px; z-index: -2; background: url('jewel-signin.jpg') center / cover no-repeat; filter: blur(30px) saturate(1.05); }
.gate__pic { position: absolute; left: 0; top: 50%; z-index: -1; width: 100%; height: auto; max-height: 100%; object-fit: contain; transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); }   /* soft top and bottom edges */
.gate__art::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: -1; height: 90px; background: linear-gradient(transparent, rgba(255,255,255,.55)); pointer-events: none; }
.gate__brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: fit-content; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.9); text-decoration: none; color: var(--ink); box-shadow: 0 2px 14px rgba(80,50,20,.12); }
.gate__brand img { width: 38px; height: 38px; padding: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ruby); }
.gate__brand b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.gate__foot { position: relative; z-index: 1; font-size: 13px; color: #4A4042; }
.gate__form { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 6vw, 84px); max-width: 560px; width: 100%; margin: 0 auto; }
.gate__form h1 { margin: 0; font-family: var(--serif); font-size: clamp(40px, 4.4vw, 58px); font-weight: 600; line-height: 1; }
.gate__form .sub2 { margin: 12px 0 28px; color: var(--muted); }
.gate__form form { display: grid; gap: 16px; }
.gate__form .btn { height: 54px; font-size: 16px; }
.pw { position: relative; display: block; }
.pw button { position: absolute; right: 7px; top: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 4px; background: var(--wash); font-size: 12px; font-weight: 700; cursor: pointer; }
.gate__err { padding: 13px 16px; border-radius: var(--r); border-left: 5px solid var(--ruby); background: var(--ruby-bg); color: #7A0A1C; font-weight: 600; }

/* ---------- smaller screens ---------- */
@media screen and (max-width: 1100px) {
  .who { grid-template-columns: 1fr 1fr; }
  .layout, .layout[style] { grid-template-columns: 1fr !important; } .sum { position: static; }  /* some pages set fixed columns inline */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; } .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wrap { padding: 28px 24px 70px; }
}
@media (max-width: 860px) {
  .gate { grid-template-columns: 1fr; } .gate__art { min-height: max(44vh, calc(100vw / 1.78 + 110px)); padding-top: 64px; }
  .gate__form { padding-top: 32px; }
}
@media screen and (max-width: 760px) {
  body.jw { padding-left: 0; padding-bottom: 78px; }
  .jbg__necklace { width: 300px; left: -230px; top: calc((100vh - 225px) * .55); }
  .jbg__thread   { width: 360px; right: -200px; top: calc((100vh - 120px) * .40); }
  .jbg__jhumka   { width: 40px; right: 2px; top: calc((100vh - 56px) * .28); }
  .jbg__ring     { width: 90px; left: -20px; bottom: 80px; }
  .jbg__bangles  { width: 170px; right: -40px; bottom: 74px; }
  .sb { display: none; }
  .mtop { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #000; color: #fff; border-bottom: 3px solid var(--ruby); }
  .mtop__brand { display: flex; align-items: center; gap: 9px; flex: 1; text-decoration: none; }
  .mtop__brand img { width: 32px; height: 32px; padding: 3px; background: #fff; border-radius: 50%; }
  .mtop__brand b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
  .mtop__user { font-size: 12px; color: var(--on-black2); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtop__out { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-ctl); color: var(--on-black2); }
  .dock { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; gap: 2px; height: 68px; padding: 6px 6px 8px; background: #fff; border-top: 1px solid var(--line2); overflow-x: auto; scrollbar-width: none; }
  .dock::-webkit-scrollbar { display: none; }
  .dock__item { position: relative; flex: 1 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; font-size: 10.5px; font-weight: 650; }
  .dock__item span { color: var(--ink2); }
  .dock__item.is-on { background: var(--ruby); color: #fff; } .dock__item.is-on span { color: #fff; }
  .dock__item.is-loading::after { top: 10px; bottom: auto; left: calc(50% - 9px); margin: 0; }
  .wrap { padding: 20px 16px 40px; }
  .plate { margin-bottom: 18px; padding-bottom: 14px; }
  .plate--hero { min-height: 0; padding: 120px 16px 16px; background: linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.94) 62%), #F3E9DC url('jewel-hero.jpg') 62% 40% / cover no-repeat; }
  .card { padding: 16px; }
  .g2, .g3, .g4, .who { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 14px 14px; } .kpi b { font-size: 24px; }
  .rates__lbl { flex: 1 1 100%; padding: 12px 16px; border-right: 0; border-bottom: 3px solid var(--ruby); }
  .rate { flex: 1 1 45%; padding: 10px 16px; border-top: 1px solid var(--black-line); }
  .rate b { font-size: 24px; }
  .rates__act { padding: 10px 16px; }
  .filters, .filters[style] { grid-template-columns: 1fr 1fr !important; } .filters .fld { grid-column: span 2; }
  .piece__in { grid-template-columns: 1fr 1fr; }
  .piece .wline { margin-left: 26px; }
  .wline b { font-size: 18px; } .wline .net b { font-size: 26px; }
  .wline .val { margin-left: 0; padding-left: 0; padding-top: 8px; border-left: 0; border-top: 1px dashed var(--line2); text-align: left; flex-basis: 100%; }
  .dt-wrap { overflow: visible; margin: 0 -16px -16px; }
  .dt thead { display: none; }
  .dt, .dt tbody, .dt tfoot, .dt tr, .dt td { display: block; width: 100%; }
  .dt tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .dt td, .dt tr td:first-child, .dt tr td:last-child { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding: 3px 16px; border: 0; text-align: right; }
  .dt td::before { content: attr(data-label); margin-right: auto; padding-right: 12px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; }   /* label left, the value kept together on the right */
  .inv { padding: 18px 14px; } .inv__top, .inv__to { flex-direction: column; } .inv__title { text-align: left; }
  .inv__foot { grid-template-columns: 1fr; } .inv table { font-size: 11.5px; }
  .inv th, .inv td { padding: 6px 3px; }   /* the item table fits a 360 px phone */
  .facts { grid-template-columns: 110px 1fr; }
}
/* tablets: lists become cards (label on the left, value on the right) instead of tables that scroll off the edge */
@media screen and (min-width: 761px) and (max-width: 900px) {
  .dt-wrap { overflow: visible; }
  .dt thead { display: none; }
  .dt, .dt tbody, .dt tfoot, .dt tr, .dt td { display: block; width: 100%; }
  .dt tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .dt td, .dt tr td:first-child, .dt tr td:last-child { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding: 3px 24px; border: 0; text-align: right; }
  .dt td::before { content: attr(data-label); margin-right: auto; padding-right: 12px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; }
  .dt tr.is-void td { text-decoration: none; }
}
/* phones and tablets: the scheme's member x month grid stays a grid; it scrolls sideways with the names pinned on the left */
@media screen and (max-width: 900px) {
  .mgrid-wrap { overflow-x: auto !important; }
  .dt.mgrid { display: table !important; width: auto !important; min-width: 100%; }
  .dt.mgrid thead { display: table-header-group !important; }
  .dt.mgrid tbody { display: table-row-group !important; }
  .dt.mgrid tr { display: table-row !important; padding: 0 !important; }
  .dt.mgrid th, .dt.mgrid td { display: table-cell !important; width: auto !important; text-align: center; padding: 8px 4px !important; border-bottom: 1px solid var(--line) !important; }
  .dt.mgrid td::before { content: none !important; }
  .dt.mgrid th:first-child, .dt.mgrid td:first-child { position: sticky; left: 0; z-index: 1; min-width: 132px; max-width: 150px; padding-left: 16px !important; text-align: left; background: #fff; box-shadow: 1px 0 0 var(--line); }
  .dt.mgrid th:last-child, .dt.mgrid td:last-child { padding-right: 16px !important; text-align: right; }
}
/* phones: the scanner box gets the full width, the "item not in stock" button goes under it */
@media screen and (max-width: 760px) {
  .scan { flex-wrap: wrap; }
  .scan .pick { flex: 1 1 100%; }
  .scan > .btn { width: 100%; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .pgload.is-go i { width: 70%; } }

/* ---------- printing: list pages and books as plain tables ---------- */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sb, .mtop, .dock, .pgload, .no-print, .inv-bar, .notice, .booktabs, .filters, .jbg { display: none !important; }
  .srcpt { border: 0; border-top: 4px solid var(--ruby); margin: 0 auto; }
  .kpis.no-print, .layout.no-print { display: none !important; }   /* printing a receipt prints only the receipt */
  body, body.jw { padding: 0 !important; background: #fff !important; font-size: 11px; }
  .wrap { padding: 0 !important; max-width: none !important; }
  .plate { display: none !important; }
  .print-only { display: block !important; font-size: 13px; margin: 0 0 8px !important; }
  .card { padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  .dt-wrap { margin: 0 !important; overflow: visible !important; border: 0 !important; }
  .dt { display: table !important; font-size: 10.5px; }
  .dt thead { display: table-header-group !important; } .dt tbody { display: table-row-group !important; } .dt tfoot { display: table-footer-group !important; }
  .dt tr { display: table-row !important; padding: 0 !important; break-inside: avoid; }
  .dt th, .dt td { display: table-cell !important; width: auto !important; padding: 4px 6px !important; border-bottom: 1px solid #bbb !important; text-align: left !important; }
  .dt th.r, .dt td.r, .dt td.w { text-align: right !important; }
  .dt td::before { content: none !important; display: none !important; }
  .kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; border: 0 !important; gap: 6px; }
  .kpi, .kpi.is-ruby, .kpi.is-ink { padding: 6px 8px !important; border: 1px solid #999 !important; background: #fff !important; color: #000 !important; border-radius: 0 !important; }
  .kpi span, .kpi small { color: #333 !important; } .kpi b { font-size: 15px !important; color: #000 !important; }
  .inv-pg { background: #fff !important; }
  .inv { max-width: none; border: 0; border-top: 4px solid var(--ruby); padding: 8px 0 0; }
}

@media screen and (max-width: 760px) { .dt tr.is-void td { text-decoration: none; } }

/* Bodoni's display cut thins commas and decimal points to hairlines, and 3.400 g must never read as 3 400 g:
   every figure set in the serif uses its small-text optical size, which has full-weight punctuation */
.kpi b, .rate b, .list .amt, .wline .net b, .wline .val b, .sum__total b, .inv__tot .big b { font-variation-settings: "opsz" 6; font-optical-sizing: none; }