/* Bookkeeping: the opener's bank feed and the reconciliation set piece (includes/svc/set-book.php). */

/* ---------- Opener document: a bank feed ticking off ---------- */
.doc__feed li { gap: 9px; }
.doc__feed li span { flex: 1 1 auto; min-width: 0; }
.doc__feed li b { font-weight: 700; white-space: nowrap; }
.doc--book .doc__stamp { width: 142px; right: -70px; }
.doc--book .doc__stamp span { font-size: 1.02rem; letter-spacing: .04em; }
@media (max-width: 560px) { .doc--book .doc__stamp { width: 118px; right: -10px; } .doc--book .doc__stamp span { font-size: .9rem; } }

/* ---------- Reconciliation ---------- */
.rc { --pitch: 74px; position: relative; overflow: clip; }
.rc__ruling { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(255,255,255,.04) 35px, rgba(255,255,255,.04) 36px); animation: so-drift-36 22s linear infinite; }
.rc__ruling::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(20px, 4.4vw, 70px); width: 1px; background: rgba(163,24,62,.6); }
.rc__oval { position: absolute; left: -18vw; top: 50%; width: min(1000px, 70vw); transform: translateY(-50%); overflow: visible; pointer-events: none; }
.rc__oval ellipse { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1.4; }
.rc__oval .dash { stroke: rgba(242,214,75,.22); stroke-dasharray: 3 12; animation: dash-turn 50s linear infinite; }
.rc__pin { position: relative; }
.rc__grid { position: relative; display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.rc h2 { color: #fff; margin-bottom: 18px; }
.rc__count { margin-top: clamp(22px, 3.4vh, 34px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); }
.rc__num { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; }
.rc__num b { min-width: 1.1ch; font-weight: 600; font-size: clamp(3.4rem, 5vw, 4.8rem); line-height: .9; letter-spacing: -.03em; color: var(--highlight); }
.rc__num span { font-weight: 700; font-size: 1.1rem; color: #fff; }
.rc__meter { height: 4px; margin-bottom: 14px; background: rgba(255,255,255,.16); }
.rc__meter i { display: block; height: 100%; background: var(--highlight); transform-origin: left; }
.rc__small { margin: 0; font-size: .98rem; color: var(--on-dark-soft); }

.rc__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(56px, .46fr) minmax(0, 1fr); padding: 22px 0 10px; }
.rc__colh { grid-row: 1; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .98rem; color: var(--on-dark-soft); }
.rc__colh--bank { grid-column: 1; }
.rc__colh--paper { grid-column: 3; }
.rc__live { width: 9px; height: 9px; border-radius: 50%; background: var(--highlight); animation: rc-pulse 2s infinite; }
@keyframes rc-pulse { 0% { box-shadow: 0 0 0 0 rgba(242,214,75,.5); } 70% { box-shadow: 0 0 0 9px rgba(242,214,75,0); } 100% { box-shadow: 0 0 0 0 rgba(242,214,75,0); } }

.rc__bank, .rc__papers { grid-row: 2; position: relative; display: grid; grid-auto-rows: var(--pitch); align-items: center; margin: 0; padding: 0; list-style: none; }
.rc__bank { grid-column: 1; }
.rc__papers { grid-column: 3; }
.rc__line, .rc__paper { --m: 1; position: relative; height: calc(var(--pitch) - 14px); }
.rc__line { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 14px; color: #fff; background: rgba(255,255,255,.06); border-left: 3px solid rgba(255,255,255,.28); }
.rc__line::before { content: ''; position: absolute; inset: 0 0 0 -3px; border-left: 3px solid var(--highlight); background: rgba(242,214,75,.09); opacity: var(--m); pointer-events: none; }
.rc__date { flex: none; width: 3.6em; font-size: .92rem; color: var(--on-dark-soft); }
.rc__payee { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.25; }
.rc__amt { flex: none; font-weight: 700; white-space: nowrap; }
.rc__amt.is-in { color: #B9E6C4; }
.rc__ok { position: absolute; right: 10px; top: -10px; padding: 1px 8px; background: var(--highlight); color: var(--ink); font-weight: 700; font-size: .8rem; line-height: 1.4; opacity: var(--m); }
/* The receipts: white paper slips with a torn right edge */
.rc__paper { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 12px; padding: 0 22px 0 16px; background: #fff; color: var(--ink); border-left: 3px solid #D9C9CE; box-shadow: 0 14px 30px rgba(0,0,0,.32); }
.rc__paper::before { content: ''; position: absolute; inset: 0 auto 0 -3px; width: 3px; background: var(--highlight); opacity: var(--m); }
.rc__paper::after { content: ''; position: absolute; top: 0; bottom: 0; right: -7px; width: 8px; background: linear-gradient(-45deg, transparent 5px, #fff 0) 0 0 / 8px 10px repeat-y, linear-gradient(-135deg, transparent 5px, #fff 0) 0 0 / 8px 10px repeat-y; }
.rc__kind { grid-column: 1; font-weight: 700; font-size: .95rem; color: var(--claret); line-height: 1.25; }
.rc__detail { grid-column: 1; font-size: .9rem; color: var(--ink-soft); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc__pamt { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; white-space: nowrap; }

.rc__links { grid-column: 2; grid-row: 2; width: 100%; height: 100%; overflow: visible; }
.rc__links path { fill: none; stroke: var(--highlight); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Live: svc-book.js redraws the curves in screen pixels so DrawSVG measures them correctly */
.rc--live .rc__links path { vector-effect: none; }
.rc__ticks { grid-column: 2; grid-row: 2; position: relative; pointer-events: none; }
.rc__ticks i { position: absolute; left: 100%; width: 26px; height: 26px; margin: -13px 0 0 -19px; z-index: 2; border-radius: 50%; background: var(--highlight); box-shadow: 0 0 0 4px var(--ink-blue); }
.rc__ticks svg { width: 100%; height: 100%; }
.rc__ticks path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.rc__total { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 10px 0 0; padding-top: 12px; border-top: 2px solid rgba(255,255,255,.5); font-weight: 700; color: #fff; }
.rc__total b { color: var(--highlight); font-size: 1.15rem; white-space: nowrap; }
.rc__stamp { position: absolute; left: 50%; bottom: -26px; margin-left: -60px; z-index: 3; width: 196px; height: 112px; display: grid; place-content: center; text-align: center; border: 3px solid var(--highlight); outline: 1.5px solid var(--highlight); outline-offset: -10px; border-radius: 50%; color: var(--highlight); background: rgba(19,32,47,.88); transform: rotate(-9deg); pointer-events: none; }
.rc__stamp span { font-family: var(--serif); font-size: 1.5rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.rc__stamp small { margin-top: 4px; font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }

/* A scan line runs down the live bank feed */
.motion .rc__bank::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, rgba(242,214,75,0), rgba(242,214,75,.13), rgba(242,214,75,0)); animation: rc-scan 4.2s linear infinite; pointer-events: none; }
@keyframes rc-scan { from { transform: translateY(-36px); } to { transform: translateY(calc(var(--rows) * var(--pitch))); } }

/* Desktop: pinned and scrubbed */
.rc.rc--pin { padding-block: 0; }
.rc--pin .rc__pin { height: 100svh; min-height: 620px; display: flex; align-items: center; padding: calc(var(--head-h) + 10px) 0 24px; }
.rc--pin .rc__pin > .wrap { width: min(1320px, 100% - var(--gutter) * 2); }
@media (min-width: 901px) and (max-height: 820px) { .rc { --pitch: 64px; } .rc--pin .rc__count .rc__small { display: none; } }

@media (max-width: 1100px) and (min-width: 901px) { .rc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .rc__date { display: none; } }
@media (max-width: 900px) {
  .rc { --pitch: 82px; }
  .rc__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rc__stage { grid-template-columns: minmax(0, 1fr) 40px minmax(0, .92fr); }
  .rc__line { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "payee payee" "date amt"; align-content: center; gap: 2px 10px; padding: 0 10px 0 11px; }
  .rc__payee { grid-area: payee; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc__date { grid-area: date; width: auto; font-size: .88rem; }
  .rc__amt { grid-area: amt; justify-self: end; font-size: .98rem; }
  .rc__paper { grid-template-columns: minmax(0, 1fr); padding: 0 14px 0 11px; }
  .rc__pamt { grid-column: 1; grid-row: auto; justify-self: start; }
  .rc__detail { display: none; }
  .rc__ticks i { width: 22px; height: 22px; margin: -11px 0 0 -16px; box-shadow: 0 0 0 3px var(--ink-blue); }
  .rc__stamp { left: auto; right: -4px; margin-left: 0; bottom: -18px; width: 146px; height: 86px; }
  .rc__stamp span { font-size: .98rem; }
  .rc__total { flex-direction: column; align-items: flex-start; gap: 2px; font-size: .98rem; }
}
@media (max-width: 560px) { .rc__ruling::before { display: none; } }