/* Hreyfing — Today dashboard, Settings and Safety & recovery (L6).
 * Builds on the tokens and components in base.css; no hard-coded colours.
 */

/* ------------------------------------------------------------------------------------------ */
/* Today: layout                                                                               */
/* ------------------------------------------------------------------------------------------ */
.today-page .page-eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; }

.today-alerts { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.today-reminder-note { padding: 0 var(--s1); }

.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
.today-col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
@media (min-width: 1024px) {
  .today-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.today-dismiss { flex: none; margin: -6px -8px -6px 0; color: var(--muted); }
.today-dismiss:hover { color: var(--text); }

/* Card headers with an action keep the title on one line with the dismiss button. */
.today-milestone .card-header,
.today-reminder .card-header { flex-wrap: nowrap; align-items: flex-start; }

/* ------------------------------------------------------------------------------------------ */
/* Setup CTA + sample preview                                                                  */
/* ------------------------------------------------------------------------------------------ */
.today-setup-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.today-setup-list li { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; }
.today-setup-list .icon { color: var(--primary-soft-ink); margin-top: 2px; }

.sample-preview {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  min-width: 0;
}
.sample-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}
.sample-preview-head .sample-badge { align-self: flex-start; }
.sample-preview-lead { max-width: var(--readw); }
.sample-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}
.sample-preview-grid > * { min-width: 0; }
.sample-preview .card { box-shadow: none; }
@media (min-width: 768px) {
  .sample-preview { padding: var(--s5); }
  .sample-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------------------------------ */
/* Today's plan + next workout                                                                 */
/* ------------------------------------------------------------------------------------------ */
.today-day-title { display: flex; align-items: center; gap: var(--s2); font-size: 1.25rem; }
.today-day-title .icon { color: var(--muted); }
.today-badges { --cluster-gap: 6px; }
.today-badges .badge .icon { width: 1em; height: 1em; }

.glance { display: flex; flex-direction: column; gap: var(--s2); }
.glance > li + li { margin-top: 0; }
.glance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--border);
}
.glance-row:first-child { border-top: 0; padding-top: 0; }
.glance-label { font-weight: 650; font-size: 0.875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.glance-text { min-width: 0; }
.glance-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.glance-items li { margin: 0; }
.glance-name { font-weight: 600; }
.glance-dose { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 480px) {
  .glance-row { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; }
}

.today-rest-ideas { display: grid; gap: 4px; }
.next-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 1.0625rem; }

/* ------------------------------------------------------------------------------------------ */
/* Quick log                                                                                   */
/* ------------------------------------------------------------------------------------------ */
.quick-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  container-type: inline-size;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  width: 100%;
  padding: 10px var(--s3);
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius-ctl);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quick-action:hover { background: var(--primary-soft); border-color: var(--primary); }
.quick-action[aria-expanded="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.quick-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-soft-ink);
}
.quick-action[aria-expanded="true"] .quick-action-icon { background: var(--primary); color: var(--primary-ink); }
.quick-action-text { display: flex; flex-direction: column; min-width: 0; }
.quick-action-label { font-weight: 650; line-height: 1.25; }
.quick-action-sub { color: var(--muted); font-size: 0.875rem; line-height: 1.35; }
.quick-action[aria-expanded="true"] .quick-action-sub { color: var(--primary-soft-ink); }

@media (min-width: 560px) {
  .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-action { flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s3); min-height: 112px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  /* The main column is narrower here: stack the actions again. */
  .quick-actions { grid-template-columns: minmax(0, 1fr); }
  .quick-action { flex-direction: row; align-items: center; min-height: 56px; }
}

.quick-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  background: var(--surface-2);
  min-width: 0;
  animation: hf-today-in var(--dur) var(--ease);
}
.quick-panel[hidden] { display: none; }
.quick-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.quick-panel-title { font-size: 1.0625rem; }
.quick-panel-head .btn { margin: -8px -8px -8px 0; }

@keyframes hf-today-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------------------------------ */
/* Goal progress                                                                               */
/* ------------------------------------------------------------------------------------------ */
.goal-name strong { font-weight: 650; }
.est-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 650;
  font-size: 0.9375rem;
}
.est-status .icon { width: 1.05em; height: 1.05em; stroke-width: 2.4; }
.est-status--on_track { background: var(--success-soft); color: var(--success-ink); border-color: var(--success); }
.est-status--adjust { background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning); }
.est-status--more_time { background: var(--info-soft); color: var(--info-ink); border-color: var(--info); }
.est-status--no_target { background: var(--primary-soft); color: var(--primary-soft-ink); border-color: var(--primary); }

.goal-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--s2);
  margin: 0;
}
.goal-fact {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-ctl);
  background: var(--surface-2);
  min-width: 0;
}
.goal-fact dt { color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.goal-fact dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.why-heading { font-weight: 650; margin-top: var(--s1); }
.goal-week { font-size: 0.9375rem; }
.goal-week-label { font-weight: 650; }

/* ------------------------------------------------------------------------------------------ */
/* Habits                                                                                      */
/* ------------------------------------------------------------------------------------------ */
.habit-list { display: flex; flex-direction: column; gap: var(--s3); }
.habit-list > li + li { margin-top: 0; }
.habit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.habit-row:last-child { border-bottom: 0; padding-bottom: 0; }
.habit-main { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.habit-label { font-weight: 600; overflow-wrap: anywhere; }
.habit-main .meter { max-width: 16rem; }
.habit-toggle { flex: none; }
.habit-toggle.is-done {
  background: var(--success-soft);
  color: var(--success-ink);
  border-color: var(--success);
}
.habit-toggle.is-done:hover { background: var(--success-soft); }

.habit-suggest { display: flex; flex-direction: column; gap: 4px; }
.habit-suggest > li + li { margin-top: 0; }
.habit-suggest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 44px;
}
.habit-suggest-row > span { min-width: 0; overflow-wrap: anywhere; }
.habit-suggest-row .btn { flex: none; }

/* ------------------------------------------------------------------------------------------ */
/* Back on track + weekly review                                                               */
/* ------------------------------------------------------------------------------------------ */
.bot-options { display: flex; flex-direction: column; gap: var(--s3); }
.bot-options > li + li { margin-top: 0; }
.bot-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  padding: var(--s3);
  border-radius: var(--radius-ctl);
  background: var(--surface-2);
}
.bot-option-text { flex: 1 1 14rem; min-width: 0; }
.bot-option-title { font-weight: 650; }
.bot-option > .btn { flex: none; }
.bot-move { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); }
.bot-move .field { min-width: 11rem; }

.review-list { display: flex; flex-direction: column; gap: var(--s3); }
.review-list > li + li { margin-top: 0; }
.review-suggestion {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  background: var(--surface);
}
.review-suggestion.is-accepted { border-color: var(--success); background: var(--success-soft); }
.review-suggestion-title { font-size: 1rem; }
.review-accepted { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--success-ink); }
.review-foot { padding-top: var(--s1); }

/* ------------------------------------------------------------------------------------------ */
/* Settings                                                                                    */
/* ------------------------------------------------------------------------------------------ */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
.settings-col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
@media (min-width: 960px) {
  .settings-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.settings-group {
  border: 0;
  margin: 0;
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
.settings-group-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0;
  font-weight: 650;
  font-size: 1.0625rem;
  float: left;
  width: 100%;
  margin-bottom: var(--s1);
}
.settings-group-legend .icon { color: var(--primary); }
.settings-group-legend + * { clear: both; }

.settings-sub {
  border: 0;
  margin: 0 0 0 14px;
  padding: 0 0 0 var(--s4);
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}
.settings-sub-legend { padding: 0; font-weight: 600; color: var(--muted); font-size: 0.9375rem; margin-bottom: var(--s1); }
.settings-sub.is-disabled .field-label { color: var(--muted); }

.settings-actions { display: flex; flex-direction: column; gap: var(--s3); }
.settings-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.settings-action .btn { flex: none; min-width: 12rem; }
.settings-action p { flex: 1 1 12rem; min-width: 0; }

.settings-account { display: grid; gap: var(--s2); margin: 0; }
.settings-account > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s3); align-items: center; }
.settings-account dt { color: var(--muted); font-weight: 600; font-size: 0.9375rem; }
.settings-account dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }

/* ------------------------------------------------------------------------------------------ */
/* Safety & recovery                                                                           */
/* ------------------------------------------------------------------------------------------ */
.safety-toc {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.safety-toc-title { font-weight: 650; margin-bottom: var(--s2); }
.safety-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.safety-toc-list li { margin: 0; }
.safety-toc-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.9375rem;
}
.safety-toc-list a:hover { background: var(--primary-soft); color: var(--primary-soft-ink); }

.safety-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (min-width: 900px) {
  .safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.safety-card { scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.safety-card p,
.safety-card li { max-width: var(--readw); }
.safety-strong { font-weight: 650; }
.safety-list { display: grid; gap: 6px; }
.safety-list > li + li { margin-top: 0; }
.safety-list--alert li::marker { color: var(--danger); }
.safety-subhead { font-size: 1.0625rem; margin-top: var(--s2); }
.safety-subhead:first-child { margin-top: 0; }
.safety-tags { list-style: none; padding: 0; margin: 0; --cluster-gap: 6px; }
.safety-tags li { margin: 0; white-space: normal; }
.safety-foot { padding-top: var(--s2); }

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}
@media (min-width: 600px) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.compare-col {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--radius-ctl);
  border: 1px solid;
  min-width: 0;
}
.compare-col--ok { background: var(--success-soft); border-color: var(--success); }
.compare-col--stop { background: var(--danger-soft); border-color: var(--danger); }
.compare-title { font-size: 1rem; }
.compare-col--ok .compare-title { color: var(--success-ink); }
.compare-col--stop .compare-title { color: var(--danger-ink); }
.compare-col ul { display: grid; gap: 4px; }
.compare-col li + li { margin-top: 0; }
.compare-advice { font-weight: 600; }

.effort-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.effort-list li + li { margin-top: 0; }
.effort-item { display: flex; gap: var(--s3); align-items: flex-start; }
.effort-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-soft-ink);
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------------------------ */
/* Motion + print                                                                              */
/* ------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .quick-panel { animation: none; }
  .quick-action { transition: none; }
}

@media print {
  .today-dismiss, .quick-actions, .quick-panel, .sample-hide, .safety-toc { display: none !important; }
  .sample-preview { border-style: solid; }
}

/* Settings: install steps and storage line */
.settings-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 4px; }
.settings-storage { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.settings-storage .icon { color: var(--success-ink); vertical-align: -2px; }