/* Customer khata: "questions at the counter". Headline beside the counter (Ramesh's questions + the live ledger
   phone); the printed statement; four ways in; the overdue reminder. App colours follow ledger_balance_card.dart. */

.kh-hero { padding-top: 124px; padding-bottom: clamp(50px, 8vh, 90px); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3.5vw; align-items: center }
.kh-text .h-xl { font-size: clamp(38px, 4vw, 62px); max-width: 13ch }

/* the counter: the customer's questions on the left, your phone on the right */
.kh-counter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 26px; border-radius: 26px;
  background: linear-gradient(160deg, #EAF4FF, #F6FAFF 60%); border: 1px solid var(--border) }
.kh-intro { margin: 0 0 14px; font-weight: 600; color: #2F3640 } .kh-intro .tag { margin: 0 10px 0 0 }
.kh-asks { display: grid; gap: 10px; justify-items: start } .kh-talk { min-width: 0; max-width: 300px }
.ask { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; white-space: nowrap; align-items: center; gap: 10px; padding: 11px 16px 11px 11px; border-radius: 18px 18px 18px 4px;
  background: #fff; border: 1.5px solid var(--border); font-weight: 600; font-size: 15.5px; color: var(--ink); box-shadow: 0 8px 20px -14px rgba(0,49,91,.4); transition: border-color .15s, transform .1s }
.ask:hover { border-color: #A9CDF2 } .ask:active { transform: scale(.98) } .ask:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px }
.ask[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff }
.ask-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFDCC4; color: #7A3E00; font-weight: 800; font-size: 13px }
.kh-reply { margin: 16px 0 0 auto; max-width: 300px; min-height: 64px; padding: 11px 15px; border-radius: 18px 18px 4px 18px; background: #DCF3FF; border: 1px solid #B8E3FA; visibility: hidden }
.kh-reply.on { visibility: visible; animation: kh-pop .3s cubic-bezier(.2,.7,.2,1) }
.kh-reply small { display: block; font-size: 12px; font-weight: 700; color: var(--link) } .kh-reply p { margin: 2px 0 0; font-weight: 600; color: var(--ink) }
@keyframes kh-pop { from { opacity: 0; transform: translateY(6px) } }
.kh-eg { margin: 18px 0 0 } .kh-reset { all: unset; cursor: pointer; margin-left: 6px; color: var(--link); font-weight: 600 } .kh-reset:hover { text-decoration: underline } .kh-reset:focus-visible { outline: 3px solid var(--sky-dark) }

/* the app screen inside the phone */
.kh-dev { width: 310px }
.kh-dev .dev-scr { background: #F4F7FC; font-size: 13px }
.ap-head { display: flex; align-items: center; gap: 10px; padding: 40px 14px 10px; background: #fff }
.ap-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFDCC4; color: #7A3E00; font-weight: 800 }
.ap-head b { display: block; font-size: 15px } .ap-head small { color: var(--faint); font-size: 11.5px }
.ap-card { margin: 8px 10px 0; padding: 12px; border-radius: 16px; background: linear-gradient(150deg, #0B2545, #13315C); color: #fff; transition: box-shadow .25s }
.ap-card.hl { box-shadow: 0 0 0 3px var(--sky), 0 0 0 7px rgba(56,189,248,.25) }
.ap-st { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .07em; color: rgba(255,255,255,.75) }
.ap-st i { width: 8px; height: 8px; border-radius: 50%; background: #F43F5E } .ap-card.ok .ap-st i { background: #34D399 }
.ap-bal { margin: 4px 0 8px; color: rgba(255,255,255,.75) } .ap-bal b { font-size: 25px; color: #fff; letter-spacing: -0.01em }
.ap-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.ap-sum div { padding: 6px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); text-align: center }
.ap-sum small { display: block; font-size: 10px; color: rgba(255,255,255,.75) } .ap-sum b { font-size: 13.5px } .ap-sum .pd b { color: #5EEAD4 }
.ap-pills { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 5px; margin-top: 8px }
.ap-pills span { padding: 6px 4px; border-radius: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); text-align: center; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s }
.ap-pills span.set { background: #FF8A00; border-color: #FF8A00 }

.ap-list { list-style: none; margin: 8px 0 0; padding: 0 10px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none }
.ap-list:focus-visible { outline: 2px solid var(--sky-dark); outline-offset: -2px }
.ap-list li { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; margin-bottom: 6px; border-radius: 12px; background: #fff; border: 1px solid #E3ECF8; transition: box-shadow .25s, border-color .25s }
.ap-list li b { display: block; font-size: 12.5px; line-height: 1.25 } .ap-list li small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--faint) }
.ap-list .amt { flex: none; text-align: right } .ap-list .cr .amt b { color: var(--red) } .ap-list .pay .amt b { color: #047857 }
.ap-list li.hl { border-color: var(--sky-dark); box-shadow: 0 0 0 3px rgba(56,189,248,.3) }
.ap-list li.new { animation: kh-pop .35s cubic-bezier(.2,.7,.2,1) }
.ap-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px 14px; background: #fff; border-top: 1px solid #E3ECF8 }
.ap-bar button, .ap-chips button, .ap-modes button, .ap-sh-acts button { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; font-weight: 700; border-radius: 10px }
.ap-bar button { padding: 10px 4px; font-size: 13px; color: #fff } .ap-bar .ap-pay { background: #047857 } .ap-bar .ap-give { background: var(--ink) }
.ap-bar button:focus-visible, .ap-sheet button:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px }

/* Record Payment sheet */
.ap-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 14px 18px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -18px 40px -12px rgba(31,35,40,.35) }
.ap-sheet[hidden] { display: none } .ap-sheet:not([hidden]) { animation: kh-up .25s cubic-bezier(.2,.7,.2,1) } @keyframes kh-up { from { transform: translateY(30px); opacity: 0 } }
.ap-sh-t { font-size: 15px } .ap-amt { margin: 8px 0 10px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--border); font-size: 20px; font-weight: 800 }
.ap-chips, .ap-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.ap-chips button { padding: 7px 10px; font-size: 12px; background: #EAF2FD; color: var(--link) } .ap-chips [data-full] { background: #E3F7EF; color: #047857 }
.ap-modes button { padding: 7px 12px; font-size: 12px; background: #F1F4F8; color: var(--muted) } .ap-modes [aria-pressed="true"] { background: var(--ink); color: #fff }
.ap-sh-acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px } .ap-sh-acts button { padding: 11px 4px; font-size: 13px }
.ap-sh-acts .ap-cancel { background: #F1F4F8; color: var(--muted) } .ap-sh-acts .ap-save { background: #047857; color: #fff } .ap-sh-acts .ap-save:disabled { opacity: .45; cursor: default }

/* the printed statement */
.kh-proof { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 6vw; align-items: center }
.kh-sheet { margin: 0; padding: 26px 26px 18px; background: #fff; border: 1px solid #E3E8EF; border-radius: 4px; box-shadow: 0 30px 60px -40px rgba(31,35,40,.45), 0 2px 0 #EEF1F5, 0 4px 0 #F6F8FA; transform: rotate(-.6deg) }
.sh-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink) }
.sh-top b { font-size: 18px } .sh-top span { font-size: 13.5px; color: var(--faint) }
.kh-sheet table { width: 100%; border-collapse: collapse; font-size: 14px }
.kh-sheet th, .kh-sheet td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #EDF1F6 } .kh-sheet th:first-child, .kh-sheet td:first-child { padding-left: 0 }
.kh-sheet thead th { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint) }
.kh-sheet td:nth-child(3), .kh-sheet td:nth-child(4), .kh-sheet thead th:nth-child(3), .kh-sheet thead th:nth-child(4) { text-align: right } .kh-sheet td:nth-child(4) { font-weight: 700 }
.kh-sheet td:first-child { white-space: nowrap; color: var(--muted) }
.kh-sheet tfoot th, .kh-sheet tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-size: 15.5px; text-align: right } .kh-sheet tfoot td { color: var(--red); font-weight: 800; white-space: nowrap }
.kh-sheet figcaption { margin-top: 12px; font-size: 13px; color: var(--faint) }
.pr-pts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px }
.pr-pts li { padding-left: 18px; border-left: 3px solid var(--sky) } .pr-pts b { display: block; font-size: 17px } .pr-pts span { color: var(--muted) }

/* four ways in */
.kh-ways { background: linear-gradient(180deg, var(--bg), #EEF5FE 25%, #EEF5FE 75%, var(--bg)) }
.wy-list { list-style: none; margin: 38px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 2px solid var(--ink) }
.wy-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px; padding: 26px 28px 26px 0; border-bottom: 1px solid #D5E3F5 }
.wy-list li:nth-child(even) { padding-left: 28px; border-left: 1px solid #D5E3F5 }
.wy-n { font: 800 34px/1 var(--font); color: var(--sky-dark) }
.wy-list p { margin: 8px 0 0; color: var(--muted) } .wy-list a { display: inline-block; margin-top: 10px; color: var(--link); font-weight: 700; text-decoration: none } .wy-list a:hover { text-decoration: underline }
.wy-terms { margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--border) }
.wy-terms small { display: block; font-size: 12.5px; font-weight: 700; color: var(--faint) }
.wy-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.wy-chips button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--border); font-size: 14px; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s }
.wy-chips button:hover { border-color: #A9CDF2 } .wy-chips button:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px }
.wy-chips button[aria-pressed="true"] { background: #FFF1E2; border-color: #FF8A00; color: #7A3E00 }
.wy-due { margin: 10px 0 0 !important; font-weight: 700; color: #7A3E00 !important }

/* the reminder */
.kh-remind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: center }
.rm-link { display: inline-block; margin-top: 18px; color: var(--link); font-weight: 700; text-decoration: none } .rm-link:hover { text-decoration: underline }
.rm-wa { margin: 0; padding: 26px; border-radius: 22px; background: #E9E2D6 }
.rm-wa blockquote { margin: 0; max-width: 420px; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: #fff; font-size: 15.5px; line-height: 1.5; color: #1B2733; box-shadow: 0 1px 1px rgba(0,0,0,.08) }
.rm-wa figcaption { margin-top: 10px; font-size: 13px; color: #5B5446 }

@media (max-width: 1180px) { .kh-hero { grid-template-columns: minmax(0, 1fr); gap: 34px } .kh-text .h-xl { max-width: 16ch } }
@media (max-width: 980px) {
  .kh-hero { padding-top: 104px }
  .kh-proof, .kh-remind { grid-template-columns: minmax(0, 1fr); gap: 30px }
  .kh-sheet { transform: none; padding: 18px 14px 14px; order: 2 } .kh-sheet table { font-size: 12.5px } .kh-sheet th, .kh-sheet td { padding: 8px 4px }
  .wy-list { grid-template-columns: minmax(0, 1fr) } .wy-list li, .wy-list li:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0 }
}
@media (max-width: 700px) {
  .kh-counter { grid-template-columns: minmax(0, 1fr); padding: 16px; justify-items: center } .kh-talk { width: 100%; max-width: none } .ask { white-space: normal }
  .kh-reply { margin-top: 12px }
}
@media (max-width: 420px) { .kh-sheet td:first-child { white-space: normal } .wy-list li { grid-template-columns: 38px minmax(0, 1fr) } .wy-n { font-size: 26px } }
@media (prefers-reduced-motion: reduce) { .ask, .ap-card, .ap-list li, .ap-pills span, .wy-chips button { transition: none } .kh-reply.on, .ap-list li.new, .ap-sheet:not([hidden]) { animation: none } }