/* $BELIEVE — Daily Sit (Task 10): monk close-up UI -- progress ring, the
   wandered-mind break message, and the streak/rank completion card.
   DOM is built entirely by js/sit.js; this file only styles it. Same
   HUD-terminal language as gate.css/hud.css/cards.css: Space Mono,
   letter-spaced caps, thin green hairline borders, the shared
   --believe-* custom properties gate.js bridges off CFG.colors. */

#sit {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#sit[hidden] {
  display: none;
}

/* ---- stage: the ring + faint label ---- */

.sit__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sit__stage[hidden] {
  display: none;
}

.sit__ring {
  width: min(30vmin, 220px);
  aspect-ratio: 1;
  /* Starts the fill at 12 o'clock instead of a <circle>'s native 3-o'clock
     start point -- reads like a clock/timer, not an arbitrary arc. */
  transform: rotate(-90deg);
  /* The ring charges as stillness accumulates -- same glow-with-progress
     language as the gate's hold ring (gate.css), driven by the
     --sit-progress bridge sit.js writes per frame. Zero at rest; progress
     feedback, not motion, so it stays under reduced motion too. */
  filter: drop-shadow(0 0 calc(2px + 12px * var(--sit-progress, 0)) color-mix(in srgb, var(--believe-green, #b8d62e) 60%, transparent));
}

.sit__ring-track {
  fill: none;
  stroke: var(--believe-grey, #6a6f5e);
  stroke-opacity: 0.4;
  stroke-width: 2.5;
}

.sit__ring-fill {
  fill: none;
  stroke: var(--believe-green, #b8d62e);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* No CSS transition here -- js/sit.js already writes stroke-dasharray on
     every animation frame while sitting, so a competing CSS-driven ease
     would just lag behind a value that's already being updated smoothly. */
}

.sit__label {
  margin: 0;
  font: 700 0.85rem/1 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.4em;
  color: var(--believe-grey, #6a6f5e);
  opacity: 0.85;
  /* He breathes; the instruction breathes with him. Brightness only ever
     rises from the 0.85 rest (AA floor) -- never dims below it. */
  animation: sitBreath 4.4s ease-in-out infinite;
}

@keyframes sitBreath {
  0%, 100% {
    opacity: 0.85;
    text-shadow: 0 0 0 transparent;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px color-mix(in srgb, var(--believe-grey, #8a907c) 45%, transparent);
  }
}

/* ---- broken: "THE MIND WANDERED." ---- */

.sit__broken {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: min(88vw, 480px);
  padding: 1.75rem 1.5rem;
  text-align: center;
  border: 1px solid var(--believe-grey, #6a6f5e);
  background: var(--believe-bg, #050603);
  background: color-mix(in srgb, var(--believe-bg, #050603) 90%, var(--believe-grey, #6a6f5e));
}

.sit__broken[hidden] {
  display: none;
}

.sit__broken-title {
  margin: 0;
  font: 700 clamp(1.3rem, 4vmin, 1.9rem) / 1.2 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.1em;
  color: var(--believe-grey, #6a6f5e);
}

.sit__broken-line {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--believe-green, #b8d62e);
  opacity: 0.85;
}

/* ---- completion card: rank + streak + "DAY N SEALED" ----
   #sit-complete-card is a stable hook -- Task 11 appends its certificate
   button here on its own 'sit:complete' listener (js/sit.js always
   finishes writing this card's text content BEFORE emitting that event,
   so the node is guaranteed to exist -- with its final content -- by the
   time any subscriber runs). */

.sit__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: min(88vw, 480px);
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
  border: 1px solid var(--believe-green, #b8d62e);
  background: var(--believe-bg, #050603);
  background: color-mix(in srgb, var(--believe-bg, #050603) 88%, var(--believe-green, #b8d62e));
  pointer-events: auto; /* Task 11's future certificate button lives inside this card */
  /* Arrival: a quick materialize (display:none suspends animations, so
     this replays each completion). Content is written by sit.js BEFORE the
     card unhides, and the aria-live region announces that final text once
     -- the animation only moves pixels, never text. */
  animation: sitCardIn 260ms ease-out;
}

.sit__card[hidden] {
  display: none;
}

/* The card yields center stage to the monk. Dead-centered (the #sit flex
   default) it sat exactly over the close-up's head and torso -- the one
   thing the whole sit was about. On any viewport with room it lands in
   the lower third instead: monk and enso stay visible above it through
   both the ease-back and the rail rest pose. Short viewports (landscape
   phones) keep the centered fallback -- there is no "lower third" worth
   distinguishing at 375px tall, and the close-up crops the monk anyway.
   align-self (not transform) so the sitCardIn/sealStamp keyframes -- which
   own the transform property -- never fight the placement. */
@media (min-height: 600px) {
  .sit__card {
    align-self: flex-end;
    margin-bottom: clamp(1.25rem, 7vh, 3.5rem);
  }
}

@keyframes sitCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}

/* DAY N SEALED lands like the seal it claims to be: waits for the card to
   materialize, then drops in oversized and hits with a brief overshoot.
   'both' keeps it invisible through the 300ms wind-up. */
.sit__card:not([hidden]) .sit__card-sealed {
  animation: sealStamp 420ms cubic-bezier(0.25, 0.9, 0.3, 1.2) 300ms both;
}

@keyframes sealStamp {
  0% {
    opacity: 0;
    transform: scale(2.1) rotate(-2deg);
  }
  55% {
    opacity: 1;
    transform: scale(0.94) rotate(0.6deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.sit__card-rank {
  margin: 0;
  font: 700 clamp(1.5rem, 5vmin, 2.2rem) / 1.1 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.12em;
  color: var(--believe-bright, #d4f24b);
}

.sit__card-streak {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--believe-green, #b8d62e);
}

.sit__card-sealed {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--believe-grey, #6a6f5e);
}

.sit__card-note {
  margin: 0.4rem 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--believe-grey, #6a6f5e);
  opacity: 0.85;
}

.sit__card-note[hidden] {
  display: none;
}

/* ---- certificate (Task 11): CLAIM CERTIFICATE button + result (preview +
   share), appended into #sit-complete-card by js/certificate.js on its own
   'sit:complete' listener. This file only styles the classes that module
   assigns -- it owns none of the DOM construction. */

.sit__cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--believe-grey, #6a6f5e);
}

.sit__cert-btn {
  appearance: none;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: none;
  color: var(--believe-green, #b8d62e);
  cursor: pointer;
  touch-action: manipulation; /* no double-tap zoom on the card's actions */
  transition: color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.sit__cert-btn:hover,
.sit__cert-btn:focus-visible {
  color: var(--believe-bright, #d4f24b);
  border-color: var(--believe-bright, #d4f24b);
}

.sit__cert-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.sit__cert-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.sit__cert-result[hidden] {
  display: none;
}

.sit__cert-preview {
  /* 45vh term: on a landscape phone (~375px tall) a fixed 320px preview
     alone would swallow nearly the whole viewport and push the share
     button + card actions off screen. */
  max-height: min(320px, 45vh);
  max-width: 100%;
  width: auto;
  border: 1px solid var(--believe-grey, #6a6f5e);
}

.sit__cert-share {
  appearance: none;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--believe-grey, #6a6f5e);
  background: none;
  color: var(--believe-grey, #6a6f5e);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 120ms ease, border-color 120ms ease;
}

.sit__cert-share:hover,
.sit__cert-share:focus-visible {
  color: var(--believe-green, #b8d62e);
  border-color: var(--believe-green, #b8d62e);
}

@media (prefers-reduced-motion: reduce) {
  .sit__card,
  .sit__card:not([hidden]) .sit__card-sealed,
  .sit__label,
  .sit__cert-btn,
  .sit__cert-share {
    animation: none !important;
    transition: none !important;
  }
}