/* Pledgebook — a street-corner pledge book on a brick ground. One accent: mint ink. */
:root {
  --brick: #74463A;
  --brick-deep: #3A211B;
  --brick-line: #8C5849;
  --cream: #FBF3E6;
  --cream-dim: #E7D6C2;
  --paper: #F6EFE1;
  --paper-rule: #D9CDB8;
  --paper-ink: #2B1D18;
  --paper-soft: #7C6A5E;
  --mint: #2EF2C2;
  --mint-ink: #12B892;
  --mint-wash: #C9FBEC;
  --f-show: 'Fraunces', Georgia, serif;
  --f-text: 'Work Sans', system-ui, sans-serif;
  --f-code: 'Space Mono', ui-monospace, monospace;
  --bar-h: 64px;
}
* { box-sizing: border-box; }
html { background: var(--brick); }
body {
  margin: 0 auto; padding: calc(var(--bar-h) + 14px) 16px 28px; max-width: 1180px;
  background: var(--brick); color: var(--cream); font: 400 15px/1.5 var(--f-text);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
code { font-family: var(--f-code); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---- the CA strip: fixed to the top edge, the one piece of chrome ---- */
.pb-ca {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; min-height: var(--bar-h);
  background: var(--brick-deep); border-bottom: 2px solid var(--mint);
  padding: 7px 12px 8px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.pb-ca-row { display: flex; align-items: center; gap: 10px; max-width: 1180px; width: 100%; margin: 0 auto; }
.pb-ca-tag { font: 600 10px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); flex: 1; }
.pb-ca-chart { font: 400 10px/1.2 var(--f-code); color: var(--cream-dim); text-decoration: underline; text-underline-offset: 2px; }
.pb-ca-chart[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.pb-ca-addr {
  flex: 1; min-width: 0; font-size: 10.5px; line-height: 1.3; color: var(--cream); word-break: break-all;
  user-select: all; -webkit-user-select: all;
}
.pb-ca-addr.is-wait { word-break: normal; color: var(--cream-dim); font-style: italic; user-select: none; -webkit-user-select: none; }
.pb-ca-copy {
  flex: none; border: 0; border-radius: 999px; padding: 6px 14px; background: var(--mint); color: var(--brick-deep);
  font: 700 12px/1 var(--f-text); letter-spacing: .02em;
}
.pb-ca-copy:disabled { background: #6E5148; color: var(--cream-dim); cursor: default; }
.pb-ca-copy.is-done { background: var(--cream); }

/* ---- the live figure ---- */
.pb-fig {
  display: block; width: 100%; font: 900 96px/0.92 var(--f-show); letter-spacing: -.03em; color: var(--cream);
  font-variation-settings: 'opsz' 144; margin: 6px 0 4px;
}
.pb-fig-n { color: var(--mint); text-shadow: 0 0 22px rgba(46, 242, 194, .35); }
.pb-fig-of { color: var(--cream); }
.pb-fig-cap { display: block; font: 600 13px/1.4 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim); margin-top: 6px; }
.pb-fig.is-bump .pb-fig-n { animation: pbBump .6s ease-out; }
@keyframes pbBump { 0% { transform: translateY(-12px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pb-fig-n { display: inline-block; }

.pb-say { font: 500 17px/1.45 var(--f-text); margin: 4px 0 16px; color: var(--cream); max-width: 40em; }
.pb-say b { color: var(--mint); font-weight: 700; }

/* ---- the open book ---- */
.pb-spread {
  display: grid; grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr); align-items: stretch;
  background: var(--brick-deep); border-radius: 14px; padding: 8px; box-shadow: 0 14px 0 -6px #5B352C;
}
.pb-spine { background: linear-gradient(90deg, #C9BBA4, #EFE5D3 40%, #C9BBA4); }
.pb-leaf { background: var(--paper); color: var(--paper-ink); padding: 10px 9px 9px; display: flex; flex-direction: column; min-width: 0; }
.pb-leaf--was { border-radius: 8px 2px 2px 8px; }
.pb-leaf--now { border-radius: 2px 8px 8px 2px; }
.pb-leaf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--paper-ink); padding-bottom: 5px; margin-bottom: 4px; }
.pb-leaf-no { font: 700 15px/1.1 var(--f-show); }
.pb-leaf-st { font: 600 9.5px/1.1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-soft); white-space: nowrap; }
.pb-leaf--now[data-s="full"] .pb-leaf-st { color: var(--mint-ink); }
.pb-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(10, 1fr); flex: 1; }
.pb-ln {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 4px;
  border-bottom: 1px solid var(--paper-rule); font: 400 11px/1 var(--f-code);
}
.pb-ln-k { flex: none; width: 17px; color: var(--paper-soft); font-size: 10px; }
.pb-ln-w { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.pb-ln--empty .pb-ln-w { border-bottom: 1.5px dotted #B7A893; height: 1px; align-self: center; margin-top: 6px; }
.pb-ln--next { background: var(--mint-wash); box-shadow: inset 3px 0 0 var(--mint-ink); }
.pb-ln--next .pb-ln-w { border: 0; height: auto; margin: 0; font: 600 10.5px/1 var(--f-text); color: var(--mint-ink); letter-spacing: .02em; }
.pb-ln--next::after { content: ''; position: absolute; inset: 0; box-shadow: 0 0 0 0 var(--mint); animation: pbPulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes pbPulse { 0% { box-shadow: 0 0 0 0 rgba(46, 242, 194, .55); } 100% { box-shadow: 0 0 0 7px rgba(46, 242, 194, 0); } }
.pb-ln--mine .pb-ln-w { font-weight: 700; }
.pb-ln--mine .pb-ln-k::before { content: '★'; color: var(--mint-ink); margin-right: 1px; }
.pb-ln--new { animation: pbInkIn .7s ease-out; }
@keyframes pbInkIn { from { background: var(--mint-wash); } to { background: transparent; } }
.pb-ln--won .pb-ln-w { font-weight: 700; }
.pb-ln--won::before {
  content: ''; position: absolute; left: -4px; right: -4px; top: -3px; bottom: -3px; border: 2.5px solid var(--mint-ink);
  border-radius: 50% / 60%; transform: rotate(-2deg); pointer-events: none;
}
.pb-leaf--was.is-fresh .pb-ln--won::before { animation: pbRing 1.1s ease-out; }
@keyframes pbRing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.pb-ln--ghost .pb-ln-w { border-bottom: 1.5px dotted #CDBFAA; height: 1px; align-self: center; margin-top: 6px; }
.pb-leaf-foot { margin: 6px 0 0; font: 400 10.5px/1.35 var(--f-text); color: var(--paper-soft); min-height: 2.7em; }
.pb-leaf-foot b { color: var(--paper-ink); }

/* ---- sign ---- */
.pb-sign { margin-top: 22px; background: var(--brick-deep); border-radius: 14px; padding: 14px; }
.pb-sign-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.pb-sign-title { font: 700 20px/1.1 var(--f-show); }
.pb-hello { border: 1.5px solid var(--cream-dim); background: transparent; color: var(--cream); border-radius: 999px; padding: 6px 12px; font: 600 12px/1 var(--f-text); }
.pb-hello[data-on="1"] { border-color: var(--mint); color: var(--mint); font-family: var(--f-code); }
.pb-qty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.pb-qty-b { border: 1.5px solid var(--brick-line); background: transparent; color: var(--cream); border-radius: 10px; padding: 10px 0; font: 600 14px/1 var(--f-text); }
.pb-qty-b[aria-pressed="true"] { background: var(--cream); color: var(--brick-deep); border-color: var(--cream); }
.pb-ink { width: 100%; border: 0; border-radius: 12px; padding: 16px; background: var(--mint); color: var(--brick-deep); font: 700 17px/1 var(--f-text); }
.pb-ink:disabled { background: #6E5148; color: var(--cream-dim); cursor: default; }
.pb-sign-note { margin: 10px 0 0; font-size: 13px; color: var(--cream-dim); }
.pb-sweep { margin-top: 10px; width: 100%; border: 2px solid var(--mint); background: transparent; color: var(--mint); border-radius: 12px; padding: 12px; font: 700 15px/1 var(--f-text); }

/* ---- the tape: a receipt roll ---- */
.pb-tape {
  margin-top: 22px; background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: 12px 12px 18px;
  position: relative; --tooth: 8px;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 4px, #000 4.5px) bottom / var(--tooth) var(--tooth) repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - var(--tooth)) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent 4px, #000 4.5px) bottom / var(--tooth) var(--tooth) repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - var(--tooth)) no-repeat;
}
.pb-tape-head { display: flex; justify-content: space-between; align-items: baseline; font: 700 16px/1.2 var(--f-show); border-bottom: 1.5px dashed var(--paper-soft); padding-bottom: 8px; }
.pb-tape-live { font: 400 10px/1 var(--f-code); color: var(--paper-soft); text-transform: uppercase; }
.pb-tape-live.is-on { color: var(--mint-ink); }
.pb-tape-live.is-on::before { content: '● '; }
.pb-roll { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow: auto; }
.pb-roll-i { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px dotted var(--paper-rule); font: 400 12px/1.4 var(--f-code); }
.pb-roll-t { color: var(--paper-soft); }
.pb-roll-x { overflow-wrap: anywhere; }
.pb-roll-i--draw { background: var(--mint-wash); margin: 0 -12px; padding: 8px 12px; }
.pb-roll-i--draw .pb-roll-x { font-weight: 700; }
.pb-roll-i--quiet .pb-roll-x { color: var(--paper-soft); font-family: var(--f-text); }
.pb-roll-i--print { animation: pbPrint .8s steps(8, end); }
@keyframes pbPrint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- the card ---- */
.pb-card, .pb-shelf { margin-top: 22px; }
.pb-card-h { font: 700 24px/1.1 var(--f-show); margin: 0 0 10px; }
.pb-card-s { font: 700 16px/1.2 var(--f-show); margin: 18px 0 6px; }
.pb-card-p { margin: 0; color: var(--cream); max-width: 40em; }
.pb-menu { margin: 0; border-top: 1.5px solid var(--cream-dim); border-bottom: 1.5px solid var(--cream-dim); padding: 6px 0; }
.pb-menu-r { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.pb-menu-r dt { flex: none; }
.pb-menu-r::after { content: ''; order: 1; flex: 1; border-bottom: 1.5px dotted var(--cream-dim); transform: translateY(-4px); min-width: 12px; }
.pb-menu-r dd { order: 2; margin: 0; font: 700 14px/1.2 var(--f-code); color: var(--mint); text-align: right; }
.pb-who { margin-top: 18px; padding: 12px; border: 1.5px dashed var(--cream-dim); border-radius: 10px; font-size: 13px; }
.pb-who code { word-break: break-all; }
.pb-shelf-l { list-style: none; margin: 0; padding: 0; }
.pb-shelf-i { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--brick-line); font-size: 14px; }
.pb-shelf-i code { font-size: 12px; color: var(--cream-dim); }
.pb-shelf-i--quiet { color: var(--cream-dim); }

/* ---- foot ---- */
.pb-foot { margin-top: 34px; padding-top: 18px; border-top: 1.5px solid var(--brick-line); font-size: 13px; color: var(--cream-dim); }
.pb-foot-id { display: flex; align-items: center; gap: 10px; color: var(--cream); font-weight: 600; }
.pb-foot-id img { border-radius: 6px; }
.pb-foot-nav { display: flex; gap: 16px; margin: 10px 0; }
.pb-foot-ref { margin: 4px 0; }
.pb-foot-ref code { font-size: 11px; word-break: break-all; color: var(--cream); }

.pb-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; background: var(--cream); color: var(--brick-deep); padding: 10px 16px; border-radius: 10px; font: 600 13px/1.3 var(--f-text); max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }

/* ---- 720–1000: still one column, a wider measure and a bigger book ---- */
@media (min-width: 720px) {
  :root { --bar-h: 50px; }
  body { padding-left: 32px; padding-right: 32px; }
  .pb-ca { flex-direction: row; align-items: center; }
  .pb-ca-row { width: auto; margin: 0; }
  .pb-ca-row:first-child { flex: none; }
  .pb-ca-row--addr { flex: 1; justify-content: flex-end; }
  .pb-ca-addr { flex: none; font-size: 13px; }
  .pb-ca-chart { order: 3; }
  .pb-fig { font-size: 132px; }
  .pb-say { font-size: 20px; }
  .pb-spread { padding: 12px; }
  .pb-leaf { padding: 16px 16px 12px; }
  .pb-leaf-no { font-size: 20px; }
  .pb-leaf-st { font-size: 11px; }
  .pb-ln { min-height: 32px; font-size: 13px; }
  .pb-ln-k { width: 22px; font-size: 11px; }
  .pb-leaf-foot { font-size: 12px; }
}

/* ---- ≥1000: the page recomposes — book + action left, the tape as a full-height spine on the right ---- */
@media (min-width: 1000px) {
  body {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 40px;
    grid-template-areas: "fig tape" "say tape" "book tape" "sign tape" "card shelf" "foot foot";
    grid-template-rows: auto auto auto auto 1fr auto; align-items: start;
  }
  .pb-fig { grid-area: fig; font-size: 168px; }
  .pb-say { grid-area: say; }
  .pb-spread { grid-area: book; }
  .pb-sign { grid-area: sign; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-items: center; }
  .pb-sign-top, .pb-sign-note, .pb-sweep { grid-column: 1 / -1; }
  .pb-qty { margin-bottom: 0; }
  .pb-tape { grid-area: tape; margin-top: 6px; position: sticky; top: calc(var(--bar-h) + 16px); }
  .pb-roll { max-height: calc(100vh - var(--bar-h) - 120px); }
  .pb-card { grid-area: card; }
  .pb-shelf { grid-area: shelf; }
  .pb-foot { grid-area: foot; }
  .pb-ln { min-height: 36px; font-size: 14px; }
}