/* Feelings Wheel — site styles */

:root {
  --text: #2b2b2b;
  --text-muted: #777;
  --accent: #4a4a4a;
  --bg: #ffffff;
  --chip-border: #e2e2e2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

header {
  text-align: center;
  padding: 1.25rem 1rem 0;
}

header h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Breadcrumb — fixed height so the layout never jumps */
#breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
}

.crumb {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
}

.crumb-arrow { color: var(--text-muted); }

.crumb-hint {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Wheel */
#wheelStage {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0.5rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  position: relative;
  z-index: 5; /* zoomed wheel renders above the page content below it */
}

#wheelStage:active { cursor: grabbing; }

#wheelSvg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* let the zoomed wheel escape its box */
  touch-action: none;
}

/* Reset button in the wheel's center hole — appears when there is
   anything to reset (zoom, rotation, or a selection) */
#centerReset {
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  outline: none;
}

#centerReset.visible {
  opacity: 1;
  pointer-events: auto;
}

#centerReset circle {
  fill: #ffffff;
  stroke: #d9d9d9;
  stroke-width: 2;
}

#centerReset text {
  fill: #666;
  font-size: 20px;
  font-weight: 600;
  pointer-events: none;
}

#centerReset:hover circle,
#centerReset:focus-visible circle { stroke: #999; }

/* Dim/undim by animating opaque fill colors — never transparency,
   so nothing behind the wheel shows through when zoomed */
.segment path { transition: fill 0.25s ease, stroke 0.25s ease; }
.segment text {
  /* SF Pro Semibold per the Figma design; falls back to system equivalents */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  transition: fill 0.25s ease;
}
.segment { cursor: pointer; outline: none; }
.segment:focus-visible path { stroke: #1a73e8; stroke-width: 4; }

/* Controls */
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
}

.scheme-toggle {
  display: inline-flex;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  overflow: hidden;
}

.scheme-toggle button {
  border: none;
  background: transparent;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-muted);
}

.scheme-toggle button.selected {
  background: var(--accent);
  color: #fff;
}

/* Content sections */
main section {
  max-width: 640px;
  margin: 1.5rem auto;
  padding: 0 1.25rem;
  text-align: center;
}

.announcement {
  border: 1px solid #e8d89a;
  background: #fff8e1;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.support p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

.support img {
  max-width: 200px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 auto;
  border: 1px solid rgb(152, 152, 152);
}

footer {
  text-align: center;
  padding: 1.5rem 1rem 2.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

footer a { color: var(--text-muted); }

/* Rotation hint arrow — mobile only, sits along the wheel's right edge */
#rotateHint {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 96px;
  color: #b3b3b3;
  pointer-events: none;
}

/* Mobile: the wheel fills the available screen height — the full circle is
   visible top to bottom, with its hub near the left edge so only the left
   part is cropped. Vertical swipes rotate the wheel (see the hint arrow).
   Optimized for 375px. */
@media (max-width: 600px) {
  #wheelStage {
    padding: 0;
    height: calc(100vh - 150px);
    height: calc(100dvh - 150px);
    overflow: hidden; /* crop is intentional here */
  }

  #wheelSvg {
    height: 100%;
    width: auto;
    /* hub sits 13vw from the left edge, keeping the hole (and Reset) visible */
    transform: translateX(calc(-50% + 13vw));
  }

  #rotateHint { display: block; }
}

@media (max-width: 480px) {
  header h1 { font-size: 1.15rem; }
  .crumb { font-size: 0.85rem; }
}