/* ============================================================
   健保玻尿酸關節注射小工具 (ha-nhi.css)
   載入順序：design.css → knee-rehab.css（.kr 表單元件）→ bone-risk.css（.br-field／.br-tier 等）→ 本檔。
   只放本頁特有的東西：療程時間軸圖。
   ============================================================ */

.ha-tl {
  margin: 1.5rem 0 2rem;
  max-width: 40em;
}

.ha-tl-track {
  position: relative;
  height: 3rem;
  border-radius: 6px;
  background: var(--paper-2);
  overflow: hidden;
}

/* 35 天限制期：0–35 天，佔 180 天軸的 19.4% */
.ha-tl-ban {
  position: absolute;
  inset: 0 auto 0 0;
  width: 19.4%;
  background: var(--vermilion-wash);
  border-right: 2px solid var(--vermilion);
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0 0.3rem;
  text-align: center;
  line-height: 1.3;
}

.ha-tl-wait {
  position: absolute;
  inset: 0 0 0 19.4%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--ink-70);
}

.ha-tl-ticks {
  position: relative;
  height: 2.2rem;
  font-size: 1rem;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
}

.ha-tl-ticks span {
  position: absolute;
  top: 0.35rem;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ha-tl-ticks span:first-child { transform: none; }
.ha-tl-ticks span:last-child  { transform: translateX(-100%); color: var(--indigo-ink); font-weight: 700; }

.ha-tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  font-size: 1rem;
  color: var(--ink-70);
  margin-top: 0.2rem;
}

.ha-types {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.75;
  margin: 1rem 0 1.5rem;
}

.ha-types th,
.ha-types td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--hair);
}

.ha-types thead th {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--hair-strong);
}

.ha-types-wrap { overflow-x: auto; }

.ha-date input[type="date"] {
  min-height: 52px;
  padding: 0 0.9rem;
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 500 1.1rem/1 var(--round);
}