/* Doodle Club: library, gallery, account, admin and the colouring screen. Uses the tokens in site.css
   (paper, ink frame, crayon palette, Fredoka/Nunito, one stroke, one spacing scale). */

/* ---------- shared bits */
.club-stack { display: grid; gap: var(--sp-4); max-width: 52rem; }
.club-small { min-height: 44px; font-size: var(--s-small); padding-inline: 1em; }
.club-h2 { font-family: var(--font-display); font-size: calc(var(--s-large) * 1.4); font-weight: 600; line-height: 1.1; margin-bottom: var(--sp-2); }
.club-section { margin-top: var(--sp-5); }
.club-avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--av, var(--yellow)); overflow: hidden; }
.club-avatar svg { width: 30px; height: auto; margin-top: 10px; }
.club-swatch i { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid var(--ink); background: var(--av); margin-right: 0.45em; }
.club-kids { display: grid; gap: var(--sp-2); }
.club-kids li { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.club-kids__name { font-family: var(--font-display); font-size: var(--s-large); font-weight: 600; margin-right: auto; }
.club-oidc { display: grid; gap: var(--sp-1); justify-items: start; padding-top: var(--sp-2); border-top: 2px dotted var(--ink); }
.club-oidc__btn { min-width: 16rem; justify-content: center; }
.club-points { display: grid; gap: var(--sp-1); font-weight: 700; }
.club-points li { padding-left: 1.6em; position: relative; }
.club-points li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9em; height: 0.9em; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--green); }
.club-price { font-size: var(--s-large); font-weight: 700; }
.club-price strong { font-family: var(--font-display); font-weight: 600; font-size: 1.4em; }
.club-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-3); }
.club-hero__text { display: grid; gap: var(--sp-3); justify-items: start; }
.club-hero__dood { width: min(220px, 100%); height: auto; justify-self: center; }

/* member bar: who's colouring + tabs */
.club-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; justify-content: space-between; background: var(--sheet); border: var(--stroke) solid var(--ink); border-image: url("/assets/img/frame.svg") 20 round; border-image-width: 20px; padding: var(--sp-2) var(--sp-3); }
.club-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.club-who__label { font-weight: 800; }
.club-who__kids { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.club-who__kid { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0.2rem 0.9rem 0.2rem 0.3rem; border: var(--stroke) solid var(--ink); border-radius: 999px; background: var(--sheet); font-weight: 800; cursor: pointer; }
.club-who__kid[aria-pressed="true"] { background: var(--yellow); }
.club-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-weight: 800; }
.club-tabs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.club-tabs a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; text-decoration-color: var(--red); }

/* library grid */
.club-filter { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.club-filter small { font-weight: 700; margin-left: 0.3em; }
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 42vw), 1fr)); gap: var(--sp-3); }
.club-tile__link { position: relative; display: grid; gap: 0.4rem; background: var(--sheet); padding: 0.6rem; text-decoration: none; height: 100%; }
.club-tile__link img { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.club-tile__meta { display: flex; justify-content: space-between; gap: 0.4rem; font-size: var(--s-small); font-weight: 800; }
.club-tile--blur img { opacity: 0.85; }
.club-tag { position: absolute; top: 0.4rem; left: 0.4rem; background: var(--yellow); border: var(--stroke) solid var(--ink); border-radius: 999px; padding: 0.05rem 0.6rem; font-weight: 800; font-size: var(--s-small); }
.club-tag--done { background: var(--green); }
.club-tag--going { background: var(--sheet); }
@media (hover: hover) and (pointer: fine) { .club-tile__link:hover { background: #fff8e0; } }

/* gallery + favourites */
.club-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 44vw), 1fr)); gap: var(--sp-3); }
.club-art { display: grid; gap: var(--sp-1); background: var(--sheet); padding: 0.7rem; }
.club-art img { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.club-art figcaption { font-weight: 700; font-size: var(--s-small); display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.club-stickers { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; font-weight: 800; }
.club-sticker { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--sheet); font-size: 1.6rem; }
.club-pick { position: relative; }
.club-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.club-pick .club-art { height: 100%; }
.club-pick input:checked + .club-art { background: #fff3cc; box-shadow: inset 0 0 0 5px var(--yellow); } /* taste-skill-ignore: a selection ring, not a resting shadow */
.club-pick input:focus-visible + .club-art { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--yellow); } /* taste-skill-ignore: focus ring */
.club-count { position: sticky; bottom: var(--sp-2); z-index: 5; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; background: var(--sheet); border: var(--stroke) solid var(--ink); border-radius: 18px; padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); font-weight: 800; }

/* admin */
.club-table { width: 100%; border-collapse: collapse; font-size: var(--s-small); background: var(--sheet); }
.club-table th, .club-table td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 2px dotted var(--ink); vertical-align: top; }
.club-table th { font-family: var(--font-display); font-weight: 600; }
.club-scroll { overflow-x: auto; }
.club-stat { font-family: var(--font-display); font-size: calc(var(--s-large) * 1.6); font-weight: 600; }

@media (max-width: 760px) {
  .club-hero { grid-template-columns: 1fr; }
  .club-hero__dood { width: 140px; grid-row: 1; }
}

.club-textarea { width: 100%; min-height: 7rem; resize: vertical; }
.club-inline { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.club-stack--wide { max-width: none; }
.club-droplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.2rem var(--sp-2); max-height: 26rem; overflow-y: auto; font-size: var(--s-small); font-weight: 700; margin-bottom: var(--sp-2); }
.club-droptheme { border-top: 1px solid currentColor; padding: var(--sp-1) 0; }
.club-droptheme summary { cursor: pointer; min-height: 32px; }
.club-dropitem { display: flex; gap: 0.4rem; align-items: center; min-height: 32px; }

/* admin analytics */
.an-period { margin-top: var(--sp-2); font-weight: 700; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.an-kpi { display: grid; gap: 0.2rem; align-content: start; background: var(--sheet); border: var(--stroke) solid var(--ink); border-radius: 18px; padding: var(--sp-2) var(--sp-3); }
.an-kpi__label { font-weight: 800; font-size: var(--s-small); }
.an-kpi .club-stat { line-height: 1.1; font-variant-numeric: tabular-nums; }
.an-funnel { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; gap: 0.45rem; }
.an-funnel li { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(8rem, 12rem); gap: var(--sp-2); align-items: center; font-size: var(--s-small); font-weight: 700; }
.an-funnel__bar { position: relative; height: 1.9rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); overflow: hidden; }
.an-funnel__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--yellow); }
.an-funnel__bar span { position: relative; padding-left: 0.6rem; line-height: 1.75rem; font-variant-numeric: tabular-nums; }
.an-funnel__drop b { color: #b3261e; }
.an-funnel--small li { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(8rem, 12rem); }
.an-num td, .an-num th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-details summary { cursor: pointer; font-weight: 800; margin: var(--sp-1) 0; }
@media (max-width: 760px) {
  .an-funnel li { grid-template-columns: 1fr; gap: 0.2rem; }
}
.an-period .field-select { padding-right: 2.4rem; min-width: 0; }

/* /admin/play: anonymous play counts (templates/club/admin_play.html). Series colours: the dataviz reference palette's
   first four categorical slots (validated: adjacent CVD dE 9.1+, normal 22.9+; aqua and yellow sit under 3:1 on white,
   so the lines carry end labels and a table view). Stars: one blue ramp, light to dark. Heat: the same ramp. */
.club-admin { --pc-s1: #2a78d6; --pc-s2: #eb6834; --pc-s3: #1baf7a; --pc-s4: #eda100;
  --pc-st1: #86b6ef; --pc-st2: #2a78d6; --pc-st3: #184f95; --pc-muted: #52514e; --pc-grid: #dedcd7; }
.pc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: var(--sp-1) 0; padding: 0; font-size: var(--s-small); font-weight: 700; }
.pc-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.pc-sw { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 4px; }
.pc-sw.pc-s1 { background: var(--pc-s1); } .pc-sw.pc-s2 { background: var(--pc-s2); } .pc-sw.pc-s3 { background: var(--pc-s3); } .pc-sw.pc-s4 { background: var(--pc-s4); }
.pc-sw.pc-st1, .pc-mix .pc-st1 { background: var(--pc-st1); } .pc-sw.pc-st2, .pc-mix .pc-st2 { background: var(--pc-st2); } .pc-sw.pc-st3, .pc-mix .pc-st3 { background: var(--pc-st3); }
.pc-chart { background: var(--sheet); border-radius: 12px; padding: 0.4rem 0; overflow-x: auto; }
.pc-svg { display: block; width: 100%; min-width: 600px; height: auto; font-family: inherit; }   /* phones scroll it sideways inside its box */
.pc-grid { stroke: var(--pc-grid); stroke-width: 1; }
.pc-tick, .pc-band-t { font-size: 11px; fill: var(--pc-muted); font-variant-numeric: tabular-nums; }
.pc-band { fill: #f0efec; }
.pc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pc-line.pc-s1 { stroke: var(--pc-s1); } .pc-line.pc-s2 { stroke: var(--pc-s2); } .pc-line.pc-s3 { stroke: var(--pc-s3); } .pc-line.pc-s4 { stroke: var(--pc-s4); }
.pc-dot { stroke: var(--sheet); stroke-width: 2; }
.pc-dot.pc-s1 { fill: var(--pc-s1); } .pc-dot.pc-s2 { fill: var(--pc-s2); } .pc-dot.pc-s3 { fill: var(--pc-s3); } .pc-dot.pc-s4 { fill: var(--pc-s4); }
.pc-end { font-size: 12px; font-weight: 700; fill: var(--ink); }
.pc-hit { fill: transparent; }
.pc-hit:hover { fill: rgba(26, 26, 26, 0.05); }
.pc-mix { display: flex; gap: 2px; width: 10rem; height: 0.9rem; margin-bottom: 0.15rem; }
.pc-mix i { display: block; width: var(--w); min-width: 4px; border-radius: 4px; }
.pc-games th small, .pc-games td small { display: block; font-weight: 600; color: var(--pc-muted); }
.pc-muted { color: var(--pc-muted); }
.pc-flag { display: inline-block; font-weight: 800; font-size: 0.85em; padding: 0.05rem 0.5rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); white-space: nowrap; }
.pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pc-heat td { text-align: center; min-width: 3rem; }
.pc-heat .pc-h1 { background: #cde2fb; } .pc-heat .pc-h2 { background: #9ec5f4; } .pc-heat .pc-h3 { background: #6da7ec; }
.pc-heat .pc-h4 { background: #3987e5; color: #fff; } .pc-heat .pc-h5 { background: #256abf; color: #fff; } .pc-heat .pc-h6 { background: #184f95; color: #fff; }
.pc-heat .pc-hs { background: repeating-linear-gradient(135deg, #f0efec 0 4px, #fff 4px 8px); color: var(--pc-muted); }
.pc-week { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; align-items: end; height: 12rem; margin: var(--sp-2) 0; padding: 0; }
.pc-week li { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; font-size: var(--s-small); font-weight: 700; }
.pc-week__n { font-variant-numeric: tabular-nums; }
.pc-week__bar { align-self: end; height: var(--h); min-height: 2px; background: var(--pc-s1); border-radius: 4px 4px 0 0; }
.pc-week__bar.is-small { height: 0.6rem; background: repeating-linear-gradient(135deg, #86b6ef 0 3px, transparent 3px 6px); }
.pc-week__d { color: var(--pc-muted); padding-top: 0.2rem; }
.pc-change { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .pc-week { gap: 0.25rem; }
  .pc-week li { font-size: 0.72rem; }
}

/* /admin/print */
.club-print { border-top: 2px dashed var(--ink, #1a1a1a); padding-top: 1rem; margin-top: 1rem; }
.club-print h3 { font-family: Fredoka, sans-serif; margin: 0 0 .5rem; }
.club-thumbs { display: flex; gap: .75rem; flex-wrap: wrap; }
.club-thumbs img { border: 2px solid #1a1a1a; border-radius: 8px; height: auto; max-width: 45%; }
.club-addressform { display: grid; gap: var(--sp-1); max-width: 28rem; margin: var(--sp-1) 0 var(--sp-2); }
.club-addressform label { display: grid; gap: 0.2rem; font-weight: 700; font-size: var(--s-small); }

/* family devices (templates/club/family.html) */
.fam-code { display: grid; gap: var(--sp-1); justify-items: center; text-align: center; background: var(--sheet); border: var(--stroke) solid var(--ink); border-radius: 18px; padding: var(--sp-3); margin-bottom: var(--sp-3); }
.fam-code__for { font-weight: 800; }
.fam-code__letters { font-family: var(--font-display); font-size: clamp(2.2rem, 11vw, 3.4rem); font-weight: 600; letter-spacing: 0.25em; padding-left: 0.25em; line-height: 1.1; }
.fam-code__qr svg { width: min(220px, 60vw); height: auto; display: block; background: #fff; }
.fam-kid { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; margin: 0 var(--sp-2) var(--sp-1) 0; font-weight: 800; cursor: pointer; }
.fam-kid input { width: 1.4em; height: 1.4em; }
.fam-devs { display: grid; gap: var(--sp-2); }
.fam-devs li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.fam-status { margin-bottom: var(--sp-3); }

/* the parent web app (templates/club/family_*.html; docs/parent-app.md) */
.fam-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-weight: 800; margin-bottom: var(--sp-3); }
.fam-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fam-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; text-decoration-color: var(--red); }
.fam-child__name { display: flex; align-items: center; gap: var(--sp-2); }
.fam-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fam-set { display: flex; gap: 0.7rem; align-items: flex-start; min-height: 48px; padding: 0.4rem 0; cursor: pointer; }
.fam-set input { width: 1.5em; height: 1.5em; margin-top: 0.15em; flex: none; }
.fam-set small { display: block; font-weight: 600; font-size: var(--s-small); }
.fam-radio { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; margin-right: var(--sp-3); font-weight: 800; cursor: pointer; }
.fam-radio input { width: 1.4em; height: 1.4em; }
.fam-times { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fam-save { padding: var(--sp-2) 0; }
.fam-weeks { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.fam-drawings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 36vw), 1fr)); gap: var(--sp-2); }
.fam-drawings img { width: 100%; height: auto; background: #fff; }
.fam-drawings__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem; font-weight: 700; font-size: var(--s-small); }
.fam-big { font-family: var(--font-display); font-size: calc(var(--s-large) * 1.6); font-weight: 600; }
.fam-h3 { font-family: var(--font-display); font-size: var(--s-large); font-weight: 600; margin-top: var(--sp-2); }
.fam-list { display: grid; gap: 0.2rem; padding-left: 1.2em; list-style: disc; }
.fam-n { font-weight: 800; }
.fam-share { flex-basis: 100%; display: grid; gap: var(--sp-1); padding-top: var(--sp-1); border-top: 2px dotted var(--ink); }
.fam-sample { display: inline-block; vertical-align: middle; font-size: var(--s-small); font-weight: 800; background: var(--yellow); border: var(--stroke) solid var(--ink); border-radius: 999px; padding: 0.05rem 0.6rem; }
.fam-idea { padding: var(--sp-2) 0; border-top: 2px dotted var(--ink); }
.fam-devs li + li { border-top: var(--stroke) solid var(--ink); padding-top: var(--sp-2); }
/* gift memberships (templates/club/gifts.html, gift_thanks.html, redeem.html) */
.gift-steps { display: grid; gap: var(--sp-1); padding-left: 1.4em; font-weight: 700; }
.gift-steps li { list-style: decimal; }
.club-gift-links { margin-top: var(--sp-2); }
.gift-after { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.gift-after + form, .gift-after ~ p { margin-bottom: var(--sp-2); }
.gift-code-input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.3rem; letter-spacing: 0.08em; text-transform: uppercase; max-width: 22rem; width: 100%; }
.gift-card { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--sp-3); align-items: center; max-width: 40rem; background: var(--sheet); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.gift-card__dood { width: 100%; height: auto; }
.gift-card__text { display: grid; gap: var(--sp-1); }
.gift-card__kicker { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--s-small); }
.gift-card__title { font-family: var(--font-display); font-size: calc(var(--s-large) * 1.5); font-weight: 600; line-height: 1.1; }
.gift-card__label { font-weight: 800; margin-top: var(--sp-1); }
.gift-card__code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(1.1rem, 4.6vw, 1.7rem); font-weight: 700; letter-spacing: 0.06em; padding: 0.5rem 0.8rem; border: 3px dashed var(--red); border-radius: 14px; background: #fff; justify-self: start; white-space: nowrap; }
.gift-card__lines { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-2); font-weight: 800; }
.gift-card__lines span { border-bottom: 2px solid var(--ink); padding-bottom: 1.6rem; }
@media (max-width: 560px) {
  .gift-card { grid-template-columns: 1fr; padding: var(--sp-3); }
  .gift-card__dood { width: 5rem; }
  .gift-card__lines { grid-template-columns: 1fr; }
}
@media print {
  body:has(.gift-card) .nav, body:has(.gift-card) .simple-foot, body:has(.gift-card) .skip, .gift-noprint, .testbadge { display: none !important; }
  body:has(.gift-card) .page { border: 0; margin: 0; }
  .gift-card { margin: 2cm auto; break-inside: avoid; }
}

/* one Doodle Club across the website and the app: the calm note when an account has both a website and an App Store
   subscription (templates/club/account.html #both-subs). Information only: no colour alarm, no buttons of its own. */
.club-note { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); background: var(--sheet); border: var(--stroke) solid var(--ink); border-radius: 18px; }

/* /admin/calendar: the content calendar (templates/club/admin_calendar.html). Status reads as a word on every item;
   the colour only backs it up. */
.cal-nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: var(--s-small); font-weight: 700; margin-top: var(--sp-1); }
.cal-nav a { color: var(--ink); }
.cal-lanes-wrap { overflow-x: auto; }
.cal-lanes { min-width: 72rem; table-layout: fixed; }
.cal-lanes th:first-child { width: 7.5rem; }
.cal-lanes thead th { vertical-align: top; }
.cal-today { background: #fff6d6; }
.cal-train { display: block; margin-top: 0.2rem; font-family: inherit; font-size: 0.75rem; font-weight: 700; color: #184f95; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cal-item { display: grid; gap: 0.1rem; font-size: 0.8rem; line-height: 1.3; padding: 0.35rem 0.4rem; border-radius: 8px; border: 2px solid #dedcd7; background: var(--sheet); overflow-wrap: anywhere; }
.cal-item.cal-is-late { border-color: #c2410c; }
.cal-item.cal-is-due { border-color: #2a78d6; }
.cal-item.cal-is-done { opacity: 0.7; }
.cal-what { color: var(--ink); }
.cal-ev { color: #52514e; font-size: 0.72rem; }
.cal-tag { justify-self: start; display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px; background: #eceae5; color: #1a1a1a; }
.cal-tag.cal-late { background: #c2410c; color: #fff; }
.cal-tag.cal-due { background: #2a78d6; color: #fff; }
.cal-tag.cal-check { background: #eda100; color: #1a1a1a; }
.cal-tag.cal-done { background: #d9f2e6; color: #0f5132; }
.cal-brief { white-space: pre-wrap; font-family: inherit; font-size: var(--s-small); background: var(--sheet); border-radius: 12px; padding: var(--sp-1) var(--sp-2); }
.cal-live { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.cal-live__row { display: grid; grid-template-columns: 11rem 7.5rem 1fr auto; gap: 0.6rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 2px dotted var(--ink); font-size: var(--s-small); }
.cal-live__date { font-weight: 700; }
.cal-kind { font-size: 0.75rem; font-weight: 700; color: #52514e; }
.cal-warn { margin: 0 0 var(--sp-2); padding-left: 1.2rem; display: grid; gap: 0.3rem; font-size: var(--s-small); }
.cal-horizon td, .cal-horizon th { font-size: 0.8rem; }
.cal-gap { font-weight: 700; color: #c2410c; }
.cal-feeds { list-style: none; padding: 0; display: grid; gap: 0.4rem; font-size: var(--s-small); }
.cal-feeds code { overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .cal-live__row { grid-template-columns: 1fr auto; }
  .cal-live__title { grid-column: 1 / -1; }
}
.cal-phone { display: none; }
.cal-phone__who { font-family: var(--font-display); margin: var(--sp-2) 0 0.3rem; }
.cal-phone__day { font-weight: 700; font-size: var(--s-small); margin: 0.6rem 0 0.3rem; }
@media (max-width: 40rem) {
  .cal-lanes-wrap { display: none; }   /* phones: the same week as a list per person (done items left out) */
  .cal-phone { display: block; }
}