/*
Theme Name: Groddle Afternoon
Description: The Groddle Afternoon site on Minn: notes, pages and posts in the site's own look, with the game and the generated restoration pages served beside them by the theme's minn.json.
Version: 0.1.0
License: MIT
Text Domain: groddle
*/

/* Block output that the static site's stylesheets (restoration.css, changelog.css, site-nav.css) did not have to meet. */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.note-head .kicker { display: flex; flex-wrap: wrap; gap: 0 0.5em; align-items: baseline; }
.note-head .kicker > * { margin: 0; }
.note-head .kicker > * + *::before { content: "·"; margin-right: 0.5em; }
.note-head h1 { margin: 0 0 14px; }
.note-head .wp-block-post-excerpt__excerpt { margin: 0; }
.note-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.note-tags .wp-block-post-terms__separator { display: none; }
.note-tags a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 4px 11px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--muted);
}
.note-cards .wp-block-post-title { margin: 6px 0; }
.note-cards .wp-block-post-title a { color: inherit; }
.note-pager .wp-block-post-navigation-link { margin: 0; }
.note-cards { list-style: none; padding: 0; }
.note-cards > * { margin-block: 0; }
.note-card-meta { display: flex; flex-wrap: wrap; gap: 0 0.5em; text-transform: uppercase; }
.note-card-meta > * { margin: 0; }
.note-card-meta > * + *::before { content: "·"; margin-right: 0.5em; }
.note-card-meta a { color: inherit; text-decoration: none; position: relative; z-index: 1; }
/* A note's table is a core table block: the .note-table look, over the block's own borders. Its caption is for screen readers, as the static page's aria-label was. */
.wp-block-table.note-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin: 0; }
.wp-block-table.note-table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; border: 0; }
.wp-block-table.note-table-wrap thead { border: 0; }
.wp-block-table.note-table-wrap th, .wp-block-table.note-table-wrap td { text-align: left; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--row-line); vertical-align: top; }
.wp-block-table.note-table-wrap tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.note-table-wrap th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wp-block-table.note-table-wrap .has-text-align-right { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.wp-block-table.note-table-wrap figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) { .wp-block-table.note-table-wrap th, .wp-block-table.note-table-wrap td { padding: 8px 10px; } .wp-block-table.note-table-wrap table { font-size: 14px; } }
/* Checklist cards are groups side by side: no flow margin above the second. */
.note-lists > .note-list-card { margin-block: 0; }
/* Full-width pages (the restoration report): bands sit edge to edge, as on the built page. */
.page-wide > .wp-block-post-content > *, .page-wide .band > .wrap > *:first-child { margin-block-start: 0; }
.page-wide .band > .wrap > h2 { margin-top: 0; }
p.jump { margin-bottom: 0; }
.report-foot { padding-top: 34px; color: var(--muted); font-size: 14px; }
.report-foot p { margin: 0 0 6px; }
.report-pending { color: var(--muted); font-size: 15px; margin: 0; }
/* A note's parts sit 40px apart, as on the built pages (.note-body .wrap > * + *), one level down in post-content. */
.note-body .wrap > .wp-block-post-content > * + * { margin-top: 40px; }
/* The restoration report's jump links in the Notes chip colour: the same in light, and readable in dark (the built page is light only). */
.jump a { background: var(--chip-bg); }
/* The Musicblocks page (src/Musicblocks.php, public/musicblocks/musicblocks.js): a card per block in its series' glow colour. */
.mb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mb-trophy { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 12px 16px; max-width: 44em; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--chip-bg); }
.mb-trophy p { margin: 0; color: var(--muted); }
.mb-trophy strong { color: var(--fg); }
.mb-badge { flex: none; width: 60px; height: 60px; }
.mb-set { margin-top: 20px; }
.mb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.mb-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-top: 4px solid var(--mb-glow); border-radius: var(--radius-lg); background: var(--surface); }
.mb-card.is-playing { box-shadow: 0 0 0 3px var(--mb-glow); }
.mb-face { display: flex; align-items: center; gap: 12px; }
.mb-icon { flex: none; width: 37px; height: 37px; image-rendering: auto; }
.mb-name { margin: 0; flex: 1; font-size: 20px; }
.mb-desc { margin: 0; flex: 1; font-size: 15px; line-height: 1.45; }
.mb-meta { margin: 0; font-size: 13px; color: var(--muted); }
.mb-audio { width: 100%; height: 36px; }
.mb-ready .mb-audio { display: none; }
.mb-play { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: #1f1407; cursor: pointer; }
.mb-play svg { width: 22px; height: 22px; }
.mb-play:hover { filter: brightness(1.08); }
.mb-play:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.mb-bar { height: 6px; border-radius: 3px; background: var(--row-line); overflow: hidden; }
.mb-bar span { display: block; height: 100%; width: 0; background: var(--mb-glow); }
.mb-set:not(.mb-ready) .mb-bar, .mb-set:not(.mb-ready) .mb-time { display: none; }
.mb-time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.mb-time:empty { display: none; }
.mb-rules { margin: 0 0 8px; padding-left: 1.2em; max-width: 44em; }
.mb-rules li + li { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) { .mb-card { transition: box-shadow 0.2s; } }
/* The Players pages (src/PlayerPages.php, G338): the grid of characters and a profile. Colours from the report's tokens, so light and dark both hold. */
.players-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.players-sort [aria-current] { font-weight: 700; color: var(--fg); }
.players-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; }
.player-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; height: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--fg); text-decoration: none; }
.player-tile:hover { border-color: var(--accent); }
.player-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.player-tile-art { width: 100px; height: 144px; object-fit: contain; }
.player-tile-name { font-weight: 700; font-size: 15px; text-align: center; overflow-wrap: anywhere; }
.player-ghost { color: var(--border); }
.players-empty, .profile-empty { color: var(--muted); margin: 0; }
.profile-private { margin: 0 0 22px; padding: 10px 14px; max-width: 44em; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--chip-bg); color: var(--fg); }
.players-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; color: var(--muted); }
.profile-top { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: flex-end; }
.profile-avatar { flex: none; margin: 0; width: 172px; height: 248px; display: grid; place-items: end center; }
.profile-avatar-art { width: 172px; height: 248px; object-fit: contain; }
svg.profile-avatar-art { width: 140px; height: 202px; }
.profile-who { flex: 1 1 18rem; min-width: 0; }
.profile-who h1 { overflow-wrap: anywhere; }
.profile-who .kicker a { color: inherit; }
.profile-stats { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.profile-stats li { display: flex; flex-direction: column; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.profile-stats strong { font-size: 20px; line-height: 1.2; }
.profile-stats span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.profile-bio { font-size: 18px; max-width: 40em; margin: 0; color: var(--lead); overflow-wrap: anywhere; }
.profile-section + .profile-section { margin-top: 44px; }
.profile-section h2 { margin: 0 0 14px; overflow-wrap: anywhere; }
.profile-home { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.profile-home img { display: block; width: 100%; height: auto; }
.profile-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.profile-badges li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: center; font-size: 14px; font-weight: 600; }
.profile-badges img { width: 72px; height: 72px; }
@media (max-width: 560px) {
  .players-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .profile-top { align-items: flex-start; }
  .profile-badges { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
.players-page .masthead { padding-bottom: 8px; }
.players-page main.band { padding-top: 32px; }
/* The restoration report's Seasons band (src/Seasons.php): its own tint between the plain and alternate bands, a card per holiday in its tone. */
.band-seasons { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-block: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.season-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 18px; }
.season-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border: 1px solid var(--border); border-top: 5px solid var(--season-tone); border-radius: var(--radius-lg); background: var(--surface); }
.season-card.is-on { box-shadow: 0 0 0 2px var(--season-tone); }
.season-head { display: flex; align-items: center; gap: 14px; }
.season-icon { flex: none; width: 56px; height: 56px; object-fit: contain; }
.season-title { min-width: 0; }
.season-title h3 { margin: 0 0 6px; font-size: 24px; }
.season-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.season-now { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--fg); background: color-mix(in srgb, var(--season-tone) 22%, var(--surface)); border: 1px solid var(--season-tone); }
.season-now::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--season-tone); }
.season-when { margin: 0; font-size: 14px; color: var(--muted); }
.season-blurb { margin: 0; color: var(--lead); }
.season-facts { margin: 0; display: grid; gap: 10px; }
.season-fact { display: grid; grid-template-columns: 4.6em 1fr; gap: 0 10px; padding-top: 10px; border-top: 1px solid var(--row-line); }
.season-fact dt { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-top: 2px; }
.season-fact dd { margin: 0; min-width: 0; }
.season-fact p { margin: 0; font-size: 15px; line-height: 1.45; }
.season-items { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.season-item { display: block; width: 40px; height: 40px; object-fit: contain; padding: 3px; border-radius: var(--radius); background: var(--chip-bg); border: 1px solid var(--row-line); }
.season-badges h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.season-badges ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.season-badges li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--chip-bg); font-size: 13px; font-weight: 600; }
.season-badges li img { width: 26px; height: 26px; }
.season-badges p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.season-source { margin: 0; font-size: 13px; color: var(--muted); }
.season-play { margin: auto 0 0; padding-top: 4px; }
.season-play .play-link { font-size: 14px; padding: 7px 14px; }
@media (max-width: 560px) { .season-card { padding: 14px; } .season-fact { grid-template-columns: 1fr; gap: 4px; } }