/* Component and screen styles.
   Layout uses logical properties only — tools/lint.mjs enforces it. */

/* ---------- app chrome ---------- */

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-block-end: var(--border);
  background: var(--ink-900);
}

.brand {
  font-family: var(--font-display);
  font-weight: var(--weight-display-strong);
  letter-spacing: 0.18em;
  font-size: var(--text-sm);
  color: var(--bone);
}

.app-outlet {
  display: block;
  padding-block: var(--space-6) var(--space-10);
  padding-inline: var(--space-4);
  max-inline-size: 34rem;
  margin-inline: auto;
}

/* Header and nav pin to the edges; the outlet takes the remaining height so
   short screens still push the nav to the bottom. */
#app {
  min-block-size: 100dvb;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.app-outlet:focus {
  outline: none;
}

/* ---------- banners ---------- */

.banner-host:empty {
  display: none;
}

.app-banner {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-block-end: var(--border);
  background: var(--ink-800);
}

.banner-text {
  font-size: var(--text-sm);
  color: var(--bone);
}

.banner-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.banner-actions .btn {
  min-block-size: 40px;
  padding-block: var(--space-2);
}

/* ---------- buttons ---------- */

.btn {
  min-block-size: var(--tap-min);
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-800);
  color: var(--bone);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.btn:hover {
  border-color: var(--ice-deep);
}

.btn-primary {
  background: var(--ice);
  border-color: var(--ice);
  color: var(--ink-900);
  font-weight: 700;
}

.btn-primary:hover {
  background: var(--bone);
  border-color: var(--bone);
}

.btn-ghost {
  background: transparent;
  color: var(--ice);
}

/* Compact, but never below the minimum touch target. */
.lang-toggle {
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}

/* ---------- panels ---------- */

.system-panel {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-800);
  padding: var(--space-5);
}

.system-line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--ice);
  margin-block-end: var(--space-2);
}

.system-line.danger {
  color: var(--ember);
}

.card-title {
  font-size: var(--text-lg);
  margin-block-end: var(--space-2);
}

.card-body,
.card-meta {
  color: var(--bone-dim);
  font-size: var(--text-sm);
}

.card-meta {
  margin-block-start: var(--space-2);
  font-family: var(--font-mono);
}

/* ---------- awakening ---------- */

.screen {
  display: grid;
  gap: var(--space-6);
}

.step {
  display: grid;
  gap: var(--space-8);
  min-block-size: 60dvb;
  align-content: start;
}

.step-intro,
.step-reveal {
  align-content: center;
  justify-items: center;
  text-align: center;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--bone-dim);
  margin-block-end: var(--space-3);
}

.step-title {
  font-size: var(--text-xl);
  margin-block-end: var(--space-3);
}

.step-title:focus {
  outline: none;
}

.step-title.display {
  font-size: var(--text-2xl);
  letter-spacing: 0.02em;
}

.step-body {
  color: var(--bone-dim);
  font-size: var(--text-sm);
  max-inline-size: 32rem;
}

.step-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.step-actions .btn-primary {
  flex: 1 1 12rem;
}

/* ---------- reveal ---------- */

.step-reveal nr-sigil {
  max-inline-size: 200px;
}

.reveal-rank,
.rank-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  justify-content: center;
}

.reveal-rank-letter,
.rank-letter {
  font-size: var(--text-2xl);
  color: var(--ice);
}

.rank-caption {
  color: var(--bone-dim);
  font-size: var(--text-sm);
}

.stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  inline-size: 100%;
  display: grid;
  gap: var(--space-1);
}

.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: var(--border);
}

.stat-figures {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.stat-level {
  color: var(--ice);
  font-size: var(--text-lg);
}

.stat-points {
  color: var(--bone-dim);
  font-size: var(--text-sm);
}

/* ---------- home ---------- */

.sigil-panel {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.sigil-panel nr-sigil {
  max-inline-size: 220px;
}

.xp-bar {
  inline-size: 100%;
  block-size: 6px;
  background: var(--ink-700);
  border-radius: var(--radius);
  overflow: hidden;
}

/* A plain block child fills from the inline-start edge, which is the right
   edge in Hebrew and the left edge in English — no mirroring needed. */
.xp-fill {
  block-size: 100%;
  background: var(--ice);
  transition: inline-size var(--dur-base) var(--ease);
}

.xp-line {
  color: var(--bone-dim);
  font-size: var(--text-sm);
}

.rank-test-note {
  color: var(--gold);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}

.vitals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.vital {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.vital-label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--bone-dim);
}

.vital-value {
  font-size: var(--text-2xl);
  color: var(--bone);
  line-height: 1;
}

.vital-unit {
  font-size: var(--text-xs);
  color: var(--bone-dim);
}

/* ---------- quest ---------- */

.quest-blocks {
  list-style: none;
  padding: 0;
  margin-block: var(--space-4);
  display: grid;
  gap: var(--space-1);
}

.quest-block {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: var(--border);
}

.block-dose {
  color: var(--ice);
  font-size: var(--text-sm);
}

.contract-flag {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--ice);
  margin-block-end: var(--space-2);
}

.thresholds {
  display: grid;
  gap: var(--space-3);
}

.threshold {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-900);
}

/* Both thresholds are legitimate outcomes; the Minimum Clear is marked by
   the same treatment as the Full Clear, never a lesser one. */
.threshold-full {
  border-inline-start: 2px solid var(--ice);
}

.threshold-min {
  border-inline-start: 2px solid var(--ice-deep);
}

.threshold-name {
  font-weight: 700;
}

.threshold-note {
  font-size: var(--text-sm);
  color: var(--bone-dim);
}

.threshold-start {
  margin-block-start: var(--space-3);
  inline-size: 100%;
}

.cleared-note {
  font-size: var(--text-sm);
  color: var(--ice);
  margin-block-end: var(--space-3);
}

/* ---------- session runner ---------- */

.session {
  gap: var(--space-4);
}

.session-head {
  display: grid;
  gap: var(--space-2);
}

.session-timer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.timer-label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--bone-dim);
}

.timer-value {
  font-size: var(--text-2xl);
  color: var(--bone);
  line-height: 1;
}

.session-progress {
  inline-size: 100%;
  block-size: 4px;
  background: var(--ink-700);
  overflow: hidden;
}

.session-progress-fill {
  block-size: 100%;
  background: var(--ice);
  transition: inline-size var(--dur-base) var(--ease);
}

.pacer {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--bone-dim);
}

.pacer.ahead .num { color: var(--ice); }
.pacer.behind .num { color: var(--bone-dim); }

.work-panel {
  display: grid;
  gap: var(--space-4);
  justify-items: stretch;
}

.exercise-name {
  font-size: var(--text-xl);
}

/* Photographic source material sits inside a cold-steel system, so it is
   desaturated to keep the palette intact. */
.exercise-media {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border);
  border-radius: var(--radius);
  filter: grayscale(1) contrast(1.05) brightness(0.85);
}

.exercise-cue {
  color: var(--bone-dim);
  font-size: var(--text-sm);
}

.timed-control {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

.countdown,
.rest-countdown {
  font-size: var(--text-3xl);
  color: var(--ice);
  line-height: 1;
}

.log-set {
  min-block-size: 3.5rem;
  font-size: var(--text-lg);
}

.abandon {
  justify-self: center;
  font-size: var(--text-sm);
}

.rest-panel {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.rest-title {
  font-size: var(--text-lg);
}

.rest-countdown {
  font-size: 4rem;
}

/* ---------- session complete ---------- */

.complete-panel {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.award-list {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
  margin: 0;
}

.award-list dt {
  color: var(--bone-dim);
  font-size: var(--text-sm);
  text-align: start;
}

.award-list dd {
  margin: 0;
  text-align: end;
}

.award-xp {
  font-size: var(--text-xl);
  color: var(--ice);
}

.echo-beat,
.level-up {
  font-size: var(--text-sm);
  color: var(--ice);
  font-family: var(--font-mono);
}

/* ---------- fracture ---------- */

.fracture-card {
  border-color: var(--ember);
}

.redeem-start {
  margin-block-start: var(--space-4);
  inline-size: 100%;
}

.complete-panel nr-sigil {
  max-inline-size: 180px;
}

/* ---------- contract ---------- */

.contract-status {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  font-size: var(--text-sm);
  color: var(--bone-dim);
}

.contract-prompt {
  display: grid;
  gap: var(--space-2);
}

.contract-cta {
  margin-block-start: var(--space-2);
  justify-self: start;
}

.contract-prompt .contract-cta {
  inline-size: 100%;
}

.contract-days {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.contract-pip {
  min-inline-size: 2rem;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  text-align: center;
  border: var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.contract-pip.done {
  border-color: var(--ice);
  color: var(--ice);
}

.contract-link {
  color: var(--bone-dim);
}

/* ---------- stats ---------- */

.stats {
  gap: var(--space-6);
}

.will-panel {
  display: grid;
  gap: var(--space-2);
  border-color: var(--ice-deep);
}

.will-multiplier {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.will-value {
  font-size: var(--text-3xl);
  color: var(--ice);
  line-height: 1;
}

.will-caption {
  font-size: var(--text-sm);
  color: var(--bone-dim);
}

.stat-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.stat-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.stat-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.stat-card-name {
  font-weight: 700;
}

.stat-level-label {
  font-size: var(--text-xs);
  color: var(--bone-dim);
}

.stat-track {
  inline-size: 100%;
  block-size: 6px;
  background: var(--ink-700);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat-fill {
  block-size: 100%;
  background: var(--ice-deep);
  transition: inline-size var(--dur-base) var(--ease);
}

.stat-meta {
  font-size: var(--text-xs);
  color: var(--bone-dim);
}

.stat-feeds {
  font-size: var(--text-sm);
  color: var(--bone-dim);
}

.chart-panel {
  display: grid;
  gap: var(--space-4);
}

/* ---------- gates ---------- */

.gates {
  gap: var(--space-6);
}

.rank-test-panel {
  display: grid;
  gap: var(--space-3);
  border-color: var(--gold);
}

.rank-test-panel .system-line {
  color: var(--gold);
}

.target-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.target {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: var(--border);
  font-size: var(--text-sm);
}

.target .num {
  color: var(--bone);
}

.target-cap .num {
  color: var(--gold);
}

.target.met .num {
  color: var(--ice);
}

.target.short .num {
  color: var(--ember);
}

.start-test {
  inline-size: 100%;
}

.gate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.gate-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.gate-card.sealed {
  background: transparent;
  color: var(--bone-dim);
}

.gate-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.gate-rank {
  min-inline-size: 2rem;
  padding-block: var(--space-1);
  text-align: center;
  border: var(--border);
  border-radius: var(--radius);
  color: var(--ice);
}

.sealed .gate-rank {
  color: var(--bone-dim);
}

.gate-name {
  font-weight: 700;
}

.gate-note {
  font-size: var(--text-sm);
  color: var(--bone-dim);
}

.gate-blocks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.gate-start {
  inline-size: 100%;
  margin-block-start: var(--space-2);
}

.verdict {
  display: grid;
  gap: var(--space-3);
  inline-size: 100%;
  text-align: start;
}

/* ---------- records ---------- */

.records,
.settings {
  gap: var(--space-8);
}

.record-group,
.setting-group {
  display: grid;
  gap: var(--space-3);
}

.group-title {
  font-size: var(--text-md);
  color: var(--bone);
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.record {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.record-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.record-date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.record-type,
.record-clear {
  font-size: var(--text-xs);
  color: var(--bone-dim);
}

.record-figures {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.record-xp {
  color: var(--ice);
}

.record-flag {
  font-size: var(--text-xs);
  color: var(--ice);
  font-family: var(--font-mono);
}

.echo-exercises {
  font-size: var(--text-sm);
  color: var(--bone);
}

.empty-note {
  padding: var(--space-6);
  text-align: center;
  color: var(--bone-dim);
  font-size: var(--text-sm);
  border: 1px dashed var(--ink-700);
  border-radius: var(--radius);
}

.achievement-list,
.unlocked-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.achievement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.achievement.locked {
  background: transparent;
  opacity: 0.55;
}

.achievement-text {
  display: grid;
  gap: 2px;
}

.achievement-name {
  font-weight: 700;
}

.achievement-desc,
.achievement-date {
  font-size: var(--text-sm);
  color: var(--bone-dim);
}

.achievement-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.unlocked-tag {
  align-self: start;
  padding-block: 2px;
  padding-inline: var(--space-2);
  border: var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--bone-dim);
  white-space: nowrap;
}

.tier-rare .unlocked-tag {
  color: var(--ice);
  border-color: var(--ice-deep);
}

/* Gold is reserved for rank S and legendary achievements. */
.tier-legendary .unlocked-tag {
  color: var(--gold);
  border-color: var(--gold);
}

.unlocked {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: var(--border);
  border-radius: var(--radius);
}

.unlocked-name {
  font-size: var(--text-sm);
}

/* ---------- settings ---------- */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: var(--border);
}

.setting-label {
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.setting-name {
  font-weight: 500;
}

.setting-hint {
  font-size: var(--text-sm);
  color: var(--bone-dim);
}

.switch {
  position: relative;
  flex: none;
  inline-size: 52px;
  block-size: 32px;
}

.switch input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-track {
  position: absolute;
  inset: 0;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink-900);
  pointer-events: none;
}

.switch-track::after {
  content: '';
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 4px;
  inline-size: 20px;
  background: var(--bone-dim);
  transition: inset-inline-start var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.switch input:checked + .switch-track {
  border-color: var(--ice);
}

.switch input:checked + .switch-track::after {
  inset-inline-start: 28px;
  background: var(--ice);
}

.switch input:focus-visible + .switch-track {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.import-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.data-status {
  font-size: var(--text-sm);
  color: var(--ice);
  min-block-size: 1.25rem;
}

.danger-group {
  border: 1px solid var(--ember);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.btn-danger {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ink-900);
  font-weight: 700;
}

.btn-danger-ghost {
  background: transparent;
  border-color: var(--ember);
  color: var(--ember);
}

/* ---------- contract screen ---------- */

.contract {
  gap: var(--space-6);
}

.contract-sign,
.contract-view {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.contract-terms {
  border-inline-start: 2px solid var(--ink-700);
  padding-inline-start: var(--space-3);
}

.commitment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.commitment {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: var(--border);
}

.commitment-window {
  color: var(--bone-dim);
  font-size: var(--text-sm);
}

.commitment-state {
  font-size: var(--text-xs);
  color: var(--bone-dim);
}

.commitment.done .commitment-state {
  color: var(--ice);
}

.contract-progress {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--bone-dim);
}