/* Served locally so typography does not depend on a third-party request. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Registered so the orb and the background glow can glide to a new place. */
@property --orb-top { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --orb-left { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --orb-size { syntax: "<length>"; inherits: true; initial-value: 300px; }

:root {
  color-scheme: dark;
  --night: #0b1018;
  --dusk: #1b2b37;
  --panel: #18222f;
  --panel-glass: rgba(24, 34, 47, 0.82);
  --text: #e8eef4;
  --soft: #a5b4c4;
  --faint: rgba(190, 209, 230, 0.28);
  --line: rgba(190, 209, 230, 0.16);
  --water: #b5cee0;
  --deep: #2c4355;
  --accent-rgb: 181, 206, 224;
  --control: rgba(190, 209, 230, 0.06);
  --field: rgba(7, 14, 23, 0.5);
  --sheen: linear-gradient(145deg, rgba(214, 230, 246, 0.055), rgba(214, 230, 246, 0) 55%);
  --sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui: 450 1rem/1.45 var(--sans);
  /* The orb is the whole resting interface and its full surface is clickable. */
  --orb-top: 50%;
  --orb-left: 50%;
  --orb-size: clamp(240px, 48vmin, 460px);
}

/* Phones: everything a little larger. */
@media (max-width: 600px) {
  html { font-size: 112.5%; }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;
  background: radial-gradient(120% 80% at var(--orb-left) var(--orb-top), var(--dusk), var(--night) 65%);
  transition: --orb-top 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), --orb-left 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    --orb-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { color: var(--text); background: #3e5a70; }

:where(button, select, textarea, input, summary, a):focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 4px;
}

button,
select,
textarea,
input {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#orb {
  position: fixed;
  top: var(--orb-top);
  left: var(--orb-left);
  width: var(--orb-size);
  height: var(--orb-size);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

#orb:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 1.5rem;
}

#caption {
  position: fixed;
  top: calc(var(--orb-top) + var(--orb-size) * 0.58);
  left: var(--orb-left);
  width: min(30rem, calc(100% - 32px));
  margin: 0;
  transform: translateX(-50%);
  color: var(--soft);
  font: 400 0.8rem/1.6 var(--sans);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: lowercase;
  transition: opacity 0.4s;
}

#caption.has-notice {
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* Panels */
dialog { color: var(--text); background: var(--sheen) var(--panel); border: 1px solid var(--line); border-radius: 20px;
  width: min(640px, calc(100% - 32px)); max-height: 85vh; padding: 24px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(235, 245, 255, 0.07);
  scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
dialog::backdrop { background: rgba(6, 10, 17, 0.7); }
dialog h2, dialog h3 { font-weight: 500; letter-spacing: -0.025em; }
dialog button, dialog select { min-height: 46px; padding: 10px 18px; color: var(--text); background: var(--control);
  border: 1px solid var(--faint); border-radius: 12px; cursor: pointer; font: var(--ui);
  box-shadow: inset 0 1px 0 rgba(235, 245, 255, 0.04); }
dialog button.primary, #auth #auth-submit { color: #162532; background: linear-gradient(160deg, #d1e0eb, #afc8db);
  border-color: #d1e0eb; font-weight: 550; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
dialog button[aria-pressed="true"] { color: #edf5fb; background: var(--deep); border-color: var(--water);
  box-shadow: inset 0 1px 0 rgba(235, 245, 255, 0.08); }
dialog button:disabled { opacity: 0.5; cursor: default; }
dialog button, dialog select, #auth button, #auth input, #exercise-dialog textarea {
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.exercise-actions, .exercise-choices { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.exercise-note { color: var(--soft); font: var(--ui); font-size: 0.85rem; line-height: 1.5; }
.exercise-note summary { cursor: pointer; padding: 6px 0; }
.exercise-note summary::marker { color: var(--water); }

/* The opaque panel above also serves browsers without backdrop filtering. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  dialog { background: var(--sheen) var(--panel-glass);
    -webkit-backdrop-filter: blur(24px) saturate(115%); backdrop-filter: blur(24px) saturate(115%); }
  #auth-people button { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}

/* An exercise: the orb steps aside and stays visible beside the panel. */
body.exercising { --orb-left: 27%; --orb-size: clamp(150px, 28vmin, 280px); }
body.exercising #caption { opacity: 0; }
#exercise-dialog { inset: 0 max(4vw, 24px) 0 auto; margin: auto 0; width: min(560px, 54vw); padding: 28px 28px 20px;
  text-align: center; }
#exercise-dialog::backdrop { background: rgba(6, 10, 17, 0.18); }
#exercise-dialog[open] { animation: panel-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateX(28px); } }
#exercise-head { display: grid; justify-items: center; gap: 8px; }
#exercise-title { margin: 0; font-size: 1.45rem; line-height: 1.25; }
#exercise-map { display: flex; gap: 7px; }
#exercise-map span { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.2);
  transition: background 0.5s, transform 0.5s; }
#exercise-map .done { background: rgba(var(--accent-rgb), 0.55); }
#exercise-map .now { background: var(--water); transform: scale(1.4); }
#exercise-progress { margin: 0; min-height: 1.4em; color: var(--soft); font: var(--ui); font-size: 0.85rem; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; }
#exercise-intro { margin: 14px 0 6px; font-size: 1.1rem; text-wrap: pretty; }
#exercise-shape { margin: 0 0 6px; color: var(--soft); font: var(--ui); font-size: 0.9rem; letter-spacing: 0.01em; }

/* The current step */
#exercise-stage { display: grid; justify-items: center; gap: 14px; margin-top: 12px; }
#exercise-cue { margin: 6px 0 0; font-size: 1.35rem; font-weight: 450; letter-spacing: -0.02em; line-height: 1.35; text-wrap: balance; }
#exercise-hint { margin: -6px 0 0; color: var(--soft); font-size: 1rem; text-wrap: balance; }
#exercise-record, #exercise-summary-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; width: 100%; margin: 0;
  text-align: left; font: var(--ui); font-size: 0.92rem; }
#exercise-record { padding: 12px 14px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.045);
  box-shadow: inset 0 0 0 1px var(--line); }
#exercise-record dt, #exercise-summary-list dt { color: var(--soft); }
#exercise-record dd, #exercise-summary-list dd { margin: 0; overflow-wrap: anywhere; }
#exercise-record dd { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* One circle to tap for each thing noticed, or to hold; its ring shows how far along it is. */
#exercise-tap { position: relative; display: grid; place-items: center; width: 9.5rem; height: 9.5rem; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 25%, #354b5e, #172632 75%);
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), 0.14), 0 8px 24px rgba(0, 0, 0, 0.15); font: var(--ui); touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s; }
#exercise-tap.held { transform: scale(0.94); box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), 0.2), 0 0 28px rgba(var(--accent-rgb), 0.12); }
#exercise-tap svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#exercise-tap circle { fill: none; stroke: rgba(var(--accent-rgb), 0.2); stroke-width: 2.5; }
#exercise-tap circle.fill { stroke: var(--water); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fill, 0)); }
#exercise-tap span { position: relative; max-width: 7rem; line-height: 1.25; }
#exercise-meter { display: grid; justify-items: center; gap: 8px; }
#exercise-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 18rem; }
#exercise-dots span { width: 12px; height: 12px; border: 1px solid rgba(var(--accent-rgb), 0.55); border-radius: 50%;
  transition: background 0.35s, transform 0.35s; }
#exercise-dots span.done { background: var(--water); transform: scale(1.2); }
#exercise-count { margin: 0; color: var(--soft); font: var(--ui); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
#exercise-wave { width: min(100%, 20rem); }
#exercise-wave svg { display: block; width: 100%; height: auto; overflow: visible; }
#exercise-wave .water { fill: rgba(var(--accent-rgb), 0.12); }
#exercise-wave .crest { fill: none; stroke: var(--water); stroke-width: 2; stroke-linecap: round; }
#exercise-wave circle { fill: var(--text); }
#exercise-thought { max-width: 26rem; margin: 0; padding: 14px 18px; border-left: 2px solid var(--water); border-radius: 4px 12px 12px 4px;
  background: rgba(var(--accent-rgb), 0.06); font-size: 1.2rem; text-align: left;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.9s; }
#exercise-thought[data-layer="1"] { transform: scale(0.94); opacity: 0.85; }
#exercise-thought[data-layer="2"] { transform: scale(0.88); opacity: 0.72; }
#exercise-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#exercise-choices button { min-height: 42px; padding: 8px 16px; border-radius: 999px; font-size: 0.95rem; }
/* The breathing pace: one row of options, like a switch. */
#exercise-pace { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); }
#exercise-pace button { min-height: 38px; padding: 6px 12px; border: 0; border-radius: 999px; background: none;
  color: var(--soft); font-size: 0.85rem; white-space: nowrap; box-shadow: none; }
#exercise-pace button[aria-pressed="true"] { color: var(--text); background: var(--deep); box-shadow: inset 0 0 0 1px var(--faint); }
#exercise-answer-area { width: 100%; text-align: left; }
#exercise-dialog textarea { display: block; width: 100%; margin: 4px 0 8px; padding: 12px 14px; color: var(--text); background: var(--field);
  border: 1px solid var(--faint); border-radius: 12px; font: var(--ui); font-size: max(16px, 1.0625rem); resize: vertical; }
#exercise-answer-notice { margin: 0; color: var(--soft); font: var(--ui); font-size: 0.85rem; }
#exercise-answer-notice:empty { display: none; }
#exercise-summary { margin-top: 18px; text-align: left; }
#exercise-summary h3 { margin: 0 0 10px; color: var(--soft); font: var(--ui); font-size: 0.9rem; letter-spacing: 0.04em; }
#exercise-feedback { margin-top: 8px; font: var(--ui); text-align: left; }
#exercise-feedback > p { margin: 16px 0 12px; }
#exercise-feedback label { display: block; margin-top: 18px; color: var(--soft); }
#exercise-dialog .exercise-actions { margin-top: 22px; }
#exercise-sources a { color: var(--water); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Narrow or portrait screens: the orb shrinks to the top and the panel becomes a sheet below it. */
@media (max-width: 820px), (orientation: portrait) {
  body.exercising { --orb-left: 50%; --orb-top: 13%; --orb-size: clamp(90px, 16vh, 150px); }
  /* While it breathes or rides waves, the orb leads, so it grows a little; worksheets need room to write. */
  body.exercising.swelling { --orb-top: 14%; --orb-size: clamp(110px, 20vh, 180px); }
  body.exercising.writing { --orb-top: 9%; --orb-size: clamp(70px, 11vh, 110px); }
  body.writing #exercise-dialog { height: calc(100% - 19vh); }
  /* The sheet keeps one height, so it doesn't jump between steps; each step sits in the middle. */
  #exercise-dialog { inset: auto 0 0 0; margin: 0 auto; width: min(640px, 100%); max-width: 100%;
    height: calc(100% - 27vh); max-height: none;
    padding: 0 max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border-bottom: 0; border-radius: 24px 24px 0 0; }
  #exercise-dialog[open] { display: flex; flex-direction: column; }
  #exercise-body { margin-block: auto; }
  /* The title and the main action stay in reach while the sheet scrolls. */
  #exercise-head { position: sticky; top: 0; z-index: 1; padding: 22px 0 8px; }
  #exercise-dialog .exercise-actions { position: sticky; bottom: 0; z-index: 1; margin-top: 14px; padding: 14px 0 4px;
    background: none; }
  /* Carry the sticky surfaces through the sheet padding without changing its layout. */
  #exercise-head::before, #exercise-dialog .exercise-actions::before { content: ""; position: absolute; z-index: -1;
    inset: 0 calc(-1 * max(18px, env(safe-area-inset-right))) 0 calc(-1 * max(18px, env(safe-area-inset-left)));
    pointer-events: none; }
  #exercise-head::before { background: var(--sheen) var(--panel); }
  #exercise-dialog .exercise-actions::before { background: linear-gradient(rgba(24, 34, 47, 0), var(--panel) 28%); }
  #exercise-dialog .exercise-actions .primary { flex: 1 1 100%; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(40px); } }
}
@media (max-width: 600px) {
  #exercise-tap { width: 8.5rem; height: 8.5rem; }
  #exercise-cue { font-size: 1.25rem; }
  #exercise-record { font-size: 0.85rem; }
  #exercise-record dd { -webkit-line-clamp: 1; }
  #exercise-answer[rows="3"] { height: 5.6em; }
}

/* Signed out: the orb rises and the sign-in form sits beneath it. */
body.signed-out { --orb-top: 24%; --orb-size: clamp(120px, 22vmin, 220px); }
body.signed-out #orb { pointer-events: none; }
body.signed-out #caption { opacity: 0; }
#auth { position: fixed; top: calc(24% + clamp(120px, 22vmin, 220px) * 0.62); left: 50%; transform: translateX(-50%);
  display: grid; gap: 14px; width: min(380px, calc(100% - 32px)); font: var(--ui); }
#auth p { margin: 0; }
#auth-intro { color: var(--text); font: 450 1.3rem/1.4 var(--sans); letter-spacing: -0.025em; text-align: center; }
#auth label { display: grid; gap: 6px; color: var(--soft); }
#auth input:not([type="checkbox"]) { min-height: 48px; padding: 10px 14px; color: var(--text); background: var(--field);
  border: 1px solid var(--faint); border-radius: 12px; font: var(--ui); font-size: max(16px, 1rem); }
#auth .auth-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
#auth .auth-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--water); }
#auth button { min-height: 48px; padding: 10px 14px; color: var(--text); background: var(--sheen) var(--control); border: 1px solid var(--faint);
  border-radius: 12px; font: var(--ui); cursor: pointer; box-shadow: inset 0 1px 0 rgba(235, 245, 255, 0.04); }
#auth button:disabled { opacity: 0.5; cursor: progress; }
#auth-people, #auth-details { display: grid; gap: 12px; }
#auth-people button { min-height: 56px; padding: 14px 12px; font: 450 1.25rem/1.4 var(--sans); letter-spacing: -0.015em; }
#auth-details[hidden], #auth-people[hidden] { display: none; }
/* Lets password managers file each person's password under their name. */
#auth-username { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#auth #auth-back { min-height: 44px; padding: 4px; color: var(--soft); background: none; border: 0; font-size: 0.9rem; box-shadow: none; }
#auth-note { color: var(--soft); font-size: 0.9rem; }
#auth-error { min-height: 1.4em; color: #f0aaa7; font-size: 0.9rem; }
#logout { position: fixed; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); min-height: 44px;
  padding: 12px 14px; color: var(--soft); background: none; border: 0; font: 400 0.8rem var(--sans);
  letter-spacing: 0.04em; cursor: pointer; }
#logout:hover, #logout:focus-visible { color: var(--text); }

input, textarea { caret-color: var(--water); }
#exercise-dialog textarea::placeholder, #auth input::placeholder { color: var(--soft); opacity: 0.8; }
#exercise-dialog textarea:focus, #auth input:not([type="checkbox"]):focus {
  border-color: var(--water); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); outline: none; }

@media (hover: hover) {
  dialog button:where(:not(:disabled):not(.primary):not([aria-pressed="true"]):not(#exercise-tap)):hover,
  #auth button:where(:not(:disabled):not(#auth-submit):not(#auth-back)):hover {
    background-color: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.5); }
  dialog button.primary:not(:disabled):hover, #auth #auth-submit:not(:disabled):hover {
    background: linear-gradient(160deg, #dce8f0, #bed3e3); border-color: #e1ecf4; }
  dialog button[aria-pressed="true"]:not(:disabled):hover { background-color: #385368; }
  #auth #auth-back:hover, .exercise-note summary:hover { color: var(--text); }
}

@media (prefers-reduced-transparency: reduce) {
  dialog { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #auth-people button { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  #exercise-dialog[open] { animation: none; }
  body, #exercise-tap, #exercise-thought, #exercise-dots span, #exercise-map span { transition: none; }
  dialog button, dialog select, #auth button, #auth input, #exercise-dialog textarea { transition: none; }
}