/* Toko Kelontong Kinos. Designed for iPad first (two columns from 720px), still usable on a phone.
   One light "paper" look: dotted paper, painted awning, hanging sign with plants (from Sumur Di Ladang).
   Type: Lilita One for the shop name only, Outfit for everything else. No round dots as separators. */
:root {
  --paper: #fbf8f1; --dots: #e2dbcd; --white: #fffefa; --ink: #2a2622; --muted: #766c60; --soft: #5a6584;
  --sign: #dce3f7; --accent: #36509a; --pinkd: #c2457a; --green: #3f7a3a; --greend: #24533b;
  --dash: #b4a993; --track: #efe9dc; --line: #e4ddcf; --tint: #f6f1e6;
  --font: "Outfit", system-ui, sans-serif; --title: "Lilita One", "Outfit", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--paper) radial-gradient(var(--dots) 1.1px, transparent 1.3px) 0 0 / 16px 16px;
  color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.4;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
a { color: var(--accent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.app { max-width: 440px; margin: 0 auto; }

/* awning */
.awning { margin: 12px -6px 0; height: 46px; }
.awning svg { display: block; width: 100%; height: 46px; overflow: visible; }

/* hanging sign */
.hang { position: relative; height: 226px; }
.nail { position: absolute; left: 50%; top: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9d2c6, #6b6158 70%); box-shadow: 0 2px 2px rgba(0,0,0,.25); z-index: 3; }
.swing { position: absolute; left: 50%; top: 12px; width: 0; height: 0; transform-origin: 0 0; animation: swing 4.5s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-4.5deg); } 50% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .swing { animation: none; transform: rotate(-3deg); } }
.strings { position: absolute; left: -165px; top: 0; width: 330px; height: 76px; overflow: visible; }
.sign { position: absolute; left: -165px; top: 72px; width: 330px; height: 104px; filter: drop-shadow(0 6px 6px rgba(40,25,10,.18)); }
.sign svg.fr { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sign svg.flora { position: absolute; left: 0; top: 0; width: 330px; height: 104px; overflow: visible; z-index: 1; pointer-events: none; }
.sign .row { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 72px; padding: 12px 18px 0; }
.sign .row svg { flex: none; }
.sign h1 { margin: 0; font-family: var(--title); font-weight: 400; font-size: 27px; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.sign .date { position: absolute; right: 24px; bottom: 10px; font-size: 12px; font-weight: 500; color: var(--soft); white-space: nowrap; }
.sign .cat { position: absolute; left: 96px; top: -78px; width: 72px; z-index: 2; }
.cat svg { display: block; width: 100%; height: auto; }
.sticker { filter: drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper)) drop-shadow(0 2px 0 var(--paper)) drop-shadow(0 -2px 0 var(--paper)) drop-shadow(0 6px 8px rgba(40,25,10,.2)); }
.namebub { position: absolute; z-index: 3; left: 6px; top: -64px; transform: rotate(-4deg); padding: 1px 10px 2px; background: var(--white);
  border: 1.6px solid var(--ink); border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; box-shadow: 0 2px 4px rgba(40,25,10,.15); }
.namebub::after { content: ""; position: absolute; right: -6px; bottom: 6px; width: 9px; height: 9px; background: var(--white); border: solid var(--ink); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.chalk { position: absolute; left: 0; bottom: -2px; z-index: 4; transform: rotate(-3deg); }
.handle { text-align: center; font-size: 13px; color: var(--soft); margin-top: -6px; }
@media (max-width: 370px) { .hang { transform: scale(.9); transform-origin: 50% 0; } }

/* segmented tabs */
.tabs { display: flex; margin: 14px 0 6px; background: var(--track); border-radius: 12px; padding: 4px; }
.tabs button { flex: 1; font-size: 15px; font-weight: 600; line-height: 1; padding: 11px 6px; background: none; border: 0; border-radius: 9px; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(40,25,10,.18); }

/* boards and forms */
.board { position: relative; margin: 12px 2px; padding: 16px 14px 14px; background: var(--white); border-radius: 3px; display: grid; gap: 10px; min-width: 0;
  box-shadow: 0 0 0 1px rgba(42,38,34,.07), 0 1px 2px rgba(40,25,10,.16), 0 8px 18px rgba(40,25,10,.10); }
.board h2 { margin: 0; font-weight: 700; font-size: 19px; line-height: 1.1; }
label { display: grid; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; min-width: 0; }
input, select { width: 100%; min-height: 40px; padding: 8px 2px 6px; border: 0; border-bottom: 1.6px dashed var(--dash); background: transparent; font-size: 16px; font-weight: 400;
  text-transform: none; letter-spacing: 0; border-radius: 0; color: var(--ink); }
input:focus, select:focus { border-bottom-color: var(--accent); outline: none; }
input.bad { border-bottom-color: var(--pinkd); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.items { display: grid; gap: 8px; padding: 10px; background: var(--tint); border-radius: 6px; }
.item { display: grid; grid-template-columns: 1.8fr .9fr .5fr auto; gap: 8px; align-items: end; }
.item .tyname { grid-column: 1 / -1; margin-top: -4px; }
.x { border: 0; background: none; font-size: 22px; color: var(--muted); padding: 4px 6px; }
.btn { font-size: 16px; font-weight: 600; line-height: 1; padding: 13px 16px; border-radius: 12px; border: 0; background: var(--accent); color: var(--white);
  box-shadow: 0 1px 2px rgba(20,30,70,.2), 0 4px 10px rgba(54,80,154,.22); }
.btn.ghost { background: var(--white); color: var(--accent); box-shadow: none; border: 1.5px dashed #b9c6ea; }
.btn.warn { background: var(--white); color: var(--pinkd); box-shadow: none; border: 1.5px dashed #eab3c8; }
.btn.sm { font-size: 14px; padding: 9px 14px; }
.btn.wide { width: 100%; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; }
.row { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tiny { font-size: 12px; color: var(--muted); }
.err { color: var(--pinkd); font-size: 13px; }

/* summary */
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 2px; background: var(--white); border-radius: 12px; box-shadow: 0 1px 2px rgba(40,25,10,.12), 0 6px 14px rgba(40,25,10,.08); }
.stat { padding: 12px 14px; min-width: 0; }
.stat:nth-child(odd) { border-right: 1px solid var(--line); }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.stat .v { font-size: 19px; font-weight: 700; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat.owe .v { color: var(--pinkd); }

/* status filter */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--track); border-radius: 12px; padding: 4px; gap: 2px; }
.chips button { min-width: 0; border: 0; border-radius: 9px; background: none; padding: 7px 2px; color: var(--muted); display: grid; gap: 1px; }
.chips button b { font-size: 18px; font-weight: 700; line-height: 1.1; }
.chips button span { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(40,25,10,.18); }

/* order cards */
#orders { display: grid; gap: 12px; }
.order { display: grid; gap: 8px; padding: 12px 14px; background: var(--tint); border-radius: 10px; min-width: 0; }
.order .head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cust { font-size: 18px; font-weight: 700; line-height: 1.2; }
.lines { display: grid; gap: 2px; font-size: 13px; }
.lines a { word-break: break-all; }
.tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1.5px solid currentColor; white-space: nowrap; }
.tag.todo { color: var(--pinkd); } .tag.ok { color: var(--green); } .tag.off { color: var(--muted); }
.act { display: grid; gap: 8px; border-top: 1.5px dashed var(--dash); padding-top: 10px; }
.empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }

/* login */
.gate { max-width: 340px; margin: 10px auto 0; display: grid; gap: 12px; text-align: center; }
.gate input { text-align: center; font-size: 26px; letter-spacing: .4em; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.toast.bad { background: var(--pinkd); }

/* invoice sheet (modal) */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(42,38,34,.45); display: grid; place-items: center; padding: 16px; overflow: auto; }
.sheet .panel { background: var(--paper); border-radius: 16px; padding: 16px; width: min(640px, 100%); display: grid; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.sheet .panel h2 { margin: 0; font-size: 19px; }
.previews { display: grid; gap: 10px; }
.previews img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 14px rgba(40,25,10,.18); background: var(--white); }
.capture { position: fixed; left: -10000px; top: 0; }

/* iPad and wider */
@media (min-width: 720px) {
  .app { max-width: 980px; }
  .hang { height: 196px; }
  .chalk { left: calc(50% - 270px); bottom: -24px; }
  .chalk svg { width: 74px; height: 96px; }
  .tabs { max-width: 420px; margin-inline: auto; }
  #v-new:not([hidden]) { display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 18px; align-items: start; }
  .b-cust { grid-column: 1; grid-row: 1; }
  .b-items { grid-column: 2; grid-row: 1; }
  #save { grid-column: 1 / -1; max-width: 420px; width: 100%; justify-self: center; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(-n+2) { border-bottom: 0; }
  .stat:not(:last-child) { border-right: 1px solid var(--line); }
  .chips { grid-template-columns: repeat(7, 1fr); }
  #orders { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- invoice (540 x 675, saved at 2x = 1080 x 1350) ---------- */
.inv { width: 540px; height: 675px; position: relative; overflow: hidden; font-family: var(--font); color: var(--ink);
  background: var(--paper) radial-gradient(var(--dots) 1.1px, transparent 1.3px) 0 0 / 16px 16px; }
.inv .aw { position: absolute; left: -4px; right: -4px; top: 0; height: 46px; }
.inv .aw svg { display: block; width: 100%; height: 46px; overflow: visible; }
.inv .ihead { position: absolute; left: 24px; right: 24px; top: 54px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.inv .isign { position: relative; width: 231px; height: 73px; flex: none; filter: drop-shadow(0 4px 4px rgba(40,25,10,.16)); }
.inv .isign svg.fr, .inv .isign svg.flora { position: absolute; left: 0; top: 0; width: 231px; height: 73px; overflow: visible; }
.inv .isign svg.flora { z-index: 1; }
.inv .isign .r { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding-bottom: 8px; }
.inv .isign h1 { margin: 0; font-family: var(--title); font-weight: 400; font-size: 19px; letter-spacing: .01em; white-space: nowrap; }
.inv .isign .h { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-size: 9px; color: var(--soft); font-weight: 500; }
.inv .kinos { position: absolute; left: -10px; top: -34px; width: 40px; z-index: 2; transform: rotate(-6deg);
  filter: drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper)) drop-shadow(0 2px 0 var(--paper)) drop-shadow(0 -2px 0 var(--paper)) drop-shadow(0 4px 6px rgba(40,25,10,.2)); }
.inv .kinos svg { display: block; width: 100%; height: auto; }
.inv .meta { text-align: right; font-size: 11px; line-height: 1.4; }
.inv .k { font-size: 9px; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.inv .no { font-size: 17px; font-weight: 900; letter-spacing: .02em; color: var(--greend); }
.inv .ibody { position: absolute; left: 24px; right: 24px; top: 142px; bottom: 34px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; }
.inv .card { background: var(--white); border-radius: 12px; box-shadow: 0 1px 2px rgba(40,25,10,.12), 0 5px 12px rgba(40,25,10,.07); }
.inv .billto { font-size: 14px; color: var(--muted); line-height: 1.25; }
.inv .billto b { color: var(--ink); font-size: 19px; font-weight: 800; }
.inv .designs { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 12px; align-content: start; }
.inv .d { padding: 10px; display: grid; gap: 8px; }
.inv .pic { position: relative; height: 158px; border-radius: 10px; background: var(--tint); overflow: hidden; display: grid; place-items: center; font-size: 26px; font-weight: 900; }
.inv .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.inv .t { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.inv .s { font-size: 11px; color: var(--muted); }
.inv .p { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv .row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.inv .designs.one { grid-template-columns: 1fr; }
.inv .designs.one .d { grid-template-columns: 200px 1fr; gap: 16px; align-items: center; padding: 12px; }
.inv .designs.one .pic { height: 200px; }
.inv .designs.one .t { font-size: 22px; font-weight: 800; }
.inv .designs.one .s { font-size: 14px; margin-top: 2px; }
.inv .designs.one .p { font-size: 22px; }
.inv .designs.one .row2 { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 10px; }
.inv .designs.many .d { padding: 8px; gap: 6px; }
.inv .designs.many .pic { height: 132px; }
.inv .designs.many .t { font-size: 12px; } .inv .designs.many .s { font-size: 10px; } .inv .designs.many .p { font-size: 11.5px; }
.inv .designs.many .row2 { flex-direction: column; align-items: flex-start; gap: 2px; }
.inv .designs.full .pic { height: 196px; }
.inv .pay { display: grid; grid-template-columns: 62px 1fr 176px; gap: 14px; padding: 12px 14px; align-items: center; }
.inv .qr { display: block; width: 176px; height: 176px; border-radius: 6px; background: #fff; object-fit: contain; }
.inv .sub { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.inv .sub.disc { color: var(--greend); font-weight: 600; margin-bottom: 8px; }
.inv .big { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.05; }
.inv .how { font-size: 11px; line-height: 1.45; margin-top: 10px; }
.inv .fine { position: absolute; left: 24px; right: 24px; bottom: 12px; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.inv .pageno { position: absolute; right: 24px; top: 128px; font-size: 10px; color: var(--muted); }