/* Resources + contact pages: /faq, /news, /tutorials, /press-kit, /support, /suggest, /legal/*.
 * Loaded per page through header.inc's $extra_head. Tokens only; rem for every size
 * (px only for hairlines). No shadows, no gradients; hierarchy by line weight. */

/* ---- Two-column reading layout: sticky table of contents / aside + main ---- */
.res-layout { display: grid; gap: 2rem; }
.res-main { min-width: 0; }
@media (min-width: 992px) {
  .res-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 3rem; align-items: start; }
  .res-layout:has(> .res-aside) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .res-toc, .res-aside { position: sticky; top: 6rem; }
}
.res-toc { border-top: var(--pen-2) solid var(--ink); padding-top: .75rem; }
.res-toc h2 { margin-bottom: .5rem; }
.res-toc ul { list-style: none; margin: 0; padding: 0; }
.res-toc li a { display: block; padding: .4rem 0; font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: var(--pen-1) solid var(--grid); }
.res-toc li a:hover { color: var(--action); text-decoration: underline; }
.res-aside .form-compact .inline-row { grid-template-columns: 1fr; }
.res-aside .rule-box > :last-child { margin-bottom: 0; }

.back-link { margin: 0 0 2rem; font-weight: 600; }
.hint-line { margin-top: .75rem; color: var(--ink-2); font-size: var(--fs-sm); }
.page-head .eyebrow a { font-weight: 600; }
.page-head .eyebrow .eyebrow-app { display: inline-flex; align-items: center; gap: .4rem; }

/* ---- FAQ ---- */
.faq-group + .faq-group { margin-top: 2.5rem; }
.faq-group > h2 { font-size: var(--fs-lg); margin-bottom: .75rem; }
.faq-list { border-top: var(--pen-2) solid var(--ink); }
.faq-item { border-bottom: var(--pen-1) solid var(--line); scroll-margin-top: 6rem; }
.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--fs-md); font-stretch: 105%; line-height: 1.35; color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover .faq-q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.faq-item > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.faq-caret { display: inline-block; font-size: .875rem; line-height: 1; flex-shrink: 0; color: var(--ink-2); transition: transform .15s ease; }
.faq-item[open] > summary .faq-caret { transform: rotate(180deg); }
.faq-item[open] > summary { padding-bottom: .5rem; }
.faq-a { padding: 0 0 1.25rem; }
.faq-a p { margin: 0 0 .6rem; }
.faq-a > p:first-child { color: var(--ink); }
.faq-foot { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: var(--fs-sm); font-weight: 600; }
.faq-anchor { color: var(--ink-2); }
.faq-item:target { border-left: var(--pen-3) solid var(--action); padding-left: .75rem; }
@media (prefers-reduced-motion: reduce) { .faq-caret { transition: none; } }

/* ---- News / tutorial lists ---- */
.post-list { list-style: none; margin: 0; padding: 0; border-top: var(--pen-2) solid var(--ink); }
.post-row { display: grid; gap: .35rem 2rem; padding: 1.25rem 0; border-bottom: var(--pen-1) solid var(--line); }
@media (min-width: 768px) { .post-row { grid-template-columns: 11rem minmax(0, 1fr); } }
.post-date { color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); padding-top: .3rem; }
.post-title { font-size: var(--fs-lg); margin: 0 0 .35rem; }
.post-title a { color: var(--ink); text-decoration: none; }
.post-title a:hover, .post-title a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.post-summary { margin: 0; color: var(--ink-2); }
.post-app { display: flex; align-items: center; gap: .4rem; margin: 0 0 .25rem; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); }

.tut-empty { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .tut-empty { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; align-items: center; } }
.tut-empty h2 { font-size: var(--fs-lg); }

/* ---- Support ---- */
.help-list { list-style: none; margin: 0; padding: 0; border-top: var(--pen-2) solid var(--ink); }
.help-list li { padding: 1rem 0; border-bottom: var(--pen-1) solid var(--line); }
.help-list h3 { margin-bottom: .25rem; }
.help-list p { margin: 0 0 .35rem; color: var(--ink-2); }
.help-list a { font-weight: 600; }
.rule-box > h2:first-child { margin-bottom: 1rem; }

/* ---- Suggest ---- */
.sg-list { list-style: none; margin: 0; padding: 0; border-top: var(--pen-2) solid var(--ink); }
.sg-item {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .75rem 1rem;
  padding: 1rem 0; border-bottom: var(--pen-1) solid var(--line); scroll-margin-top: 6rem;
}
.sg-item:target { border-left: var(--pen-3) solid var(--action); padding-left: .75rem; }
.sg-votes { display: flex; flex-direction: column; align-items: center; justify-content: center; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); background: var(--sheet-2); padding: .4rem 0; align-self: start; }
.sg-count { font-weight: 700; font-size: var(--fs-lg); font-stretch: 112%; line-height: 1.1; }
.sg-unit { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.sg-title { font-size: var(--fs-md); margin: 0 0 .25rem; overflow-wrap: anywhere; }
.sg-why { margin: 0 0 .4rem; color: var(--ink-2); overflow-wrap: anywhere; }
.sg-status { border: var(--pen-1) dashed var(--ink); border-radius: var(--radius); padding: .05rem .5rem; color: var(--ink); font-weight: 600; }
.sg-status.is-planned { border-style: solid; }
.sg-action { grid-column: 2; }
.sg-action form { margin: 0; }
.sg-voted { display: inline-block; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); padding: .5rem 0; }
@media (min-width: 576px) {
  .sg-item { grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: start; }
  .sg-action { grid-column: auto; }
}

/* ---- Press kit ---- */
.pk-boiler p { margin: 0; font-size: var(--fs-md); line-height: 1.55; }
.pk-logos { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pk-logos { grid-template-columns: 1fr 1fr; } }
.pk-logo { margin: 0; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); background: var(--sheet-2); overflow: hidden; }
/* Previews show each file on the --sheet colour of its own space (inline style from tokens.css), whatever theme the page is in. */
.pk-logo-preview { display: flex; align-items: center; justify-content: center; min-height: 9rem; padding: 2rem 1.5rem; border-bottom: var(--pen-1) solid var(--ink); }
.pk-logo-preview img { display: block; max-width: 100%; height: auto; }
.pk-logo-preview.is-logo img { width: 16.8rem; }
.pk-logo-preview.is-mark img { width: 4rem; }
.pk-logo-preview.is-icon img { width: 6rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.pk-logo figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1rem; }
.pk-logo-name { font-weight: 700; }
.pk-downloads { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.pk-downloads a { font-weight: 700; }
.pk-rules { margin: 0; padding-left: 1.25rem; }
.pk-rules li { margin-bottom: .4rem; }

.pk-table-wrap { overflow-x: auto; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); background: var(--sheet-2); margin-bottom: 1rem; }
.pk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pk-table th, .pk-table td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: var(--pen-1) solid var(--grid); }
.pk-table thead th { border-bottom: var(--pen-2) solid var(--ink); font-weight: 700; color: var(--ink); white-space: nowrap; }
.pk-table tbody tr:last-child > * { border-bottom: 0; }
.pk-table tbody th { font-weight: 600; white-space: nowrap; }
.pk-table code { font-family: inherit; font-weight: 700; color: var(--ink); font-size: inherit; }
.pk-table td .tabular { font-weight: 600; }
.pk-chip { display: inline-block; width: 1rem; height: 1rem; margin-right: .5rem; vertical-align: -.15rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); }

.pk-names { list-style: none; margin: 0; padding: 0; border-top: var(--pen-2) solid var(--ink); }
.pk-names li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem .75rem; padding: .75rem 0; border-bottom: var(--pen-1) solid var(--line); }
.pk-names .pk-name { font-weight: 700; font-stretch: 125%; font-size: var(--fs-md); }
.pk-names .pk-role { grid-column: 2; color: var(--ink-2); }
.pk-names .status-chip { grid-column: 2; justify-self: start; }
@media (min-width: 768px) {
  .pk-names li { grid-template-columns: auto 14rem minmax(0, 1fr) auto; }
  .pk-names .pk-role, .pk-names .status-chip { grid-column: auto; }
}
.pk-tm { margin-top: 1rem; font-size: var(--fs-sm); }
.pk-contact { display: grid; gap: 1rem; align-items: center; }
.pk-contact p { margin: 0; }
@media (min-width: 768px) { .pk-contact { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; } }

/* ---- Legal ---- */
.placeholder-note { border: var(--pen-1) dashed var(--ink); border-left: var(--pen-3) solid var(--layer-ochre); border-radius: var(--radius); background: var(--sheet-2); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.placeholder-note p { margin: .25rem 0 0; color: var(--ink-2); }
.legal h2 { scroll-margin-top: 6rem; }
.legal h2:first-child { margin-top: 0; }
.legal .pk-table-wrap { margin-bottom: 1.25rem; }
.future-note { border: var(--pen-1) dashed var(--ink); border-left: var(--pen-3) solid var(--action); border-radius: var(--radius); background: var(--sheet-2); padding: .75rem 1rem; margin: 0 0 1.25rem; color: var(--ink-2); }
.future-note strong { color: var(--ink); margin-right: .25rem; }