/* Osnovno (ostaja v duhu tvojega CSS) */
body {
  background-color: #fff;
  color: rgb(49, 48, 48);
  font-family: 'Chakra Petch', serif;
  font-size: 16px;
  margin: 0;             /* manj zunanjih robov */
  padding-top: 28px;     /* prej je bil margin-top; padding je boljši za .page centriranje */
}

/* Stran – max širina 620 px */
.page {
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  padding: 0 12px; /* malo notranjega roba, da ne “leze” do roba na telefonih */
}

h1 {
  color: rgb(78, 78, 78);
  font-size: 20px;
  margin: 0 0 16px 0;
}

a.link, a.hlink {
  font-family: 'Chakra Petch', serif;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}
a.link { color: rgb(33, 133, 214); }
a.hlink { color: white; }

/* Posamezna vrstica (ura ali odmor) */
.ura {
  display: flex;
  align-items: center;
  gap: 10px;
  /* brez spodnjega roba tukaj – skrb za razmik je na .sklop */
}

/* Skupina: Ura + Odmor skupaj (brez presledka med njima) */
.sklop {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px; /* razmik med sklopi */
}

/* Besedilo levo od črte */
.ura .text {
  margin-right: 0;
  width: 180px;           /* malo ožje od prejšnjih 150/…; po potrebi prilagodi */
  min-width: 150px;
  line-height: 1.15;
}

/* Pomanjšaj besedilo v oklepajih */
.in-brackets {
  font-size: 0.75em;
  color: #666;
}

/* Vrstica/”bar” */
.ura .canvas-container {
  height: 14px;
  background-color: #d9d9d9;
  position: relative;
  border-radius: 8px;
  overflow: hidden; /* da je progress lepo odrezan */
}

/* Napredek – ura */
.ura .canvas-container .progress {
  height: 100%;
  background-color: rgb(33, 133, 214);
}

/* Odmor – malce drugačen odtenek (da se loči) */
.ura-odmor .canvas-container {
  background-color: #d9d9d9;
}
.ura-odmor .progress-odmor {
  background-color: #7db7ee; /* svetlejše kot “ura” */
}

/* Mobilna prilagoditev – če je širina res majhna */
@media screen and (max-width: 420px) {
  .ura {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ura .text {
    width: auto;
    min-width: 0;
  }
}