/* ROWAN 52 Saturdays - calendar grid (v1.7.0)
   Every Saturday is shared across all four causes, so causes appear once
   as a breakdown bar, never as per-tile or per-column colours. */

.rowan52{
  /* Campaign palette, sampled from the 52 Saturdays graphics (Oct 2026) */
  --r52-red:#DB3C31;        /* "52" and Total Goal */
  --r52-red-deep:#A52A21;
  --r52-teal:#306E6B;       /* headings, Thank You panel */
  --r52-teal-deep:#245553;
  --r52-peach:#E89F7B;      /* Food */
  --r52-sand:#F4D4A4;       /* Medical */
  --r52-pink:#F2A3A1;       /* Garden */
  --r52-mint:#76BFA2;       /* Training & Equipping */
  --r52-mint-bg:#F3F9F7;
  --r52-heart:#DB3C31;
  --r52-sand-edge:#E5BE7E;  /* Medical yellow, deepened for edges */
  --r52-sand-tint:#FBF1DF;
  --r52-star:#C99A4E;
  --r52-num:#4C5147;        /* calendar numbers */
  --r52-rule:#DDE6E3;
  --r52-track:#EEF4F2;
  --r52-ink:var(--uk-global-color, #2E3532);
  --r52-muted:var(--uk-global-muted-color, #5E6663);
  --r52-paper:var(--uk-global-background, #fff);
  font-synthesis:none;
  container:r52 / inline-size;
}

.rowan52 *{box-sizing:border-box}
.rowan52-loading{text-align:center;color:var(--r52-muted);padding:40px 0}

/* totals */
.r52-totals{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.r52-stat{text-align:center;min-width:96px}
.r52-stat b{display:block;font-size:30px;line-height:1;font-weight:800}
.r52-stat small{display:block;font-size:12.5px;color:var(--r52-muted);margin-top:5px}

/* progress: faint bordered track, rounded teal fill inset by 2px */
.r52-meter{height:16px;border-radius:99px;background:var(--r52-track);border:2px solid var(--r52-rule);
  padding:2px;overflow:hidden;max-width:760px;margin:0 auto 26px}
.r52-meter i{display:block;height:100%;min-width:0;border-radius:99px;background:var(--r52-teal);transition:width .5s ease}

/* breakdown: how every $1,000 Saturday is shared */
.r52-split{max-width:760px;margin:0 auto 22px}
.r52-split-h{text-align:center;font-weight:700;margin:0 0 10px;color:var(--r52-teal)}
/* Each block starts at its own label's width and the spare room is shared
   out evenly, so a long label like "Training & Equipping" always gets the
   space it needs, whatever font the theme uses. */
.r52-blocks{list-style:none;margin:0;padding:0;display:flex;gap:4px;border-radius:12px;overflow:hidden}
.r52-block{flex:1 1 auto}
.r52-block::before,.r52-block::marker{content:none}
.r52-block{margin:0;padding:14px 18px;background:var(--c);color:var(--r52-ink);line-height:1.25;display:flex;align-items:center}
.r52-block b{display:block;font-size:19px;font-weight:800}
/* One line on desktop: the label scales with the calendar's width and never wraps. */
.r52-block span{display:block;font-size:16px;font-weight:800;white-space:nowrap}
.r52-dot{display:none;width:10px;height:10px;border-radius:50%;flex:none}

.food{--c:var(--r52-peach)} .medical{--c:var(--r52-sand)}
.garden{--c:var(--r52-pink)} .training{--c:var(--r52-mint)}
/* Dark text on the pastels: readable, and matches the graphic. */
.r52-row b.amt{color:var(--r52-ink)}
.r52-dot,.r52-row .r52-dot{background:var(--c)}

/* legend */
.r52-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-size:13.5px;color:var(--r52-muted);margin-bottom:12px}
.r52-legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.r52-sw{width:20px;height:20px;border-radius:5px;border:2px solid #C9D4DD;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;flex:none}
.r52-sw.claimed{border-color:var(--r52-pink);background:#FDEFEE;color:var(--r52-heart)}
.r52-sw.mine{border-color:var(--r52-sand-edge);background:var(--r52-sand-tint);color:var(--r52-star)}
.r52-sw.part{border-color:var(--r52-pink);background:linear-gradient(to top,#FAD9D7 50%,#fff 50%)}
.r52-sw.picked{border-color:var(--r52-teal);background:var(--r52-teal);color:#fff}

/* tiles: plain, number only */
.r52-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px}
.r52-tile{position:relative;aspect-ratio:1/1.05;border:2px solid var(--r52-rule);
  border-radius:10px;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:2px;font:inherit;color:inherit;
  transition:transform .12s ease,box-shadow .12s ease}
.r52-num{font-weight:800;font-size:clamp(14px,1.7vw,22px);line-height:1;color:var(--r52-num)}
.r52-mark{font-size:clamp(12px,1.4vw,18px);line-height:1}
.r52-mark.heart{color:var(--r52-heart)}
.r52-mark.star{color:var(--r52-star)}

.r52-tile[data-status="available"]{cursor:pointer}
.r52-tile[data-status="available"]:hover,
.r52-tile[data-status="available"]:focus-visible{transform:translateY(-3px);box-shadow:0 5px 0 rgba(0,0,0,.13);border-color:var(--r52-sand-edge);background:#FDF8EE}
.r52-tile.is-taken{border-color:var(--r52-pink);background:#FDEFEE;cursor:pointer}
.r52-tile[data-status="pending"].is-taken{opacity:.75}
.r52-tile.is-taken .r52-num{color:var(--r52-red-deep)}
.r52-tile.is-mine{border-color:var(--r52-sand-edge);background:var(--r52-sand-tint);cursor:pointer}
.r52-tile.is-mine .r52-num{color:#7A5A1E}

/* partly given: the tile fills from the bottom as gifts come in */
.r52-tile.is-partial{cursor:pointer;border-color:var(--r52-pink);
  background:linear-gradient(to top,#FAD9D7 var(--fill),#fff var(--fill))}
.r52-tile.is-partial .r52-num{color:var(--r52-red-deep)}
.r52-left{font-size:10.5px;font-weight:700;line-height:1;color:var(--r52-red-deep);white-space:nowrap;max-width:100%;overflow:hidden}
.r52-tile.is-partial:hover,.r52-tile.is-partial:focus-visible{transform:translateY(-3px);box-shadow:0 5px 0 rgba(0,0,0,.13)}
.r52-tile.has-mine::after{content:"\2605";position:absolute;top:3px;right:5px;font-size:11px;line-height:1;color:var(--r52-star)}

/* in this donor's gifts, not yet paid */
.r52-tile.is-picked{cursor:pointer;border-color:var(--r52-teal);background:var(--r52-teal)}
.r52-tile.is-picked .r52-num{color:#fff}
.r52-amt{font-size:11px;font-weight:800;line-height:1;color:#DDF0EA;white-space:nowrap;max-width:100%;overflow:hidden}

@keyframes r52pop{0%{transform:scale(1)}38%{transform:scale(1.2)}100%{transform:scale(1)}}
.r52-tile.flash{animation:r52pop .5s ease;z-index:2}

/* modal */
.r52-scrim{position:fixed;inset:0;background:rgba(16,24,32,.55);display:none;
  align-items:center;justify-content:center;padding:18px;z-index:9999}
.r52-scrim.open{display:flex}
.r52-modal{background:var(--r52-paper);border-radius:18px;width:min(460px,100%);
  max-height:90vh;overflow:auto;padding:26px 24px;box-shadow:0 20px 46px rgba(0,0,0,.3)}
.r52-modal h3{margin:0 0 4px;font-size:26px;line-height:1.15}
.r52-modal p{margin:0 0 14px;color:var(--r52-muted)}
.r52-modal .r52-k{margin:0 0 6px;font-size:14px}
.r52-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--r52-rule);font-size:15px}
.r52-row .r52-dot{display:inline-block}
.r52-row b.amt{margin-left:auto;font-weight:800}
.r52-row:last-of-type{border-bottom:none}
/* One line above "Your gift": the row just before the total drops its own divider. */
.r52-row:has(+ .r52-total){border-bottom:none}
.r52-total{display:flex;justify-content:space-between;font-weight:800;font-size:16px;
  padding:10px 0 4px;border-top:2px solid var(--r52-rule);margin-top:2px}
.r52-box{background:var(--r52-mint-bg);border:2px solid var(--r52-rule);border-radius:10px;
  padding:11px 13px;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
/* "Given with love by" on its own line, the names below at full width. */
.r52-box > span:not(:only-child){font-size:14px;color:var(--r52-muted)}
.r52-box > b{font-size:16px;line-height:1.4;color:var(--r52-ink)}
.r52-box.mine{background:var(--r52-sand-tint);border-color:var(--r52-sand-edge)}
.r52-btn{border:none;border-radius:11px;padding:13px 18px;font-weight:800;font-size:15.5px;
  width:100%;margin-top:8px;cursor:pointer;background:var(--r52-red);color:#fff}
.r52-btn.blue{background:var(--r52-teal)}
.r52-btn.ghost{background:transparent;color:var(--r52-muted);font-weight:700;font-size:14px;padding:10px}
.r52-btn[disabled]{opacity:.55;cursor:not-allowed}

@media (max-width:780px){
  .r52-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .r52-tile{aspect-ratio:1/1}
  .r52-num{font-size:20px}
  .r52-mark{font-size:18px}
  .r52-blocks{flex-wrap:wrap}
  .r52-block{flex:1 1 calc(50% - 2px)}
  .r52-block span{font-size:15px}
  .r52-left,.r52-amt{font-size:12px}
  .r52-bar{flex-wrap:wrap}
  .r52-bar .r52-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .rowan52 *{transition:none!important;animation-duration:.01ms!important}
}

/* ---------------------------------------------------------- 1.7.0 */

.r52-test{max-width:760px;margin:0 auto 16px;padding:9px 14px;border-radius:10px;text-align:center;
  background:#FFF4D6;border:2px dashed var(--r52-sand-edge);color:#6B4E12;font-weight:700;font-size:14px}
.r52-howto{text-align:center;margin:0 auto 14px;max-width:620px;color:var(--r52-muted);font-size:14.5px;text-wrap:balance}

/* basket bar: sticks to the bottom of the screen while the calendar is in view */
.r52-bar{position:sticky;bottom:12px;z-index:5;display:none;align-items:center;gap:14px;
  max-width:760px;margin:16px auto 0;padding:12px 12px 12px 18px;border-radius:14px;
  background:var(--r52-teal-deep);color:#fff;box-shadow:0 10px 26px rgba(16,40,38,.28)}
.r52-bar.show{display:flex}
.r52-bar-txt{flex:1;min-width:0}
.r52-bar-txt b{display:block;font-size:16.5px}
.r52-bar-txt small{display:block;font-size:13px;color:#BFE0D8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r52-bar .r52-btn{width:auto;margin:0;flex:none;padding:12px 20px}
@keyframes r52bump{0%{transform:translateY(0)}35%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.r52-bar.bump{animation:r52bump .45s ease}

/* amount chips */
.r52-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:8px;margin:0 0 12px}
.r52-chip{border:2px solid var(--r52-rule);background:#fff;border-radius:11px;padding:12px 6px;
  font:inherit;font-weight:800;font-size:16px;color:var(--r52-ink);cursor:pointer;white-space:nowrap}
.r52-chip:hover{border-color:var(--r52-sand-edge)}
.r52-chip[aria-pressed="true"]{border-color:var(--r52-red);background:#FDEFEE;color:var(--r52-red-deep)}
.r52-chip:focus-visible,.r52-tile:focus-visible,.r52-btn:focus-visible,.r52-x:focus-visible{outline:3px solid var(--r52-teal);outline-offset:2px}

.r52-more{display:block;margin:0 0 14px}
.r52-more[hidden]{display:none}
.r52-more > span:first-child{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.r52-dollar{display:flex;align-items:center;border:2px solid var(--r52-rule);border-radius:11px;overflow:hidden;background:#fff}
.r52-dollar i{font-style:normal;font-weight:800;padding:0 4px 0 13px;color:var(--r52-muted)}
.r52-dollar input{border:0;outline:0;font:inherit;font-size:18px;font-weight:800;padding:11px 10px 11px 2px;width:100%;background:transparent}
.r52-dollar:focus-within{border-color:var(--r52-teal)}
.r52-more small{display:block;margin-top:6px;font-size:13px;color:var(--r52-muted)}

/* given so far on a partly given Saturday */
.r52-given{background:#FDF4F3;border:2px solid #F6D3D1;border-radius:11px;padding:11px 13px;margin:0 0 14px}
.r52-given-top{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.r52-given-bar{height:8px;border-radius:99px;background:#fff;margin:8px 0 6px;overflow:hidden}
.r52-given-bar i{display:block;height:100%;background:var(--r52-heart);border-radius:99px}
.r52-given small{display:block;font-size:13px;color:var(--r52-muted)}

.r52-row.more{--c:var(--r52-teal)}
.r52-err{color:#B42318;font-size:14px;font-weight:700;margin:8px 0 0 !important;min-height:0}
.r52-err:empty{display:none}
.r52-warn{background:#FFF4D6;border-radius:10px;padding:10px 12px;color:#6B4E12 !important;font-size:14.5px}

/* checkout */
.r52-list .r52-row{gap:8px}
.r52-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--r52-muted);cursor:pointer;padding:0 4px;border-radius:6px}
.r52-x:hover{color:var(--r52-red)}
.r52-form{margin-top:14px}
.r52-form label{display:block;margin:0 0 12px}
.r52-form label > span{display:block;font-size:14px;font-weight:700;margin-bottom:5px}
.r52-form input[type=text],.r52-form input[type=email]{width:100%;border:2px solid var(--r52-rule);border-radius:10px;
  padding:11px 12px;font:inherit;font-size:16px;background:#fff;color:var(--r52-ink)}
.r52-form input[type=text]:focus,.r52-form input[type=email]:focus{outline:0;border-color:var(--r52-teal)}
.r52-form small{display:block;margin-top:5px;font-size:13px;color:var(--r52-muted)}
.r52-privacy{margin:-4px 0 14px !important;padding:9px 12px;border-radius:9px;background:var(--r52-mint-bg);
  border:1px solid var(--r52-rule);font-size:13px !important;line-height:1.45;color:var(--r52-muted)}
.r52-form .r52-check{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:400}
.r52-form .r52-check input{width:18px;height:18px;accent-color:var(--r52-teal)}
.r52-fine{font-size:13px !important;margin:12px 0 0 !important;text-align:center}

/* The calendar sizes itself to its column, not the window, so it fits
   whatever width the YOOtheme section gives it. */
@container r52 (max-width:900px){
  .r52-left{display:none}
  .r52-amt{font-size:9.5px}
}
@container r52 (max-width:640px){
  .r52-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .r52-left{display:block;font-size:11px}
  .r52-amt{font-size:11px}
}
@container r52 (max-width:420px){
  .r52-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .r52-tile{aspect-ratio:1/1}
}

/* Too narrow for four labels on one line each: two by two instead. */
@container r52 (max-width:640px){
  .r52-blocks{flex-wrap:wrap}
  .r52-block{flex:1 1 calc(50% - 2px)}
  .r52-block span{font-size:15px}
}
/* Phones: room for two blocks a row, so a long label may take two lines. */
@container r52 (max-width:440px){
  .r52-block span{white-space:normal;font-size:15px}
}