/* Tithery — cream paper, two greens, a serif for words and Karla for figures. A split pane: the give side on the
   left (the room's line and the form), the ledger on the right. One column on a phone, the pane splits at 1000. */
:root{
  --cream:#F3EEDF; --paper:#FAF6EA; --ink:#1B1F1A; --green:#2F7D4F; --deep:#1F5C3A; --tint:#DCE8DC;
  --mute:rgba(27,31,26,.6); --faint:rgba(27,31,26,.38); --rule:rgba(27,31,26,.14); --rule2:rgba(27,31,26,.28);
  --greenwash:rgba(47,125,79,.1); --greenline:rgba(47,125,79,.45);
  --eave:70px;
}
*{box-sizing:border-box}
html{overflow-x:clip;background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.5 Karla,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.serif{font-family:"Young Serif",Georgia,"Times New Roman",serif;font-weight:400}
.tabnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- the eave: stuck to the top, carries the CA ---------- */
#eave{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto auto; grid-template-areas:"tag . copy gm" "ca ca ca ca";
  gap:6px 10px; align-items:center; padding:8px 14px 9px;
  background:var(--green); color:var(--cream);
}
.eavetag{grid-area:tag;font-family:"Young Serif",Georgia,serif;font-size:15px;letter-spacing:.02em}
.eaveca{grid-area:ca;font-size:11.5px;line-height:1.35;font-weight:500;letter-spacing:.01em;word-break:break-all;color:var(--cream);opacity:.94;user-select:all;-webkit-user-select:all}
.eaveca[data-live="0"]{opacity:.74;user-select:text;-webkit-user-select:text;font-family:Karla,sans-serif;font-weight:400;letter-spacing:0}
.eavecopy{grid-area:copy;min-height:30px;padding:0 13px;border:1px solid rgba(243,238,223,.6);border-radius:999px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--cream);white-space:nowrap}
.eavecopy[disabled]{opacity:.5;cursor:default}
.eavecopy[data-done="1"]{background:var(--cream);color:var(--green);border-color:var(--cream)}
.eavegm{grid-area:gm;font-size:12px;letter-spacing:.06em;text-decoration:none;opacity:.86;border-bottom:1px solid rgba(243,238,223,.5);white-space:nowrap;padding-bottom:1px}

/* ---------- the halves ---------- */
.halves{display:block;width:100%;max-width:640px;margin:0 auto;padding:22px 18px 8px}
.giveside{padding:0 0 26px}
.ledgerside{padding:22px 0 0;border-top:1px solid var(--rule2)}

/* the masthead lives in the give side, not in a bar */
.mast{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
.mastword{font-family:"Young Serif",Georgia,serif;font-size:34px;line-height:1;margin:0;letter-spacing:-.01em;color:var(--deep)}
.barnnav{display:flex;gap:14px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.barnnav a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.barnnav a[aria-current]{color:var(--green);border-bottom-color:var(--green)}
.masttag{margin:0 0 18px;color:var(--mute);font-size:14.5px;line-height:1.5}
.masttag b{color:var(--ink);font-weight:500}

/* the room: one stalk per giver, the line drawn across them */
.room{border:1px solid var(--rule2);background:var(--paper);padding:14px 14px 10px;margin:0 0 14px}
.roomhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.roomhead b{color:var(--green);font-weight:700}
.roomchart{position:relative;height:150px;display:flex;align-items:flex-end;gap:3px;padding:0 0 1px;border-bottom:1px solid var(--rule2)}
.stalk{flex:1 1 0;min-width:3px;max-width:34px;background:var(--tint);border:1px solid var(--greenline);border-bottom:0;min-height:3px;transition:height .5s ease}
.stalk[data-above="1"]{background:var(--green);border-color:var(--green)}
.stalk[data-mine="1"]{outline:2px solid var(--deep);outline-offset:1px}
.linerule{position:absolute;left:0;right:0;height:0;border-top:2px dashed var(--deep);pointer-events:none;transition:bottom .5s ease}
.linerule i{position:absolute;right:0;top:-20px;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--deep);background:var(--paper);padding:2px 4px}
.roomempty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;color:var(--faint);font-size:14px;line-height:1.45}
.roomfigs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 0}
.figcell{min-width:0}
.figcell dt{margin:0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.figcell dd{margin:2px 0 0;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.figcell dd small{font-size:11px;font-weight:400;color:var(--mute);margin-left:3px}

/* the action: a field and a button */
.giveform{border:1px solid var(--green);background:var(--paper);padding:14px 14px 14px;margin:0}
.giverow{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--green);padding:2px 0 6px;margin:0 0 10px}
.giverow input{flex:1 1 0;min-width:0;border:0;background:transparent;outline:0;font-size:34px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;padding:0;color:var(--ink)}
.giverow input::placeholder{color:var(--faint);font-weight:400}
.giveunit{font-family:"Young Serif",Georgia,serif;font-size:15px;color:var(--green);white-space:nowrap}
.givemath{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--mute);margin:0 0 12px}
.givemath b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.landing{font-size:13.5px;line-height:1.5;color:var(--mute);border-left:3px solid var(--tint);padding:4px 0 4px 10px;margin:0 0 14px}
.landing[data-above="1"]{border-left-color:var(--green);color:var(--ink)}
.landing[data-above="0"]{border-left-color:var(--rule2)}
.giveacts{display:flex;gap:10px;align-items:stretch}
.givebtn{flex:1 1 0;min-height:52px;background:var(--green);color:var(--cream);font-family:"Young Serif",Georgia,serif;font-size:19px;letter-spacing:.01em;border-radius:2px}
.givebtn:hover{background:var(--deep)}
.givebtn[disabled]{background:var(--tint);color:var(--mute);cursor:default}
.hitchbtn{min-height:52px;padding:0 14px;border:1px solid var(--rule2);border-radius:2px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.hitchbtn[data-on="1"]{color:var(--green);border-color:var(--greenline)}
.givenote{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint)}
.givenote b{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- the ledger side ---------- */
.ledgercard{border:1px solid var(--rule);background:var(--paper);margin:0 0 14px}
.cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.cardhead p{margin:0;font-family:"Young Serif",Georgia,serif;font-size:17px;color:var(--deep)}
.cardhead span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:right}
.cardbody{padding:8px 14px 12px}
.quietline{margin:6px 0;color:var(--faint);font-size:13.5px;line-height:1.5}

.roomrow{display:grid;grid-template-columns:18px 1fr auto auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.roomrow:last-child{border-bottom:0}
.roomrow i{font-style:normal;color:var(--green);text-align:center;font-weight:700}
.roomrow[data-above="0"] i{color:var(--faint)}
.roomrow em{font-style:normal;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roomrow u{text-decoration:none;font-variant-numeric:tabular-nums;font-weight:700}
.roomrow s{text-decoration:none;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}

.pastrow{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.pastrow:last-child{border-bottom:0}
.pastrow b{font-variant-numeric:tabular-nums;color:var(--deep)}
.pastrow em{font-style:normal;color:var(--mute)}
.pastrow u{text-decoration:none;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.pastrow[data-carried="1"] u{color:var(--faint);font-weight:400}

.taperow{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:6px 0;border-bottom:1px dotted var(--rule);font-size:13px}
.taperow:last-child{border-bottom:0}
.taperow em{font-style:normal;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.taperow u{text-decoration:none;font-variant-numeric:tabular-nums;font-weight:700}
.taperow s{text-decoration:none;color:var(--faint);font-variant-numeric:tabular-nums}

.rulesfold{border:1px solid var(--rule);background:transparent;margin:0 0 14px}
.rulesfold summary{cursor:pointer;padding:10px 14px;font-family:"Young Serif",Georgia,serif;font-size:16px;color:var(--deep);list-style:none;display:flex;justify-content:space-between}
.rulesfold summary::-webkit-details-marker{display:none}
.rulesfold summary::after{content:"+";color:var(--green)}
.rulesfold[open] summary::after{content:"–"}
.rulesfold summary::marker{content:""}
.rulesbody{padding:2px 14px 12px}
.rulesbody p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--mute)}
.rulesbody p b{color:var(--ink);font-weight:700}

.leaf{padding:0 0 10px}
.leafword{font-family:"Young Serif",Georgia,serif;font-size:24px;color:var(--deep);margin:0 0 10px}
.leaf p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--mute)}
.leaf p b{color:var(--ink);font-weight:700}
.ledgergrid{display:grid;grid-template-columns:34px 1fr auto auto;gap:8px 10px;font-size:13.5px;align-items:baseline}
.ledgergrid > span{padding:6px 0;border-bottom:1px solid var(--rule)}
.ledgergrid .colhead{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom-color:var(--rule2)}
.ledgergrid .tabnum{font-weight:700}
.ledgergrid em{font-style:normal;color:var(--mute)}
.drawbtn{min-height:34px;padding:0 12px;border:1px solid var(--green);color:var(--green);border-radius:2px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.drawbtn[disabled]{opacity:.5;cursor:default}

/* ---------- the sole (footer) ---------- */
.sole{max-width:640px;margin:0 auto;padding:18px 18px 40px;border-top:1px solid var(--rule2);font-size:12.5px;color:var(--faint);line-height:1.7}
.solerow{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.solerow code{font-size:11px;word-break:break-all;color:var(--mute)}
.solerow a{color:var(--green)}

/* ---------- the hatch (wallet chooser) + whispers ---------- */
#hatch{position:fixed;inset:0;z-index:80;background:rgba(27,31,26,.42);display:flex;align-items:flex-end;justify-content:center;padding:0}
.hatchbox{width:100%;max-width:520px;background:var(--paper);color:var(--ink);border-top:3px solid var(--green);padding:14px 18px 26px}
.hatchhead{display:flex;justify-content:space-between;align-items:center;font-family:"Young Serif",Georgia,serif;font-size:18px;color:var(--deep);margin:0 0 10px}
.hatchshut{font-size:24px;line-height:1;color:var(--mute);padding:0 4px}
.hatchbody p{margin:0 0 10px;font-size:14.5px;line-height:1.55}
.hatchbody p.dim{color:var(--faint);font-size:13px}
.wellpick{display:grid;gap:8px}
.wellpick button{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule2);background:var(--cream);border-radius:2px;text-align:left;font-size:15px}
.wellpick img{width:26px;height:26px;border-radius:5px}
.firebtn{width:100%;min-height:50px;background:var(--green);color:var(--cream);font-family:"Young Serif",Georgia,serif;font-size:18px;border-radius:2px;margin-top:6px}
.firebtn[disabled]{background:var(--tint);color:var(--mute);cursor:default}
.whisper{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;background:var(--deep);color:var(--cream);padding:10px 16px;border-radius:2px;font-size:14px;max-width:92vw;box-shadow:0 8px 24px rgba(27,31,26,.25)}

/* ---------- a wider measure from 720 ---------- */
@media (min-width:720px){
  #eave{grid-template-columns:auto 1fr auto auto;grid-template-areas:"tag ca copy gm";padding:11px 24px;gap:10px 16px}
  .eaveca{font-size:13px}
  .halves{max-width:760px;padding:34px 24px 10px}
  .mastword{font-size:44px}
  .masttag{font-size:16px}
  .roomchart{height:190px}
  .giverow input{font-size:42px}
  .figcell dd{font-size:20px}
  .sole{max-width:760px;padding:22px 24px 48px}
}

/* ---------- the pane splits at 1000: the give side stands still, the ledger scrolls beside it ---------- */
@media (min-width:1000px){
  .halves{display:grid;grid-template-columns:minmax(400px,470px) minmax(0,1fr);max-width:1180px;padding:0 32px;gap:0}
  .giveside{position:sticky;top:var(--eave);align-self:start;padding:38px 40px 40px 0;border-right:1px solid var(--rule2);max-height:calc(100vh - var(--eave));overflow:auto}
  .ledgerside{padding:38px 0 48px 40px;border-top:0;min-height:calc(100vh - var(--eave))}
  .mastword{font-size:50px}
  .masttag{font-size:16.5px;line-height:1.55}
  .roomchart{height:210px}
  .giverow input{font-size:46px}
  .figcell dd{font-size:21px}
  .sole{max-width:1180px;padding:22px 32px 56px}
}
@media (min-width:1300px){
  .halves{grid-template-columns:minmax(440px,500px) minmax(0,1fr)}
  .mastword{font-size:56px}
  .roomchart{height:240px}
}