/* The free guides in each app's area (/tea/steeping-guide and friends).
   Loaded after buddy.css and pages.css. Each page sets its accent with a
   .g-page--<accent> class on its first section. */

.g-page--mint     { --g: var(--mint);     --g-deep: var(--mint-deep); }
.g-page--coral    { --g: var(--coral);    --g-deep: var(--coral-deep); }
.g-page--sky      { --g: var(--sky);      --g-deep: var(--sky-deep); }
.g-page--butter   { --g: var(--butter);   --g-deep: var(--butter-deep); }
.g-page--lavender { --g: var(--lavender); --g-deep: var(--lavender-deep); }
main:has(.g-page--mint)     { --g: var(--mint);     --g-deep: var(--mint-deep); }
main:has(.g-page--coral)    { --g: var(--coral);    --g-deep: var(--coral-deep); }
main:has(.g-page--sky)      { --g: var(--sky);      --g-deep: var(--sky-deep); }
main:has(.g-page--butter)   { --g: var(--butter);   --g-deep: var(--butter-deep); }
main:has(.g-page--lavender) { --g: var(--lavender); --g-deep: var(--lavender-deep); }

.g-hero .lede { max-width: 52ch; }
.g-hero .squiggle { white-space: nowrap; }
.g-hero .blob--1 { background: var(--g); }

.g-section { padding: clamp(40px, 6vw, 76px) 0; }
.g-section--tint { background: var(--cream-deep); }
.g-step { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--g-deep); margin: 0 0 .5em; }
.g-intro { max-width: 58ch; margin-bottom: 1.4em; }
.g-small { font-size: .85rem; color: var(--ink-faint); max-width: 70ch; }

/* The tool: inputs on the left, the answer on the right */
.g-tool { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: clamp(16px, 3vw, 28px); }
.g-tool__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(18px, 3vw, 34px); align-items: start; }
@media (max-width: 860px) { .g-tool__grid { grid-template-columns: 1fr; } }
.g-field { margin-bottom: 18px; }
.g-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.g-label output, .g-label b { font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g-chip {
  border: 2px solid var(--beige-deep); background: transparent; color: var(--ink); font: inherit; font-size: .88rem; font-weight: 700;
  padding: .38em .85em; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .45em;
}
.g-chip:hover { border-color: var(--ink-faint); }
.g-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.g-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.g-range { width: 100%; accent-color: var(--g-deep); height: 28px; }
.g-input { width: 100%; padding: .6em .85em; border-radius: var(--r-tile); border: 2px solid var(--beige-deep); background: var(--card); color: var(--ink); font: inherit; }
.g-input:focus { outline: none; border-color: var(--g-deep); }
.g-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .g-pair { grid-template-columns: 1fr; } }

.g-out { background: var(--cream); border-radius: var(--r-tile); padding: 18px; }
.g-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 4px; }
.g-big { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.05; margin: 0 0 6px; }
.g-big small { font-size: .45em; color: var(--ink-muted); font-family: var(--body); font-weight: 700; }
.g-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.g-stat { background: var(--card); border-radius: 12px; padding: 10px 12px; }
.g-stat b { display: block; font-family: var(--display); font-size: 1.35rem; }
.g-stat span { font-size: .8rem; color: var(--ink-muted); }
.g-note { font-size: .9rem; color: var(--ink-muted); background: var(--beige); border-radius: 12px; padding: .7em 1em; margin: 12px 0 0; }
.g-note--warn { background: color-mix(in srgb, var(--butter) 38%, var(--card)); color: var(--ink); }
.g-btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Explainer cards */
.g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.g-cards .card h3 { margin-top: 0; }
.g-cards .card p, .g-cards .card li { color: var(--ink-muted); }
.g-cards .card ul { padding-left: 1.1em; margin: 0; }

.g-cta { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--g) 16%, transparent)); }

/* --- Tea: the steep ladder ---------------------------------------------------- */
.g-temp { display: flex; align-items: center; gap: 14px; }
.g-thermo { flex: 1; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #9AD3E6, #F2C46B 55%, #E86A3C); position: relative; }
.g-thermo i { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 4px solid var(--ink); transform: translate(-50%, -50%); transition: left .4s ease; }
.g-ladder { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.g-ladder li { display: grid; grid-template-columns: 56px 1fr 52px; gap: 10px; align-items: center; font-size: .88rem; }
.g-ladder b { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.g-ladder .bar { height: 14px; border-radius: 999px; background: var(--beige); overflow: hidden; }
.g-ladder .bar i { display: block; height: 100%; border-radius: 999px; background: var(--leafc, var(--g)); transition: width .4s ease; }
.g-ladder li.is-now { font-weight: 800; }
.g-ladder li.is-now .bar { box-shadow: 0 0 0 2px var(--ink); }
.g-ladder li.is-done { opacity: .5; }
.g-ladder span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.g-timer { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.g-timer__clock { font-family: var(--display); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.4ch; }

/* --- Charts (weight, steps) ----------------------------------------------------- */
.g-chart { width: 100%; height: auto; display: block; }
.g-chart .grid { stroke: var(--beige-deep); stroke-width: 1; }
.g-chart .tick { fill: var(--ink-faint); font: 11px var(--body); }
.g-chart .dot { fill: var(--ink-faint); }
.g-chart .dot.up { fill: var(--coral-deep); }
.g-chart .trend { fill: none; stroke: var(--g-deep); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.g-chart .truth { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 5 5; }
.g-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--ink-muted); margin-top: 6px; }
.g-legend span::before { content: ""; display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }

/* --- T minus 90: the thirteen weeks ---------------------------------------------- */
.g-weeks { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; margin: 10px 0 4px; }
.g-weeks div { height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--g) 26%, var(--card)); position: relative; }
.g-weeks div.is-half { background: color-mix(in srgb, var(--g) 55%, var(--card)); }
.g-weeks div.is-now { box-shadow: 0 0 0 2px var(--ink); }
.g-weeks div span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: var(--ink-muted); }
.g-milestones { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.g-milestones li { display: flex; justify-content: space-between; gap: 10px; background: var(--card); border-radius: 12px; padding: 9px 12px; font-size: .9rem; }
.g-milestones li b { font-weight: 800; }
.g-milestones li span { color: var(--ink-muted); text-align: right; }
.g-mission { margin-top: 16px; border-radius: var(--r-card); padding: 20px; background: linear-gradient(140deg, color-mix(in srgb, var(--g) 30%, var(--card)), var(--card)); border: 2px solid color-mix(in srgb, var(--g) 50%, transparent); }
.g-mission h3 { margin: 0 0 4px; font-size: 1.4rem; }
.g-mission .q { margin-top: 12px; }
.g-mission .q b { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
@media print {
  body * { visibility: hidden; }
  .g-mission, .g-mission * { visibility: visible; }
  .g-mission { position: absolute; left: 0; top: 0; width: 100%; border: 2px solid #999; }
}

/* --- BookBuddy: a shelf of spines -------------------------------------------------- */
.g-spines { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; margin: 12px 0 4px; min-height: 64px; }
.g-spines i { width: 12px; border-radius: 3px 3px 1px 1px; display: block; }
.g-spines i:nth-child(5n+1) { background: #E9B63C; height: 54px; }
.g-spines i:nth-child(5n+2) { background: #9C7BE8; height: 62px; }
.g-spines i:nth-child(5n+3) { background: #4CAE5D; height: 48px; }
.g-spines i:nth-child(5n+4) { background: #E86A3C; height: 58px; }
.g-spines i:nth-child(5n+5) { background: #2FA9D2; height: 52px; }
.g-spines .more { font-size: .8rem; font-weight: 800; color: var(--ink-muted); align-self: center; margin-left: 6px; }

/* --- SwipeBuddy: the weekly steps ---------------------------------------------------- */
.g-steps { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin: 12px 0 6px; }
.g-steps i { flex: 1; border-radius: 4px 4px 0 0; background: var(--g); min-width: 3px; transition: height .3s ease; }
.g-steps i.goal { background: var(--mint-deep); }

@media (prefers-reduced-motion: reduce) {
  .g-thermo i, .g-ladder .bar i, .g-steps i { transition: none; }
}