/* Расписание филиала РГУПС в г. Туапсе.
   Один и тот же файл работает на странице сайта и в PWA (/raspisanie/),
   поэтому переменные объявлены здесь, а не наследуются от шаблона. */
.tt {
  --tt-blue:#095197; --tt-blue-dark:#073d73; --tt-wash:#eaf1f9; --tt-accent:#c8102e;
  --tt-ink:#101a24; --tt-soft:#33475b; --tt-muted:#5f7285;
  --tt-line:#d8e3ee; --tt-paper:#fff; --tt-paper2:#f6f9fc;
  --tt-ease:cubic-bezier(.32,.72,0,1);
  font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Roboto,Arial,sans-serif;
  color:var(--tt-ink); max-width:960px; margin-inline:auto;
}
.tt *{box-sizing:border-box}
.tt button{font:inherit}

/* ------------------------------------------------------------- шапка -- */
.tt__bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 0 16px; border-bottom:1px solid var(--tt-line); margin-bottom:18px;
}
.tt__who{flex:1 1 auto; min-width:0}
.tt__kind{
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tt-muted); display:block; margin-bottom:2px;
}
.tt__name{font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--tt-blue)}
.tt__btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px;
  background:var(--tt-paper); color:var(--tt-blue); cursor:pointer;
  border:1px solid color-mix(in srgb,var(--tt-blue) 22%,transparent); border-radius:9px;
  font-size:14px; font-weight:600; white-space:nowrap;
  transition:background-color .25s var(--tt-ease), border-color .25s var(--tt-ease);
}
.tt__btn:hover{background:var(--tt-wash); border-color:var(--tt-blue)}
.tt__btn--pin[aria-pressed="true"]{background:var(--tt-blue); border-color:var(--tt-blue); color:#fff}
.tt__btn--ghost{border-color:transparent; color:var(--tt-soft)}

/* -------------------------------------------------------- избранное -- */
.tt__favs{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding:0; list-style:none}
.tt__fav{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 12px;
  background:var(--tt-wash); border-radius:999px; font-size:13.5px; font-weight:600;
}
.tt__fav a{color:var(--tt-blue-dark); text-decoration:none}
.tt__fav a:hover{text-decoration:underline}
.tt__fav[data-current="1"]{background:var(--tt-blue); color:#fff}
.tt__fav[data-current="1"] a{color:#fff}
.tt__fav button{
  border:0; background:none; cursor:pointer; color:inherit; opacity:.55;
  font-size:16px; line-height:1; padding:0 2px;
}
.tt__fav button:hover{opacity:1}

/* ------------------------------------------------------------- дни -- */
.tt__day{margin:0 0 14px; border:1px solid var(--tt-line); border-radius:12px; overflow:hidden}
.tt__day[data-today="1"]{border-color:var(--tt-blue); box-shadow:0 0 0 1px var(--tt-blue)}
.tt__dayhead{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:11px 16px; background:var(--tt-paper2); border-bottom:1px solid var(--tt-line);
}
.tt__dow{font-size:15px; font-weight:700; letter-spacing:-.01em}
.tt__date{font-size:13px; color:var(--tt-muted); font-variant-numeric:tabular-nums}
.tt__today{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:var(--tt-blue); padding:3px 8px; border-radius:5px;
}

/* ------------------------------------------------------------ пары -- */
.tt__slot{display:grid; grid-template-columns:74px 1fr; gap:0 14px; padding:12px 16px}
.tt__slot+.tt__slot{border-top:1px solid color-mix(in srgb,var(--tt-blue) 9%,transparent)}
.tt__slot[data-now="1"]{background:color-mix(in srgb,var(--tt-blue) 6%,transparent)}
.tt__time{font-size:13px; font-weight:600; color:var(--tt-soft); font-variant-numeric:tabular-nums; line-height:1.35}
.tt__time span{display:block; color:var(--tt-muted); font-weight:400}
.tt__num{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tt-muted); margin-bottom:3px;
}
.tt__subj{font-size:15.5px; font-weight:600; line-height:1.3; margin:0 0 3px}
.tt__type{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:5px;
  background:var(--tt-wash); color:var(--tt-blue-dark);
  font-size:11px; font-weight:700; letter-spacing:.04em; vertical-align:middle;
}
.tt__meta{font-size:13.5px; color:var(--tt-soft); line-height:1.45}
.tt__meta a{color:var(--tt-blue); text-decoration:none}
.tt__meta a:hover{text-decoration:underline}
.tt__aud{color:var(--tt-muted)}

/* -------------------------------------------------- пусто / ошибки -- */
.tt__empty{
  padding:26px 18px; text-align:center; color:var(--tt-muted); font-size:15px;
  background:var(--tt-paper2); border:1px dashed var(--tt-line); border-radius:12px;
}
.tt__note{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; padding:12px 14px;
  background:color-mix(in srgb,var(--tt-accent) 7%,transparent);
  border-left:3px solid var(--tt-accent); border-radius:0 9px 9px 0;
  font-size:14px; color:var(--tt-soft);
}
.tt__stale{background:var(--tt-wash); border-left-color:var(--tt-blue)}

/* -------------------------------------------------------- выбор -- */
.tt__pick{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:20px}
.tt__pickbtn{
  display:flex; flex-direction:column; gap:4px; padding:18px 20px; cursor:pointer; text-align:left;
  background:var(--tt-paper); border:1px solid var(--tt-line); border-radius:12px;
  transition:border-color .25s var(--tt-ease), transform .25s var(--tt-ease);
}
.tt__pickbtn:hover{border-color:var(--tt-blue); transform:translateY(-2px)}
.tt__pickbtn b{font-size:17px; color:var(--tt-blue); font-weight:700}
.tt__pickbtn span{font-size:13.5px; color:var(--tt-muted)}

.tt__search{
  width:100%; padding:11px 14px; margin-bottom:14px; font:inherit; font-size:15px;
  border:1px solid var(--tt-line); border-radius:9px; background:var(--tt-paper);
}
.tt__search:focus{outline:2px solid var(--tt-blue); outline-offset:1px; border-color:transparent}
.tt__group{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tt-muted); margin:16px 0 8px}
.tt__list{display:grid; gap:6px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin:0; padding:0; list-style:none}
.tt__list a{
  display:block; padding:9px 12px; border-radius:8px; text-decoration:none;
  background:var(--tt-paper2); color:var(--tt-ink); font-size:14.5px; font-weight:500;
  border:1px solid transparent;
}
.tt__list a:hover{background:var(--tt-wash); border-color:var(--tt-blue); color:var(--tt-blue)}

@media (max-width:575.98px){
  .tt__slot{grid-template-columns:64px 1fr; gap:0 10px; padding:11px 13px}
  .tt__name{font-size:18px}
  .tt__list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
@media (prefers-reduced-motion:reduce){ .tt *{transition-duration:.01ms !important} }

/* ---------------------------------------------- идущая сейчас пара -- */
/* Полоса прогресса была в старом расписании — возвращаем, но считаем время
   на клиенте, поэтому она живёт и в офлайне, и обновляется каждую минуту. */
.tt__meter {
  position: relative; height: 6px; margin: 9px 0 3px;
  background: color-mix(in srgb, var(--tt-blue) 12%, transparent);
  border-radius: 999px; overflow: visible;
}
.tt__meter > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--tt-blue), #2bc253);
  border-radius: 999px;
  transition: width .6s var(--tt-ease);
}
.tt__meter > i {
  position: absolute; right: 0; top: 10px;
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #1c7a3a;
  white-space: nowrap;
}
.tt__slot[data-now="1"] { padding-bottom: 26px; }
.tt__slot[data-now="1"] .tt__subj { color: var(--tt-blue-dark); }

/* ------------------------------------------- следующая пара -- */
/* Отдельная подсветка нужна в перерыве: текущей пары нет, а понять,
   куда идти дальше, важнее всего именно в этот момент. */
.tt__slot[data-next="1"] {
  background: color-mix(in srgb, var(--tt-accent) 5%, transparent);
  padding-bottom: 26px;
}
.tt__slot[data-next="1"] .tt__subj { color: var(--tt-ink); }
.tt__slot[data-next="1"] .tt__meter { background: transparent; height: 0; margin: 6px 0 0; }
.tt__slot[data-next="1"] .tt__meter > i { color: var(--tt-accent); top: 2px; }

/* --------------------------------------- подсказка об установке -- */
.tt__install {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--tt-wash);
  border: 1px solid color-mix(in srgb, var(--tt-blue) 16%, transparent);
  border-radius: 11px;
}
.tt__install-text { flex: 1 1 240px; font-size: 13.5px; line-height: 1.45; color: var(--tt-soft); }
.tt__install .tt__btn { padding: 8px 13px; font-size: 13.5px; }
.tt__install-close {
  border: 0; background: none; cursor: pointer; color: var(--tt-muted);
  font-size: 20px; line-height: 1; padding: 0 2px; flex: none;
}
.tt__install-close:hover { color: var(--tt-ink); }