/* Hundecoach Mini App: read-only view inside Telegram (07-UI-SPEC.md).
   Base colours only from Telegram's --tg-theme-* variables (light fallbacks),
   system fonts, no external assets, no transitions or animations. */

:root {
  /* spacing (UI-SPEC): 12 px kept for row and dog-switch padding, where it centres a
     22 px text line in a 48 px row and a 44 px chip hit area in a 68 px bar */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;

  /* status marks: shapes plus words, never colour alone */
  --st-green: #2E9E5B;
  --st-blue: #3A87D9;
  --st-amber: #C98316;
  --st-none: var(--tg-theme-hint-color, #8e8e93);

  /* theme */
  --c-page: var(--tg-theme-secondary-bg-color, #efeff4);
  --c-card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --c-accent: var(--tg-theme-button-color, #2481cc);
  --c-on-accent: var(--tg-theme-button-text-color, #ffffff);
  --c-text: var(--tg-theme-text-color, #000000);
  --c-hint: var(--tg-theme-hint-color, #8e8e93);
  --c-head: var(--tg-theme-section-header-text-color, var(--tg-theme-hint-color, #6d6d72));
  --c-sep: var(--tg-theme-section-separator-color, rgba(128, 128, 128, 0.2));
  --c-link: var(--tg-theme-link-color, #2481cc);
  --c-warn: var(--tg-theme-destructive-text-color, #e0533d);
  --c-press: rgba(128, 128, 128, 0.12);

  /* type: four sizes, two weights (checker rec. 1: heading 20, display 24) */
  --fs-label: 12px;
  --fs-body: 15px;
  --fs-head: 20px;
  --fs-display: 24px;
  --lh-label: 16px;
  --lh-body: 22px;
  --lh-head: 26px;
  --lh-display: 30px;

  /* fixed sizes */
  --tabbar-h: 56px;
  --row-min: 48px;
  --radius: 12px;
  --chip-h: 36px;
  --safe-b: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --safe-l: max(var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));
  --safe-r: max(var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-page);
}

body {
  margin: 0;
  min-height: var(--tg-viewport-stable-height, 100vh);
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
p,
ol,
ul {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
}

a {
  color: var(--c-link);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- dog switch (sticky top) ----------------------------------------------------------- */

.dogs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-md) calc(var(--sp-lg) + var(--safe-r)) var(--sp-md) calc(var(--sp-lg) + var(--safe-l));
  background: var(--c-page);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.dogs::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  height: var(--chip-h);
  margin: var(--sp-xs) 0;
  padding: 0 var(--sp-lg);
  border-radius: 18px;
  background: var(--c-card);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: var(--chip-h);
  font-weight: 400;
  white-space: nowrap;
  scroll-snap-align: start;
}

.chip[aria-checked="true"] {
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 600;
}

/* --- page ------------------------------------------------------------------------------ */

.main {
  padding: var(--sp-lg) calc(var(--sp-lg) + var(--safe-r)) var(--sp-xl) calc(var(--sp-lg) + var(--safe-l));
}

.page > * + * {
  margin-top: var(--sp-xl);
}

.page > .page-ctx + .page-h,
.page > .page-h + .page-sub,
.page > .for-dog + .page-h {
  margin-top: var(--sp-xs);
}

.page-h {
  font-size: var(--fs-head);
  line-height: var(--lh-head);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.page-ctx,
.for-dog {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--c-hint);
}

.page-h.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

.page-sub {
  color: var(--c-hint);
  font-variant-numeric: tabular-nums;
}

.page-sub.label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.status-line {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.banner {
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius);
  background: var(--c-page);
  color: var(--c-hint);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  border: 1px solid var(--c-sep);
  font-variant-numeric: tabular-nums;
}

.footer {
  text-align: center;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--c-hint);
  padding: 0 var(--sp-lg);
}

/* --- full-page state message ------------------------------------------------------------ */

.state {
  padding: var(--sp-2xl) var(--sp-lg);
  text-align: center;
}

.state-h {
  font-size: var(--fs-head);
  line-height: var(--lh-head);
  font-weight: 600;
}

.state-b {
  margin-top: var(--sp-sm);
  color: var(--c-hint);
}

.textbtn {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  margin-top: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  color: var(--c-link);
  font-weight: 600;
}

/* --- sections and rows -------------------------------------------------------------------- */

.sec {
  scroll-margin-top: calc(var(--chip-h) + var(--sp-xs) * 2 + var(--sp-md) * 2 + var(--sp-lg));
}

.sec-h {
  padding: 0 var(--sp-lg);
  margin-bottom: var(--sp-sm);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 400;
  color: var(--c-head);
}

.sec-hint {
  padding: 0 var(--sp-lg);
  margin: calc(var(--sp-xs) * -1) 0 var(--sp-sm);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--c-hint);
}

.card {
  background: var(--c-card);
  border-radius: var(--radius);
  overflow: hidden;
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  min-height: var(--row-min);
  padding: var(--sp-md) var(--sp-lg);
  color: var(--c-text);
}

.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sp-lg);
  right: 0;
  height: 1px;
  background: var(--c-sep);
}

.row.tap:active {
  background: var(--c-press);
}

.row-main {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.row-main > span {
  display: block;
}

.row-main > span + span {
  margin-top: var(--sp-xs);
}

.t {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.b {
  overflow-wrap: anywhere;
}

.l {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.hint {
  color: var(--c-hint);
}

.warn {
  color: var(--c-warn);
}

.num {
  font-variant-numeric: tabular-nums;
}

.row-right {
  flex: 0 0 auto;
  display: block;
  text-align: right;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--c-hint);
  font-variant-numeric: tabular-nums;
}

.row-right > span {
  display: block;
}

.row-right .st-word {
  color: var(--c-text);
}

.row-right .warn {
  font-weight: 600;
}

.split {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
}

.ic {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.chev {
  color: var(--c-hint);
}

.notice .ic.warn {
  color: var(--c-warn);
}

.tel {
  color: var(--c-link);
}

.tel .ic {
  color: var(--c-link);
}

.tel-num {
  font-variant-numeric: tabular-nums;
}

.sel {
  -webkit-user-select: text;
  user-select: text;
}

/* tap chips on Heute (state carried by glyph + word, no colour) */
.taps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

.tapchip {
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius);
  background: var(--c-page);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-variant-numeric: tabular-nums;
}

/* --- status marks (inline SVG) --------------------------------------------------------- */

.mk {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.mk-green { color: var(--st-green); }
.mk-blue { color: var(--st-blue); }
.mk-amber { color: var(--st-amber); }
.mk-none { color: var(--st-none); }

/* --- 14-day strip ----------------------------------------------------------------------- */

.strip {
  display: flex;
  gap: var(--sp-xs);
}

.cell {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.cell svg {
  display: block;
  width: 18px;
  height: 18px;
}

.cell.today {
  box-shadow: 0 1px 0 0 var(--c-hint);
}

.strip-ends {
  display: flex;
  justify-content: space-between;
  max-width: calc(18px * 14 + var(--sp-xs) * 13);
  margin-top: var(--sp-xs);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--c-hint);
  font-variant-numeric: tabular-nums;
}

.strip-sum {
  margin-top: var(--sp-sm);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-lg);
  margin-top: var(--sp-sm);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.legend li {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.legend svg {
  width: 18px;
  height: 18px;
}

.block {
  padding: var(--sp-md) var(--sp-lg);
}

/* --- ladder ----------------------------------------------------------------------------- */

.ladder {
  padding: var(--sp-sm) 0;
}

.step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-lg);
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-lg) + 11px);
  top: calc(var(--sp-sm) + 24px);
  bottom: calc(var(--sp-sm) * -1);
  width: 2px;
  background: var(--c-hint);
  opacity: 0.5;
}

.step-mk {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step-mk svg {
  width: 16px;
  height: 16px;
}

.step.done .step-mk {
  background: var(--st-green);
  color: #ffffff;
}

.step.current .step-mk {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.step.future .step-mk {
  background: var(--c-card);
  color: var(--c-hint);
  box-shadow: inset 0 0 0 2px var(--c-hint);
}

.step-now {
  margin-left: var(--sp-sm);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--c-hint);
}

/* --- weight -------------------------------------------------------------------------------- */

.kg {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart {
  display: block;
  width: 100%;
  height: 160px;
  color: var(--c-link);
}

.chart text {
  fill: var(--c-hint);
  font-family: var(--font);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}

/* --- bottom tab bar ------------------------------------------------------------------------ */

.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
  background: var(--c-card);
  border-top: 1px solid var(--c-sep);
}

.tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  color: var(--c-hint);
  text-align: center;
}

.tab[aria-selected="true"] {
  color: var(--c-accent);
}

.tab-ic {
  width: 24px;
  height: 24px;
}

.tab-l {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: -0.2px;
  white-space: nowrap;
}