/* flowpal — calm dark palette, minimal motion */

:root{
  --bg: #0b1220;
  --bg-2: #111a2e;
  --surface: #161f33;
  --surface-2: #1c2740;
  --line: #243049;
  --text: #e6edf3;
  --muted: #8b97ad;
  --accent: #7dd3fc;     /* sky-300 — calm cyan */
  --accent-2: #a5b4fc;   /* indigo-300 — secondary */
  --good: #86efac;
  --warm: #fcd34d;
  --shadow: 0 8px 32px rgba(0,0,0,.4);
  --radius: 14px;
  --radius-sm: 10px;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

*{box-sizing:border-box}
html, body{margin:0;padding:0}
body{
  background: radial-gradient(circle at 20% -10%, #14213b 0%, var(--bg) 60%) no-repeat fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a{ color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover{ color: #bae6fd }

/* ─── topbar / footer ──────────────────────── */
.topbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.brand{
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--text);
}
.brand-mark{
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), #1e3a8a);
  box-shadow: 0 0 18px rgba(125, 211, 252, .35);
}
.brand-name{ font-family: var(--serif); font-size: 1.15rem; letter-spacing: .01em }
.topbar nav a{ color: var(--muted); text-decoration: none; font-size: .9rem }
.topbar nav a:hover{ color: var(--text) }

.footer{
  margin-top: auto;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}
.footer small{ font-size: .8rem }

/* ─── screens layout ───────────────────────── */
#app{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}
.screen{ width: 100%; max-width: 640px }
.screen[hidden]{ display: none }

/* ─── hero ─────────────────────────────────── */
.hero{ text-align: center; padding: 2rem 0 }
.hero h1{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -.01em;
}
.lede{
  font-size: 1.05rem; color: var(--text);
  opacity: .85; margin: 0 auto 1.75rem; max-width: 50ch;
}
.meta{ color: var(--muted); font-size: .9rem; margin-top: 1.5rem }

/* ─── card / form shared ───────────────────── */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.field{ display: block; margin: 0 0 1.1rem; border: 0; padding: 0 }
.field .label, .field legend.label{
  display: block;
  font-size: .92rem;
  margin-bottom: .4rem;
  color: var(--text);
}
.field .hint{ display:block; font-size:.8rem; color: var(--muted); margin-top:.35rem }
.muted{ color: var(--muted) }

input[type=text], textarea{
  width: 100%;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  font: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(125,211,252,.15);
}
textarea{ resize: vertical }

/* radio / pal pickers */
.length-picker, .pal-picker{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}
.pal-picker{ grid-template-columns: repeat(4, 1fr) }
.length-picker label, .pal-picker label{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .65rem .4rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.length-picker label:hover, .pal-picker label:hover{ border-color: var(--muted) }
.length-picker input, .pal-picker input{ position: absolute; opacity: 0; pointer-events: none }
.length-picker label:has(input:checked),
.pal-picker label:has(input:checked){
  border-color: var(--accent);
  background: var(--surface-2);
}
.length-picker label span{ font-weight: 600; font-size: .95rem }
.length-picker label small{ color: var(--muted); font-size: .72rem; margin-top: .15rem }
.pal-picker label{ aspect-ratio: 1 / 1; padding: .35rem; min-height: 64px }
.pal-picker label svg{ width: 100%; height: 100%; max-height: 64px; opacity: .9 }
.pal-picker label small{ color: var(--muted); font-size: .68rem; margin-top: .1rem }

/* checkbox toggle */
.toggle{
  display: flex; align-items: center; gap: .65rem;
  margin: 0 0 1rem; cursor: pointer; font-size: .92rem;
}
.toggle input{ accent-color: var(--accent) }

/* buttons */
button{
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .08s;
}
button:active{ transform: translateY(1px) }
button.primary{
  background: var(--accent); color: #0b1220; font-weight: 600;
  border-color: var(--accent);
}
button.primary:hover{ background: #bae6fd }
button.ghost{
  background: transparent; color: var(--text);
  border-color: var(--line);
}
button.ghost:hover{ border-color: var(--muted) }
button.small{ padding: .45rem .85rem; font-size: .85rem }
.actions{ display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.25rem }

/* ─── session ──────────────────────────────── */
.session{ max-width: 760px }
.settle{
  text-align: center; padding: 2.5rem 1rem;
}
.settle-line{ font-family: var(--serif); font-size: 1.6rem; margin: 0 0 1.25rem }
.settle-sub{ color: var(--muted); margin: 1.25rem 0 1.5rem }

.breath-orb{
  width: 140px; height: 140px; margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent), #1e3a8a);
  box-shadow: 0 0 60px rgba(125,211,252,.25);
  animation: breathe 10s ease-in-out infinite;
}
@keyframes breathe{
  0%, 100% { transform: scale(.85); opacity: .7 }
  50% { transform: scale(1.1); opacity: 1 }
}

.session-body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 640px){
  .session-body{ grid-template-columns: 1fr }
}

.pal-stage{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.pal-stage svg{ width: 65%; height: 65% }

.pal-figure{ transform-origin: 50% 70% }
.pal-stage.animated .pal-figure{ animation: pal-breathe 10s ease-in-out infinite }
@keyframes pal-breathe{
  0%, 100% { transform: scale(.985) }
  50% { transform: scale(1.015) }
}

.session-info{
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}

.ring-wrap{
  position: relative; width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.ring{ width: 100%; height: 100%; transform: rotate(-90deg) }
.ring-track{ fill: none; stroke: var(--line); stroke-width: 6 }
.ring-progress{
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 339.292;  /* 2π·54 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.ring-time{
  position: absolute; text-align: center;
}
.ring-time span{
  display: block; font-family: var(--serif); font-size: 2.2rem; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.ring-time small{ color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase }

.first-step-display{
  margin: .25rem 0; text-align: center;
}
.first-step-display .muted{
  display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .15rem;
}
.first-step-display strong{
  font-family: var(--serif); font-weight: 500; font-size: 1.15rem; line-height: 1.3;
}

.progress-buttons{
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
}
.progress-buttons button{
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  padding: .55rem 1rem; font-size: .9rem;
}
.progress-buttons button:hover{ border-color: var(--accent) }
.progress-buttons button.pulsing{
  animation: pulse 280ms ease-out;
  border-color: var(--accent);
}
@keyframes pulse{
  0% { box-shadow: 0 0 0 0 rgba(125,211,252,.4) }
  100% { box-shadow: 0 0 0 14px rgba(125,211,252,0) }
}

.trail{
  display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.6rem;
  max-width: 300px; justify-content: center;
}
.trail-mark{
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--accent); opacity: .7;
  animation: trail-in .35s ease-out;
}
.trail-mark.moving{ background: var(--accent-2) }
.trail-mark.stuck{ background: var(--warm) }
@keyframes trail-in{
  from { transform: scale(0); opacity: 0 }
  to { transform: scale(1); opacity: .7 }
}

.session-controls{ margin-top: .25rem }

.paused-overlay{
  position: fixed; inset: 0;
  background: rgba(11, 18, 32, .85);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  backdrop-filter: blur(4px);
  z-index: 10;
  cursor: pointer;
}
.paused-overlay p{
  font-family: var(--serif); font-size: 1.25rem; color: var(--muted);
  margin: 0 0 .5rem;
}
.paused-overlay small{ color: var(--muted); opacity: .7; font-size: .8rem }

/* ─── wrap-up ──────────────────────────────── */
.wrap h2{
  font-family: var(--serif); font-weight: 500; font-size: 2rem;
  margin: 0 0 .25rem;
}
.wrap .lede{ margin: 0 0 1.5rem }

.recap{
  display: grid; gap: .75rem; margin: 0 0 1.5rem;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}
.recap > div{ display: flex; justify-content: space-between; gap: 1rem }
.recap dt{ color: var(--muted); margin: 0; font-size: .9rem }
.recap dd{ margin: 0; font-weight: 500 }

.history{
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.history h3{ font-family: var(--serif); font-weight: 500; margin: 0 0 .75rem; font-size: 1.05rem }
.history ul{ list-style: none; padding: 0; margin: 0 0 .75rem }
.history li{
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: .65rem .85rem;
  margin-bottom: .5rem;
  font-size: .9rem;
  color: var(--muted);
}
.history li time{ display: block; font-size: .75rem; opacity: .8; margin-bottom: .15rem }
.history li p{ margin: 0; color: var(--text) }

/* ─── about page ───────────────────────────── */
.prose{
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
}
.prose h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 2.2rem);
  margin: 1rem 0 1.5rem;
  letter-spacing: -.01em;
}
.prose h2{
  font-family: var(--serif); font-weight: 500;
  font-size: 1.3rem;
  margin: 2rem 0 .75rem;
}
.prose p{ margin: 0 0 1rem }
.prose ul{ padding-left: 1.25rem; margin: 0 0 1rem }
.prose li{ margin-bottom: .35rem }
.prose .citations{
  font-size: .85rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem;
}
.prose .citations a{ color: var(--accent-2); word-break: break-word }