/* Tree of Inclusion - the public page.
   These are the signed-off prototype's styles (reference/client-preview.html),
   unchanged apart from: the prototype-only rules removed (sample-data pill,
   prototype controls, dashboard screens), and a few additions for the live
   page, grouped at the bottom under "Live page additions". */

/* Palette supplied by The Friendship Circle, 7 Sep 2026.
   #a9076b is their retired pink and is deliberately not used. */
:root{
  --purple:#461F6E;   --purple-dk:#31154E; --purple-lt:#9B7DC0; --lavender:#DAD2E2;
  --pink:#ED135A;     --pink-lt:#EDCDE1;
  --green:#058D78;    --green-lt:#CDE8E4;
  --orange:#EB8F2C;   --orange-lt:#F8D9AE;
  --navy:#006D8D;     --navy-lt:#BFDCE6;

  --magenta:#ED135A;
  --amber:var(--orange); --blue:var(--navy);   /* older names, still used */
  --bg:#FFFFFF; --cream:#FFFBF6; --wash:#F6F2FA; --line:#E4DCEC;
  --bark:#B3A0D2; --twig:#C7B9D8;
  --ink:#2A1440; --muted:#655279; --dim:#9A8DAA;
  --shadow:0 14px 40px rgba(70,31,110,.16);
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:Assistant,system-ui,sans-serif;
  font-size:15px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--magenta);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

#app{position:fixed;inset:0;display:flex;flex-direction:column}

/* ---------- rail ---------- */
.rail{position:relative;z-index:41;display:flex;align-items:center;gap:14px;
  padding:11px 20px;background:#fff;border-bottom:1px solid var(--line)}
.logo{height:44px;width:44px;flex:none}
.brand{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand b{font-family:Fredoka,system-ui,sans-serif;font-weight:800;font-size:17px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--purple)}
.brand span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:600}
.flag{display:flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);
  border-radius:999px;font-size:11px;color:var(--muted);white-space:nowrap;margin-right:auto}
.flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.seg{display:flex;background:var(--wash);border-radius:999px;padding:3px;gap:2px}
.seg button{padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--muted);white-space:nowrap;transition:.16s}
.seg button[aria-pressed=true]{background:var(--purple);color:#fff}
.btn{padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:700;
  background:var(--magenta);color:#fff;white-space:nowrap;transition:.16s;
  text-transform:uppercase;letter-spacing:.04em}
.btn:hover{background:#C90A5F}
.btn.ghost{background:none;border:2px solid var(--line);color:var(--purple)}
.btn.ghost:hover{border-color:var(--purple)}
.strip{display:flex;height:5px;flex:none;z-index:40}
.strip i{flex:1}

/* ---------- stage ---------- */
#stage,#stage *{-webkit-tap-highlight-color:transparent}
#stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF9F0 100%)}
#stage.drag{cursor:grabbing}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}

.hud{position:absolute;top:16px;left:16px;z-index:20;pointer-events:none;max-width:min(300px,50vw);transition:opacity .3s}
.hud.faded{opacity:0}
.hud .eyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:7px}
.hud h1{font-family:Fredoka,system-ui,sans-serif;font-weight:800;font-size:clamp(19px,2.7vw,27px);line-height:1.14;
  text-transform:uppercase;color:var(--purple);margin-bottom:14px;letter-spacing:.005em}
.hud h1 i{font-style:normal;color:var(--magenta)}
.meter{pointer-events:auto;background:#fff;border:2px solid var(--line);border-radius:var(--r);
  padding:14px 16px;max-width:262px;box-shadow:var(--shadow)}
.meter .n{font-family:Fredoka,system-ui,sans-serif;font-size:30px;font-weight:800;line-height:1;color:var(--purple)}
.meter .lbl{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:5px}
.bar{height:9px;background:var(--lavender);border-radius:99px;margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;transition:width .9s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(90deg,var(--magenta),var(--amber),var(--green))}
.meter .raised{display:flex;justify-content:space-between;font-size:12px;margin-top:8px;font-weight:600}
.meter .raised b{color:var(--purple)}
.meter .raised span{color:var(--dim);font-weight:500}

.zoomer{position:absolute;right:16px;top:16px;z-index:20;display:flex;flex-direction:column;gap:6px}
.zoomer button{width:40px;height:40px;border-radius:12px;border:2px solid var(--line);
  background:#fff;color:var(--purple);font-size:18px;font-weight:700;display:grid;place-items:center}
.zoomer button:hover{border-color:var(--purple)}
.zlevel{text-align:center;font-size:10px;font-weight:700;color:var(--dim);padding-top:2px}

/* ---------- dock ---------- */
.dock{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:30;
  width:min(640px,calc(100% - 36px));background:#fff;border:2px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
.dockrow{display:flex;align-items:center;gap:9px;padding:9px 11px}
.find{flex:1;display:flex;align-items:center;gap:9px;background:var(--wash);
  border:1px solid var(--line);border-radius:11px;padding:9px 13px;min-width:0}
.find input{flex:1;background:none;border:0;outline:0;min-width:0;font-size:14px}
.chips{display:flex;gap:5px;flex:none}
.chip{padding:8px 13px;border-radius:999px;border:1px solid var(--line);font-size:12px;
  font-weight:600;color:var(--muted);white-space:nowrap;transition:.16s}
.chip[aria-pressed=true]{background:var(--purple);color:#fff;border-color:var(--purple)}
.results{max-height:220px;overflow-y:auto;border-top:1px solid var(--line);display:none}
.results.on{display:block}
.results button{display:block;width:100%;text-align:left;padding:11px 15px;border-bottom:1px solid var(--wash)}
.results button:hover{background:var(--wash)}
.results b{font-weight:700;font-size:14px}
.results span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.results .none{padding:16px;color:var(--muted);font-size:13.5px;text-align:center}

/* ---------- cards ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(42,20,64,.5);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px}
.scrim.on{display:flex}
.card{width:min(440px,100%);background:#fff;border-radius:20px;box-shadow:var(--shadow);
  overflow:hidden;position:relative;animation:rise .32s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.card .tierbar{height:6px}
.card .top{padding:24px 26px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.card .kind{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta)}
.card .x{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--dim);flex:none}
.card .x:hover{background:var(--wash)}
.card .who{font-family:Fredoka,system-ui,sans-serif;font-size:26px;font-weight:800;line-height:1.15;padding:8px 26px 0;color:var(--purple)}
.card .for{padding:12px 26px 0;font-size:14.5px;color:var(--muted)}
.card .for b{color:var(--ink);font-weight:700}
.card blockquote{margin:16px 26px 0;padding:16px 18px;background:var(--wash);border-radius:12px;
  border-left:4px solid var(--magenta);font-size:16px;line-height:1.5;font-style:italic}
.card .meta{display:flex;gap:20px;padding:18px 26px;margin-top:6px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.card .meta div span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.card .acts{display:flex;gap:8px;padding:0 26px 22px}
.card .acts button{flex:1;padding:11px;border-radius:11px;border:2px solid var(--line);
  font-size:13px;font-weight:600;color:var(--muted)}
.card .acts button:hover{border-color:var(--purple);color:var(--purple)}
.renew{display:inline-block;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.renew.ok{background:#E4F7F1;color:#076B53}
.renew.due{background:#FFF2D9;color:#8A5A00}
.renew.perm{background:var(--lavender);color:var(--purple)}

/* ---------- give flow ---------- */
.flow{width:min(580px,100%);max-height:calc(100dvh - 40px);background:#fff;border-radius:20px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;animation:rise .32s cubic-bezier(.22,1,.36,1)}
.flow header{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.flow header h2{font-family:Fredoka,system-ui,sans-serif;font-weight:800;font-size:19px;margin-right:auto;
  text-transform:uppercase;color:var(--purple);letter-spacing:.02em}
.steps{display:flex;gap:4px;padding:0 22px;margin-top:14px}
.steps i{flex:1;height:4px;background:var(--lavender);border-radius:2px;transition:.3s}
.steps i.done{background:var(--magenta)}
.flow .body{padding:22px;overflow-y:auto;flex:1}
.flow .eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:8px}
.flow h3{font-family:Fredoka,system-ui,sans-serif;font-weight:800;font-size:23px;margin-bottom:6px;line-height:1.2;color:var(--purple)}
.flow .sub{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.flow footer{display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--line)}
.flow footer .btn{flex:1;text-align:center}
.levels{display:flex;flex-direction:column;gap:9px}
.level{display:flex;align-items:center;gap:14px;padding:13px 15px;border:2px solid var(--line);
  border-radius:13px;text-align:left;width:100%;transition:.16s}
.level:hover{border-color:var(--purple-lt)}
.level[aria-pressed=true]{border-color:var(--magenta);background:#FFF0F6}
.level:disabled{opacity:.45;cursor:not-allowed}
.level .ico{width:42px;height:42px;flex:none;display:grid;place-items:center}
.level .txt{flex:1;min-width:0}
.level .txt b{display:block;font-weight:700;font-size:15px}
.level .txt span{font-size:12.5px;color:var(--muted)}
.level .rt{text-align:right;flex:none}
.level .amt{display:block;font-family:Fredoka,system-ui,sans-serif;font-size:19px;font-weight:800;color:var(--purple);line-height:1.1}
.level .left{display:block;margin-top:3px;font-size:10.5px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.level .left.low{color:var(--magenta)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:var(--wash);border:2px solid var(--line);
  border-radius:11px;padding:11px 13px;font-size:14.5px;outline:0;transition:.16s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--magenta);background:#fff}
.field textarea{resize:vertical;min-height:80px;line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.count{text-align:right;font-size:11.5px;color:var(--dim);margin-top:5px}
.check{display:flex;gap:11px;align-items:flex-start;padding:13px;border:2px solid var(--line);
  border-radius:12px;cursor:pointer;transition:.16s}
.check:hover{border-color:var(--purple-lt)}
.check input{margin-top:2px;accent-color:var(--magenta);width:17px;height:17px;flex:none}
.check b{display:block;font-weight:700;font-size:14px;margin-bottom:2px}
.check span{font-size:12.5px;color:var(--muted);line-height:1.45}
.legal{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:12px;padding:12px;
  background:var(--wash);border-radius:11px}
.summary{background:var(--wash);border-radius:13px;padding:16px;margin-bottom:16px}
.summary .row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14px}
.summary .row span{color:var(--muted);flex:none}
.summary .row b{font-weight:700;text-align:right}
.summary .tot{border-top:2px solid var(--line);margin-top:8px;padding-top:12px}
.summary .tot b{font-family:Fredoka,system-ui,sans-serif;font-size:22px;font-weight:800;color:var(--purple)}
.notice{display:flex;gap:10px;padding:12px 14px;background:#FFF6E5;border:2px solid #FFE0A3;
  border-radius:12px;font-size:12.5px;color:#8A5A00;line-height:1.5}
.spin{display:grid;place-items:center;padding:50px 0;text-align:center}
.spin .ring{width:36px;height:36px;border:3px solid var(--lavender);border-top-color:var(--magenta);
  border-radius:50%;animation:spin .8s linear infinite;margin-bottom:18px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- panels ---------- */
.panel{position:absolute;inset:0;z-index:35;background:var(--cream);overflow-y:auto;display:none}
.panel.on{display:block}
.dash{max-width:1180px;margin:0 auto;padding:26px 22px 70px}
.dash h2{font-family:Fredoka,system-ui,sans-serif;font-weight:800;font-size:26px;text-transform:uppercase;
  color:var(--purple);margin-bottom:3px}
.dash .sub{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.box{background:#fff;border-radius:var(--r);padding:19px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);padding:0 0 9px;border-bottom:2px solid var(--line)}
td{padding:10px 0;border-bottom:1px solid var(--wash)}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:700}

.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(14px);bottom:calc(var(--dockH,80px) + 18px);z-index:90;
  background:var(--purple);color:#fff;border-radius:12px;padding:12px 20px;font-size:13.5px;
  font-weight:600;box-shadow:var(--shadow);opacity:0;visibility:hidden;
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .25s,visibility 0s linear .34s;
  pointer-events:none;max-width:min(560px,calc(100vw - 32px));text-align:center}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .25s}

.lf{cursor:pointer}
.lf .hit{fill:transparent}
/* no box when a tap moves focus to a leaf; keyboard focus keeps its outline */
.lf:focus:not(:focus-visible){outline:none}
.lfs{pointer-events:none;transform-origin:7.5px 0;transition:transform .16s cubic-bezier(.22,1,.36,1)}
.lf:hover .lfs,.lf:focus-visible .lfs{transform:scale(1.28)}
.lfring{opacity:0;pointer-events:none;transition:opacity .16s}
.lf:hover .lfring,.lf:focus-visible .lfring{opacity:.6!important}
/* the faint dots on empty places. Scoped to the circles: the prototype had it as
   plain .ghost, which also made its ghost buttons (Back, Cancel) unclickable */
circle.ghost{pointer-events:none}
.hl{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3;r:16}50%{opacity:.07;r:26}}

@media (max-width:900px){
  .dock{width:calc(100% - 24px)}
  .hud{max-width:60vw}
}
/* ------------------------------------------------------------------
   Compact layout. Phones, small tablets and landscape phones. The
   raised total moves from the top-left card to a thin strip above the
   search, so it no longer sits on the tree.
   ------------------------------------------------------------------ */
.mstrip{display:none}
@media (max-width:900px),(max-height:520px){
  .rail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"logo brand cta" "seg seg flag";gap:8px 10px;align-items:center;
    padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px}
  .rail .logo{grid-area:logo;height:34px;width:34px}
  .brand{grid-area:brand;min-width:0}
  .brand b{font-size:14px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .brand span{display:none}
  #openGive{grid-area:cta;padding:9px 13px;font-size:11px;letter-spacing:.02em}
  .seg{grid-area:seg;min-width:0;overflow-x:auto;scrollbar-width:none;justify-self:start;max-width:100%}
  .seg::-webkit-scrollbar{display:none}
  .seg button{padding:6px 12px;font-size:12px}
  .flag{grid-area:flag;margin:0;font-size:10px;padding:4px 9px}

  .hud{top:10px;left:14px;right:56px;max-width:none}
  .hud .eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:4px}
  .hud h1{font-size:clamp(15px,3.7vw,24px);line-height:1.18;margin-bottom:0}
  .hud .meter{display:none}

  .zoomer{top:10px;right:10px;gap:5px}
  .zoomer button{width:34px;height:34px;border-radius:10px;font-size:16px}
  .zlevel{display:none}

  .dock{left:10px;right:10px;width:auto;transform:none;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .dockrow{flex-wrap:wrap;gap:8px;padding:8px 10px 10px}
  .find{flex:1 1 100%;padding:9px 12px}
  .chips{flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{padding:6px 13px;font-size:12px}

  .mstrip{display:block;padding:10px 14px 9px;border-bottom:1px solid var(--line)}
  .ms-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--muted);white-space:nowrap}
  .ms-row span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .ms-row small{font-size:12px;color:var(--muted)}
  .ms-row b{font-family:Fredoka,system-ui,sans-serif;font-size:17px;color:var(--purple);font-weight:700}
  .ms-row em{font-style:normal;font-weight:700;color:var(--purple);white-space:nowrap}
  .ms-bar{height:5px;background:var(--lavender);border-radius:99px;margin-top:7px;overflow:hidden}
  .ms-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .9s cubic-bezier(.22,1,.36,1);
    background:linear-gradient(90deg,var(--magenta),var(--orange),var(--green))}

  /* modals become sheets that fill the screen */
  .scrim{padding:0;align-items:flex-end}
  .flow{width:100%;max-height:100dvh;height:100dvh;border-radius:0}
  .card{width:100%;border-radius:20px 20px 0 0;max-height:88dvh;overflow-y:auto}
  .two{grid-template-columns:1fr}

  /* the accessible list becomes stacked cards rather than a wide table */
  #listBody .dash,#listBody{padding-left:0;padding-right:0}
  #listBody thead{display:none}
  #listBody table,#listBody tbody,#listBody tr,#listBody td{display:block;width:100%}
  #listBody tr{padding:12px 0;border-bottom:1px solid var(--line)}
  #listBody td{padding:2px 0;border:0}
  .box{overflow-x:auto}
}
/* landscape phones: everything on as few rows as possible */
@media (max-height:520px) and (orientation:landscape){
  .rail{grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"logo brand seg flag cta";padding:6px 12px}
  .hud{display:none}
  .dockrow{flex-wrap:nowrap}
  .find{flex:1 1 auto}
  .chips{flex:0 0 auto}
  .mstrip{padding:7px 14px 6px}
  .ms-bar{margin-top:4px}
}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ------------------------------------------------------------------
   Live page additions. Nothing above this line differs from the
   signed-off prototype except the prototype-only rules taken out.
   ------------------------------------------------------------------ */

/* The prototype's "Prototype, sample data" pill is gone. On the staging
   address the same pill says so instead; on the live address it is hidden,
   and the brand takes its margin so the buttons still sit on the right. */
.flag{display:none}
body.staging .flag{display:flex}
.brand{margin-right:auto}
body.staging .brand{margin-right:0}
@media (max-width:900px),(max-height:520px){ .brand{margin-right:0} }

/* shown for the moment before the tree data arrives */
.loading{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:5;
  color:var(--dim);font-size:13.5px;font-weight:600;text-align:center;pointer-events:none}

/* a field the donor needs to fix */
.field.bad input,.field.bad select,.field.bad textarea,.check.bad{border-color:var(--magenta);background:#FFF0F6}
.field .err{display:block;font-size:12px;font-weight:600;color:#B00350;margin-top:5px}
.field .err:empty{display:none}
.opt{font-weight:500;color:var(--dim)}

/* people leave this empty; bots fill it in */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* when a payment could not be started */
.notice.bad{background:#FFE4EE;border-color:#F9A8C3;color:#8C0340;margin-top:12px}
.notice.test{margin-top:12px;background:var(--wash);border-color:var(--line);color:var(--muted)}

/* iPhones zoom the whole page into any box with text smaller than 16px when
   it is tapped, and the page then stays zoomed. The prototype's boxes are
   14.5px, so on phones they are 16px. The search box keeps its signed-off
   height, so the tree still fits exactly as designed. */
@media (max-width:900px),(max-height:520px){
  .field input,.field select,.field textarea{font-size:16px}
  .find input{font-size:16px;line-height:21px;height:21px}
}