/* Public resources extend the accepted site stylesheet. Keep shared header,
   footer, brand variables and responsive navigation under that stylesheet. */
.site-shell-resource { padding-top: var(--site-nav-height); }
.public-shell { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: clamp(18px, 5vw, 70px); }
.public-hero { padding: 36px 0 38px; background: linear-gradient(90deg, rgba(7,8,11,.96), rgba(7,8,11,.72)), url('/assets/hero-poster.jpg') center 45% / cover; border-bottom: 1px solid var(--line); }
.public-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; color: var(--muted); font-size: 13px; }
.public-breadcrumb a:hover { color: white; }
.public-hero h1 { max-width: 950px; margin: 0; font-size: clamp(38px, 5.2vw, 64px); font-weight: 920; line-height: 1.04; letter-spacing: -.04em; }
.public-hero p { max-width: 620px; margin: 18px 0 0; color: #c4c8d4; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.58; }
.public-content { padding-top: 32px; padding-bottom: 16px; }
.public-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; border: 0; border-radius: 8px; background: var(--brand-ombre); color: white; font-weight: 860; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.public-button:disabled { cursor: wait; }
.public-tool { padding: clamp(20px, 3vw, 36px); background: #101116; border: 1px solid var(--line-strong); border-radius: 8px; margin-bottom: 40px; }
.public-tool label { display: block; color: #c4c8d4; font-size: 14px; font-weight: 750; margin-bottom: 10px; }
.public-form-row { display: flex; gap: 12px; max-width: 760px; }
.public-form-row input, .public-tool select { min-width: 0; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: #07080b; color: var(--ink); font-size: 17px; }
.public-form-row input { flex: 1; }
.public-tool select { width: 100%; max-width: 320px; margin-bottom: 6px; font-size: 15px; }
.public-example-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.public-example-buttons button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff06; color: #b7bcc9; font-size: 14px; }
.public-example-buttons button:hover { border-color: var(--brand-blue); color: white; }
.public-status { min-height: 22px; margin: 18px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.public-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-top: 8px; border-top: 1px solid var(--line); }
.public-results h3 { margin: 14px 0 16px; color: white; font-size: 17px; }
.public-word-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.public-word-list li { padding: 7px 12px; border-radius: 6px; background: #ffffff07; color: #dce2ee; font-size: 15px; }
.public-small { margin: 22px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.site-shell-resource .public-small a { color: #73baff; text-decoration: underline; text-underline-offset: 3px; }
.public-article { max-width: 800px; }
.public-section { margin: 0 0 32px; }
.public-section h2 { margin: 0 0 14px; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.public-section p, .public-section li { color: #c4c8d4; font-size: 16px; line-height: 1.7; }
.public-section p { margin: 0 0 14px; }
.public-section ol { padding-left: 22px; }
.public-section li { margin-bottom: 10px; padding-left: 4px; }
.public-example { padding: 18px 0; border-bottom: 1px solid var(--line); }
.public-example h3 { margin: 0 0 10px; color: #73baff; font-size: 12px; font-weight: 840; letter-spacing: .08em; text-transform: uppercase; }
.public-example blockquote { margin: 0; font-size: 25px; font-weight: 750; }
.public-example p { margin: 10px 0 0; font-size: 14px; }
.public-related { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.public-related h2 { margin: 0 0 12px; font-size: 20px; }
.public-related-grid { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.public-related-grid a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; font-weight: 750; }
.public-related-grid a:hover { color: #73baff; }
.public-related-grid a>span:last-child { color: #73baff; }
.public-prompt-title { margin: 22px 0 12px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; }
.public-prompt-copy { max-width: 760px; margin: 0 0 12px; color: #dce2ee; font-size: 18px; line-height: 1.6; }
.public-tool [data-prompt-exercise] { max-width: 760px; margin: 0 0 24px; font-size: 15px; }
.public-tool [data-new-prompt]+.public-status { margin-bottom: 0; }
.public-resources { padding: clamp(56px, 8vw, 104px) clamp(18px, 5vw, 70px); }
.public-resources-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.public-resources-grid a { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #101116; }
.public-resources-grid a:hover { border-color: #339eff70; }
.public-resources-grid strong { display: block; margin-bottom: 10px; font-size: 18px; }
.public-resources-grid span { color: #c4c8d4; font-size: 14px; line-height: 1.55; }
.public-skip { position: fixed; top: -100px; left: 12px; padding: 12px; background: #101116; color: white; z-index: 200; }
.public-skip:focus { top: 12px; }
.public-content :focus-visible, .public-resources :focus-visible, .public-skip:focus-visible { outline: 3px solid #73baff; outline-offset: 4px; }
@media(max-width:900px) { .public-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:600px) {
 .public-hero { padding: 24px 0 28px; }
 .public-breadcrumb { margin-bottom: 22px; font-size: 12px; }
 .public-content { padding-top: 22px; }
 .public-form-row { flex-direction: column; }
 .public-form-row .public-button { width: 100%; }
 .public-results { grid-template-columns: minmax(0, 1fr); gap: 14px; }
 .public-tool { margin-bottom: 30px; }
 .public-resources-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Resources are part of the shared site navigation, including on phones. */
.site-resources-menu { position: relative; }
.site-resources-menu summary { display: flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer; list-style: none; color: #aeb3c2; }
.site-resources-menu summary::-webkit-details-marker { display: none; }
.site-resources-menu[open] summary, .site-resources-menu summary:hover { color: white; }
.site-resource-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 270px; max-height: calc(100dvh - 110px); overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; border: 1px solid #ffffff24; border-radius: 8px; background: #101116; box-shadow: 0 18px 44px #0009; text-transform: none; letter-spacing: 0; }
.site-resource-menu-panel a { padding: 11px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; }
.site-resource-menu-panel a:hover { background: #ffffff0a; }
.site-resource-menu-label { padding: 13px 12px 5px; color: #727783; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.site-resources-mobile { display: none; }
.site-resources-mobile summary { width: 36px; height: 36px; min-height: 36px; justify-content: center; border: 1px solid #ffffff24; border-radius: 8px; }
.site-resources-mobile summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site-resource-menu-panel a:focus-visible, .site-resources-menu summary:focus-visible { outline: 3px solid #73baff; outline-offset: 2px; }
.public-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-resource-index { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 14px; font-weight: 750; }
.public-hub-section { margin-bottom: 40px; }
.public-hub-section>h2 { font-size: 25px; margin: 0 0 18px; }
.public-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-hub-grid a { display: block; }
.site-shell-resource .public-article-link { display: inline-block; margin: 8px 20px 8px 0; color: #73baff; font-size: 15px; font-weight: 750; }
.public-not-found { padding-block: 64px 90px; min-height: 60vh; }
.public-not-found h1 { font-size: clamp(32px, 4vw, 52px); }
.public-not-found p { max-width: 650px; color: #c4c8d4; line-height: 1.7; }
.public-hero h1.rhyme-modal-brand { display: flex; width: fit-content; margin-bottom: 0; font-size: clamp(38px, 5.2vw, 64px); letter-spacing: -.035em; }
.public-hero h1.rhyme-modal-brand span { background-image: linear-gradient(135deg, #b66cff, #56e6ff); }
.public-rhymeright .rhyme-search-row { max-width: 760px; margin: 0; }
.public-rhymeright .rhyme-search-row input { min-height: 44px; font-size: 17px; }
.public-rhymeright .rhyme-search-row .primary-button { width: 44px; min-height: 44px; }
.public-rhyme-tabs { max-width: 360px; margin-bottom: 22px; }
.public-rhymeright .public-results { display: block; padding-top: 0; border-top: 0; }
.public-rhyme-result h2 { margin: 0 0 18px; font-size: 16px; color: #c4c8d4; }
.public-rhymeright .public-word-list li { padding: 0; background: none; }
.public-rhymeright .rhyme-chip { min-height: 40px; font-size: 14px; }
[data-rhyme-results] [hidden], [data-rhyme-tabs][hidden] { display: none; }
.public-full-tool { margin: 18px 0 0; max-width: 760px; font-size: 14px; color: #a6a9b4; line-height: 1.6; }
.site-shell .public-full-tool a { color: #73baff; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:1100px) { .site-nav { grid-template-columns: 1fr auto; } .site-nav-links { display: none; } .site-resources-mobile { display: block; } }
@media(max-width:620px) { .site-nav { gap: 12px; } }
@media(max-width:900px) { .public-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:620px) { .public-resources-grid, .public-hub-grid { grid-template-columns: minmax(0, 1fr); } }
@media(max-width:480px) { .site-nav-actions>.site-login-link { display: none; } .public-resources-grid, .public-hub-grid { grid-template-columns: minmax(0, 1fr); } }
@media(max-width:360px) { .site-logo .songright-wordmark { width: 110px; } }

.public-tool-launch { display: inline-flex; align-items: center; justify-content: center; margin-top: 20px; padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: 8px; color: #f7f8fb; background: #ffffff06; font-size: 14px; font-weight: 750; }
.public-tool-launch:hover { border-color: #73baff; color: #73baff; }
.public-tool-launch:focus-visible { outline: 3px solid #73baff; outline-offset: 4px; }