/* The Speaking Stone (T2-48): read-only suggestions board. Uses the site tokens from style.css. */
[hidden] { display: none !important; }
.st-hero { background: linear-gradient(180deg, var(--sea-950), var(--sea-900)); padding: 128px 0 34px; border-bottom: 1px solid var(--line); }
.st-hero h1 { font-size: clamp(34px, 5.2vw, 64px); }
.st-hero h1 small { display: block; font: 600 14px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--dawn); margin-bottom: 14px; }
.st-strap { font: 400 clamp(20px, 2.6vw, 28px)/1.3 var(--f-head, var(--f-body)); color: var(--dawn-hot, var(--dawn)); margin-top: 14px; }
.st-lead { max-width: 62ch; color: var(--fg2); font-size: 18px; line-height: 1.55; margin-top: 10px; }
.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; color: var(--fg2); font-size: 16px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: 999px; font: 700 15px/1 var(--f-body); border: 1px solid; }
.pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pill.ok { color: #6fcf7f; background: rgba(85,163,98,.14); border-color: rgba(85,163,98,.5); }
.pill.warn { color: var(--dawn-hot); background: rgba(242,166,90,.12); border-color: rgba(242,166,90,.5); }
.st-wrap { padding: 30px 0 70px; }
.st-h2 { font-size: clamp(26px, 3vw, 36px); margin: 44px 0 14px; }
.st-h2:first-child { margin-top: 0; }
.st-steps { padding-left: 22px; display: grid; gap: 12px; color: var(--fg2); font-size: 17px; line-height: 1.55; max-width: 78ch; }
.st-steps b { color: var(--marble); }
.st-note { color: var(--fg3); font-size: 15px; line-height: 1.55; margin-top: 16px; max-width: 78ch; }
.st-sub { color: var(--fg3); font-size: 15px; margin: -6px 0 14px; }
.st-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin-bottom: 20px; }
.st-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.st-fbtn { font: 600 14px/1 var(--f-body); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--fg2); cursor: pointer; }
.st-fbtn:hover { border-color: var(--dawn); }
.st-fbtn[aria-pressed="true"] { background: rgba(242,166,90,.14); border-color: var(--dawn); color: var(--marble); }
.st-field { display: flex; flex-direction: column; gap: 6px; }
.st-field span { font-size: 13px; color: var(--fg3); letter-spacing: .06em; text-transform: uppercase; }
.st-field select { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line2); background: var(--sea-900); color: var(--marble); font: 16px var(--f-body); }
.st-field select:focus, .st-fbtn:focus-visible, .st-head:focus-visible { outline: 2px solid var(--dawn); outline-offset: 1px; }
.st-state { background: var(--sea-850); border: 1px dashed var(--line2); border-radius: 12px; padding: 34px 24px; text-align: center; color: var(--fg2); font-size: 17px; line-height: 1.5; }
.st-state b { display: block; color: var(--marble); font: 400 24px/1.2 var(--f-head, var(--f-body)); margin-bottom: 8px; }
.st-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.st-card { background: var(--sea-850); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.st-card:hover { border-color: var(--line2); }
.st-head { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 16px 18px; cursor: pointer; }
.st-ring { --p: 0; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--rc, #6fcf7f) calc(var(--p) * 1%), var(--sea-900) 0); position: relative; }
.st-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--sea-850); }
.st-ring b { position: relative; z-index: 1; font: 700 18px/1 var(--f-body); color: var(--marble); }
.st-main { min-width: 0; flex: 1; }
.st-title { font: 400 21px/1.25 var(--f-head, var(--f-body)); color: var(--marble); margin: 0 0 5px; overflow-wrap: anywhere; }
.st-line { color: var(--fg3); font-size: 14px; line-height: 1.4; }
.chip { font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line2); color: var(--fg2); white-space: nowrap; flex: none; }
.chip.s-heard, .chip.s-gathering { color: #6fcf7f; border-color: rgba(85,163,98,.55); }
.chip.s-weighed, .chip.s-forging, .chip.s-rehearsal { color: #f0c060; border-color: rgba(201,150,43,.6); }
.chip.s-trial { color: #8fb2ff; border-color: rgba(91,141,239,.6); }
.chip.s-standing { color: #6fcf7f; border-color: rgba(85,163,98,.8); background: rgba(85,163,98,.12); }
.chip.s-declined, .chip.reserved { color: #e08a8a; border-color: rgba(176,90,90,.6); }
.chip.s-parked { color: var(--fg3); }
.st-body { padding: 4px 18px 18px 18px; border-top: 1px solid var(--line); color: var(--fg2); font-size: 16px; line-height: 1.55; }
.st-body h4 { font: 700 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--dawn); margin: 18px 0 7px; }
.st-body p { margin: 0 0 6px; max-width: 78ch; overflow-wrap: anywhere; }
.st-pipe { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.st-pipe span { font-size: 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--fg3); }
.st-pipe .done { color: #6fcf7f; }
.st-pipe .on { color: var(--dawn-hot, var(--dawn)); border-color: var(--dawn); background: rgba(242,166,90,.1); }
.st-tl { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; }
.st-tl time { color: var(--fg3); margin-right: 10px; }
.st-decrees { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.st-decrees li { background: var(--sea-850); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; color: var(--fg2); }
.st-decrees b { color: var(--marble); }
.st-faq { margin-top: 20px; max-width: 78ch; color: var(--fg2); font-size: 17px; line-height: 1.55; }
@media (max-width: 700px) { .st-hero { padding-top: 104px; } .wrap { padding: 0 16px; } .st-head { gap: 12px; padding: 14px 12px; flex-wrap: wrap; } .st-ring { width: 54px; height: 54px; } .st-main { flex-basis: 60%; } }