/*
  MEDATLON — предложение нового оформления.
  Цвета, радиусы и пропорции сняты из Figma dev-mode (App-Medatlon).
  Имена классов совпадают с боевым app.css: этот файл задуман как его замена.
*/

:root {
  /* ── Цвета: точные значения из макета ─────────────────────────────────── */
  --pink:        #fe85bc;
  --pink-light:  #ffacd6;
  --pink-text:   #ff60a8;
  --pink-wash:   rgba(254, 133, 188, 0.34);

  --lime:        #a6c762;
  --lime-soft:   #e0eec8;
  --lime-wash:   #e5f1cc;

  --blue:        #71b6fb;
  --blue-text:   #1389ff;
  --blue-wash:   rgba(113, 182, 251, 0.37);

  --ink:         #000000;   /* основной текст */
  --ink-dark:    #292929;   /* кнопки, крупные цифры */
  --ink-soft:    #6a6a6a;   /* второстепенный текст */
  --rule:        #bababb;   /* разделители внутри карточек */
  --track:       #efefef;   /* дорожка прогресса */
  --chip:        #ececed;   /* нейтральная плашка-тег */
  --paper:       #ffffff;
  --grid:        #f1f1f1;   /* линии клетки */

  /* ── Геометрия ────────────────────────────────────────────────────────── */
  --radius:      19px;   /* карточки, плитки           (75.64 / 4) */
  --radius-sm:   4px;    /* костяшки отсчёта           (16.59 / 4) */
  --radius-pill: 999px;  /* кнопки и теги */
  --frame:       5px;    /* зелёная рамка карточки     (20.17 / 4) */
  --cell:        17px;   /* шаг клетки на фоне         (63.04 / ~3.7) */
  --pad:         17px;   /* поле от края экрана        (68.08 / 4) */

  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Декор намеренно выходит за край страницы. clip обрезает его, не заводя
     полосы прокрутки вбок — в отличие от hidden, который её оставляет. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  background-color: var(--paper);
  /* Клетка тетради: одна сетка, тонкая, как в макете */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  overflow-x: clip;
}

/* ── Типографика ────────────────────────────────────────────────────────── */
h1, h2, h3 {
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p  { margin: 0 0 12px; }

a { color: inherit; text-decoration: none; }

.muted { color: var(--ink-soft); }
.tiny  { font-size: 13px; line-height: 1.3; }
.lead  { font-size: 15px; color: var(--ink-soft); margin: -4px 0 18px; }

/* Подпись-ярлык над блоком. В старом оформлении была моноширинной
   капителью; новый макет вместо неё ставит обычный жирный заголовок,
   поэтому класс сохранён, но выглядит иначе. */
.eyebrow {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--pad) 48px;
  position: relative;
  z-index: 1;
}

/* ═══ Шапка ══════════════════════════════════════════════════════════════
   Зелёная плашка с логотипом по центру и двумя круглыми кнопками по краям.
   Плашка «врезана» в верх экрана: снизу скруглена, а по бокам от неё идут
   обратные скругления — за это отвечают ::before/::after с радиальной
   заливкой. В макете это отдельные фигуры Vector 1073/1074.
   ═════════════════════════════════════════════════════════════════════════ */
.topbar {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad);
  margin-bottom: 22px;
}

.topbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.topbar__tab {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  background: var(--lime);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 34px 13px;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Обратные скругления слева и справа от плашки */
.topbar__tab::before,
.topbar__tab::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--radius);
  height: var(--radius);
  pointer-events: none;
}
.topbar__tab::before {
  left: calc(var(--radius) * -1);
  background: radial-gradient(circle at 0 100%, transparent var(--radius), var(--lime) 0);
}
.topbar__tab::after {
  right: calc(var(--radius) * -1);
  background: radial-gradient(circle at 100% 100%, transparent var(--radius), var(--lime) 0);
}

/* ── Логотип ────────────────────────────────────────────────────────────
   MEDATL·N, где «O» заменена знаком-молекулой: кольцо с точками.
   В макете это отдельный рисунок, здесь — инлайновый SVG. */
.logo {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 23px;
  font-weight: 300;       /* в оригинале буквы тонкие, не жирные */
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.logo svg {
  width: 28px;
  height: 28px;
  display: block;
  margin: 0 0 0 2px;    /* знак стоит на месте буквы «О» */
  color: #fff;
}

/* ── Круглые кнопки шапки ───────────────────────────────────────────────── */
.iconbtn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink-dark);
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-top: 10px;
}
.iconbtn svg { width: 22px; height: 22px; display: block; }

/* ── Навигация: в макете её нет, она спрятана за кнопкой-гамбургером ─────
   Раскрывается без JavaScript — через :target/details, чтобы не заводить
   скриптов там, где можно обойтись. */
.nav {
  display: none;
  position: absolute;
  right: var(--pad);
  top: 58px;
  z-index: 5;
  background: #fff;
  border: 2px solid var(--ink-dark);
  border-radius: var(--radius);
  padding: 10px;
  min-width: 210px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.nav a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
}
.nav a:hover { background: var(--lime-soft); }
.nav a.is-active { background: var(--lime); color: #fff; }
#menu:target .nav,
.nav:target { display: block; }

/* ═══ Карточки ═══════════════════════════════════════════════════════════
   Главная перемена против старого оформления: вместо белой карточки с
   тонкой чёрной обводкой — либо карточка в толстой зелёной рамке, либо
   сплошная заливка цветом. Обводка больше не несёт смысла «факт/пояснение»,
   его взял на себя цвет.
   ═════════════════════════════════════════════════════════════════════════ */
.card {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: var(--frame) solid var(--lime);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin: 0 0 22px;
}

/* Карточка без рамки — для вложенных блоков */
.card--flat { border: 0; padding: 0; }

/* Карточка со сплошной заливкой */
.card--fill { border: 0; color: var(--ink); }
.card--lime { background: var(--lime); }
.card--blue { background: var(--blue); }
.card--pink { background: var(--pink); }

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* Главное действие: чёрная заливка без обводки */
.btn--primary {
  background: var(--ink-dark);
  border-color: var(--ink-dark);
  color: #fff;
}
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--wide { width: 100%; }

/* ── Теги-плашки ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.pill--blue { background: var(--blue-wash); color: var(--blue-text); }
.pill--pink { background: var(--pink-wash); color: var(--pink-text); }
.pill--lime { background: var(--lime-wash); color: #5d7a25; }
.pill svg { width: 14px; height: 14px; }

/* ── Сетки ──────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 14px; margin: 0 0 22px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }

/* ═══ Обратный отсчёт до экзамена ════════════════════════════════════════
   Зелёная карточка, розовая «наклейка» с подписью, крупная дата и
   костяшки-перекидыши: белые плашки с тёмной линией поперёк, как в
   механических часах. Двоеточия между группами — четыре точки.
   ═════════════════════════════════════════════════════════════════════════ */
.countdown {
  position: relative;
  z-index: 1;
  background: var(--lime);
  border-radius: var(--radius);
  padding: 20px 14px 22px;
  margin: 0 0 22px;
  text-align: center;
  overflow: hidden;
}

.countdown__sticker {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  padding: 4px 18px 5px;
  transform: rotate(-0.6deg);
  margin-bottom: 2px;
}

.countdown__title {
  font-size: 41px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink-dark);
  margin: 0 0 16px;
  line-height: 1.05;
}

.flip { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }

.flip__unit { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.flip__cards { display: flex; gap: 4px; }

/* Одна костяшка. Линия поперёк — ::after, а не картинка. */
.flip__card {
  position: relative;
  width: 42px;
  height: 74px;
  background: #fff;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink-dark);
  font-variant-numeric: tabular-nums;
}
.flip__card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px solid var(--ink-dark);
}

.flip__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-dark);
}

/* Двоеточие между группами: две точки сверху, две снизу */
.flip__colon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  height: 74px;
  padding: 0 1px;
}
.flip__colon i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-dark);
  display: block;
}

/* ═══ Список ближайших занятий ═══════════════════════════════════════════
   Строка: дата и время слева, отделённые вертикальной линией; название с
   тегами по центру; действие справа. На узком экране действие уходит вниз.
   ═════════════════════════════════════════════════════════════════════════ */
.list { list-style: none; margin: 0; padding: 0; }

.list__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.list__item:first-child { border-top: 0; padding-top: 4px; }
.list__item:last-child { padding-bottom: 4px; }

.list__date {
  flex: 0 0 auto;
  min-width: 96px;
  padding-right: 16px;
  border-right: 1px solid var(--rule);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.list__date b { font-size: 15px; font-weight: 700; display: block; }
.list__date span { font-size: 13px; color: var(--ink-soft); }

.list__body { flex: 1 1 200px; min-width: 0; }
.list__body h3 { margin: 0 0 9px; font-size: 17px; }
.list__tags { display: flex; flex-wrap: wrap; gap: 7px; }

.list__action { flex: 0 0 auto; margin-left: auto; }

.empty { padding: 18px 0; color: var(--ink-soft); }

/* ═══ Плитки разделов ════════════════════════════════════════════════════
   Четыре широкие плитки сплошной заливки. Цвет — единственный различитель,
   поэтому порядок цветов закреплён: синий, зелёный, розовый, зелёный.
   ═════════════════════════════════════════════════════════════════════════ */
.tile {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 84px;
  padding: 14px 22px;
  border-radius: var(--radius);
  color: var(--ink);
  transition: transform 0.1s ease;
}
.tile:hover { transform: translateY(-2px); }
.tile:active { transform: translateY(0); }

.tile--course  { background: var(--blue); }
.tile--library { background: var(--lime); }
.tile--chat    { background: var(--pink); }
.tile--curator { background: var(--lime); }

.tile__icon { flex: 0 0 auto; width: 42px; height: 42px; }
.tile__icon svg { width: 100%; height: 100%; display: block; }
.tile--course  .tile__icon { transform: rotate(9deg); }
.tile--library .tile__icon { transform: rotate(-16deg); }
.tile--chat    .tile__icon { transform: rotate(8deg); }
.tile--curator .tile__icon { transform: rotate(-8deg); }

.tile h3 { margin: 0 0 2px; font-size: 20px; }
.tile p  { margin: 0; font-size: 14px; }

/* Закрытый раздел: тот же цвет, но приглушённый и без ссылки */
.tile--locked { opacity: 0.55; cursor: not-allowed; }
.tile--locked:hover { transform: none; }

/* ═══ Прогресс ═══════════════════════════════════════════════════════════
   Одна карточка в зелёной рамке: верх залит зелёным и несёт кольцо с общим
   баллом, низ белый и разбирает балл по показателям.
   ═════════════════════════════════════════════════════════════════════════ */
.progress-card { padding: 0; overflow: hidden; }

.progress-card__top {
  background: var(--lime);
  padding: 24px 20px;
  border-radius: calc(var(--radius) - var(--frame)) calc(var(--radius) - var(--frame)) 0 0;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* Кольцо: бледный диск, поверх — дуга результата, в центре белый круг.
   Дуга рисуется conic-gradient, процент задаётся переменной --p. */
.ring {
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: var(--lime-soft);
  display: grid;
  place-items: center;
  position: relative;
}
.ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(var(--pink) calc(var(--p) * 1%), var(--lime-soft) 0);
}
.ring::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: #fff;
}
.ring b {
  position: relative;
  z-index: 1;
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.progress-card__head { flex: 1 1 200px; min-width: 190px; }
.progress-card__head h2 { font-size: 26px; margin: 0 0 6px; }
.progress-card__head p { font-size: 15px; margin: 0 0 14px; }

.progress-card__body { padding: 6px 16px 10px; }

/* ── Строка показателя ──────────────────────────────────────────────────── */
.bar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.bar-row:first-child { border-top: 0; }
.bar-row__name { flex: 0 0 auto; min-width: 104px; font-size: 15px; }
.bar-row__pct  { flex: 0 0 auto; min-width: 46px; text-align: right; font-size: 15px;
                 font-variant-numeric: tabular-nums; }

.bar {
  flex: 1 1 auto;
  height: 13px;
  background: var(--track);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--blue); }
.bar__fill--pink { background: var(--pink); }
.bar__fill--lime { background: var(--lime); }
.bar__fill--blue { background: var(--blue); }

/* ═══ Цели на неделю ═════════════════════════════════════════════════════ */
.goals__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.goals__head h2 { margin: 0; flex: 1 1 auto; font-size: 24px; }
.goals__icon { flex: 0 0 auto; width: 38px; height: 38px; }
.goals__icon svg { width: 100%; height: 100%; display: block; }

.goals { list-style: none; margin: 0; padding: 0; }
.goals li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--lime);
  font-size: 15px;
}
.goals li:first-child { border-top: 0; }

/* Квадратик-отметка. Выполнено — зелёная заливка с белой галкой,
   не выполнено — белый квадрат в зелёной рамке. */
.check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  border: 3px solid var(--lime);
  display: grid;
  place-items: center;
}
.check--done { background: var(--lime); }
.check svg { width: 14px; height: 14px; display: none; }
.check--done svg { display: block; }

/* ═══ Декор ══════════════════════════════════════════════════════════════
   Розовый росчерк и звёздочка. Лежат под содержимым и не ловят нажатия;
   на узком экране часть убирается, иначе они лезут в текст.
   ═════════════════════════════════════════════════════════════════════════ */
.decor {
  position: absolute;
  z-index: -1;          /* под карточками: иначе росчерк ложится на текст */
  pointer-events: none;
  user-select: none;
}
.decor svg { display: block; width: 100%; height: 100%; }

.decor--tr { top: -30px; right: -70px; width: 220px; height: 300px; }
.decor--bl { bottom: 40px; left: -90px; width: 200px; height: 280px; }

/* ═══ Календарь ══════════════════════════════════════════════════════════ */
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal__month { font-size: 19px; font-weight: 700; text-transform: capitalize; }
.cal__nav {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink-dark);
  color: #fff;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
}
.cal { display: grid; gap: 4px; }
/* minmax(0, 1fr), а не просто 1fr: иначе колонка не может стать уже своего
   содержимого, и на телефоне седьмой день уезжает за край карточки. */
.cal__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__row--names .cal__name {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  text-align: center; padding: 4px 0; text-transform: uppercase;
}
.cal__cell {
  min-height: 74px;
  border-radius: 10px;
  background: #fafafa;
  padding: 5px;
}
.cal__cell--muted { opacity: 0.4; }
.cal__cell--today { background: var(--lime-soft); outline: 2px solid var(--lime); }
.cal__day { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.cal__event {
  display: block;
  margin-top: 3px;
  padding: 3px 5px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--blue-wash);
  color: var(--blue-text);
  font-size: 11px;
  line-height: 1.2;
}
.cal__event--pink { background: var(--pink-wash); color: var(--pink-text); }
.cal__time { display: block; font-weight: 700; }

/* ═══ Подвал ═════════════════════════════════════════════════════════════ */
.footer {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
}
.footer a { text-decoration: underline; }

/* ═══ Широкий экран ══════════════════════════════════════════════════════
   Макет нарисован под телефон. На ноутбуке те же блоки раскладываются в
   несколько колонок, а клетка и поля становятся крупнее — иначе страница
   превращается в узкую ленту посреди пустоты.
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  :root { --cell: 26px; --pad: 28px; --radius: 26px; }

  h1 { font-size: 34px; }
  .eyebrow { font-size: 25px; }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .card { padding: 26px 24px; }
  /* Карточка прогресса сама раздаёт поля: зелёный блок должен доходить
     до рамки, иначе вокруг него появляется белая полоса */
  .card.progress-card { padding: 0; }
  .countdown { padding: 28px 24px 30px; }
  .countdown__title { font-size: 58px; }
  .countdown__sticker { font-size: 24px; padding: 5px 24px 6px; }

  .flip__card { width: 58px; height: 100px; font-size: 60px; }
  .flip__colon { height: 100px; gap: 22px; }
  .flip__colon i { width: 7px; height: 7px; }
  .flip__label { font-size: 15px; }

  .tile { min-height: 96px; padding: 16px 28px; }
  .tile__icon { width: 50px; height: 50px; }
  .tile h3 { font-size: 23px; }

  .ring { width: 150px; height: 150px; }
  .ring::before { inset: 7px; }
  .ring::after { inset: 20px; }
  .ring b { font-size: 42px; }
  .progress-card__head h2 { font-size: 32px; }
  .progress-card__body { padding: 10px 22px 14px; }
  .bar-row__name { min-width: 150px; font-size: 16px; }

  .list__date { min-width: 120px; }
  .list__body h3 { font-size: 19px; }
}

@media (min-width: 1000px) {
  .grid--4 { grid-template-columns: 1fr; }
  .tile { min-height: 104px; }
}

/* Узкий телефон: кнопка занятия уезжает под название, декор убирается */
@media (max-width: 520px) {
  .list__item { padding: 12px 0; gap: 10px; }
  .list__action { margin-left: 0; width: 100%; }
  .list__action .btn { width: 100%; }
  .decor--bl { display: none; }
  .decor--tr { right: -100px; width: 180px; }
  .flip__card { width: 38px; height: 66px; font-size: 38px; }
  .flip__colon { height: 66px; gap: 12px; }
  .countdown__title { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Подложка под иконку на витрине компонентов */
.swatch {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.swatch svg { width: 38px; height: 38px; display: block; }
.swatch--blue { background: var(--blue); }
.swatch--lime { background: var(--lime); }
.swatch--pink { background: var(--pink); }
.swatch--white { background: #fff; border: 1px solid var(--rule); }

/* Месяц на узком экране: ячейки ниже, подписи мельче, названия дней в две
   буквы. Сетка остаётся сеткой — списком расписание читается хуже. */
@media (max-width: 560px) {
  .cal__cell { min-height: 56px; padding: 3px; border-radius: 8px; }
  .cal__day { font-size: 11px; }
  .cal__event { font-size: 9px; padding: 2px 3px; border-radius: 5px; }
  .cal__row--names .cal__name { font-size: 9px; padding: 2px 0; }
  .cal__month { font-size: 17px; }
  .cal__nav { width: 32px; height: 32px; font-size: 17px; }
}