/* plan-pages.css — page-specific styles for the planning pages (see planning.css)
   total.html  → body.pg-total   (assets/js/total-budget.js)
   updates.html → body.pg-updates (assets/js/gallery.js) */

/* ═══════════════════════════════════════════════
   TOTAL — confident financial summary
   grand total = volt block (homepage RM58,000), parts = ruled ledger, pool = formula sheet
   ═══════════════════════════════════════════════ */
.pg-total #total-breakdown { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 12px; }
@media (min-width: 900px) {
  .pg-total #total-breakdown { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; row-gap: 72px; align-items: end; }
  .pg-total .tb-grand { grid-column: 1 / 8; grid-row: 1; }
  .pg-total #total-breakdown > .grid-3 { grid-column: 8 / 13; grid-row: 1; margin-left: 12px; }
  .pg-total .tb-pool { grid-column: 1 / -1; }
}
@media (max-width: 899px) { .pg-total .tb-grand { order: -1; } }

/* grand total */
.pg-total .tb-grand { container-type: inline-size; margin: 0; background: var(--volt); color: var(--ink); border-radius: 0; text-align: left; overflow: visible;
  padding: 40px 40px 34px; box-shadow: 0 14px 0 var(--signal); transition: background-color .35s, color .35s, box-shadow .35s; }
.pg-total .tb-grand::after, .pg-total .tb-grand.over::after { content: none; }
.pg-total .tb-grand-label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-body);
  font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.pg-total .tb-grand-label::before { content: ""; width: 22px; height: 3px; background: currentColor; }
.pg-total .tb-grand-amount { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 10vw, 5.4rem); font-size: clamp(2.2rem, 13cqi, 5.4rem);
  line-height: .92; letter-spacing: -0.05em; margin: 20px 0 26px; font-variant-numeric: tabular-nums; }
.pg-total .tb-eq { border-top: 2px solid currentColor; padding-top: 14px; font-size: .92rem; font-weight: 600; color: inherit;
  font-variant-numeric: tabular-nums; }
/* over budget → the whole block flips to signal red, ink underline */
.pg-total .tb-grand.over { background: var(--signal); color: var(--chalk); box-shadow: 0 14px 0 var(--ink); }
.pg-total .tb-grand.over .tb-grand-label { color: var(--chalk); }

/* the three parts → numbered ledger rows */
.pg-total #total-breakdown > .grid-3 { display: block; border-top: 3px solid var(--ink); counter-reset: tb; }
.pg-total .tb-card { counter-increment: tb; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline;
  padding: 20px 6px 18px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; box-shadow: none; transform: none;
  background: linear-gradient(var(--volt), var(--volt)) no-repeat left / 0% 100%;
  transition: background-size .4s var(--ease-snap), padding-left .4s var(--ease-snap); }
.pg-total .tb-card:hover, .pg-total .tb-card:focus-visible { transform: none; box-shadow: none; background-size: 100% 100%; padding-left: 12px; }
.pg-total .tb-card::before { content: counter(tb, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-serif); font-style: italic;
  font-size: 1.5rem; line-height: 1; color: var(--signal); }
.pg-total .tb-card .ico { display: none; }   /* decorative emoji — the numbered ledger replaces it */
.pg-total .tb-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.pg-total .tb-amount { grid-column: 3; grid-row: 1; margin: 0; text-align: right; color: var(--ink); font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-total .tb-card p { grid-column: 2 / 4; grid-row: 2; margin-top: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.pg-total .tb-card:hover p { color: var(--ink); }

/* fund pool → formula sheet */
.pg-total .tb-pool { margin: 0; background: var(--chalk); border: 2px solid var(--ink); border-radius: 0; box-shadow: var(--hard);
  padding: 32px 36px 0; overflow: hidden; }
.pg-total .tb-formula { align-items: flex-end; gap: 20px 28px; }
.pg-total .tb-formula .f-field { gap: 8px; }
.pg-total .tb-formula .f-field span,
.pg-total .tb-formula .f-result span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.pg-total .tb-formula .f-field input { width: 180px; padding: 4px 0 6px; border: 0; border-bottom: 3px solid var(--ink); border-radius: 0;
  background: transparent; font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; transition: background-color .2s; -moz-appearance: textfield; appearance: textfield; }
.pg-total .tb-formula .f-field input::-webkit-outer-spin-button,
.pg-total .tb-formula .f-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pg-total .tb-formula .f-field input:hover { background: var(--paper); }
.pg-total .tb-formula .f-field input:focus { background: #FFF6D6; border-color: var(--ink); box-shadow: none; }
.pg-total .tb-formula .f-op,
.pg-total .tb-formula .f-result::before { font-family: var(--font-display); font-weight: 500; font-size: 2.6rem; line-height: 1;
  color: var(--signal); padding-bottom: 4px; }
.pg-total .tb-formula .f-result { position: relative; margin-left: auto; padding-left: 52px; text-align: right; }
.pg-total .tb-formula .f-result::before { content: "="; position: absolute; left: 0; bottom: 0; }
.pg-total .tb-formula .f-result b { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1; letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }

.pg-total .tb-pool .progress { height: 18px; margin: 32px 0 0 !important; background: var(--paper); border: 2px solid var(--ink); border-radius: 0; }
.pg-total .tb-pool .progress-bar { background: var(--ink) !important; border-radius: 0; }
.pg-total .tb-grand.over ~ .tb-pool .progress-bar { background: var(--signal) !important; }

/* result band — ink when there's money left, signal when over */
.pg-total .tb-pool-row { margin: 28px -36px 0; padding: 20px 36px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pg-total .tb-pool-row b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -0.04em;
  text-transform: none; font-variant-numeric: tabular-nums; }
.pg-total .tb-pool-row.good { background: var(--ink); color: var(--chalk); }
.pg-total .tb-pool-row.good b { color: var(--volt); }
.pg-total .tb-pool-row.bad { background: var(--signal); color: var(--chalk); }
.pg-total .tb-pool-row.bad b { color: var(--chalk); }

@media (max-width: 899px) {
  .pg-total .tb-grand { padding: 28px 24px 26px; box-shadow: 0 10px 0 var(--signal); }
  .pg-total .tb-grand.over { box-shadow: 0 10px 0 var(--ink); }
}
@media (max-width: 640px) {
  .pg-total .tb-pool { padding: 24px 20px 0; box-shadow: 5px 5px 0 var(--ink); }
  .pg-total .tb-formula { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 12px; row-gap: 22px; }
  .pg-total .tb-formula .f-field { min-width: 0; }
  .pg-total .tb-formula .f-field input { width: 100%; font-size: 1.7rem; }
  .pg-total .tb-formula .f-op { font-size: 2.2rem; }
  .pg-total .tb-formula .f-result { grid-column: 1 / -1; margin-left: 0; width: auto; text-align: left; padding: 16px 0 0 44px; border-top: 2px solid var(--ink); }
  .pg-total .tb-formula .f-result::before { font-size: 2.4rem; bottom: -2px; }
  .pg-total .tb-pool-row { margin: 24px -20px 0; padding: 18px 20px; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════
   UPDATES — committee photo wall (editorial, staggered) + team upload form
   ═══════════════════════════════════════════════ */
.pg-updates .gallery { counter-reset: ph; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 16px; align-items: start; }
.pg-updates .photo-card { counter-increment: ph; margin: 0; min-width: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.pg-updates .photo-card img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); background: var(--ink-soft);
  box-shadow: 0 0 0 var(--volt); transition: transform .45s var(--ease-snap), box-shadow .45s var(--ease-snap); }
.pg-updates .photo-card:nth-child(even) img { box-shadow: 0 0 0 var(--signal); }
@media (hover: hover) {
  .pg-updates .photo-card:hover img { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--volt); }
  .pg-updates .photo-card:nth-child(even):hover img { box-shadow: 12px 12px 0 var(--signal); }
}

.pg-updates .photo-card .pc-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 18px 0 0; }
.pg-updates .photo-card .pc-body::before { content: counter(ph, decimal-leading-zero); grid-row: 1 / span 3; font-family: var(--font-serif); font-style: italic;
  font-size: 2.2rem; line-height: .9; color: var(--signal); }
.pg-updates .photo-card .pc-cat { grid-column: 2; justify-self: start; margin: 0 0 6px; padding: 0; background: none; border-radius: 0; color: var(--ink-3);
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pg-updates .photo-card .pc-cap { grid-column: 2; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.12;
  letter-spacing: -0.025em; color: var(--ink); overflow-wrap: anywhere; }
.pg-updates .photo-card .pc-date { grid-column: 2; margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* phone: single column, every second photo stepped in */
@media (max-width: 639px) {
  .pg-updates .photo-card:nth-child(even) { margin-left: 14%; }
}
/* tablet: two columns, right column dropped */
@media (min-width: 640px) and (max-width: 899px) {
  .pg-updates .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 28px; }
  .pg-updates .photo-card:nth-child(even) { margin-top: 72px; }
}
/* desktop: 12-col rhythm of five — one big lead photo + a tall partner, then a stepped row of three */
@media (min-width: 900px) {
  .pg-updates .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; row-gap: 72px; margin-top: 24px; }
  .pg-updates .photo-card:nth-child(5n+1) { grid-column: 1 / 8; }
  .pg-updates .photo-card:nth-child(5n+1) .pc-cap { font-size: 1.6rem; }
  .pg-updates .photo-card:nth-child(5n+2) { grid-column: 9 / 13; margin-top: 96px; }
  .pg-updates .photo-card:nth-child(5n+2) img { aspect-ratio: 4 / 5; }
  .pg-updates .photo-card:nth-child(5n+3) { grid-column: 1 / 5; }
  .pg-updates .photo-card:nth-child(5n+4) { grid-column: 5 / 9; margin-top: 56px; }
  .pg-updates .photo-card:nth-child(5n)   { grid-column: 9 / 13; margin-top: 112px; }
}

/* upload form (team only) — hard-edged sheet */
.pg-updates .up-form { position: relative; margin: 12px 0 72px; padding: 32px 36px 30px; background: var(--chalk); border: 2px solid var(--ink);
  border-radius: 0; box-shadow: var(--hard); }
.pg-updates .up-form::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 10px; background: var(--volt);
  border: 2px solid var(--ink); }
.pg-updates .up-grid { gap: 22px 28px; margin-top: 8px; }
.pg-updates .up-field { gap: 8px; min-width: 0; }
.pg-updates .up-field label { font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--ink); }
.pg-updates .up-field input { width: 100%; min-width: 0; padding: 8px 0 10px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; color: var(--ink); transition: background-color .2s; }
.pg-updates .up-field input::placeholder { color: var(--ink-3); }
.pg-updates .up-field input:hover { background: var(--paper); }
.pg-updates .up-field input:focus { border-color: var(--ink); box-shadow: none; background: #FFF6D6; }
.pg-updates .up-field input[type="file"] { padding: 18px; border: 2px dashed var(--ink); background: var(--paper); font-size: .92rem; cursor: pointer; }
.pg-updates .up-field input[type="file"]:hover { background: #FFF6D6; }
.pg-updates .up-field input[type="file"]::file-selector-button { margin-right: 14px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--volt); font-family: var(--font-body); font-weight: 700; font-size: .85rem; cursor: pointer;
  transition: background-color .2s, color .2s; }
.pg-updates .up-field input[type="file"]::file-selector-button:hover { background: var(--volt); color: var(--ink); }
.pg-updates .up-form .qt-actions { margin-top: 26px; }
@media (max-width: 640px) {
  .pg-updates .up-form { padding: 26px 20px 24px; box-shadow: 5px 5px 0 var(--ink); margin-bottom: 56px; }
  .pg-updates .up-field input[type="file"] { padding: 14px; }
}

/* ── motion off ── */
@media (prefers-reduced-motion: reduce) {
  .pg-total .tb-grand, .pg-total .tb-card, .pg-total .tb-pool .progress-bar,
  .pg-updates .photo-card img { transition: none !important; }
  .pg-updates .photo-card:hover img { transform: none; }
}

/* spacing for the note under the pool sheet (inline margin on the element) */
.pg-total #total-breakdown + .note-box { margin-top: 48px !important; }