/* app.css: what the Rails site adds to the designer's stylesheet (app/assets/design/css/site.css,
   synced from design/prototype). Same tokens, same rules: orchid is the brand thread, berry and amber
   keep their one meaning each, nothing here is decorative. */

/* ---------- small utilities the prototype wrote inline ---------- */
.section-flush { padding-top: 0; }
/* Flush means "the result above already gave the air". While the result is still hidden, the section sits
   right under the sky and takes the ordinary section padding back. */
.sky + .section[hidden] + .section-flush { padding-top: var(--s-6); }
@media (min-width: 64rem) { .sky + .section[hidden] + .section-flush { padding-top: var(--s-7); } }
.steps-wrap { margin-top: var(--s-6); }
/* The list reset takes the steps' numbers away and .prose ol gave the indent back: each step opens on its
   bold term, so it stands on the section's left edge instead. */
.prose ol.steps { padding-left: 0; }
.faq-standalone { margin-top: var(--s-6); }
.faq-standalone .h2 { margin-bottom: var(--s-4); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; transition: transform var(--d-fast) var(--ease); }
.link-button:active { transform: scale(0.95); }
.inline-form { display: inline; }

/* ---------- the date field (shared/_date_field) ---------- */
/* On a phone an empty date input is a blank box (iOS) and a chosen one shows the phone's own short format.
   The face over it draws a calendar and "Kies een datum", then the chosen day. It lets every tap through
   to the native input underneath, so the phone's own picker opens. With a mouse the native field, its
   typed segments and its own picker button, stays exactly as it is. */
.date-field { position: relative; display: block; }
.date-face { display: none; }
@media (hover: none) and (pointer: coarse) {
  .date-field.is-enhanced .input { color: transparent; -webkit-text-fill-color: transparent; }
  .date-field.is-enhanced .input::-webkit-datetime-edit,
  .date-field.is-enhanced .input::-webkit-calendar-picker-indicator { opacity: 0; }
  .date-field.is-enhanced .date-face { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-4); pointer-events: none; color: var(--ink-3); }
}
.date-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ink-2); }
/* the bead, the brand's mark for the chosen day, lands on the calendar once there is one */
.date-icon .date-bead { fill: none; }
.date-field.has-value .date-icon .date-bead { fill: var(--orchid-deep); }
.date-text { display: flex; align-items: baseline; gap: var(--s-3); flex: 1; min-width: 0; }
.date-text strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.date-ago { margin-left: auto; font-size: var(--t-small); white-space: nowrap; }
@media (max-width: 22.5rem) { .date-ago { display: none; } }
/* a message under the date (all of them are about the date) marks the field itself */
.field:has(> [data-error]:not([hidden])) .input { border-color: var(--berry); }
.field:has(> [data-error]:not([hidden])) .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--berry) 22%, transparent); }

/* ---------- the folded form: what she filled in, on one line, and "Aanpassen" ---------- */
.saved summary [data-saved-summary] { display: grid; min-width: 0; }
.saved-label { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5; }
.saved-value { font-weight: 600; color: var(--ink); line-height: 1.35; }

/* ---------- the answer ---------- */
/* On a wide screen "Bereken" scrolls only as far as the answer needs, and leaves it a little air below. */
.answer { scroll-margin-bottom: var(--s-5); }

/* ---------- the answer, stacked above the instrument ---------- */
/* Below 64rem the instrument sits right under the answer, and once the sweep lands on today its caption says
   what the answer's today line says ("Vandaag, maandag 26 oktober · dag 13 van je cyclus, vruchtbare dagen").
   One voice for today: the line steps back visually (a screen reader still hears it with the answer), which
   is also what lets the answer, the ring and the caption share one phone screen after "Bereken". A projected
   cycle keeps its line, because it asks her to check her date. */
@media (max-width: 63.99rem) {
  .hero:has([data-instrument]) .answer .today-line:not(.is-projected) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- the homepage h1: the page's own name, small, above the question ---------- */
/* An eyebrow inside the h1 (design/brief-v5-seo.md, decision 4): the big question stays the headline. On a wide
   screen it stands on the line of the instrument's own eyebrow opposite, so both columns start together. */
.h1-kicker { display: block; margin-bottom: var(--s-2); font-family: var(--font-body); font-size: var(--t-micro); font-weight: 600; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; font-variation-settings: normal; color: var(--ink-3); }
.night .h1-kicker { color: var(--orchid); }
@media (min-width: 64rem) { .h1-kicker { display: flex; align-items: center; min-height: 2.75rem; margin-bottom: var(--s-1); } }

/* ---------- the way on to the full calculation, under the homepage form ---------- */
/* Until she has an answer. Then the answer's second link says the same with more, so this line steps aside. On a
   wide screen it takes the answer's row of its own, right under the form; the empty row under it keeps the answer,
   once there, on the instrument's bottom line as before. */
.hero-more { padding-inline: var(--s-4); font-size: var(--t-small); line-height: 1.5; color: var(--moon-dim); max-width: 46ch; text-wrap: pretty; }
/* a caption to the card above it (inset to the card's own text), with the sky's air before the moon below */
@media (max-width: 63.99rem) { .hero-more { margin-top: calc(-1 * var(--s-1)); margin-bottom: var(--s-2); } }
@media (min-width: 40rem) { .hero-more { padding-inline: var(--s-5); } }
.hero-more a { color: var(--moon); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--orchid) 75%, transparent); text-decoration-thickness: 1.5px; }
.hero-more a:hover { text-decoration-color: currentColor; }
.hero:has(> .answer:not([hidden])) > .hero-more { display: none; }
@media (min-width: 64rem) {
  .hero:has(> .hero-more) { grid-template-rows: auto auto 1fr auto; }
  .hero > .hero-more { grid-column: 1; grid-row: 3; align-self: start; }
  .hero:has(> .hero-more) > .answer { grid-row: 4; }
  .hero:has(> .hero-more) > .instrument { grid-row: 1 / span 4; }
}

/* ---------- the trail in the sky (the calculator page) ---------- */
/* Small and quiet above the h1; on a wide screen on the line of the instrument's eyebrow, like the homepage's name. */
.night .breadcrumb { color: var(--moon-dim); }
.night .breadcrumb a { color: var(--moon); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--moon) 35%, transparent); text-underline-offset: 0.2em; }
.night .breadcrumb a:hover { text-decoration-color: currentColor; }
.night .breadcrumb li + li::before { color: var(--orchid); }
.hero-copy .breadcrumb { margin-bottom: var(--s-1); }
@media (min-width: 64rem) { .hero-copy .breadcrumb { align-items: center; min-height: 2.75rem; margin-bottom: 0; } }

/* ---------- arriving from the homepage: her dates are already in ---------- */
.handoff-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); margin-top: var(--s-1); font-size: var(--t-small); color: var(--moon-dim); }
.handoff-note .date-icon { color: var(--moon-dim); }
.handoff-note .date-bead { fill: var(--orchid); }
.handoff-note .link-button { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--s-1); margin-left: calc(-1 * var(--s-1)); color: var(--moon); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--orchid) 75%, transparent); text-underline-offset: 0.16em; }
.handoff-note .link-button:hover { text-decoration-color: currentColor; }

/* ---------- the answer's second link: two lines, one link ---------- */
/* "Meer berekenen:" and what that page adds, all in the link's words. A circle with an arrow says "another page"
   where the pill beside it stays on this one. Still a .btn, so the click counts as the CTA it was. */
.btn-route { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: start; gap: var(--s-3); min-height: 2.75rem; padding: var(--s-1) var(--s-2) var(--s-1) 0; border-radius: var(--r-2); background: transparent; color: var(--moon); font-weight: 400; line-height: 1.3; text-align: left; white-space: normal; }
.btn-route .route-icon { width: 2rem; height: 2rem; color: var(--moon); opacity: 0.85; transition: transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); }
.btn-route .route-icon circle { stroke: color-mix(in srgb, var(--moon) 45%, transparent); }
.btn-route .route-text { display: grid; gap: 1px; min-width: 0; }
.btn-route .route-label { font-size: var(--t-small); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--orchid) 75%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 0.16em; }
.btn-route .route-detail { font-size: var(--t-micro); color: var(--moon-dim); text-wrap: pretty; }
.btn-route:hover .route-label { text-decoration-color: currentColor; }
.btn-route:hover .route-icon { opacity: 1; transform: translateX(2px); }
.btn-route:active .route-icon { opacity: 1; transform: translateX(5px); }

/* ---------- messages ---------- */
.flash-wrap { padding-top: var(--s-4); }
.flash { padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--sage-soft); color: var(--ink); font-weight: 500; max-width: var(--measure); }
.flash-alert { background: var(--berry-soft); }
.noscript-note { margin: 0; }
.form-errors { padding: var(--s-4); border-radius: var(--r-2); background: var(--berry-soft); color: var(--ink); font-size: var(--t-small); }
.form-errors ul { margin-top: var(--s-2); padding-left: 1.25em; }
.form-errors:focus { outline: 3px solid var(--berry); outline-offset: 2px; }

/* The honeypot: off screen for people, present for bots. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- ads: the box takes the unit's size from config/ads.yml ---------- */
.ad-box { max-width: 100%; }
.ad-box .adsbygoogle, .ad-box .mk-ad-unit { display: inline-block; }
/* A 336 px unit only where it fits; below that the slot is not drawn at all, so nothing shifts. */
@media (max-width: 23rem) { .ad-336 { display: none; } }

/* ---------- stars ---------- */
.stars { position: relative; display: inline-flex; flex: none; line-height: 0; color: var(--line-strong); }
.stars svg { width: 1.1rem; height: 1.1rem; flex: none; fill: currentColor; }
.stars-empty { display: inline-flex; }
.stars-full { position: absolute; inset: 0; width: var(--fill, 0%); overflow: hidden; display: inline-flex; color: var(--orchid-deep); white-space: nowrap; }
.night .stars-full { color: var(--orchid); }
.hero-form .rating-line { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--t-small); color: var(--ink-2); text-decoration: none; }
.hero-form .rating-line:hover span { text-decoration: underline; }
.hero-form:has(.saved.is-saved:not([open])) > .rating-line { display: none; }

.rating { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-3); background: #fff; border: 1px solid var(--line); }
.rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--ink-2); }
.rating-summary .stars svg { width: 1.25rem; height: 1.25rem; flex: none; }
.rating-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.rating-form legend { font-weight: 600; padding: 0; margin-bottom: var(--s-2); }
.rating-stars { display: flex; gap: var(--s-1); }
.rating-stars button { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--r-full); background: transparent; color: var(--line-strong); cursor: pointer; transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease); }
.rating-stars button svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.rating-stars button:hover, .rating-stars button:focus-visible,
.rating-stars button:has(~ button:hover), .rating-stars button:has(~ button:focus-visible) { color: var(--orchid-deep); }
.rating-stars button:focus-visible { outline: 3px solid var(--orchid-deep); outline-offset: 1px; background: var(--orchid-soft); }
.rating-stars button[disabled] { cursor: progress; }
.rating-mine { font-weight: 500; }
.rating-status:empty { display: none; }
.rating-status { font-size: var(--t-small); color: var(--ink-2); }
.article-kit .rating { margin-top: 0; }

/* ---------- sources: five open, the rest one tap away but in the page ---------- */
.sources-more { margin-top: var(--s-3); }
.sources-more > summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-full); font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.sources-more > summary::-webkit-details-marker { display: none; }
.sources-more[open] > summary { display: none; }
.sources-more > ol { margin-top: var(--s-2); }
.sources li:target { background: var(--orchid-soft); border-radius: var(--r-1); outline: 4px solid var(--orchid-soft); }

/* ---------- comments ---------- */
.comment-list { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.comment-body { display: grid; gap: var(--s-2); }
.comment-body p { text-wrap: pretty; overflow-wrap: anywhere; }
.comment-registration { font-size: var(--t-small); color: var(--ink-2); }
.comment-meta .tag-verified { background: var(--sage-soft); color: var(--sage); }
.comment-form .professional { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.comment-form select.input { appearance: auto; }

/* ---------- pages ---------- */
.page-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.page-body { margin-bottom: var(--s-6); }
.page-body h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.15; }
.page-body h3 { font-size: var(--t-h3); font-weight: 600; }
.contact-form { margin-top: var(--s-2); }
.sitemap-grid { display: grid; gap: var(--s-6); }
.sitemap-grid ul { margin-top: var(--s-3); display: grid; gap: var(--s-2); padding-left: 1.25em; }
@media (min-width: 48rem) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- the brand page ---------- */
.brand-hero { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-7) var(--s-5); border-radius: var(--r-3); margin-bottom: var(--s-6); }
.brand-mark { width: 7rem; height: 7rem; color: var(--moon); }
.brand-mark .bead { fill: var(--orchid); }
.brand-mark .gap { fill: var(--night); }
.brand-wordmark { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem); font-weight: 500; letter-spacing: -0.01em; font-variation-settings: "SOFT" 100, "opsz" 72; line-height: 1; }
.brand-wordmark b { font-weight: 650; }
.brand-section { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.brand-marks { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .brand-marks { grid-template-columns: repeat(3, 1fr); } }
.brand-tile { display: grid; gap: var(--s-3); justify-items: center; align-content: center; min-height: 11rem; padding: var(--s-5); border-radius: var(--r-3); border: 1px solid var(--line); text-align: center; }
.brand-tile figcaption { font-size: var(--t-small); color: var(--ink-2); }
.brand-tile.paper { background: var(--paper); }
.brand-tile.night { border-color: transparent; }
.brand-tile.night figcaption { color: var(--moon-dim); }
.brand-tile.night .brand { color: var(--moon); }
.brand-tile.icon { background: var(--paper-2); }
.brand-tile .brand svg { width: 2.5rem; height: 2.5rem; }
.brand-tile .brand .wordmark { font-size: 1.5rem; }
.swatches { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); list-style: none; padding: 0; }
.swatch { display: grid; grid-template-columns: 3rem 1fr; gap: 0 var(--s-3); align-items: center; padding: var(--s-3); border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); }
.swatch-chip { grid-row: span 3; width: 3rem; height: 3rem; border-radius: var(--r-2); border: 1px solid rgba(36, 28, 43, 0.12); }
.swatch-name { font-weight: 600; }
.swatch code { font-size: var(--t-small); color: var(--ink-2); }
.swatch-role { font-size: var(--t-micro); color: var(--ink-2); line-height: 1.4; }
.type-specimens { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .type-specimens { grid-template-columns: 1fr 1fr; } }
.specimen { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-3); background: #fff; border: 1px solid var(--line); }
.specimen-display { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-variation-settings: "SOFT" 60; }
.specimen-body { font-family: var(--font-body); font-size: 3rem; line-height: 1; font-weight: 600; }

/* ---------- moderation ---------- */
.beheer .beheer-section { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.beheer .beheer-item.is-read { opacity: 0.7; }
.beheer .beheer-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.beheer .beheer-actions form { display: inline; }
.beheer .beheer-history { display: grid; gap: var(--s-2); padding-left: 1.25em; font-size: var(--t-small); }

@media print {
  .rating, .comments, .pro-invite, .flash-wrap { display: none !important; }
}

/* The prototype's article grid lets the one wide table (min-width 28rem) stretch the column past a
   phone's width; the table already scrolls inside .table-wrap, so the column may shrink. */
@media (max-width: 63.99rem) { .article-layout { grid-template-columns: minmax(0, 1fr); } }
.article-kit { grid-template-columns: minmax(0, 1fr); }
.rating fieldset { min-inline-size: 0; }
.pro-invite .btn { white-space: normal; text-align: center; min-height: 2.75rem; padding-block: var(--s-2); }

/* At 320 px the wordmark and the menu button need a little less room than the prototype gives them. */
@media (max-width: 22rem) {
  .site-header .brand .wordmark { font-size: 1.05rem; }
  .site-header .menu summary { padding-inline: var(--s-2); }
  .brand-tile .brand .wordmark { font-size: 1.15rem; }
}
/* The footer's lists carry no class, so the reset for lists with one never reached them: no bullets, no
   indent, and no empty row for "Privacy-instellingen" while it waits for Google's message. On a touch
   screen every link is a full 44 px row. */
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li:has(> [hidden]) { display: none; }
/* Two columns on a phone: "Over" takes both, its links on the same two lines as Kalender and Lezen above. */
@media (max-width: 47.99rem) {
  .footer-grid > .footer-over { grid-column: 1 / -1; }
  .footer-over ul { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
}
@media (pointer: coarse) {
  .site-footer ul { row-gap: 0; }
  .site-footer li > a, .site-footer li > .link-button { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: var(--s-1); }
}

/* .prose h2 gives every heading in the article a large top margin, also the first one inside the
   boxes under the article (stars, the invitation), where it only makes an empty band. */
.article-kit section > h2:first-child { margin-top: 0; }

/* ---------- topics: an index, not a cloud ---------- */
/* The homepage Onderwerpen, "Lees verder" under the calculator and "Andere onderwerpen" on a hub are one thing:
   rows. Every topic gets the same row (no size or weight by popularity), a full touch target, its own words, and
   an arrow that means "another page". Pills stay what they are in the sky: a choice of day, not a way out. The
   group labels are the article cards' kickers, so the band reads as one. */
.topics { display: grid; gap: var(--s-5); }
.section-head:has(+ .topics) { margin-bottom: var(--s-5); }
/* three columns on the article cards' own grid lines below them, so the band is one grid */
@media (min-width: 48rem) { .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.topic-group { display: grid; align-content: start; gap: var(--s-2); }
.topic-group-label { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orchid-deep); }
.topic-links { display: block; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.topic-links > li { border-bottom: 1px solid var(--line); break-inside: avoid; }
.topic-link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 2.75rem; padding-block: var(--s-2); font-weight: 500; line-height: 1.35; color: var(--ink); text-decoration: none; }
.topic-link svg { width: 1rem; height: 1rem; flex: none; color: var(--ink-3); transition: transform var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.topic-link:hover { color: var(--orchid-deep); }
.topic-link:hover svg { color: var(--orchid-deep); transform: translateX(3px); }
/* a flat list runs in columns once there is room, each row still a whole row */
@media (min-width: 40rem) { .topic-links:not([aria-labelledby]) { columns: 2; column-gap: var(--s-5); } }
@media (min-width: 64rem) { .topic-other .topic-links { columns: 3; } }

/* ---------- a topic hub (/tag/zwanger-worden/) ---------- */
/* A destination, not a list. The topic's name large; the writer's opening paragraph as the lead; and the page's
   one night card, beside the intro on a wide screen and right after the lead on a phone, which draws the six days
   the lead talks about and leads to the calculator. */
.topic-head { display: grid; gap: var(--s-3); padding-block: var(--s-6) var(--s-5); }
.topic-intro { display: grid; gap: var(--s-5); }
.topic-lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--ink); }
@media (min-width: 64rem) {
  .topic-head { padding-block: var(--s-7) var(--s-6); }
  /* the lead and the paragraphs under it share one column, a reading width for both sizes of type */
  .topic-intro { grid-template-columns: minmax(0, 38rem) minmax(0, 25rem); grid-template-rows: auto 1fr; justify-content: space-between; column-gap: var(--s-8); row-gap: var(--s-4); align-items: start; }
  .topic-intro > .prose { max-width: none; }
  .topic-lead { grid-column: 1; grid-row: 1; }
  .topic-rest { grid-column: 1; grid-row: 2; }
  .topic-intro > .topic-calculator { grid-column: 2; grid-row: 1 / span 2; }
}

/* the card: the night, as the sky over the calculator it leads to */
.topic-calculator { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); border-radius: var(--r-3); background: var(--night) radial-gradient(30rem 18rem at 100% 115%, rgba(204, 152, 202, 0.26), transparent 62%); box-shadow: var(--shadow-1); }
@media (min-width: 40rem) { .topic-calculator { padding: var(--s-6); } }
.topic-calculator-title { font-family: var(--font-display); font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: "SOFT" 50; color: var(--moon); text-wrap: balance; }
.topic-calculator-text { color: var(--moon-dim); text-wrap: pretty; }
.topic-calculator .btn { justify-self: start; white-space: normal; text-align: center; }

/* the fertile window: six days up to the eisprong, the calculator's own amber and bands */
.window-chart { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-4); border-radius: var(--r-2); background: rgba(243, 233, 214, 0.05); border: 1px solid rgba(243, 233, 214, 0.1); }
.window-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); align-items: end; height: 5.5rem; border-bottom: 1px solid rgba(243, 233, 214, 0.22); }
.window-bar { position: relative; height: calc(var(--v) * 100%); border-radius: 4px 4px 0 0; background: var(--amber-fill); }
.window-bar.is-laag { opacity: 0.32; }
.window-bar.is-hoger { opacity: 0.62; }
/* the eisprong: an amber bead on the baseline, as on the ring */
.window-bar.is-ov::after { content: ""; position: absolute; left: 50%; bottom: -0.3rem; width: 0.55rem; height: 0.55rem; margin-left: -0.275rem; border-radius: 50%; background: var(--amber-fill); box-shadow: 0 0 0 2px var(--night); }
/* the six days arrive the way her chance does, the first time she sees them (site.js, data-arrive): the bars grow
   from the baseline towards the eisprong, and its bead blooms; the keyframes are the calculator's (site.css) */
.window-bars[data-arrive] .window-bar { transform-origin: bottom; animation: bar-rise var(--d-slow) var(--ease-moon) calc(var(--i, 0) * 90ms) both; }
.window-bars[data-arrive] .window-bar.is-ov::after { animation: dot-bloom var(--d-slow) var(--ease-moon) calc(5 * 90ms + var(--d-slow)) both; }
@media (prefers-reduced-motion: reduce) {
  .window-bars[data-arrive] .window-bar { animation-name: appear; animation-delay: 0ms; animation-duration: var(--d-fade) !important; }
  .window-bars[data-arrive] .window-bar.is-ov::after { animation: none; }
}
.window-ends { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-micro); line-height: 1.4; color: var(--moon-dim); }
.window-ends span { display: grid; gap: 1px; }
.window-ends span:last-child { text-align: right; }
.window-ends strong { font-size: var(--t-small); font-weight: 600; color: var(--moon); }
.window-source { font-size: var(--t-micro); color: var(--moon-dim); }

/* the articles: the topic's own article first and wide, so five cards fill their rows */
.topic-page .section-head .h2 { max-width: none; }
@media (min-width: 40rem) {
  .topic-articles .grid-3 > li:first-child { grid-column: span 2; }
  .topic-articles .grid-3 > li:first-child .article-card p { max-width: 56ch; }
}

/* the questions and their sources side by side on a wide screen */
.topic-more { display: grid; gap: var(--s-6); padding-block: var(--s-2) var(--s-6); }
@media (min-width: 64rem) { .topic-more { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: start; padding-block: var(--s-4) var(--s-7); } }
.topic-more .faq .h2 { margin-bottom: var(--s-3); }
.topic-more .sources > .h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variation-settings: "SOFT" 50; color: var(--ink); margin-bottom: var(--s-3); }

/* ---------- Op je beginscherm (the homepage section and the result's help) ---------- */
/* The calendar as an app, in the words her phone shows. Beside the heading the icon she will get, with its name,
   as her home screen will show it. Numbered steps per phone, her own phone first. Opened from the home screen,
   none of it has anything left to say. */
.install { display: grid; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-3); background: var(--paper-2); }
@media (min-width: 64rem) { .install { padding: var(--s-7); row-gap: var(--s-6); } }
.install-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-4); }
.install-head > :not(.install-icon) { grid-column: 2; }
.install-icon { grid-row: 1 / span 2; display: grid; justify-items: center; gap: var(--s-1); font-size: var(--t-micro); line-height: 1.2; color: var(--ink-2); }
.install-icon img { width: 3.75rem; height: 3.75rem; border-radius: 0.875rem; box-shadow: var(--shadow-1); }
.install-phones { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .install-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
html[data-platform="android"] .install-phone[data-platform="android"] { order: -1; }
.install-phone-title { font-weight: 600; color: var(--ink); margin-bottom: var(--s-3); }
.install-steps { counter-reset: install-step; display: grid; gap: var(--s-3); }
.install-steps li { counter-increment: install-step; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: start; column-gap: var(--s-3); }
.install-steps li::before { content: counter(install-step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--orchid-soft); color: var(--orchid-deep); font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.install-steps li > span { padding-top: 0.15rem; text-wrap: pretty; }
.install-glyph { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; color: var(--ink-2); }
.install-help { max-width: none; margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.install-help .install-steps li > span { color: var(--ink); }
@media (display-mode: standalone) { #beginscherm, .result-actions [data-install], .install-help { display: none !important; } }