/* ================================
   TVZA — feature/ski.css
   Rules genuinely unique to the ski tracker page. Everything reusable
   (form, seg, tabs, empty-state, row, panel, buttons) comes from kit.css.
   ================================ */

/* ─── Status badge ─── (only used on the ski page today) */
.badge {
  display: inline-block;
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
}
.badge-doing { background: var(--tint-ski); color: var(--ski-deep); }
.row__title .badge { margin-left: var(--s1); }

/* Star rating */
.stars { display: inline-flex; gap: 2px; }
.star { font-size: 22px; cursor: pointer; color: var(--border); transition: color 150ms ease; user-select: none; }
.star.on { color: oklch(0.72 0.13 75); }

/* Wax colour dots — the hex values name a physical wax colour, so they
   stay hex, but as the --wax-* tokens kit.css already declares. */
.wax-dot { display:inline-block; width: 12px; height: 12px; border-radius: var(--r-pill); margin-right: var(--s1); vertical-align: -1px; }
.wax-Blau  { background: var(--wax-blue); }
.wax-Gelb  { background: var(--wax-yellow); }
.wax-Rot   { background: var(--wax-red); }
.wax-Grün  { background: var(--wax-green); }

.seg-opt[data-val="Blau"].on { background: var(--wax-blue);   border-color: var(--wax-blue); }
.seg-opt[data-val="Gelb"].on { background: var(--wax-yellow); border-color: var(--wax-yellow); }
.seg-opt[data-val="Rot"].on  { background: var(--wax-red);    border-color: var(--wax-red); }
.seg-opt[data-val="Grün"].on { background: var(--wax-green);  border-color: var(--wax-green); }

/* Save/cancel row under the ski form. */
.form-actions { display: flex; gap: var(--s2); }
#saveSkiBtn { flex: 1; }

/* Two actions (edit, delete) on a ski/log row — the kit's row__end
   normally carries exactly one element; this page needs both at once,
   since there is no separate detail view to move "edit" into. Small
   icon-only button, same token set as the three named buttons. */
.row-icon-btn {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-icon);
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.row-icon-btn:hover { background: var(--surface-2); }
.row-icon-btn--danger:hover { background: var(--danger-bg); color: var(--danger); }
.row-icon-btn svg { display: block; }

/* Read-only / shared-view notice — solid Bereich colour instead of the
   default tint+border offline-banner treatment. */
.shared-view-banner { background: var(--ski); color: #fff; border-color: transparent; }

/* Read-only shared view hides the entry forms, not just disables them. */
.is-readonly .form-card { display: none; }