/* ==========================================================================
   Cyber City · a policy page (page-policy.php, inc/policy.php)
   The title and the date it changed, "In short", the index beside the text (one box with the text, so it never rides
   over what follows), the text with its sections numbered, a person to ask, the other policies.
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

.ecc-pol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); counter-reset: ecc-pol; }
.ecc-pol > * { grid-column: 1 / -1; min-width: 0; }
.ecc-pol__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }

/* ---- the head ---- */
.ecc-pol__head { display: grid; gap: var(--ecc-s-4); padding-top: var(--ecc-s-7); }
.ecc-pol__title { max-width: 16em; margin: 0; text-wrap: balance; }
.ecc-pol__date { margin: 0; color: var(--ecc-ink-2); }
.ecc-pol__short { display: grid; gap: var(--ecc-s-3); margin-top: var(--ecc-s-3); padding: var(--ecc-s-5); border-radius: var(--ecc-r-sm); background-color: var(--ecc-surface-2); }
.ecc-pol__points { display: grid; gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-pol__points li { position: relative; padding-left: var(--ecc-s-5); font-weight: var(--ecc-fw-medium); }
.ecc-pol__points li::before { content: ""; position: absolute; left: 0; top: calc((1lh - var(--ecc-s-2)) / 2); width: var(--ecc-s-2); height: var(--ecc-s-2); background: var(--ecc-spark); }
@media (min-width: 1181px) { .ecc-pol__short { max-width: 46em; } }

/* ---- the index and the text: one box ---- */
.ecc-pol__body { display: grid; gap: var(--ecc-gap); align-items: start; }
.ecc-pol__rail { display: grid; gap: var(--ecc-s-3); }
.ecc-pol__index { display: grid; gap: var(--ecc-s-1); margin: 0; padding: 0; list-style: none; }
.ecc-pol__jump { display: flex; align-items: center; gap: var(--ecc-s-3); min-height: var(--ecc-hit); padding: var(--ecc-s-1) 0; color: var(--ecc-ink); text-decoration: none; font-weight: var(--ecc-fw-medium); transition: color var(--ecc-d-fast) var(--ecc-ease-out); }
.ecc-pol__n { flex: none; min-width: 2.2em; font-size: var(--ecc-t-h3); color: var(--ecc-spark); }
.ecc-pol__jump:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
/* the section being read (policy.js): its jump stays in full ink, the others step back */
.ecc-pol__rail.is-spy .ecc-pol__jump:not([aria-current]) { color: var(--ecc-ink-2); }
.ecc-pol__rail.is-spy .ecc-pol__jump:not([aria-current]) .ecc-pol__n { color: var(--ecc-ink-2); }
.ecc-pol__jump[aria-current] span:last-child { font-weight: var(--ecc-fw-strong); }
@media (hover: hover) and (pointer: fine) { .ecc-pol__jump:hover span:last-child { text-decoration: underline; text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; text-underline-offset: 2px; } }
@media (min-width: 1181px) {
  .ecc-pol__body { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ecc-pol__rail { position: sticky; top: var(--ecc-s-9); }
}

/* ---- the text: the page's own words, its sections numbered ---- */
.ecc-pol__text { display: grid; gap: var(--ecc-s-4); align-content: start; }
.ecc-pol__text > * { max-width: 40em; margin: 0; }
.ecc-pol__text h2 {
  counter-increment: ecc-pol; display: flex; align-items: baseline; gap: var(--ecc-s-3);
  margin-top: var(--ecc-s-5); font-size: var(--ecc-t-h2); font-weight: var(--ecc-fw-display); line-height: var(--ecc-lh-heading);
  scroll-margin-top: var(--ecc-s-9);
}
.ecc-pol__text h2:first-child { margin-top: 0; }
.ecc-pol__text h2::before { content: counter(ecc-pol, decimal-leading-zero); flex: none; font-family: var(--ecc-f-dot); font-variation-settings: var(--ecc-dot-settings); font-weight: var(--ecc-fw-dot); font-size: var(--ecc-t-h2); color: var(--ecc-spark); }
.ecc-pol__text h3 { margin-top: var(--ecc-s-3); font-size: var(--ecc-t-h3); }
.ecc-pol__text p, .ecc-pol__text li { line-height: var(--ecc-lh-body); }
.ecc-pol__text ul, .ecc-pol__text ol { display: grid; gap: var(--ecc-s-2); padding-left: var(--ecc-s-5); }
.ecc-pol__text a { position: relative; color: var(--ecc-ink); text-decoration: underline; text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; text-underline-offset: 2px; }
/* a link inside a sentence gets a 44px tap area that does not move the line (as .ecc-link) */
.ecc-pol__text a::after { content: ""; position: absolute; inset: calc((var(--ecc-s-3) + var(--ecc-s-1) / 2) * -1) calc(var(--ecc-s-1) / -2); }
.ecc-pol__text strong { font-weight: var(--ecc-fw-strong); }

/* ---- a person to ask ---- */
.ecc-pol__ask { display: grid; gap: var(--ecc-s-5); align-items: center; overflow: hidden; }
.ecc-pol__asksay { display: grid; gap: var(--ecc-s-2); }
.ecc-pol__asksay > * { margin: 0; }
.ecc-pol__asklead { color: var(--ecc-ink-2); }
.ecc-pol__acts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-3); }
.ecc-pol__acts .ecc-btn { gap: var(--ecc-s-2); }
@media (min-width: 1181px) { .ecc-pol__ask { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---- the other policies ---- */
.ecc-pol__more { display: grid; gap: var(--ecc-s-3); }
.ecc-pol__links { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2) var(--ecc-s-6); margin: 0; padding: 0; list-style: none; }