/* ── 005 BALANCE → DAILY BALANCE METER ───────────────────────────────────────
   src/views/balance-meter.js — a section of 005's own page, under its
   explanation. 005's identity carries it: the sunset's gold, orange and red
   at one pole, magenta, violet and the electric blue of its sun at the
   other, and the Wise Range between them, lit. (Arian tried a green Wise
   Range with yellow and red ends, and a purple-to-blue one, and chose this:
   "Just leave the balance meter the color as you had it before.") Surfaces
   paint; nothing is glass but the controls — the buttons and the clear glass
   ball on each meter; nothing casts a shadow; every highlight is a gradient,
   light first. No number is ever drawn. */
.bal {
  --b-gold: #ffc24a; --b-orange: #ff7a1f; --b-red: #ff3148;
  --b-magenta: #e0208c; --b-violet: #7a2bff; --b-blue: #2e3cff;
  --b-dim: rgba(255, 255, 255, .66); --b-fade: rgba(255, 255, 255, .44);
  --b-hair: rgba(255, 255, 255, .12); --b-hair-2: rgba(255, 255, 255, .24);
  /* A highlight: light to dark, the sunset into its sun. */
  --b-light: linear-gradient(135deg, var(--b-gold), var(--b-orange) 34%, var(--b-magenta) 70%, var(--b-blue));
  /* The same ramp for words, stopped before the blue so it stays legible. */
  --b-words: linear-gradient(90deg, #ffd27a, #ff8a3d 40%, #ff4d6d 74%, #e23ca0);
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(3.2rem, 8vw, 6rem);
  color: #fff;
  background:
    radial-gradient(70% 55% at 10% 0%, rgba(255, 96, 40, .17), transparent 70%),
    radial-gradient(60% 50% at 94% 6%, rgba(70, 52, 255, .22), transparent 70%),
    linear-gradient(180deg, #0c0a2c 0%, #07061a 100%);
  scroll-margin-top: var(--nav-h);
}
.bal__wrap { display: grid; }

/* ── The head: its name, and the principle it is built on ─────────────── */
.bal__head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.bal .bal__name {
  justify-self: start; margin: 0;
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-hud); line-height: 1.6; text-transform: uppercase;
  background: var(--b-light); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bal__principle {
  display: grid; margin: 0;
  font-family: var(--font-display); font-weight: 300; line-height: 1.12; letter-spacing: .06em; text-transform: uppercase;
  font-size: clamp(1.35rem, 4vw, 2.9rem);
}
.bal__principle span { font-size: inherit; }
.bal__principle span + span { justify-self: start; background: var(--b-words); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bal__q { margin: 0 0 1rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); line-height: 1.6; text-transform: uppercase; color: var(--b-dim); }

/* ── HOW DO YOU WANT TO CHECK IN? ─────────────────────────────────────── */
.bal-modes { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.bal-modes li { font-size: inherit; line-height: inherit; }
.bal-mode, .bal-domain {
  position: relative; overflow: hidden;
  display: grid; gap: .45rem; align-content: start; height: 100%;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--b-hair); border-radius: 18px;
  background: linear-gradient(158deg, rgba(255, 255, 255, .06), transparent 72%);
  color: inherit; text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.bal-mode { min-height: 7.2rem; }
/* Lit from the top edge, in the sunset. */
.bal-mode::before, .bal-domain::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--b-light); opacity: 0; transition: opacity .2s var(--ease);
}
a.bal-mode:hover, a.bal-mode:focus-visible, a.bal-domain:hover, a.bal-domain:focus-visible {
  border-color: var(--b-hair-2); background: linear-gradient(158deg, rgba(255, 255, 255, .1), transparent 72%);
}
a.bal-mode:hover::before, a.bal-mode:focus-visible::before, a.bal-domain:hover::before, a.bal-domain:focus-visible::before { opacity: 1; }
a.bal-mode:focus-visible, a.bal-domain:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bal-mode__title { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; }
.bal-mode__note { font-size: var(--fs-small); line-height: 1.5; color: var(--b-dim); }
.bal-modes--shut .bal-mode { opacity: .7; }
.bal-locked__cta { margin-top: 1.6rem; }

/* The modes, once you are in one. */
.bal-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.8rem; }
.bal-tab {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem;
  border: 1px solid var(--b-hair-2); border-radius: 999px;
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--b-dim); transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.bal-tab:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.bal-tab.is-on { color: #0b0a22; background: #fff; border-color: #fff; }
.bal-tab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) {
  .bal-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .bal-tabs::-webkit-scrollbar { display: none; }
  .bal-tab { flex: none; }
}
.bal-view__head { display: grid; gap: .3rem; margin-bottom: 1.4rem; }
.bal-view__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: .14em; text-transform: uppercase; }
.bal-view__note { margin: 0; font-size: var(--fs-small); color: var(--b-dim); }
.bal-back { margin: 0 0 1.4rem; }
.bal-back > a:not(.btn) {
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--b-dim);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--b-hair-2);
}
.bal-back > a:not(.btn):hover { color: #fff; text-decoration-color: #fff; }

/* ── A METER ──────────────────────────────────────────────────────────── */
.bal-set { display: grid; gap: 1.1rem; }
.bmx {
  position: relative; padding: clamp(1.15rem, 3vw, 1.9rem);
  border: 1px solid var(--b-hair); border-radius: 22px;
  background: linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 60%, transparent);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.bmx__where { margin: 0; font-size: var(--fs-micro); letter-spacing: var(--track-hud); line-height: 1.6; text-transform: uppercase; color: var(--b-fade); }
.bmx .bmx__title { margin: .3rem 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: .06em; line-height: 1.15; text-transform: uppercase; }

/* The line between the poles: the warm end, the cool end, and the Wise
   Range held between them in a lit capsule. */
.bmx__scale { margin-top: 1.3rem; }
.bmx__track { position: relative; height: 46px; }
.bmx__track::before {
  content: ''; position: absolute; left: 13px; right: 13px; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px;
  background: linear-gradient(90deg, var(--b-gold) 0%, var(--b-orange) 18%, var(--b-red) 36%, #ff7ab6 50%, var(--b-magenta) 64%, var(--b-violet) 82%, var(--b-blue) 100%);
}
.bmx__zone {
  position: absolute; top: 50%; height: 22px; margin-top: -11px;
  left: calc(13px + (100% - 26px) * var(--from) / 100);
  width: calc((100% - 26px) * (var(--to) - var(--from)) / 100);
  border: 1px solid rgba(255, 255, 255, .72); border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.bmx[data-band="wise"] .bmx__zone { background: rgba(255, 255, 255, .2); border-color: #fff; }
.bmx__range {
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 1; display: block; width: 100%; height: 46px; margin: 0;
  background: transparent; cursor: grab; touch-action: pan-y;
}
.bmx__range:active { cursor: grabbing; }
.bmx__range:focus { outline: none; }
.bmx__range::-webkit-slider-runnable-track { height: 46px; background: transparent; border: 0; }
.bmx__range::-moz-range-track { height: 46px; background: transparent; border: 0; }
/* The thumb is a ball of clear glass — "just have the center ball be like a
   see-through glass" — a rim, a highlight, and the line's own colour showing
   through it wherever it stands. Glass, because it is the one control here. */
.bmx__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: 8px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, .92) 9%, rgba(255, 255, 255, .26) 24%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .22) 100%);
  border: 1.5px solid rgba(255, 255, 255, .92);
  transition: transform .15s var(--ease);
}
.bmx__range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, .92) 9%, rgba(255, 255, 255, .26) 24%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .22) 100%);
  border: 1.5px solid rgba(255, 255, 255, .92);
}
.bmx__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.bmx__range:focus-visible::-webkit-slider-thumb { transform: scale(1.12); border-color: #fff; border-width: 2.5px; }
.bmx__range:focus-visible::-moz-range-thumb { border-width: 2.5px; }
/* Not placed yet: the glass waits in the middle, fainter. */
.bmx[data-band=""] .bmx__range::-webkit-slider-thumb { border-color: rgba(255, 255, 255, .6); }
.bmx[data-band=""] .bmx__range::-moz-range-thumb { border-color: rgba(255, 255, 255, .6); }

.bmx__poles {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .8rem; margin-top: .45rem;
  font-size: var(--fs-micro); letter-spacing: .16em; line-height: 1.45; text-transform: uppercase; color: var(--b-dim);
}
.bmx__pole--right { text-align: right; }
.bmx__wise { text-align: center; color: rgba(255, 255, 255, .9); }
/* The side you are on comes up. */
.bmx[data-band$="left"] .bmx__pole--left, .bmx[data-band$="right"] .bmx__pole--right { color: #fff; }
.bmx[data-band="wise"] .bmx__wise { background: var(--b-words); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }

/* ── What a position returns ──────────────────────────────────────────────
   Nothing until the meter has been moved. Then, in his order: YOUR
   POSITION, TOOL OF LIGHT, TODAY'S PRACTICE, BRIDGE CODE, BODY · MIND · LIFE,
   TONIGHT, and the four buttons. */
.bmx[data-band=""] .bmx__result { display: none; }
.bmx__result {
  display: grid; gap: 1.5rem;
  margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid var(--b-hair);
  animation: bmxIn .5s var(--ease) both;
}
@keyframes bmxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* One attribute decides what shows: the meter's band. Each thing carries the
   bands it belongs to (data-for). The five names are the ids of BANDS in
   src/data/balance.js. */
.bmx[data-band="far-left"] [data-for]:not([data-for~="far-left"]),
.bmx[data-band="left"] [data-for]:not([data-for~="left"]),
.bmx[data-band="wise"] [data-for]:not([data-for~="wise"]),
.bmx[data-band="right"] [data-for]:not([data-for~="right"]),
.bmx[data-band="far-right"] [data-for]:not([data-for~="far-right"]) { display: none; }

.bmx__part { display: grid; gap: .5rem; align-content: start; }
.bmx__label { margin: 0; font-size: var(--fs-micro); letter-spacing: var(--track-hud); line-height: 1.6; text-transform: uppercase; color: var(--b-fade); }
.bmx__say, .bmx__toward { margin: 0; font-family: var(--font-display); line-height: 1.18; font-size: clamp(1.2rem, 2.6vw, 1.7rem); }
.bmx__say { font-weight: 300; letter-spacing: .04em; }
.bmx__toward { font-weight: 500; letter-spacing: .08em; justify-self: start; }
/* The pole you lean toward, in its end of the line's colours, light first. */
.bmx[data-band$="left"] .bmx__toward { background: linear-gradient(90deg, var(--b-gold), var(--b-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bmx[data-band$="right"] .bmx__toward { background: linear-gradient(90deg, #ff5fb0, var(--b-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bmx__reflect, .bmx__text { margin: 0; max-width: 44rem; font-size: var(--fs-body); line-height: 1.65; color: rgba(255, 255, 255, .88); }
.bmx__part--pos .bmx__reflect { margin-top: .2rem; }
.bmx__band {
  display: grid; gap: .35rem; max-width: 44rem; margin: .3rem 0 0; padding: .9rem 1rem;
  border: 1px solid var(--b-hair); border-radius: 14px; background: rgba(255, 255, 255, .03);
  font-size: var(--fs-small); line-height: 1.6; color: var(--b-dim);
}
.bmx__band-word { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-hud); color: #fff; }
.bmx__tool { margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.4rem); letter-spacing: .08em; text-transform: uppercase; }
.bmx__practice { font-size: clamp(1rem, 1.9vw, 1.12rem); color: #fff; }
.bmx__bridge {
  margin: 0; max-width: 44rem; justify-self: start;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.35; letter-spacing: .02em;
  background: var(--b-words); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bmx__bml { display: grid; gap: .7rem; margin: 0; }
.bmx__bml > div { display: grid; gap: .25rem; align-content: start; padding: .9rem 1rem; border: 1px solid var(--b-hair); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.bmx__bml dt { font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--b-fade); }
.bmx .bmx__bml dd { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: rgba(255, 255, 255, .9); }
@media (min-width: 760px) { .bmx__bml { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bmx__tonight { margin: 0; max-width: 44rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.4; letter-spacing: .02em; }
.bmx__acts { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .3rem; }
.bmx__act.is-on { border-color: #fff; background: rgba(255, 255, 255, .12); }
/* A member's own balance: their question, then their words. */
.bmx__own { display: grid; gap: .2rem; max-width: 44rem; }
.bmx__q { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--b-fade); }

/* Without scripts, one press places every meter in the set. With them, the
   meters answer as they move and the press is not needed. */
.bal-set__go { margin: .6rem 0 0; }
.bal.is-live .bal-set__go { display: none; }
.bal-post { display: none; }

/* ── DEEP BALANCE: the Domains; EXPLORE ALL: the library ──────────────── */
.bal-domains { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.bal-domains li { font-size: inherit; line-height: inherit; }
.bal-domain__num, .bal-lib__head .bal-domain__num { font-family: var(--font-mark); font-size: 1.25rem; letter-spacing: .06em; line-height: 1; }
.bal-domain__title { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.bal-domain__list { font-size: var(--fs-small); line-height: 1.5; color: var(--b-dim); }
.bal-library { display: grid; gap: 1.9rem; }
.bal-lib__head { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .6rem; font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.bal-lib__list, .bal-mine { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; border-top: 1px solid var(--b-hair); }
.bal-lib__list li, .bal-mine li { font-size: inherit; line-height: inherit; }
.bal-lib__row {
  position: relative; display: grid; gap: .25rem;
  padding: .85rem .2rem .85rem 1rem; border-bottom: 1px solid var(--b-hair);
  color: inherit; text-decoration: none;
}
/* The same line the CODES menu draws, in the sunset. */
.bal-lib__row::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--b-gold), var(--b-magenta));
  opacity: 0; transform: scaleY(.35); transition: opacity .16s var(--ease), transform .26s var(--ease);
}
.bal-lib__row:hover::before, .bal-lib__row:focus-visible::before { opacity: 1; transform: none; }
.bal-lib__row:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bal-lib__title { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .06em; }
.bal-lib__poles { font-size: var(--fs-micro); letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; color: var(--b-dim); }
.bal-lib__poles i { font-style: normal; margin: 0 .3em; opacity: .6; }
@media (min-width: 860px) { .bal-lib__row { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: baseline; } }

/* ── CREATE MY OWN BALANCE ────────────────────────────────────────────── */
.bal-build { display: grid; gap: 1.5rem; max-width: 46rem; }
.bal .bal-build__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.2rem, 2.6vw, 1.6rem); letter-spacing: .12em; text-transform: uppercase; }
.bal-build__set { display: grid; gap: 1rem; margin: 0; padding: 0; border: 0; }
.bal-field { display: grid; gap: .45rem; }
.bal-field__label { font-size: var(--fs-micro); letter-spacing: var(--track-hud); line-height: 1.6; text-transform: uppercase; color: var(--b-dim); }
.bal-field__label--q { font-size: var(--fs-small); letter-spacing: .02em; text-transform: none; color: rgba(255, 255, 255, .88); }
.bal-field input, .bal-field textarea, .bal-entry__tonight textarea {
  width: 100%; padding: .85rem 1rem;
  border: 1px solid var(--b-hair-2); border-radius: 14px;
  background: rgba(255, 255, 255, .05); color: #fff;
  font: inherit; font-size: var(--fs-body); line-height: 1.5;
}
.bal-field textarea, .bal-entry__tonight textarea { resize: vertical; }
.bal-field input::placeholder { color: rgba(255, 255, 255, .34); }
.bal-field input:focus, .bal-field textarea:focus, .bal-entry__tonight textarea:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .08); }
.bal-build__go { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.bal-build__delete { margin-top: 1.2rem; }
.bal-build__delete-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--b-fade);
  text-decoration: underline; text-underline-offset: 4px;
}
.bal-build__delete-btn:hover { color: #fff; }

/* ── THE JOURNAL ──────────────────────────────────────────────────────── */
.bal-journal {
  display: grid; gap: 1rem;
  margin-top: clamp(2.4rem, 6vw, 3.6rem); padding-top: 1.6rem; border-top: 1px solid var(--b-hair);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.bal-journal__title {
  justify-self: start; margin: 0;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-hud); line-height: 1.6;
  background: var(--b-light); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bal-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.bal-day, .bal-entry { font-size: inherit; line-height: inherit; }
.bal-day__date { margin: 0 0 .5rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); line-height: 1.6; color: var(--b-fade); }
.bal-day__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bal-entry { display: grid; gap: .45rem; padding: 1rem 1.1rem; border: 1px solid var(--b-hair); border-radius: 16px; background: rgba(255, 255, 255, .03); }
.bal-entry__title { margin: 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.bal-entry__pos { margin: 0; font-size: var(--fs-small); color: var(--b-dim); }
.bal-entry__pos b { font-weight: 500; letter-spacing: .08em; color: #fff; }
.bal-entry__practice { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: rgba(255, 255, 255, .88); }
.bal-entry__practice span { display: block; margin-bottom: .2rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--b-fade); }
.bal-entry__tonight { display: grid; gap: .55rem; margin-top: .3rem; }
.bal-entry__tonight label { display: grid; gap: .45rem; }
.bal-entry__q { font-size: var(--fs-small); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.bal-entry__q b { display: block; font-size: var(--fs-micro); font-weight: 400; letter-spacing: var(--track-hud); color: var(--b-fade); }
.bal-entry__tonight .btn { justify-self: start; min-height: 42px; }
.bal-earlier { margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .bmx__result { animation: none; }
  .bmx__range::-webkit-slider-thumb { transition: none; }
}