/* Product: Zoho Books - page-specific design.
   Shared Zoho blue accent. The mechanic is a bank-reconciliation matcher: click a bank
   transaction, watch it connect to its matching open invoice (or reveal the deliberate
   no-match decoy) - distinct from every other page: a two-column matching interaction.

   All classes scoped to .bks2-page, prefixed bks2- (bks- is already taken by BackStage). */

.bks2-page { --bks2: #226eb3; --bks2-d: #17517f; --bks2-l: #eaf2f9; }

.bks2-page .ph-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; font-weight: 700; font-size: .9rem; color: #fff;
  margin-block-end: 18px;
}
.bks2-page .ph-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }

/* ------------------------------------------------------------------------ match -- */
.bks2-match { padding: clamp(48px, 7vw, 84px) 0; }
.bks2-match h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0 0 12px; }
.bks2-match .lede { max-width: 82ch; }

.bks2-board {
  margin-block-start: 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.bks2-col-t { margin: 0 0 12px; font-weight: 800; font-size: .88rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

.bks2-tx {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font: inherit; cursor: pointer; text-align: start;
  padding: 13px 16px; margin-block-end: 10px; border-radius: 12px;
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.bks2-tx b { color: var(--bks2-d); font-weight: 800; }
.bks2-tx:hover { border-color: color-mix(in srgb, var(--bks2) 45%, var(--line)); }
.bks2-tx.is-active { border-color: var(--bks2-d); background: var(--bks2-l); transform: translateX(-3px); }
[dir="rtl"] .bks2-tx.is-active { transform: translateX(3px); }

.bks2-inv {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; margin-block-end: 10px; border-radius: 12px;
  background: var(--paper, #f7f9fa); border: 1.5px dashed var(--line); color: var(--muted);
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.bks2-inv b { font-weight: 800; }
.bks2-inv.is-match {
  border: 1.5px solid #4a9d6e; background: color-mix(in srgb, #4a9d6e 8%, var(--white)); color: var(--ink);
}
.bks2-inv.is-match b { color: #1f6e42; }
.bks2-inv.is-in { animation: bks2-pop .35s ease-out; }
@keyframes bks2-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bks2-inv.is-in { animation: none; } }

.bks2-note { margin: 18px 0 0; padding-block-start: 16px; border-block-start: 1px solid var(--line); color: var(--ink); font-weight: 600; min-height: 1.6em; }

/* ------------------------------------------------------------------------ need -- */
.bks2-need {
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--bks2-l);
  border-block: 1px solid color-mix(in srgb, var(--bks2) 18%, var(--line));
}
.bks2-need h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 0 0 12px; }
.bks2-need .lede { max-width: 82ch; margin: 0; }

/* ------------------------------------------------------------------------- caps -- */
.bks2-caps { padding: clamp(48px, 7vw, 84px) 0; }
.bks2-caps h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 22px; }
.bks2-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.bks2-cap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.bks2-cap b { display: block; margin-block-end: 6px; font-size: 1.02rem; color: var(--bks2-d); }
.bks2-cap p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ----------------------------------------------------------------------- move -- */
.bks2-move { padding: clamp(48px, 7vw, 84px) 0; }
.bks2-move h2 { font-size: 1.35rem; margin: 0 0 10px; }
.bks2-move h3 { font-size: 1.08rem; }

@media (max-width: 700px) {
  .bks2-board { grid-template-columns: 1fr; }
  .bks2-tx.is-active { transform: none; }
}