/*
 * The small shared pieces the creating and editing surfaces use together: the post composer, the Club
 * sheet and Club settings, and Edit profile. One counter, one "Saved" mark, one switch, one banner,
 * one progress ring, one sheet handle, one well for a field. They read the palette, space, radius and
 * motion tokens and define none, so Paint, Obsidian and the light look all fit them. Reduced motion,
 * Data Saver and Motion Off hold every movement here still.
 */

/* ---------- A live count: only when it matters, quiet until it does ---------- */
.pk-count { margin: 0; color: var(--pk-muted); font-size: var(--pk-type-meta); font-variant-numeric: tabular-nums; line-height: 1.4; }
.pk-count[data-state="near"] { color: var(--pk-warn); }
.pk-count[data-state="over"] { color: var(--pk-error); font-weight: var(--pk-weight-semibold); }
.pk-count[hidden] { display: none; }

/* ---------- "Saved": a small check and a word, said once and then gone ---------- */
.pk-saved { display: inline-flex; align-items: center; gap: var(--pk-space-1); margin: 0; color: var(--pk-muted); font-size: var(--pk-type-meta); line-height: 1.4; opacity: 0; transition: opacity var(--pk-dur-base) var(--pk-ease-quick); }
.pk-saved[data-on="true"] { opacity: 1; }
.pk-saved::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("/assets/glyph/check.svg") center / contain no-repeat; mask: url("/assets/glyph/check.svg") center / contain no-repeat; }
.pk-saved[hidden] { display: none; }

/* ---------- A switch: a plain checkbox underneath, a track and a thumb on top ---------- */
.pk-switch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-4); min-height: var(--pk-hit); cursor: pointer; }
.pk-switch > input[type="checkbox"] { grid-column: 2; grid-row: 1; appearance: none; -webkit-appearance: none; position: relative; width: 48px; height: 28px; margin: 0; border: 1.5px solid var(--pk-line-strong); border-radius: var(--pk-radius-pill); background: var(--pk-surface-sunken); cursor: pointer; transition: background-color var(--pk-dur-base) var(--pk-ease-quick), border-color var(--pk-dur-base) var(--pk-ease-quick); }
.pk-switch > input[type="checkbox"]::before { content: ""; position: absolute; top: 50%; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--pk-muted); translate: 0 -50%; transition: translate var(--pk-dur-base) var(--pk-ease-settle), background-color var(--pk-dur-base) var(--pk-ease-quick); }
.pk-switch > input[type="checkbox"]:checked { border-color: var(--pk-accent); background: var(--pk-accent-strong); }
.pk-switch > input[type="checkbox"]:checked::before { translate: 20px -50%; background: var(--pk-on-accent); }
.pk-switch > input[type="checkbox"]:disabled { opacity: .5; cursor: default; }
.pk-switch > input[type="checkbox"]:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }
.pk-switch > :not(input) { grid-column: 1; grid-row: 1; min-width: 0; }

/* ---------- A banner: one calm line that says what is true (offline, kept, retry) ---------- */
.pk-banner { display: flex; align-items: center; gap: var(--pk-space-3); margin: 0; padding: var(--pk-space-3) var(--pk-space-4); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-control); background: var(--pk-surface-raised); color: var(--pk-ink); font-size: var(--pk-type-ui); line-height: 1.45; }
.pk-banner[data-tone="warn"] { border-color: var(--pk-warn-line); background: var(--pk-warn-tint); }
.pk-banner[data-tone="error"] { border-color: var(--pk-error-line); background: var(--pk-error-tint); }
.pk-banner[data-tone="good"] { border-color: var(--pk-good-line); background: var(--pk-good-tint); }
.pk-banner[hidden] { display: none; }
.pk-banner > :first-child { flex: 1; min-width: 0; }
.pk-banner button { flex: none; min-height: var(--pk-hit); padding: 0 var(--pk-space-4); border: 1px solid var(--pk-line-strong); border-radius: var(--pk-radius-pill); background: transparent; color: var(--pk-ink); font: var(--pk-weight-semibold) var(--pk-type-ui)/1.2 var(--fs-font); cursor: pointer; }

/* ---------- A progress ring: a percentage you can see ---------- */
.pk-ring { --pk-ring: 0; position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--pk-accent) calc(var(--pk-ring) * 1%), var(--pk-line) 0); }
.pk-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pk-surface); }
.pk-ring[data-indeterminate="true"] { background: conic-gradient(var(--pk-accent) 28%, var(--pk-line) 0); animation: pk-ring-turn 1100ms linear infinite; }
@keyframes pk-ring-turn { to { rotate: 1turn; } }

/* ---------- A sheet: handle, scrim and a quiet rise ---------- */
.pk-sheet-handle { display: block; width: 36px; height: 4px; margin: 0 auto var(--pk-space-3); border-radius: var(--pk-radius-pill); background: var(--pk-line-strong); opacity: .6; }
@keyframes pk-sheet-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes pk-scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- A field in a well: label small and above, the value large, one ring when it has focus ---------- */
.pk-well { display: grid; gap: 2px; padding: var(--pk-space-3) var(--pk-space-4); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-control); background: var(--pk-surface-sunken); transition: border-color var(--pk-dur-fast) var(--pk-ease-quick), background-color var(--pk-dur-fast) var(--pk-ease-quick); }
.pk-well:focus-within { border-color: var(--pk-accent); background: var(--pk-surface); }
.pk-well[data-invalid="true"] { border-color: var(--pk-error-line); background: var(--pk-error-tint); }

/* ---------- A row that presses like a button without being one ---------- */
.pk-press:active:not([aria-disabled="true"]) { scale: var(--pk-press-scale); filter: var(--pk-press-filter); }
/* In at once, back on the spring: --pk-ease-pop is the same curve the like and the follow use. */
.pk-press { transition: scale var(--pk-dur-pop, 560ms) var(--pk-ease-pop, var(--pk-ease-settle)), filter var(--pk-dur-fast) var(--pk-ease-quick); }
.pk-press:active { transition-duration: var(--pk-dur-press), var(--pk-dur-press); transition-timing-function: var(--pk-ease-quick); }

/* ---------- A new post lands: it rises (answers.css), then a ring of the accent colour settles ---------- */
@keyframes pk-landing-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pk-accent) 0%, transparent); } 24% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-accent) 60%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pk-accent) 0%, transparent); } }
.pk-landing { border-radius: var(--pk-radius-overlay); animation: pk-landing-rise var(--pk-dur-slow, 440ms) var(--pk-ease-settle, ease-out) both, pk-landing-glow 2400ms var(--pk-ease-quick) 240ms both; }

/* Reduced motion, Data Saver and Motion Off: the same states, no movement. */
@media (prefers-reduced-motion: reduce) {
  .pk-saved, .pk-switch > input[type="checkbox"], .pk-switch > input[type="checkbox"]::before, .pk-well, .pk-press { transition: none; }
  .pk-ring[data-indeterminate="true"] { animation: none; }
  .pk-landing { animation: pk-landing-glow 2400ms linear both; }
}
html:is([data-motion="off"], [data-save="1"], .pk-save-data) :is(.pk-saved, .pk-switch > input[type="checkbox"], .pk-switch > input[type="checkbox"]::before, .pk-well, .pk-press) { transition: none; }
html:is([data-motion="off"], [data-save="1"], .pk-save-data) .pk-ring[data-indeterminate="true"] { animation: none; }
html:is([data-motion="off"], [data-save="1"], .pk-save-data) .pk-landing { animation: none; }

@media (forced-colors: active) {
  .pk-switch > input[type="checkbox"] { border-color: ButtonText; background: Canvas; }
  .pk-switch > input[type="checkbox"]::before { background: ButtonText; }
  .pk-switch > input[type="checkbox"]:checked { background: Highlight; border-color: Highlight; }
  .pk-switch > input[type="checkbox"]:checked::before { background: HighlightText; }
  .pk-well, .pk-banner { border-color: CanvasText; }
  .pk-ring { background: conic-gradient(Highlight calc(var(--pk-ring) * 1%), GrayText 0); }
}