/* 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; }
.steps-wrap { margin-top: var(--s-6); }
.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; }
.inline-form { display: inline; }

/* ---------- 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; }
}
/* .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; }