/* Cashbook: an open-book page. Headline column, then a two-page cashbook spread under the galla balance; cash vs UPI;
   the four tabs as a row of ledger columns; expenses by category as a bar figure. */

.cb-hero { padding-top: 124px; padding-bottom: clamp(50px, 8vh, 90px) }
.cb-head { max-width: 1040px; margin-bottom: 34px }
.cb-head .h-xl { font-size: clamp(38px, 4.6vw, 68px); max-width: 17ch }
.cb-sub { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 4vw; align-items: end } .cb-sub .cta-row { margin-top: 0 }

/* the book */
.bk { border-radius: 18px; background: #F4EEE2; border: 1px solid #E5DBC6; padding: 16px; box-shadow: 0 50px 90px -60px rgba(70,45,10,.45) }
.bk-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); gap: 12px }
.bk-galla, .bk-upi, .bk-rec { border-radius: 14px; padding: 16px 18px }
.bk-galla { background: linear-gradient(140deg, #0B4D3B, #00795C); color: #fff }
.bk-galla small, .bk-upi small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85 }
.bk-galla b { display: block; font: 800 clamp(30px, 3.2vw, 44px)/1.15 var(--font); letter-spacing: -0.02em; margin: 4px 0 2px } .bk-galla span { font-size: 13.5px; color: #CDEFE3 }
.bk-upi { background: #fff; border: 1px solid #E5DBC6 } .bk-upi small { color: var(--link); opacity: 1 } .bk-upi b { display: block; font: 800 26px/1.2 var(--font); margin-top: 6px; color: var(--ink) }
.bk-rec { background: #fff; border: 1px solid #E5DBC6 } .bk-rec label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px }
.bk-count { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 10px; padding: 4px 4px 4px 12px }
.bk-count:focus-within { border-color: var(--sky-dark) } .bk-count span { font-weight: 700; color: var(--muted) }
.bk-count input { all: unset; flex: 1; min-width: 0; font: 800 20px/1 var(--font); color: var(--ink); padding: 8px 0 } .bk-count .kb { padding: 10px 12px; font-size: 14px }

.bk-add { margin: 14px 2px 12px } .bk-add .tag { margin: 0 10px 0 0 } .bk-hint { font-weight: 600; font-size: 15px; color: #4A3B22 }
.bk-evs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.ev { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; padding: 9px 13px; border-radius: 999px; background: #fff; border: 1.5px solid #E5DBC6; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: border-color .15s, transform .1s }
.ev:hover { border-color: #C9B78F } .ev:active { transform: scale(.97) } .ev:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px }
.ev-in b { color: #0B7A5B } .ev-out b { color: var(--red) }

.bk-pages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #FFFDF7; border-radius: 10px; border: 1px solid #E5DBC6; position: relative; min-height: 290px }
.bk-pages::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 18px; margin-left: -9px; background: linear-gradient(90deg, rgba(120,90,40,0), rgba(120,90,40,.12), rgba(120,90,40,0)) }
.bk-page { padding: 16px 22px 18px }
.bk-page h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase }
.bk-in h2 { color: #0B6B50 } .bk-out h2 { color: var(--red) } .bk-page h2 b { font-size: 19px; letter-spacing: 0 }
.bk-page ol { list-style: none; margin: 0; padding: 0 }
.bk-page h2 { padding-bottom: 8px; border-bottom: 1.5px solid #E5DBC6 }
.bk-page li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed #EFE5D0 }
.bk-page li.new { animation: bk-in .35s cubic-bezier(.2,.7,.2,1) } @keyframes bk-in { from { opacity: 0; transform: translateY(-6px) } }
.bk-t { font-size: 12.5px; color: var(--faint) } .bk-page li div b { display: block; font-size: 14.5px } .bk-page li small { font-size: 12px; color: var(--faint) }
.bk-a { font-size: 15.5px } .bk-in .bk-a { color: #0B7A5B } .bk-out .bk-a { color: var(--red) }
.bk-page li.is-upi .bk-a::after { content: " UPI"; font-size: 10.5px; font-weight: 800; color: var(--link) }
.bk-empty { display: block !important; color: #6E5E40; font-size: 14.5px; padding-top: 8px !important }
.bk-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 4px 0 }
.bk-reset { all: unset; cursor: pointer; color: var(--link); font-weight: 600; font-size: 14.5px } .bk-reset:hover { text-decoration: underline } .bk-reset:focus-visible { outline: 3px solid var(--sky-dark) }

/* cash vs UPI */
.cb-apart { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 6vw; align-items: center }
.ap-text .lead + .lead { margin-top: 12px }
.ap-two { display: grid; gap: 12px }
.ap-col { padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--c) }
.ap-cash { --c: #00795C } .ap-upi { --c: var(--link) }
.ap-col b { display: block; font-size: 18px; margin-bottom: 8px } .ap-col ul { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 4px }

/* four tabs */
.cb-tabs { background: linear-gradient(180deg, var(--bg), #F6F1E7 25%, #F6F1E7 75%, var(--bg)) }
.tb-row { list-style: none; margin: 34px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink) }
.tb-row li { padding: 20px 22px 6px 0 } .tb-row li + li { padding-left: 22px; border-left: 1px solid #E5DBC6 }
.tb-name { display: inline-block; padding: 5px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px }
.tb-row p { margin: 10px 0 12px; color: var(--muted); font-size: 15.5px }
.tb-row dl { margin: 0 0 10px; display: grid; gap: 4px } .tb-row dl div { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px } .tb-row dt { color: var(--faint) } .tb-row dd { margin: 0; font-weight: 800 }
.tb-row a { color: var(--link); font-weight: 700; font-size: 14.5px; text-decoration: none } .tb-row a:hover { text-decoration: underline }

/* where it went */
.cb-where { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6vw; align-items: center }
.wh-pdf { margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--sky); color: #2F3640 }
.wh-fig { margin: 0; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--border) }
.wh-fig figcaption { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px }
.wh-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.wh-bars li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 80px; gap: 12px; align-items: center; font-size: 14.5px }
.wh-bars i { height: 12px; border-radius: 99px; background: #F1F4F8; overflow: hidden } .wh-bars em { display: block; height: 100%; border-radius: 99px; background: var(--red); opacity: .8 }
.wh-bars b { text-align: right }
.wh-tot { display: flex; justify-content: space-between; margin: 14px 0 0; padding-top: 12px; border-top: 2px solid var(--ink); font-weight: 700 } .wh-tot b { font-size: 19px }

@media (max-width: 1100px) { .bk-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .bk-rec { grid-column: 1 / -1 } }
@media (max-width: 980px) {
  .cb-hero { padding-top: 104px } .cb-sub { grid-template-columns: minmax(0, 1fr); gap: 0 } .cb-sub .cta-row { margin-top: 24px }
  .bk { padding: 10px } .bk-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 8px } .bk-galla, .bk-upi, .bk-rec { padding: 12px }
  .bk-galla b { font-size: 24px } .bk-galla span { font-size: 11.5px; display: block } .bk-upi b { font-size: 19px } .bk-galla small, .bk-upi small { font-size: 10.5px }
  .bk-rec label { margin-bottom: 6px }
  .bk-evs { flex-wrap: nowrap; overflow-x: auto; margin: 12px -10px 0; padding: 0 10px 6px } .ev { flex: none; white-space: nowrap }
  .bk-pages { grid-template-columns: minmax(0, 1fr); min-height: 0 } .bk-pages::before { display: none } .bk-out { border-top: 1px dashed #E5DBC6 }
  .bk-page { padding: 14px } .bk-page li { grid-template-columns: 56px minmax(0, 1fr) auto }
  .cb-apart, .cb-where { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .tb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .tb-row li:nth-child(3) { padding-left: 0; border-left: 0 }
  .wh-bars li { grid-template-columns: 100px minmax(0, 1fr) 70px; gap: 8px }
}
@media (max-width: 560px) { .tb-row { grid-template-columns: minmax(0, 1fr) } .tb-row li, .tb-row li + li { padding-left: 0; border-left: 0; border-bottom: 1px solid #E5DBC6 } }
@media (prefers-reduced-motion: reduce) { .bk-page li.new { animation: none } .ev { transition: none } }