/* Каркас и общие блоки стиля Б. Цвета, шрифты и отступы — только через токены из tokens.css. */
:root{
  --nav-h:58px;        /* высота нижней панели без safe-area */
  --maxw:720px;        /* на планшете и в десктопном браузере колонка не расплывается */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.45;
  overflow-x:hidden;                       /* критерий приёмки: ничего не едет по горизонтали */
}
:focus-visible{ outline:2px solid var(--line-strong); outline-offset:2px; }
.main:focus{ outline:none; }

/* ——— каркас экрана ——— */
.main{
  max-width:var(--maxw); margin:0 auto;
  /* в обычной вкладке верхний отступ ноль, в режиме «на экран Домой» — под статус-бар */
  padding:calc(var(--space-5) + env(safe-area-inset-top)) var(--space-4);
  /* нижняя панель не перекрывает контент, с поправкой на «чёлочный» отступ iPhone */
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--space-6));
}

.screen-head{ margin:0 0 var(--space-5); }
.h1{ margin:0; font-size:var(--fs-h1); font-weight:var(--w-h1); letter-spacing:var(--ls-h1); line-height:1.05; }
.h2{ margin:0; font-size:var(--fs-h2); font-weight:var(--w-h2); }
.sub{ margin:var(--space-2) 0 0; color:var(--ink-2); }
.eyebrow{
  margin:0 0 var(--space-2);
  font-size:var(--fs-micro); font-weight:var(--w-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--ink-2);
}
.num{ font-variant-numeric:tabular-nums; }

/* ——— нижняя панель ——— */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--nav);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--nav-h); padding:6px 2px;         /* зона нажатия ≥ 44 px */
  color:var(--nav-fg); text-decoration:none;
  font-size:var(--fs-micro); font-weight:var(--w-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}
.nav a[aria-current="page"]{ color:var(--nav-fg-active); }
.nav a[aria-current="page"] .nav-ind{ background:var(--nav-fg-active); }
.nav-ind{ width:18px; height:2px; background:transparent; border-radius:var(--r-pill); }
.nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* ——— таблица «ключ — значение» ——— */
.stats{
  margin:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.stats > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4);
  background:var(--bg); padding:var(--space-3) var(--space-4);
}
.stats dt{ color:var(--ink-2); }
.stats dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }

/* ——— служебные состояния ——— */
.state{ padding:var(--space-6) 0; color:var(--ink-2); }
.note{ margin:var(--space-4) 0 0; color:var(--ink-2); font-size:var(--fs-small); }
.btn{
  min-height:var(--tap); padding:0 var(--space-4);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:var(--bg); color:var(--ink);
  font:inherit; font-weight:600; cursor:pointer;
}
.sync{
  display:inline-block; margin:var(--space-3) 0 0;
  font-size:var(--fs-micro); font-weight:var(--w-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--ink-2);
}

/* ——— цвет категории → var(--cat); используется полосками карточек и фильтром (шаг 2) ——— */
[data-cat="clothes"]{ --cat:var(--cat-clothes); }
[data-cat="knives"]{ --cat:var(--cat-knives); }
[data-cat="kitchen"]{ --cat:var(--cat-kitchen); }
[data-cat="stationery"]{ --cat:var(--cat-stationery); }
[data-cat="gifts"]{ --cat:var(--cat-gifts); }
[data-cat="eyewear"]{ --cat:var(--cat-eyewear); }
[data-cat="auto"]{ --cat:var(--cat-auto); }

/* ——————————————————————————————————————————————————
   Вкладка «Магазины»: переключатели, фильтры, карточки
   —————————————————————————————————————————————————— */

.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* сегментированный переключатель городов */
.seg{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin:0 0 var(--space-4);
  border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden;
}
.seg-btn{
  min-height:var(--tap); padding:0 var(--space-2);
  border:0; border-left:1px solid var(--line);
  background:var(--bg); color:var(--ink);
  font:inherit; font-weight:600; cursor:pointer;
}
.seg-btn:first-child{ border-left:0; }
.seg-btn.is-on{ background:var(--line-strong); color:var(--bg); }

/* заглушка карты (шаг 3 заменит содержимое) */
.map-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2);
  height:180px; margin:0 0 var(--space-4); padding:var(--space-4);
  border:1px dashed var(--line); border-radius:var(--r-lg);
  background:var(--bg-2); text-align:center;
}
.map-note{ margin:0; color:var(--ink-2); }

/* фильтр категорий */
.chips{
  display:flex; gap:var(--space-2);
  margin:0 0 var(--space-3); padding-bottom:var(--space-2);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  min-height:var(--tap); padding:0 var(--space-3);
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg); color:var(--ink); font:inherit; cursor:pointer; white-space:nowrap;
}
.chip.is-on{ border-color:var(--line-strong); background:var(--bg-2); font-weight:600; }
.chip-bar{ width:14px; height:3px; border-radius:var(--r-pill); background:var(--cat, var(--ink-2)); }
.chip-n{ color:var(--ink-2); }

/* поиск и переключатель */
.field{ margin:0 0 var(--space-3); }
.input{
  width:100%; min-height:var(--tap); padding:0 var(--space-3);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg); color:var(--ink); font:inherit;
}
.input::placeholder{ color:var(--ink-2); }
.toggle{
  display:flex; align-items:center; gap:var(--space-3);
  min-height:var(--tap); margin:0 0 var(--space-4); cursor:pointer;
}
.toggle input{ width:20px; height:20px; accent-color:var(--line-strong); }

/* список и карточка */
.list{ display:grid; gap:var(--space-4); }
.card{
  padding:var(--space-4);
  border:1px solid var(--line); border-left:6px solid var(--cat, var(--line));
  border-radius:var(--r-lg); background:var(--bg);
}
.card.is-visited{ background:var(--bg-2); }
.card-top{ display:flex; align-items:flex-start; gap:var(--space-3); }
.card-name{ margin:0; flex:1; font-size:var(--fs-h2); font-weight:var(--w-h2); line-height:1.25; }
.stamp{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:2px solid var(--ok); border-radius:var(--r-pill); color:var(--ok);
}
.stamp svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.badge-top{
  display:inline-block; margin:var(--space-2) 0 0; padding:2px 8px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-size:var(--fs-micro); font-weight:var(--w-label); letter-spacing:var(--ls-label); text-transform:uppercase;
}
.card-meta{ margin:var(--space-2) 0 0; color:var(--ink-2); font-size:var(--fs-small); }
.card-links{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin:0; }
.link-btn{
  display:inline-flex; align-items:center; min-height:40px;
  color:var(--ink); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.link{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.card-why{ margin:var(--space-2) 0 0; }
.card-tip{ margin:var(--space-3) 0 0; color:var(--ink-2); font-size:var(--fs-small); }

.items{ margin:var(--space-3) 0 0; padding:0; list-style:none; }
.item{
  display:grid; grid-template-columns:minmax(50%,1fr) auto; gap:2px var(--space-3);
  padding:var(--space-2) 0; border-top:1px solid var(--line);
}
.item-name{ min-width:0; overflow-wrap:anywhere; }
.item-price{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 6px; font-weight:600; }
.item-price span{ white-space:nowrap; }
.item-note{ grid-column:1 / -1; color:var(--ink-2); font-size:var(--fs-small); }

/* кнопки отметок: залиты при включении, текст цветом фона — работает и в тёмной теме */
.actions{ display:flex; gap:var(--space-3); margin:var(--space-4) 0 0; }
.mark{
  flex:1; min-height:var(--tap); padding:0 var(--space-3);
  border:1px solid currentColor; border-radius:var(--r-md);
  background:var(--bg); font:inherit; font-weight:600; cursor:pointer;
}
.mark-ok{ color:var(--ok); }
.mark-buy{ color:var(--buy); }
.mark-ok.is-on{ background:var(--ok); color:var(--bg); }
.mark-buy.is-on{ background:var(--buy); color:var(--bg); }
.card-who{ margin:var(--space-2) 0 0; color:var(--ink-2); font-size:var(--fs-micro); }

/* комментарии */
.notes{ margin:var(--space-4) 0 0; padding-top:var(--space-3); border-top:1px solid var(--line); }
.note-list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-3); }
.note-list:not(:empty){ margin-bottom:var(--space-3); }
.note-item{ padding-left:var(--space-3); border-left:2px solid var(--line); }
.note-who{ margin:0; color:var(--ink-2); font-size:var(--fs-micro); }
.note-text{ margin:2px 0 0; overflow-wrap:anywhere; }
.note-form{ display:flex; gap:var(--space-2); }
.note-input{
  flex:1; min-width:0; min-height:var(--tap); padding:0 var(--space-3);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg); color:var(--ink); font:inherit;
}
.note-input::placeholder{ color:var(--ink-2); }
.btn-send{ flex:0 0 auto; }

/* ——————————————————————————————————————————————————
   Вкладка «Инфо»: аккордеон и сравнение цен
   —————————————————————————————————————————————————— */
.acc{ display:grid; gap:var(--space-2); }
.acc-item{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg); }
.acc-sum{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  min-height:var(--tap); padding:var(--space-3) var(--space-4);
  cursor:pointer; list-style:none;
}
.acc-sum::-webkit-details-marker{ display:none; }
.acc-title{ font-size:var(--fs-h2); font-weight:var(--w-h2); line-height:1.25; }
.acc-n{ flex:0 0 auto; color:var(--ink-2); }
.acc-item[open] .acc-sum{ border-bottom:1px solid var(--line); }
.acc-body{ padding:var(--space-3) var(--space-4) var(--space-4); }
.acc-note{ margin:0 0 var(--space-3); color:var(--ink-2); font-size:var(--fs-small); }
.acc-list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-3); }
.acc-li{ padding-left:var(--space-4); position:relative; }
.acc-li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:2px; background:var(--ink-2); }
.acc-li-check{ padding-left:0; }
.acc-li-check::before{ display:none; }

.check{ display:flex; align-items:flex-start; gap:var(--space-3); min-height:var(--tap); cursor:pointer; }
.check-box{ flex:0 0 auto; width:22px; height:22px; margin-top:2px; accent-color:var(--ok); }
.check-box:checked + span{ color:var(--ink-2); text-decoration:line-through; }
.check-who{ display:block; margin-left:34px; color:var(--ink-2); font-size:var(--fs-micro); }

/* сравнение цен: на телефоне не таблица, а строки — иначе пять колонок не помещаются */
.value-list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-4); }
.value-row{ padding-top:var(--space-3); border-top:1px solid var(--line); }
.value-row:first-child{ padding-top:0; border-top:0; }
.value-item{ margin:0; font-weight:600; }
.value-where{ margin:2px 0 var(--space-2); color:var(--ink-2); font-size:var(--fs-small); }
.value-prices{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin:0; }
.value-jp, .value-ab{ display:flex; flex-direction:column; }
.value-cap{
  font-size:var(--fs-micro); font-weight:var(--w-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--ink-2);
}
.value-jp{ color:var(--ok); font-weight:600; }
.value-ab{ color:var(--ink-2); }
.value-why{ margin:var(--space-2) 0 0; color:var(--ink-2); font-size:var(--fs-small); }

/* ——— карта на вкладке «Магазины» ——— */
.map-box{ position:relative; overflow:hidden; }
.map-box.is-live{ border-style:solid; background:var(--bg-2); }
.map-canvas{ position:absolute; inset:0; }
.map-fallback{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-4); text-align:center; background:var(--bg-2);
}
.map-fallback[hidden]{ display:none; }

/* маркер: кружок цвета категории */
.pin{
  display:block; width:16px; height:16px; border-radius:var(--r-pill);
  background:var(--cat, var(--ink-2)); border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.pin-done{ opacity:.4; }

/* инфо-окно */
/* инфо-окно рисует Google: фон всегда белый, поэтому цвета здесь заданы явно */
.iw{ width:200px; color:#111318; font-family:var(--font); }
.iw-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  width:100%; padding:0; border:0; background:none; text-align:left;
  color:#111318; font:inherit; font-size:13px; font-weight:700; line-height:1.25;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
/* minmax(0,1fr): иначе колонка грида растягивается по max-content и строка не сжимается */
.iw-items{ margin:6px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
.iw-item{ display:flex; justify-content:space-between; gap:8px; font-size:11px; line-height:1.3; }
.iw-item > span:first-child{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iw-price{ flex:0 0 auto; white-space:nowrap; font-weight:600; }
.iw-dir{
  display:inline-flex; align-items:center; min-height:30px; margin-top:4px;
  color:#0F4C81; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:2px;
}

/* ——————————————————————————————————————————————————
   Вкладка «Дни»: лента дат, отель, таймлайн, шторка
   —————————————————————————————————————————————————— */
.dates{
  display:flex; gap:var(--space-2);
  margin:0 calc(-1 * var(--space-4)) var(--space-5); padding:0 var(--space-4) var(--space-2);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.dates::-webkit-scrollbar{ display:none; }
.date-btn{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:46px; height:56px; padding:0;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg); color:var(--ink-2); font:inherit; cursor:pointer;
}
.date-dow{ font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:var(--ls-label); }
.date-num{ font-size:var(--fs-h2); font-weight:var(--w-h2); line-height:1; color:var(--ink); }
.date-btn.is-on{
  width:56px; height:66px;
  background:var(--line-strong); border-color:var(--line-strong); color:var(--bg);
}
.date-btn.is-on .date-num{ color:var(--bg); font-size:22px; }

/* отель */
.hotel{
  margin:0 0 var(--space-5); padding:var(--space-4);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2);
}
.hotel-name{ margin:0; font-size:var(--fs-h2); font-weight:var(--w-h2); line-height:1.25; }
.hotel-addr{ margin:var(--space-1) 0 var(--space-3); color:var(--ink-2); font-size:var(--fs-small); }
.hotel-call{ display:inline-flex; align-items:center; text-decoration:none; }

/* таймлайн */
.tl{ margin:0 0 var(--space-5); padding:0; list-style:none; }
.tl-item{ display:grid; grid-template-columns:46px 30px 1fr; gap:0 var(--space-2); padding:var(--space-2) 0; }
.tl-time{ padding-top:4px; color:var(--ink-2); font-size:var(--fs-small); }
.tl-check{ position:relative; display:flex; justify-content:center; min-width:30px; }
/* линия таймлайна проходит через центр кружков */
.tl-check::before{
  content:""; position:absolute; left:50%; top:0; bottom:calc(-1 * var(--space-4));
  width:1px; margin-left:-0.5px; background:var(--line);
}
.tl-item:last-child .tl-check::before{ display:none; }
.tl-box{
  position:relative; z-index:1; appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:26px; height:26px; margin:2px 0 0;
  display:grid; place-items:center;
  border:2px solid var(--line-strong); border-radius:var(--r-pill);
  background:var(--bg); cursor:pointer;
}
.tl-box:checked{ background:var(--ok); border-color:var(--ok); }
.tl-box:checked::after{
  content:""; width:10px; height:6px; margin-top:-3px;
  border-left:2px solid var(--bg); border-bottom:2px solid var(--bg); transform:rotate(-45deg);
}
.tl-body{ min-width:0; padding-bottom:var(--space-2); }
.tl-text{ margin:0; padding-top:2px; }
.tl-body .check-who{ margin-left:0; }   /* отступ из списка «Инфо» здесь не нужен */
.tl-item.is-done .tl-text{ color:var(--ink-2); }

/* чипы магазинов у пункта */
.spot-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-2) 0 0; }
.spot-chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:var(--tap); padding:0 var(--space-3); max-width:100%;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg); color:var(--ink); font:inherit; font-size:var(--fs-small); cursor:pointer;
}
.spot-chip > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spot-chip-bar{ flex:0 0 auto; width:12px; height:3px; border-radius:var(--r-pill); background:var(--cat, var(--ink-2)); }

.tickets{ margin:0 0 var(--space-5); }
.day-notes{ margin:0; }
.day-notes .h2{ margin:0 0 var(--space-3); }
.day-notes .notes{ margin:0; padding-top:0; border-top:0; }

/* нижняя шторка с карточкой магазина */
.sheet{
  position:fixed; inset:auto 0 0; z-index:20;
  width:100%; max-width:720px; margin:0 auto; padding:0;
  max-height:85vh; overflow:auto;
  border:0; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--bg); color:var(--ink);
}
.sheet::backdrop{ background:rgba(0,0,0,.5); }
.sheet-bar{ position:sticky; top:0; z-index:1; display:flex; justify-content:flex-end; padding:var(--space-2); background:var(--bg); }
.sheet-close{
  display:grid; place-items:center; width:var(--tap); height:var(--tap);
  border:0; border-radius:var(--r-pill); background:var(--bg-2); color:var(--ink); cursor:pointer;
}
.sheet-close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.sheet-body{ padding:0 var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); }
.sheet-body .card{ border:0; border-left:6px solid var(--cat, var(--line)); padding:var(--space-3) var(--space-4); }

/* ——— вкладка «Авто» ——— */
.map-wide{
  height:280px;
  margin-left:calc(-1 * var(--space-4)); margin-right:calc(-1 * var(--space-4));
  border-left:0; border-right:0; border-radius:0;
}
.pin-num{
  display:grid; place-items:center;
  width:24px; height:24px;
  /* цвет фона страницы поверх цвета категории: читается и в светлой, и в тёмной теме */
  color:var(--bg); font-family:var(--font); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
  line-height:1;
}
.auto-group{ margin:0 0 var(--space-6); }
.auto-group .h2{ margin:0; }
.auto-note{ margin:var(--space-1) 0 var(--space-4); color:var(--ink-2); font-size:var(--fs-small); }