/* PennyGroove — the site around the practice tools: the home page, the tuner page, and the guide under each
   practice page. Uses the tokens in styles.css (load that first). Design system: brand/design-guide.md */

a.btn { text-decoration: none; }
.topbar-actions a.btn[aria-current='page'] { background: var(--surface-raised); color: var(--text); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.wrap.narrow { max-width: 880px; }

/* ---------- type ---------- */

.display { margin: 0; font: 400 clamp(36px, 4.6vw, 56px)/1.06 var(--font-brand); font-synthesis: none; color: var(--text); }
.site-page main h2 { margin: 0 0 12px; font: 400 clamp(28px, 3.2vw, 40px)/1.15 var(--font-brand); font-synthesis: none; }
.lede { max-width: 540px; margin: 20px 0 32px; color: var(--text-muted); font-size: 19px; }
.section-lede { max-width: 680px; margin: 0 0 36px; color: var(--text-muted); font-size: 18px; }
.eyebrow { margin: 0 0 8px; color: var(--text-muted); font-size: 15px; }
.fine { margin: 6px 0 0; color: var(--text-quiet); font-size: 14px; }

/* a tinted-glass label, like the chips on the practice stages */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--on-stage-line);
  border-radius: 999px;
  background: var(--on-stage);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}
.chip.outline { border-color: var(--denim); color: var(--text); }
.chip svg { width: 16px; height: 16px; }

/* ---------- home: welcome back ---------- */

.welcome { border-bottom: 1px solid var(--divider); background: rgba(230, 164, 71, 0.08); }
.welcome-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 48px; padding-block: 8px; font-size: 15px; }
.welcome-hi { color: var(--text-muted); }
.welcome-what { min-width: 0; max-width: 64ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.welcome-what strong { font-weight: 600; }
.welcome-go { margin-left: auto; color: var(--amber); font-weight: 600; text-decoration: none; }
.welcome-go:hover { color: var(--amber-hover); text-decoration: underline; }

/* ---------- home: hero ---------- */

.hero {
  background:
    radial-gradient(ellipse 60% 70% at 25% 35%, rgba(230, 164, 71, 0.1), transparent 70%),
    linear-gradient(180deg, #1a1612, #0f0d0b);
}
.hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-block: 72px; }
.hero-copy { flex: 1 1 420px; min-width: 0; }
.hero-copy .display { margin-top: 20px; }
.hero-shot { flex: 1.35 1 560px; min-width: 0; margin: 0; }

.shot { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--inset); box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5); }
.shot img { display: block; width: 100%; height: auto; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.amber { background: var(--amber); }
.dot.ivory { background: var(--ivory); }
.dot.denim { background: var(--denim); }
.credit-line { margin: 8px 0 0; color: var(--text-quiet); font-size: 14px; }
.credit-line a, .foot-fine a { color: var(--text-muted); }

/* paste a lesson link */
.paste { max-width: 560px; }
.paste label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.paste-row { display: flex; flex-wrap: wrap; gap: 10px; }
.paste input {
  flex: 1 1 260px;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--inset);
  color: var(--text);
  font-size: 16px;
}
.paste input::placeholder { color: var(--text-quiet); }
.paste input[aria-invalid='true'] { border-color: var(--danger); }
.paste .btn { flex: none; }
.paste-error { margin: 10px 0 0; color: var(--text); font-size: 14px; }
.hero-alt { margin: 16px 0 0; color: var(--text-muted); font-size: 16px; }
.hero-alt a { color: var(--text); font-weight: 600; }

/* ---------- home: highlights strip ---------- */

.facts { border-block: 1px solid var(--divider); background: #171615; }
.facts-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-block: 0; padding-block: 20px; list-style: none; font-size: 15px; font-weight: 500; }
.facts-list li { display: flex; align-items: center; gap: 10px; }
.facts-list svg { width: 20px; height: 20px; color: var(--denim); }

/* ---------- sections and cards ---------- */

.section { padding-block: 96px; }
.section + .section { padding-top: 0; }
.band { border-block: 1px solid var(--divider); background: #171615; }
.band.lit { background: var(--stage-bg); }

.card { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background-color: var(--surface); background-image: var(--panel-bg); }
.card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.card p { margin: 0; color: var(--text-muted); }

.step-cards { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
.step-cards .card { flex: 1 1 300px; }
.step-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border: 1px solid var(--denim);
  border-radius: 50%;
  background: var(--denim-tint);
  font: 400 20px/1 var(--font-brand);
  font-synthesis: none;
}

.split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.split-media { flex: 1 1 440px; min-width: 0; }
.split-media .shot { max-width: 560px; }
.split-copy { flex: 1 1 400px; min-width: 0; }

.checks { display: grid; gap: 14px; margin: 0 0 32px; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23537f9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.checks strong { font-weight: 600; }

.more { display: inline-flex; gap: 6px; color: var(--text); font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ---------- home: the other tools ---------- */

.tool-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tool-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background-color: var(--surface); background-image: var(--panel-bg); }
.tool-shot { display: block; height: 300px; overflow: hidden; border-bottom: 1px solid var(--divider); background: var(--inset); }
.tool-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tool-body { padding: 24px 28px 28px; }
.kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--text-muted); font-size: 14px; }
.kicker svg { width: 16px; height: 16px; color: var(--denim); }
.tool-card h3 { margin: 0 0 8px; font: 400 26px/1.2 var(--font-brand); font-synthesis: none; }
.tool-body > p:not(.kicker) { margin: 0 0 16px; color: var(--text-muted); }

/* ---------- home: practice routine ---------- */

/* half an hour as a bar: each step as wide as its minutes (set inline), your lesson the longest, in amber */
.routine-bar { display: flex; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; }
.routine-bar li { flex: 1 1 0; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); }
.routine-bar b { display: block; font: 400 20px/1.1 var(--font-brand); font-synthesis: none; }
.routine-bar span { display: block; overflow: hidden; color: var(--text-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.routine-bar .is-main { border-color: var(--amber); background: var(--amber-tint); }
.routine-bar .is-main b { color: var(--amber); }
.routine-bar .is-main span { color: var(--text); }

.routine-steps { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.routine-steps .card { display: flex; flex: 1 1 320px; flex-direction: column; gap: 8px; padding: 24px; }
.routine-steps .card h3 { margin: 0; }
.routine-steps .card p { flex: 1 1 auto; margin-bottom: 4px; }
.routine-time { color: var(--text-muted); font-size: 14px; }
.routine-steps .is-main {
  border-color: var(--amber);
  background-image:
    radial-gradient(420px 220px at 0% 0%, rgba(230, 164, 71, 0.12), transparent 70%),
    linear-gradient(180deg, #252321 0, #1e1d1c 280px, #1b1b1b 100%);
}
.routine-steps .is-main .routine-time { color: var(--amber); font-weight: 600; }

/* ---------- home: listen mode and the tuner ---------- */

.pass { padding: 18px 20px; border: 1px solid var(--on-stage-line); border-radius: var(--radius); background: var(--on-stage); }
.pass-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; font-size: 14px; }
.pass-head b { font-weight: 600; }
.pass-head span { color: var(--text-muted); }
.pass-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* the listening marks: shape first, colour second (design guide, Listening results) */
:is(.m-ok, .m-early, .m-late, .m-wrong, .m-missed) { display: inline-block; flex: none; width: 12px; height: 12px; }
.m-ok { border-radius: 50%; background: var(--good); }
.m-missed { border: 2px solid var(--text-quiet); border-radius: 50%; }
:is(.m-early, .m-late, .m-wrong) { width: 14px; height: 14px; background: no-repeat center / contain; }
.m-early { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2b9ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.m-late { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2b9ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.m-wrong { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee8379' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.marks-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 14px; }
.marks-legend li { display: flex; align-items: center; gap: 8px; }

/* a still of the tuner, in tune */
.tuner-promo { max-width: 480px; margin-inline: auto; }
.site-page main .tuner-promo h2 { font-size: 28px; }
.tuner-promo > p { margin-bottom: 20px; }
.promo-dial { display: grid; justify-items: center; gap: 12px; margin-bottom: 20px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--stage-bg); }
.promo-note { color: var(--good); font: 600 64px/1 var(--font-ui); }
.promo-note sub { color: var(--text-quiet); font-size: 22px; vertical-align: baseline; }
.promo-track {
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: var(--radius-small);
  background: linear-gradient(90deg, rgba(232, 220, 196, 0.42) 1px, transparent 1px) 0 0 / 25% 100% repeat-x, var(--on-stage);
}
.promo-zone { position: absolute; inset-block: 0; left: 47%; width: 6%; background: var(--good-tint); box-shadow: inset 0 0 0 1px var(--good), 0 0 14px rgba(124, 198, 143, 0.45); }
.promo-needle { position: absolute; inset-block: -4px; left: 50.4%; width: 3px; border-radius: 2px; background: var(--good); }
.promo-state { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--good); font-weight: 600; }
.promo-strings { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; }
.promo-strings i { display: grid; place-items: center; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text-muted); font-style: normal; font-weight: 600; }
.promo-strings .is-tuned { border-color: var(--good); color: var(--text); box-shadow: 0 0 0 1px var(--good), 0 0 14px rgba(124, 198, 143, 0.35); }

/* ---------- questions ---------- */

.faq { border-top: 1px solid var(--divider); }
.faq details { border-bottom: 1px solid var(--divider); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--control); padding: 16px 0; font-size: 18px; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 9px; height: 9px; margin: 0 6px 4px 0; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); }
.faq details[open] summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.faq details p { max-width: 70ch; margin: 0 0 20px; color: var(--text-muted); }

/* ---------- home: last call ---------- */

.cta {
  border-top: 1px solid var(--divider);
  background:
    radial-gradient(ellipse 50% 80% at 50% 40%, rgba(230, 164, 71, 0.1), transparent 70%),
    linear-gradient(180deg, #1a1612, #0f0d0b);
  text-align: center;
}
.cta .wrap { padding-block: 96px; }
.cta-mark { display: block; margin: 0 auto 20px; }
.site-page main .cta h2 { font-size: clamp(32px, 4vw, 44px); }
.cta p { max-width: 560px; margin: 0 auto 32px; color: var(--text-muted); font-size: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- tuner page ---------- */

.page-hero { border-bottom: 1px solid var(--divider); background: var(--stage-bg); text-align: center; }
.page-hero .wrap { padding-block: 56px 64px; }
.page-hero .lede { max-width: 640px; margin-inline: auto; }
.tuner-panel { max-width: 560px; min-height: 500px; margin: 0 auto; padding: 24px; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); text-align: left; }
.site-page main .tuner-panel h2 { margin: 0; font-size: 26px; line-height: 1.2; }

.prose { padding-block: 64px 96px; }
.prose > section + section { margin-top: 64px; }
.prose p { max-width: 70ch; margin: 0 0 16px; color: var(--text-muted); }
.prose strong, .prose em { color: var(--text); }
.prose strong { font-weight: 600; }
.steps-list { display: grid; gap: 12px; margin: 0 0 20px; padding-left: 1.4em; color: var(--text-muted); }
.steps-list li::marker { color: var(--text-quiet); font-weight: 600; }
.tip { padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

.table-wrap { max-width: 560px; margin: 0 0 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.tuning-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tuning-table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--divider); text-align: left; }
.tuning-table thead th { background: var(--surface); color: var(--text-quiet); font-size: 14px; font-weight: 600; }
.tuning-table tbody tr:last-child > * { border-bottom: 0; }
.tuning-table tbody th { color: var(--text-muted); font-weight: 500; }
.tuning-table td { font-weight: 600; }

.tunings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tuning-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--surface); background-image: var(--panel-bg); scroll-margin-top: 24px; }
.tuning-card:target { border-color: var(--denim); }
.tuning-card h3 { display: grid; gap: 2px; margin: 0; font-size: 18px; font-weight: 600; }
.tuning-notes { color: var(--text-muted); font-size: 15px; font-weight: 500; word-spacing: 0.25em; }
.prose .tuning-card p { flex: 1 1 auto; margin: 0; font-size: 15px; }
.tuning-card .btn { align-self: flex-start; }
.link-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.link-list a { font-weight: 600; }

/* ---------- the guide under each practice page ---------- */

.page-about { border-top: 1px solid var(--divider); background: #171615; }
.page-about .wrap { max-width: 880px; padding-block: 64px 80px; }
.page-about h2 { margin: 0 0 12px; font: 400 clamp(26px, 3vw, 34px)/1.2 var(--font-brand); font-synthesis: none; }
.page-about h3 { margin: 32px 0 10px; font-size: 18px; font-weight: 600; }
.page-about :is(p, li) { color: var(--text-muted); }
.page-about p { max-width: 70ch; margin: 0 0 14px; }
.page-about :is(ol, ul) { display: grid; gap: 8px; max-width: 70ch; margin: 0 0 14px; padding-left: 1.4em; }
.page-about strong { color: var(--text); font-weight: 600; }
.page-about .about-more { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--divider); font-size: 15px; }
.page-about .about-more a { color: var(--text); font-weight: 600; }

/* ---------- footer ---------- */

.site-foot { border-top: 1px solid var(--divider); background: #111; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; padding-block: 48px 32px; }
.foot-brand { flex: 1 1 280px; }
.foot-brand .brand-home { display: inline-flex; gap: 10px; }
.foot-brand .brand-mark { width: 26px; height: 28px; }
.foot-brand .wordmark { font-size: 20px; }
.foot-brand p { margin: 12px 0 0; color: var(--text-quiet); font-size: 14px; }
.site-foot nav { flex: 0 1 200px; }
.site-foot h2 { margin: 0 0 12px; font: 600 15px/1.4 var(--font-ui); }
.site-foot ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.site-foot nav a { color: var(--text-muted); text-decoration: none; }
.site-foot nav a:hover, .site-foot nav a[aria-current='page'] { color: var(--text); }
.site-foot nav a:hover { text-decoration: underline; }
.foot-fine { margin-block: 0; padding-block: 20px 32px; border-top: 1px solid var(--divider); color: var(--text-quiet); font-size: 14px; }

/* ---------- narrower screens ---------- */

@media (max-width: 860px) {
  .section { padding-block: 64px; }
  .hero-inner { gap: 32px; padding-block: 48px; }
  .tool-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .routine-bar { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .lede { font-size: 17px; }
  .paste .btn { flex: 1 1 100%; }
  .tool-shot { height: 220px; }
  .card { padding: 22px; }
  .tuner-panel { padding: 18px; }
}