/* ============================================================
   calendar-wheel.css — the wheel of the liturgical year (calendar-wheel.js):
   the full dial at /calendar#wheel and its small copy in the home page's
   "Today in the Church" card.
   Linked only from those two pages, after their other sheets.
   Every word sits on the parchment in ink, --gold-deep (5.1:1) or #6b5d48
   (5.7:1); --muted (4.4:1) and --gold (3.6:1) are kept off small text.
   ============================================================ */

/* Without the script the sections stay hidden, and the page is as it was. */
.wheel-sec[hidden],.wheel-mini-dock[hidden],.wheel-tip[hidden]{display:none !important;}

/* ── The section on /calendar ── */
.wheel-sec{
  padding:56px 0 60px;
  background:radial-gradient(circle at 28% 46%,rgba(201,168,90,.12),transparent 58%),var(--paper);
  border-bottom:1px solid var(--lit-muted,var(--rule));
}
.wheel-in{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;}
@media(min-width:900px){
  .wheel-in{
    grid-template-columns:minmax(0,560px) minmax(0,1fr);
    grid-template-areas:"dial head" "dial side";
    grid-template-rows:auto 1fr;column-gap:56px;row-gap:22px;align-items:start;
  }
  .wheel-dial{grid-area:dial;}
  .wheel-head{grid-area:head;padding-top:28px;}
  .wheel-side{grid-area:side;}
}
.wheel-title{
  font-family:var(--head);font-weight:600;font-size:clamp(30px,4vw,42px);
  line-height:1.1;color:var(--ink);margin:10px 0 8px;
}
.wheel-range{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin:0;
}
.wheel-count{
  font-family:var(--head);font-style:italic;font-weight:500;font-size:clamp(23px,2.6vw,29px);
  line-height:1.25;color:var(--ink);margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
}

/* ── The dial: the ring is SVG, the centre and the tip are HTML over it ── */
.wheel-dial{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1;}
.wheel-svg{display:block;width:100%;height:100%;overflow:visible;border-radius:50%;cursor:pointer;touch-action:manipulation;}
.wheel-svg:focus{outline:none;}
.wheel-svg:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;}
.wheel-gilt{fill:none;stroke:var(--gold);}
.wheel-arc{fill:none;}
.wheel-seam{stroke:var(--paper);stroke-width:3;}
.wheel-slabel{
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;fill:#fbf8ef;pointer-events:none;
}
.wheel-slabel.is-light{fill:var(--ink);}
.wheel-month{stroke:#b9a57c;stroke-width:1.5;}
.wheel-mlabel{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.1em;fill:var(--gold-deep);pointer-events:none;}
.wheel-tick{stroke-linecap:round;}
.wheel-ahead{fill:none;stroke:var(--gold-deep);stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round;}
.wheel-today{fill:var(--paper-card);stroke:var(--espresso);stroke-width:3;}
.wheel-glow{transform-box:fill-box;transform-origin:center;pointer-events:none;}
.wheel-cursor{display:none;pointer-events:none;}
.wheel-cursor.is-on{display:inline;}
.wheel-cursor-line{stroke:var(--espresso);stroke-width:1.5;}
.wheel-cursor-ring{fill:none;stroke:var(--espresso);stroke-width:2.5;}

/* The marker breathes with the lantern's halo, at its pace — and not at all
   for a reader who has asked for stillness. */
@keyframes wheel-breathe{
  0%,100%{opacity:.6;transform:scale(.82);}
  50%{opacity:1;transform:scale(1.12);}
}
@media(prefers-reduced-motion:no-preference){
  .wheel-glow{animation:wheel-breathe 5.5s ease-in-out infinite;}
}
@media(prefers-reduced-motion:reduce){
  .wheel-glow{animation:none;}
}

/* ── The centre: emblem, today, its rank and colour, the Gospel ── */
.wheel-centre{
  position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;
}
.wheel-emblem{width:24%;height:auto;filter:drop-shadow(0 0 14px var(--lit-halo,rgba(201,168,90,.45)));}
.wheel-c-date{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin:10px 0 6px;
}
.wheel-c-feast{
  font-family:var(--head);font-weight:600;font-size:clamp(17px,2.3vw,25px);line-height:1.15;
  color:var(--ink);margin:0 0 8px;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.wheel-c-meta{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin:0 0 10px;
}
.wheel-c-gospel{
  pointer-events:auto;font-family:var(--body);font-size:17px;color:var(--gold-deep);
  text-decoration:underline;text-decoration-color:rgba(125,98,36,.45);text-underline-offset:3px;
}
.wheel-c-gospel:hover{text-decoration-color:currentColor;}
.wheel-c-gospel:focus-visible{outline:1px solid var(--gold-deep);outline-offset:3px;border-radius:1px;}

/* The colour word, in the deepened tones of the panel's buttons. */
[data-color] .wheel-c-colour{color:var(--gold-deep);}
[data-color="green"] .wheel-c-colour{color:#2e5a3a;}
[data-color="violet"] .wheel-c-colour{color:#4a2d6e;}
[data-color="red"] .wheel-c-colour{color:#8b1a1a;}
[data-color="rose"] .wheel-c-colour{color:#954d63;}
[data-color="black"] .wheel-c-colour{color:#1a120b;}

/* ── The tip: the house tooltip, espresso and a champagne hairline ── */
.wheel-tip{
  position:absolute;z-index:5;top:0;left:0;width:max-content;max-width:min(270px,82%);
  display:flex;flex-direction:column;gap:3px;padding:10px 14px 12px;
  font-family:var(--body);font-size:15px;line-height:1.35;color:rgba(246,241,230,.82);
  background:var(--espresso);border:1px solid var(--rule-dark);border-radius:4px;
  box-shadow:0 6px 18px rgba(26,18,11,.22),0 1px 3px rgba(26,18,11,.18);pointer-events:none;
}
.wheel-tip-date{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);}
.wheel-tip-feast{font-family:var(--head);font-size:20px;font-weight:600;line-height:1.15;color:var(--paper);margin:2px 0;}
.wheel-tip-meta{font-size:14px;}
.wheel-tip-transferred{margin:-2px 0 2px;font-size:14px;font-style:italic;}
.wheel-tip-read{font-size:14px;color:var(--paper);}
.wheel-tip-open{
  pointer-events:auto;margin-top:8px;align-self:flex-start;min-height:40px;padding:8px 14px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--espresso);background:var(--champagne);border:0;border-radius:2px;cursor:pointer;
}
.wheel-tip-open:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;}

/* ── Controls, legend, and the year as a list ── */
.wheel-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;}
.wheel-btn{
  min-height:44px;padding:10px 22px;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);background:transparent;
  border:1px solid var(--gold-deep);border-radius:2px;cursor:pointer;
}
.wheel-btn:hover{background:var(--gold-deep);color:var(--paper);}
.wheel-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}
.wheel-hint{flex:1 1 240px;margin:0;font-size:15px;line-height:1.5;color:#6b5d48;}
.wheel-legend{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 18px;}
.wheel-legend li{display:flex;align-items:center;gap:10px;font-size:15.5px;line-height:1.35;color:var(--ink);}
.wheel-sw{flex:0 0 auto;width:24px;height:10px;border-radius:2px;}
.wheel-sw-violet{background:#4a2d6e;}
.wheel-sw-white{background:#f5f0e0;box-shadow:inset 0 0 0 2px var(--gold);}
.wheel-sw-green{background:#2e5a3a;}
.wheel-sw-rose{background:#a85f74;}
.wheel-sw-tick,.wheel-sw-hdo{width:24px;height:16px;background:linear-gradient(var(--gold-deep),var(--gold-deep)) center/2px 12px no-repeat;}
.wheel-sw-hdo{height:22px;background:radial-gradient(circle,var(--gold-deep) 3px,transparent 3.5px) center top/8px 8px no-repeat,linear-gradient(var(--gold-deep),var(--gold-deep)) center bottom/3.5px 18px no-repeat;}

.wheel-list{margin:24px 0 0;border-top:1px solid var(--rule);padding-top:14px;}
.wheel-list summary{
  cursor:pointer;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);padding:8px 0;min-height:24px;
}
.wheel-list summary:focus-visible{outline:1px solid var(--gold-deep);outline-offset:3px;}
.wheel-list h3{font-family:var(--head);font-size:22px;font-weight:600;color:var(--ink);margin:16px 0 6px;}
.wheel-list ol{margin:0;padding:0;list-style:none;font-size:16px;line-height:1.45;}
.wheel-list-seasons li{padding:3px 0;color:var(--ink);}
.wheel-list-feasts{columns:2 280px;column-gap:28px;}
.wheel-list-feasts li{break-inside:avoid;}
.wheel-list-feasts button{
  display:block;width:100%;padding:5px 0;text-align:left;font:inherit;color:var(--ink);
  background:none;border:0;cursor:pointer;
}
.wheel-list-feasts button:hover{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;}
.wheel-list-feasts button:focus-visible{outline:1px solid var(--gold-deep);outline-offset:2px;}
.wheel-list-date{
  display:inline-block;min-width:4.6em;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.1em;color:var(--gold-deep);
}

/* The day the wheel opened, in the month grid below. */
.litcal-cell.wheel-picked{outline:2px solid var(--gold-deep);outline-offset:2px;}

/* ── Phone: the ring fills the width, so its own lettering steps up ── */
@media(max-width:640px){
  .wheel-sec{padding:38px 0 42px;}
  .wheel-slabel{display:none;}
  .wheel-mlabel{font-size:21px;}
  .wheel-centre{inset:19%;}
  .wheel-emblem{width:22%;}
  .wheel-c-date,.wheel-c-meta{font-size:10px;letter-spacing:.12em;margin-top:6px;margin-bottom:4px;}
  .wheel-c-feast{font-size:16.5px;-webkit-line-clamp:3;margin-bottom:4px;}
  .wheel-c-gospel{font-size:15px;}
  .wheel-range{font-size:10px;letter-spacing:.14em;}
}

/* ── The home page's small copy: the ring, the countdown, a door ──
   Docked inside the "Today in the Church" card (.litcal-panel), between the
   day and the card's buttons, under a hairline of its own. The card names the
   day, its rank and its colour; this row adds only what it lacked. */
.wheel-mini-dock{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--rule);}
.wheel-mini{display:flex;align-items:center;gap:22px;color:var(--ink);text-decoration:none;}
.wheel-mini .wheel-dial-mini{flex:0 0 auto;width:104px;max-width:none;margin:0;}
.wheel-dial-mini .wheel-svg{cursor:inherit;}
.wheel-dial-mini .wheel-today{stroke-width:6;}
.wheel-dial-mini .wheel-ahead{stroke-width:5;stroke-dasharray:1 14;}
.wheel-dial-mini .wheel-seam{stroke:#fff;stroke-width:5;}   /* the card is white */
.wheel-dial-mini .wheel-centre{inset:20%;}
.wheel-dial-mini .wheel-emblem{width:62%;}
.wheel-mini-text{display:flex;flex-direction:column;gap:6px;min-width:0;}
.wheel-mini-count{font-family:var(--head);font-style:italic;font-size:19px;line-height:1.3;color:var(--ink);}
.wheel-mini-more{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);
}
.wheel-mini:hover .wheel-mini-more{text-decoration:underline;text-underline-offset:4px;}
.wheel-mini:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px;border-radius:2px;}
@media(max-width:640px){
  .wheel-mini-dock{margin-top:18px;padding-top:16px;}
  .wheel-mini{gap:16px;}
  .wheel-mini .wheel-dial-mini{width:80px;}
  .wheel-mini-more{font-size:10px;letter-spacing:.14em;}
  .wheel-mini-count{font-size:17px;}
}

@media print{
  .wheel-sec,.wheel-mini-dock{display:none !important;}
}