/* ============================================================
 * Diary of the Day — Primitives v2
 * Implementuje §9.4 body 2-3 ze spec docs/ui/karta-dne-spec.md
 *
 * v1 → v2: přidány třídy pro DiaryCardHeader (§3.2) — datum pill
 * (eyebrow), citát + autor, close button 32×32 s SVG X.
 *
 * Závislosti: diary-tokens-v1.css (musí být linknuty PŘED tímto).
 *
 * Použití v openDayModal v app-vN.js — modal box má třídu .diary-card
 * a header třídu .diary-card-header.
 * ============================================================ */

/* ─── Helper: button reset (spec §8.6) ─── */
.diary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.diary-btn > svg {
  display: block;
}

/* ============================================================
 * §5.2 Chip — 3 varianty: outline, filled, add (dashed)
 * ============================================================ */
.diary-chip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  border: 0.5px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.diary-chip:hover {
  border-color: var(--ink);
}
.diary-chip:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--shadow-focus);
}

/* Outline (default — disponibilní volba, neselected) */
.diary-chip--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

/* Filled (selected/active) */
.diary-chip--filled {
  background: var(--ink);
  color: var(--ink-on-ink);
  border-color: var(--ink);
}
.diary-chip--filled:hover {
  background: #000;
  border-color: #000;
}

/* Add (dashed — pro přidání další položky) */
.diary-chip--add {
  background: transparent;
  border-style: dashed;
  border-color: var(--rule-strong);
  color: var(--ink-tertiary);
}
.diary-chip--add:hover {
  background: var(--paper-canvas);
  color: var(--ink-secondary);
  border-color: var(--ink);
}

/* ============================================================
 * §4.4 AddPill — dashed pill button pro „+ přidat místo / let / skladbu"
 * ============================================================ */
.diary-add-pill {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0.5px dashed var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.diary-add-pill:hover {
  background: var(--paper-canvas);
  border-color: var(--ink);
  color: var(--ink);
}
.diary-add-pill:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--shadow-focus);
}

/* ============================================================
 * §5.1 FieldLabel — sans 10px UPPERCASE pro čitelnost
 *
 * POZNÁMKA: Spec doporučuje serif, ale Playfair Display v UPPERCASE +
 * malé velikosti + široký letter-spacing rendervá hůř než sans (Inter).
 * Měníme na sans 500 weight pro lepší čitelnost — knižní cit zůstává
 * v bodyovém textu, citátech a kurzívě.
 * ============================================================ */
.diary-field-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
  line-height: 1.3;
}

.diary-field-helper {
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-tertiary);
  line-height: 1;
}

/* Section title (LIDÉ, NÁLADA, SOUNDTRACK DNE…) — sans 500 pro čitelnost */
.diary-section-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Section label v levém sloupci (MÍSTA, LETY) — totéž jako field-label */
.diary-section-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-secondary);
  display: block;
  margin-bottom: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ============================================================
 * §4.6 Dropdown — generický seznam s search input
 *
 * Použití (struktura):
 *   <div class="diary-dropdown">
 *     <input class="diary-dropdown-search" placeholder="Hledat...">
 *     <button class="diary-dropdown-item">Položka 1</button>
 *     <button class="diary-dropdown-item" aria-selected="true">Položka 2</button>
 *   </div>
 * ============================================================ */
.diary-dropdown {
  position: absolute;
  background: var(--paper);
  border: 0.5px solid var(--rule-default);
  border-radius: var(--radius-sm);
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-dropdown);
  min-width: 180px;
}

.diary-dropdown-search {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 0.5px solid var(--rule);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  outline: none;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1;
}
.diary-dropdown-search::placeholder {
  color: var(--ink-quaternary);
  font-style: italic;
}

.diary-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  transition: background .12s;
}
.diary-dropdown-item:hover {
  background: rgba(184, 144, 47, 0.08);   /* gold tint */
}
.diary-dropdown-item[aria-selected="true"] {
  background: rgba(184, 144, 47, 0.08);
}
.diary-dropdown-item:focus-visible {
  outline: none;
  background: rgba(184, 144, 47, 0.12);
}
.diary-dropdown-item--empty {
  color: var(--ink-quaternary);
  font-style: italic;
  cursor: default;
}
.diary-dropdown-item--empty:hover {
  background: transparent;
}

/* ============================================================
 * §3.1 + §3.2 Diary card wrapper + header
 *
 * Aplikuje se na modal-box (`.day-modal-box.diary-card`) a header
 * (`<header class="diary-card-header">`).
 *
 * Existující .day-modal-box má svoje paddingy a max-width — třída
 * .diary-card přidá knižní vzhled (paper bg, ostré rohy, tenká linie).
 * ============================================================ */

/* §3.1 Wrapper — cards je zaplý jen v rámci modal boxu, nepřebíjí
   .day-modal centrovací overlay */
.day-modal-box.diary-card {
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--rule-default);
  box-shadow: var(--shadow-card);
}

/* §3.2 Header — bez šedivé linky pod citátem */
.diary-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: 0;
  background: transparent;
}
.diary-card-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Datum pill (eyebrow) — sans 11px UPPERCASE 0.12em */
.diary-card-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border: 0.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
  white-space: nowrap;
}

/* Den v roce — pod eyebrow pillem, serif italic */
.diary-card-day-of-year {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-tertiary);
  margin-left: 12px;
  vertical-align: baseline;
}

/* Citát — serif italic 14px */
.diary-card-quote {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-secondary);
  margin: 0;
  /* allow wrapping — author stays inline with last line of quote */
}
.diary-card-quote-text {
  /* italic comes from .diary-card-quote */
}
/* Autor — sjednocený s citátem (serif italic) */
.diary-card-quote-author {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-secondary);
  margin-left: 8px;
  white-space: nowrap;
  vertical-align: baseline;
}

/* Close button — 32×32 round, 0.5px border */
.diary-card-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0.5px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-secondary);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.diary-card-close:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-canvas);
}
.diary-card-close:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--shadow-focus);
}
/* Hide existing .modal-close styling when used inside .diary-card */
.day-modal-box.diary-card .modal-close { display: none; }

/* Mobile §3.4 — < 720 px: smaller padding/header */
@media (max-width: 720px) {
  .diary-card-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  .diary-card-eyebrow {
    font-size: 10px;
    padding: 5px 12px;
  }
}

/* ============================================================
 * §4 PhotoColumn (statická) — bod 4 ze §9.4
 *
 * Aplikuje se na .modal-photo wrapper s přidanou třídou
 * .diary-photo-column. Photo frame je čtverec 1:1, knižní vzhled.
 * Stávající drag/zoom focus editor zachován — jen vizuálně knižní.
 * ============================================================ */

/* Sloupec — sticky desktop */
@media (min-width: 720px) {
  .diary-photo-column {
    position: sticky;
    top: 36px;
    align-self: start;
  }
}

/* Photo frame — čtverec, knižní paper-tinted bg, ostré rohy */
.diary-photo-column .focus-editor.diary-photo-frame {
  aspect-ratio: 1 / 1;
  background: var(--paper-tinted);
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  max-width: 260px;
  position: relative;
  display: block;
}
.diary-photo-column .focus-editor.diary-photo-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* × button to remove cover photo (only visible on hover, edit mode) */
.diary-photo-column .focus-editor.diary-photo-frame > .cover-rm {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
  z-index: 5;
}
.diary-photo-column .focus-editor.diary-photo-frame:hover > .cover-rm {
  opacity: 1;
}
.diary-photo-column .focus-editor.diary-photo-frame > .cover-rm:hover {
  background: rgba(184, 50, 50, 0.85);
}
/* Pointer cursor on filled thumbs (signals click-to-promote) */
.diary-photo-column .photo-thumb.filled {
  cursor: pointer;
  position: relative;
}
.diary-photo-column .photo-thumb.filled::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: border-color .15s;
  pointer-events: none;
}
.diary-photo-column .photo-thumb.filled:hover::after {
  border-color: var(--accent-gold, #b8902f);
}
/* Hide × on cover photo when not auth'd (read-only flip card) */
body:not(.edit-mode) .diary-photo-column .focus-editor > .cover-rm {
  display: none;
}
/* Drag & drop reordering — visual states */
.diary-photo-column .photo-thumb.filled[draggable="true"] {
  cursor: grab;
}
.diary-photo-column .photo-thumb.filled[draggable="true"]:active {
  cursor: grabbing;
}
.diary-photo-column .photo-thumb.is-dragging {
  opacity: 0.4;
}
.diary-photo-column .photo-thumb.drag-over,
.diary-photo-column .focus-editor.drag-over {
  outline: 3px dashed var(--accent-gold, #b8902f);
  outline-offset: -3px;
  background: rgba(184, 144, 47, 0.08);
}
.diary-photo-column .focus-editor.drag-over::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(184, 144, 47, 0.10);
  pointer-events: none;
  z-index: 4;
}
.diary-photo-column .empty-photo.diary-photo-frame {
  aspect-ratio: 1 / 1;
  background: var(--paper-tinted);
  border-radius: 0;
  width: 100%;
  max-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-quaternary);
}

/* Thumb strip — 3 sloty 56×56 (zvětšeno z 36) */
.diary-photo-column .photo-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  max-width: 260px;
  flex-wrap: nowrap;
}
.diary-photo-column .photo-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: outline-color .15s, background .15s;
}
.diary-photo-column .photo-thumb.filled {
  background-color: var(--paper-tinted);
}
.diary-photo-column .photo-thumb.filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.diary-photo-column .photo-thumb.filled.active {
  outline: 1.5px solid var(--ink);
  outline-offset: -1.5px;
}
.diary-photo-column .photo-thumb.add-thumb {
  border: 0.5px dashed var(--rule-strong);
  background: transparent;
  color: var(--ink-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.diary-photo-column .photo-thumb.add-thumb:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-canvas);
}
.diary-photo-column .photo-thumb.add-thumb .add-plus {
  font-size: 22px;
  font-weight: 200;
  line-height: 1;
}
.diary-photo-column .photo-thumb .thumb-rm {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 11px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  border: 0;
}
.diary-photo-column .photo-thumb.filled:hover .thumb-rm {
  opacity: 1;
}

/* Focus controls — knižní zoom slider */
.diary-photo-column .focus-controls {
  margin-top: 12px;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.diary-photo-column .focus-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: 500;
  flex-shrink: 0;
}
.diary-photo-column .focus-hint {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-tertiary);
  margin-top: 6px;
  text-align: center;
  max-width: 260px;
}

/* Photo actions row — pill buttons (méně dominantní než původní) */
.diary-photo-column .photo-actions {
  margin-top: 14px;
  max-width: 260px;
  gap: 6px;
  flex-wrap: wrap;
}
.diary-photo-column .modal-upload,
.diary-photo-column .modal-delete,
.diary-photo-column .modal-delete-photos,
.diary-photo-column .photo-action-danger {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  padding: 8px 14px;
  border: 0.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.diary-photo-column .modal-upload:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-canvas);
}
.diary-photo-column .modal-delete:hover,
.diary-photo-column .modal-delete-photos:hover,
.diary-photo-column .photo-action-danger:hover {
  border-color: #c33;
  color: #c33;
  background: rgba(204, 51, 51, 0.05);
}

/* Auto-lokace caption (§4.3) — input restylován jako serif italic řádek
   pod fotkou. Stále editovatelný (user wybral A: edit-friendly). */
.diary-photo-column .modal-place {
  margin-top: 16px;
  max-width: 260px;
  /* Menší mezera mezi řádky (location + place name + type) — bylo 6px */
  gap: 0;
}
.diary-photo-column .modal-place .place-row {
  margin-bottom: 0;
}
/* Auto-lokace — sjednocená s místem (sans 13px **bold**), kompaktní řádek */
.diary-photo-column .modal-place .place-input[data-mf="location"] {
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--rule-default);
  border-radius: 0;
  padding: 6px 0;
  width: 100%;
  outline: none;
  line-height: 1.3;
  transition: border-color .15s;
}
.diary-photo-column .modal-place .place-input[data-mf="location"]:focus {
  border-bottom-color: var(--ink);
}
/* Place name input — kompaktní řádek */
.diary-photo-column .modal-place .place-input.place-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--rule-default);
  border-radius: 0;
  padding: 6px 0;
  margin-top: 0;
  width: 100%;
  outline: none;
  line-height: 1.3;
  transition: border-color .15s;
}
.diary-photo-column .modal-place .place-input.place-name::placeholder {
  color: var(--ink-secondary);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
}
.diary-photo-column .modal-place .place-input.place-name:hover {
  border-bottom-color: var(--rule-strong);
}
.diary-photo-column .modal-place .place-input.place-name:focus {
  border-bottom-color: var(--ink);
}

/* Place type select — knižní s custom chevron, kompaktní řádek */
.diary-photo-column .modal-place .place-type-row {
  margin-top: 0;
}
.diary-photo-column .modal-place .place-type-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-secondary);
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1L5 5L9 1' fill='none' stroke='%23000' stroke-opacity='0.45' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px 6px;
  border: none;
  border-bottom: 0.5px solid var(--rule-default);
  border-radius: 0;
  padding: 6px 22px 6px 0;
  width: 100%;
  outline: none;
  cursor: pointer;
  line-height: 1.3;
  transition: border-color .15s, color .15s;
}
.diary-photo-column .modal-place .place-type-select:hover {
  border-bottom-color: var(--rule-strong);
  color: var(--ink);
}
.diary-photo-column .modal-place .place-type-select:focus {
  border-bottom-color: var(--ink);
  color: var(--ink);
}
.diary-photo-column .modal-place .place-type-select::-ms-expand {
  display: none;
}
/* Když je place_type prázdný — italický placeholder cit (— vyber typ místa —) */
.diary-photo-column .modal-place .place-type-select.is-empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-secondary);
  font-size: 13px;
}

/* ============================================================
 * §4.4 Místa — § 5 ze §9.4 (variant A: edit-friendly select)
 *
 * Stávající select pattern zachovaný (uživatel zvolil A).
 * Vizuálně přepsáno do knižního stylu — sans 13px name,
 * serif italic 10px type, 0.5px divider, dashed pill „+".
 * Extra places dědí stejné styly přes kaskádu.
 * ============================================================ */

/* Extra places — bez extra mezery, navazuje přímo na primární místo */
.diary-photo-column .extra-places { margin-top: 0 !important; gap: 0 !important; }
.diary-photo-column .extra-places .modal-place.extra {
  margin-top: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  gap: 0 !important;
  position: relative;
}
/* Mezi extras: žádná mezera (jen border-bottom z place-row jako separator) */
.diary-photo-column .extra-places .modal-place.extra + .modal-place.extra {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.diary-photo-column .extra-places .modal-place.extra .place-input.place-name {
  padding-right: 24px;   /* leave room for × */
}
.diary-photo-column .extra-places .extra-place-x {
  position: absolute;
  top: 8px;
  right: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--ink-quaternary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
}
.diary-photo-column .extra-places .extra-place-x:hover {
  color: #c33;
}

/* „+ Další místo" pill — knižní dashed (mirror diary-add-pill) */
.diary-photo-column .add-place-btn {
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0.5px solid var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.diary-photo-column .add-place-btn:hover {
  background: var(--paper-canvas);
  border-color: var(--ink);
  color: var(--ink);
}

/* ============================================================
 * §4.7 Lety — bod 6 ze §9.4
 *
 * Stávající struktura zachována (extras-section.flights-section
 * + extras-add-link). Vizuálně sjednoceno s diary-add-pill.
 * ============================================================ */

/* Section label „✈️ Lety" — kompaktnější mezery (bez border-top) */
.diary-photo-column .flights-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0;
}
.diary-photo-column .flights-section .extras-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 2px;
  display: block;
}
/* Flight rows — menší vertical padding mezi řádky */
.diary-photo-column .flight-row {
  padding: 2px 0 !important;
}

/* Existing flight rows */
.diary-photo-column .modal-flights {
  margin-bottom: 10px;
}

/* „+ Přidat let" pill */
.diary-photo-column .add-flight-btn,
.diary-photo-column .extras-add-link {
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0.5px solid var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.diary-photo-column .add-flight-btn:hover,
.diary-photo-column .extras-add-link:hover {
  background: var(--paper-canvas);
  border-color: var(--ink);
  color: var(--ink);
}

/* ============================================================
 * Doplňující údaje (extras-section, modal-extras) — knižní vzhled
 * Toto je collapsed sekce „DOPLŇUJÍCÍ ÚDAJE (VOLITELNÉ)" pod fotkou.
 * Spec §5.4 (Den v číslech) pro tuto sekci přijde v bodě 9.
 * Zatím jen restylujeme okraje + label do knižního stylu.
 * ============================================================ */
.diary-photo-column .modal-extras {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 0;
  background: transparent;
}
.diary-photo-column .modal-extras .extras-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 12px;
  display: block;
}
.diary-photo-column .modal-extras .extras-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--rule);
  min-height: 32px;
}
.diary-photo-column .modal-extras .extras-row:last-child {
  border-bottom: 0;
}
.diary-photo-column .modal-extras .extras-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  flex-shrink: 0;
}
.diary-photo-column .modal-extras .extras-value {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  text-align: right;
  flex: 1;
  min-width: 0;
}

/* ============================================================
 * §4.7 Flight rows — knižní vzhled (existing flight-row override)
 *
 * Stávající styling (style-vN.css) použiv šedé pozadí + border box.
 * Override pro .diary-photo-column kontext — borderless, divider only.
 * ============================================================ */

.diary-photo-column .modal-flights {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Override existing .flight-row inside diary-photo-column */
.diary-photo-column .flight-row {
  display: grid;
  grid-template-columns: 72px 44px 14px 44px 1fr 20px;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--rule);
  border-radius: 0;
}
.diary-photo-column .flight-row:last-child {
  border-bottom: 0.5px solid var(--rule);
}

/* Inputs — borderless, knižní */
.diary-photo-column .flight-row input {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid transparent;
  border-radius: 0;
  padding: 4px 2px;
  width: 100%;
  min-width: 0;
  outline: none;
  transition: border-color .15s;
}
.diary-photo-column .flight-row input:hover {
  border-bottom-color: var(--rule-default);
}
.diary-photo-column .flight-row input:focus {
  border-bottom-color: var(--ink);
}

.diary-photo-column .flight-row .fnum {
  font-weight: 400;
  letter-spacing: 0.04em;
}
.diary-photo-column .flight-row .ffrom,
.diary-photo-column .flight-row .fto {
  text-align: center;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: uppercase;
}
.diary-photo-column .flight-row .farrow {
  text-align: center;
  color: var(--ink-quaternary);
  font-size: 12px;
}
.diary-photo-column .flight-row .fkm {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--accent-gold);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* × remove button — minimální ghost */
.diary-photo-column .flight-row .frm {
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-quaternary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  justify-self: end;
}
.diary-photo-column .flight-row .frm:hover {
  color: #c33;
  background: transparent;
  border: 0;
}

/* ============================================================
 * §5 ContentColumn — pravý sloupec (body 7+8 ze §9.4)
 *
 * Aplikuje se na .modal-fields s přidanou třídou .diary-content-column.
 * Sekce mezi sebou s gap 32px (spec §5).
 * ============================================================ */

.diary-content-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Override: stávající .modal-fields nemá vnitřní gap, my dáváme svůj */
.diary-content-column.modal-fields > label,
.diary-content-column.modal-fields > input,
.diary-content-column.modal-fields > textarea,
.diary-content-column.modal-fields > select,
.diary-content-column.modal-fields > .modal-chips {
  /* Stará struktura — ponecháváme pro custom fields v body 12 */
  margin: 0;
}

/* ─── §5.1 StorySection — Popisek + Příběh + counter (bez nadpisu) ─── */
.diary-story-section {
  display: flex;
  flex-direction: column;
  gap: 8px;          /* menší mezera mezi Popisek/counter a Příběh dne (bylo 16px) */
  margin-bottom: 6px;/* + trocha prostoru před Lidé (bylo -16px, vypadalo to být na čáře) */
}
.diary-content-column .diary-field {
  display: flex;
  flex-direction: column;
}

/* Field label + helper — sans 500 pro čitelnost */
.diary-content-column .diary-field-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
  line-height: 1.3;
}
/* Story field — stejně malá mezera jako u ostatních */
.diary-content-column .diary-field:has(.diary-field-textarea-story) .diary-field-label {
  margin-bottom: 2px;
}
.diary-content-column .diary-field-helper {
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-tertiary);
  line-height: 1;
}

/* Caption input — single line, max 40 znaků */
.diary-content-column .diary-field-input {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--rule-default);
  border-radius: 0;
  width: 100%;
  padding: 4px 0 10px;
  outline: none;
  box-shadow: none;
  transition: border-color .15s;
}
.diary-content-column .diary-field-input:hover {
  border-bottom-color: var(--rule-strong);
}
.diary-content-column .diary-field-input:focus {
  border-bottom-color: var(--ink);
  box-shadow: none;
}

/* Place type hint — small serif italic note below the place type select */
.place-type-hint,
.diary-content-column .place-type-hint {
  margin: 6px 0 14px;
  padding: 0 2px;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.4;
  letter-spacing: 0;
  list-style: none;
}
.place-type-hint::before,
.diary-content-column .place-type-hint::before { content: none !important; display: none !important; }

/* Gratitude — 3 narrow rows (compact, less padding than story textarea) */
.diary-content-column .gratitude-field .gratitude-line {
  padding: 3px 0 6px;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 2px;
}
.diary-content-column .gratitude-field .gratitude-line:last-child { margin-bottom: 0; }
.diary-content-column .gratitude-field .gratitude-line::placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-quaternary, rgba(0,0,0,0.32));
  font-size: 12px;
}

/* Char counter — serif italic 10px ink-quaternary, vpravo */
.diary-content-column .diary-char-counter {
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  color: var(--ink-quaternary);
  margin-top: 4px;
  text-align: right;
  line-height: 1;
}

/* Story textarea — knižní borderless, min-height 80px (spec §5.1) */
.diary-content-column .diary-field-textarea-story {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--rule-default);
  border-radius: 0;
  width: 100%;
  padding: 4px 0 6px 0;
  resize: vertical;
  outline: none;
  box-shadow: none;
  min-height: 80px;
  transition: border-color .15s;
  text-align: left;
  direction: ltr;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  overflow-y: auto;
}
.diary-content-column .diary-field-textarea-story:hover {
  border-bottom-color: var(--rule-strong);
}
.diary-content-column .diary-field-textarea-story:focus {
  border-bottom-color: var(--ink);
}
/* "modal-note" textarea má jen 2 rows + nižší min-height */
.diary-content-column textarea.modal-note.diary-field-textarea-story {
  min-height: 50px;
}

/* ─── §5.2 PeopleSection ─── */
.diary-content-column .diary-section {
  display: flex;
  flex-direction: column;
}
.diary-content-column .diary-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
/* People chip override — knižní pill */
.diary-content-column .diary-chip-row .chip,
.diary-content-column .diary-chip-row .diary-chip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  background: var(--ink);
  color: var(--ink-on-ink);
  border: 0.5px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s;
}
.diary-content-column .diary-chip-row .chip-x {
  background: transparent;
  border: 0;
  color: var(--ink-on-ink);
  opacity: 0.6;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.diary-content-column .diary-chip-row .chip-x:hover {
  opacity: 1;
}

/* Person input — knižní borderless */
.diary-content-column .diary-person-input {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--rule-default);
  border-radius: 0;
  padding: 8px 0;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.diary-content-column .diary-person-input::placeholder {
  color: var(--ink-secondary);
  font-family: var(--font-serif);
  font-style: italic;
}
.diary-content-column .diary-person-input:hover {
  border-bottom-color: var(--rule-strong);
}
.diary-content-column .diary-person-input:focus {
  border-bottom-color: var(--ink);
}

/* ─── §5.3 Mood + Životní událost — 2col grid ─── */
.diary-mood-event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .diary-mood-event-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Diary select (pro Nálada + Životní událost) — knižní s custom chevron */
.diary-content-column .diary-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1L5 5L9 1' fill='none' stroke='%23000' stroke-opacity='0.45' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px 6px;
  border: 0;
  border-bottom: 0.5px solid var(--rule-default);
  border-radius: 0;
  padding: 8px 22px 8px 0;
  width: 100%;
  outline: none;
  cursor: pointer;
  line-height: 1.3;
  transition: border-color .15s, color .15s;
}
.diary-content-column .diary-select:hover {
  border-bottom-color: var(--rule-strong);
}
.diary-content-column .diary-select:focus {
  border-bottom-color: var(--ink);
}
/* Když select je prázdný (— vyber —, — žádná —): italic + výraznější barva */
.diary-content-column .diary-select.is-empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-secondary);
  font-size: 13px;
}
.diary-content-column .diary-select::-ms-expand {
  display: none;
}

/* Override: stávající modal-fields > label + input mezery se nehodí, ale
   diary-section používá h2 místo label — sjednoceno přes .diary-section-title */
.diary-content-column .diary-section .diary-section-title {
  margin: 0 0 2px;
}
/* PEOPLE / LIDÉ sekce — větší mezera mezi nadpisem a chipy se jmény (jinak se lepí na chipy) */
.diary-content-column .diary-section .diary-section-title + .diary-chip-row {
  margin-top: 10px;
}

/* Song + Book sekce uvnitř content column — restyle */
.diary-content-column .song-search-wrap input,
.diary-content-column .book-search-wrap input,
.diary-content-column .custom-field-input.diary-field-input {
  font-family: var(--font-sans);
  font-size: 13px;
  background: transparent;
  border: 0;
  /* Border-bottom jen na hover/focus — nevytvářet zbytečnou čáru pod prázdným inputem */
  border-bottom: 0.5px solid transparent;
  border-radius: 0;
  padding: 8px 0;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.diary-content-column .song-search-wrap input::placeholder,
.diary-content-column .book-search-wrap input::placeholder,
.diary-content-column .custom-field-input.diary-field-input::placeholder {
  color: var(--ink-secondary);
  font-family: var(--font-serif);
  font-style: italic;
}
.diary-content-column .song-search-wrap input:hover,
.diary-content-column .book-search-wrap input:hover,
.diary-content-column .custom-field-input.diary-field-input:hover {
  border-bottom-color: var(--rule-strong);
}
.diary-content-column .song-search-wrap input:focus,
.diary-content-column .book-search-wrap input:focus,
.diary-content-column .custom-field-input.diary-field-input:focus {
  border-bottom-color: var(--ink);
}

/* ============================================================
 * §5.4 NumbersSection — Den v číslech (knižní stats-list)
 * Aplikuje se na <section class="diary-numbers-section">.
 * ============================================================ */

.diary-numbers-section .diary-stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.diary-numbers-section .diary-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 4px 0;
  border-bottom: 0.5px solid var(--rule);
}
.diary-numbers-section .diary-stats-row:first-child {
  border-top: 0.5px solid var(--rule);
}

/* Stats label — sans 11px UPPERCASE 0.10em (čitelný) */
.diary-numbers-section .diary-stats-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  flex-shrink: 0;
  line-height: 1;
}

/* Stats value — sans 13px regular, ink (zmenšeno z 14 aby se vešly hodnoty) */
.diary-numbers-section .diary-stats-value {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

/* Em-dash separátor a šipka */
.diary-numbers-section .diary-stats-dash,
.diary-numbers-section .diary-stats-arrow {
  color: var(--ink-quaternary);
  margin: 0 2px;
  font-weight: 400;
}

/* Muted text (— sync Oura, — chybí GPS) — serif italic */
.diary-numbers-section .diary-stats-muted {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-quaternary);
  font-weight: 400;
}

/* Inline „Načíst" tlačítko (počasí) */
.diary-numbers-section .diary-stats-action {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  padding: 4px 10px;
  border: 0.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.diary-numbers-section .diary-stats-action:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-canvas);
}

/* Stats input (Váha, Poznámka) — borderless inline */
.diary-numbers-section .diary-stats-input {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid transparent;
  border-radius: 0;
  padding: 4px 2px;
  text-align: right;
  width: 140px;
  outline: none;
  line-height: 1.2;
  transition: border-color .15s;
  font-variant-numeric: tabular-nums;
}
.diary-numbers-section .diary-stats-input::placeholder {
  color: var(--ink-secondary);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
}
.diary-numbers-section .diary-stats-input:hover {
  border-bottom-color: var(--rule-default);
}
.diary-numbers-section .diary-stats-input:focus {
  border-bottom-color: var(--ink);
}
.diary-numbers-section .diary-stats-row input.diary-stats-input[data-mf="health_note"] {
  width: auto;
  min-width: 60%;
  flex: 1;
}

/* Skrytí duplicitních dat v levém sloupci — vše je teď v Den v číslech */
.diary-photo-column .modal-extras {
  display: none;
}

/* ============================================================
 * §5.6 + §5.7 MediaAssetSection — Soundtrack + Kniha (sdílený pattern)
 * media-row: art (36×36 album / 36×48 book) + meta + remove
 * ============================================================ */

.diary-media-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.diary-media-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--rule);
  list-style: none;
}
/* Poslední row bez čáry — jinak vzniká „zbytečná" čára pod song/book card */
.diary-media-row:last-child {
  border-bottom: 0;
}

.diary-media-art {
  width: 36px;
  height: 36px;
  background-color: var(--paper-tinted);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ink-quaternary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.diary-media-art--book {
  width: 36px;
  height: 48px;
}

.diary-media-meta {
  flex: 1;
  min-width: 0;
}
.diary-media-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diary-media-artist {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-secondary);
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diary-media-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
  transition: border-color .15s;
}
.diary-media-link:hover {
  border-bottom-color: var(--rule-strong);
}

/* Play preview button (jen Soundtrack) */
.diary-media-play {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0.5px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.diary-media-play:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-canvas);
}

.diary-media-remove {
  background: transparent;
  border: 0;
  color: var(--ink-quaternary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .15s;
}
.diary-media-remove:hover {
  color: #c33;
}

/* Skrytí starých song-card / book-card */
.diary-content-column .song-picked .song-card,
.diary-content-column .book-picked .book-card {
  display: none;
}

/* ============================================================
 * §5.8 AutoSaveIndicator — gold dot + "Uloženo · HH:MM"
 * data-state: idle / saving (puls) / saved (gold) / error (red)
 * ============================================================ */

.diary-autosave-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-quaternary);
  padding-top: 12px;
  border-top: 0;
  min-height: 1.2em;
  margin-top: 8px;
}
.diary-autosave-indicator[data-state="idle"] {
  visibility: hidden;
}
.diary-autosave-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  flex-shrink: 0;
}
.diary-autosave-indicator[data-state="saving"] .diary-autosave-dot {
  animation: diaryAutosavePulse 1.5s ease-in-out infinite;
}
.diary-autosave-indicator[data-state="error"] .diary-autosave-dot {
  background: #c33;
}
@keyframes diaryAutosavePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.2); }
}

/* ============================================================
 * Statistiky (page-stats) — knižní redesign
 * Override stávajících .stat-card / h3 / hero / charty.
 * ============================================================ */

.page-stats .stats-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 32px;
}
/* Zaručit přesně 3 sloupce vlevo→pravo bez ohledu na šířku obsahu (long text netlačí grid).
   minmax(0, 1fr) povoluje sloupcům zmenšit se pod content size → obsah uvnitř se ořízne/zalomí. */
.page-stats .stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.page-stats .stat-card {
  min-width: 0;
  overflow: hidden;
}
.page-stats .stats-grid {
  gap: 28px;
}

/* Responsivní breakpointy — pravidlo `repeat(3, ...) !important` výše jinak
   přebíjí media queries ve style.css a na mobilu/tabletu nechá 3 sloupce
   (rozhozené karty). Proto musí mít vlastní !important override na breakpointech. */
@media (max-width: 1100px) {
  .page-stats .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  .page-stats .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .page-stats .stat-card.span-2,
  .page-stats .stat-card.span-3 {
    grid-column: 1 / -1 !important;
  }
  .page-stats .stats-wrap {
    padding: 24px 14px;
  }
  .page-stats .stat-card {
    padding: 22px 18px;
    min-height: auto;
  }
}

/* Stat-card — knižní border, ostré rohy */
.page-stats .stat-card {
  background: var(--paper);
  border: 0.5px solid var(--rule-default);
  border-radius: var(--radius-sm);
  padding: 28px 32px;
  /* Sjednocená min-výška — aby boxy v řadě (Soundtrack/Filmy/Knihy, Lety/Vděčnost/Životní události) byly stejné */
  min-height: 380px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
/* Span-3 karty (Mapa, Aktivita, Soundtrack...) — bez min-height (samy stretche obsah) */
.page-stats .stat-card.span-3 {
  min-height: auto;
}

/* H3 nadpis — sjednoceno s diary-section-title */
.page-stats .stat-card h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.3;
  display: block;
}
.page-stats .stat-card h3 + .stat-card-hint {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  margin: -10px 0 18px;
  line-height: 1.4;
}

/* Stats hero — knižní big year + sub stats */
.page-stats .stats-hero {
  background: var(--paper);
  border: 0.5px solid var(--rule-default);
  border-radius: var(--radius-sm);
  padding: 36px 40px;
  box-shadow: none;
}
.page-stats .stats-hero .hero-year {
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.page-stats .stats-hero .hero-stat strong {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.page-stats .stats-hero .hero-stat span {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-secondary);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Mapa — elegantní rámeček, kulaté rohy, jemný stín, výrazné markery */
.page-stats .map {
  height: 420px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* Marker glow — soft halo around each circleMarker (yellow markers especially) */
.page-stats .map .leaflet-interactive {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
  transition: filter .2s ease;
}
.page-stats .map .leaflet-interactive:hover {
  filter: drop-shadow(0 2px 6px rgba(255, 214, 10, 0.5));
}
/* Popup — clean serif feel */
.page-stats .map .leaflet-popup-content {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink, #1a1a1a);
}
.page-stats .map .leaflet-popup-content strong {
  font-weight: 600;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
}
.page-stats .map .leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* ─── Heatmap — GitHub style: 7 dní × týdny (cool grey, ne béžová) ─── */
.page-stats .heatmap {
  margin-bottom: 0;
}
.page-stats .hm-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-x: auto;
}
.page-stats .hm-row {
  display: grid;
  grid-template-columns: 28px repeat(var(--hm-weeks, 53), 1fr);
  gap: 3px;
  align-items: center;
}
.page-stats .hm-row.hm-header {
  margin-bottom: 4px;
}
.page-stats .hm-corner {
  /* prázdný roh nahoře vlevo */
}
.page-stats .hm-month-cell {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1;
}
.page-stats .hm-dow-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
  padding-right: 4px;
  line-height: 1;
}
.page-stats .hm-cell {
  aspect-ratio: 1;
  min-width: 14px;
  background: #F0F0F0;        /* neutral šedá */
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  cursor: default;
  transition: transform .12s, background .12s;
  /* Color emoji font stack — zaručí barevné Apple/Segoe/Noto emoji */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.page-stats .hm-cell.has-photo {
  background: #DCDCDC;        /* tmavší šedá */
}
.page-stats .hm-cell.has-photo:hover {
  transform: scale(1.6);
  z-index: 2;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.page-stats .hm-cell.empty-month {
  background: transparent;
  border: 0;
}

/* Stary hm-month-label (legacy) — schovat když je nový hm-grid */
.page-stats .hm-grid .hm-month-label {
  display: none;
}

/* Ranked list (Top místa) — šedé boxy stejně jako lidé */
.page-stats .ranked-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-stats .rank-item {
  display: grid !important;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px !important;
  background: #F0F0F0;
  border: 0 !important;
  border-radius: 2px;
  transition: background .15s;
}
.page-stats .rank-item:hover {
  background: #DCDCDC;
}
.page-stats .rank-num {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Stat summary */
.page-stats .stat-summary {
  border-top: 0.5px solid var(--rule);
  padding-top: 16px;
  margin-top: 16px;
}
.page-stats .stat-summary strong {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.page-stats .stat-summary span {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-secondary);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
}

/* Oura horní lišta — kompaktní header s celkovými metrikami nad chartem */
.page-stats .oura-header-bar {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  gap: 12px;
  padding: 10px 4px 14px;
  margin: -4px 0 12px;
  border-bottom: 1px solid var(--rule, #e8e3d5);
  flex-wrap: wrap;
}
.page-stats .oura-header-bar > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}
.page-stats .oura-header-bar strong {
  font-family: var(--font-serif);
  font-size: 11px !important;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.2px;
  line-height: 1.1;
  display: block;
  white-space: nowrap;
}
.page-stats .oura-header-bar span {
  font-family: var(--font-sans);
  font-size: 7px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute, #888);
  margin-top: 3px;
}

/* ─── UNIFIED row design across Lety / Vděčnost / Životní události ─── */
.page-stats .stat-card .flight-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--rule);
  font-size: 11px;
  flex-wrap: nowrap;
}
.page-stats .stat-card .flight-item .fdate {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 78px;
  white-space: nowrap;
}
.page-stats .stat-card .flight-item .froute {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.01em;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
  line-height: 1.4;
}
.page-stats .stat-card .flight-item .fdur {
  display: none;
}
.page-stats .stat-card .flight-item .fkm {
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 56px;
  text-align: right;
}

/* Summary numbers — sjednocená výška, aby řádky pod ní začínaly stejně ve všech 6 boxech */
.page-stats .stat-card .stat-summary {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 18px;
  min-height: 64px;
  align-content: flex-start;
  margin-bottom: 14px;
  grid-template-columns: none !important;
}
.page-stats .stat-card .stat-summary > div strong {
  font-size: 22px;
}
/* Země — chip layout pod mapou (uvnitř Mapa cest card) */
.page-stats .map-countries {
  margin-top: 14px;
}
.page-stats .map-countries-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-stats .map-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f0ede6;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  line-height: 1;
  transition: background .15s;
}
.page-stats .map-country-chip:hover {
  background: #e5e1d6;
}
.page-stats .map-country-flag {
  font-size: 14px;
  line-height: 1;
}
.page-stats .map-country-name {
  font-weight: 500;
}
.page-stats .map-country-count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 10.5px;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Aktivita v roce — odstranit prázdný summary gap (žádné stats už pod heatmapou nejsou) */
.page-stats .stat-card.no-summary-gap .stat-summary {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}
/* Lety: "Celkem km" zarovnaný doprava (nad sloupcem km v listu) */
.page-stats .stat-card .stat-summary .sum-right {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

/* Scrollable lists — stejný styl jako Top místa (.ranked-list) */
.page-stats .gratitude-list {
  margin-top: 8px;
}
.page-stats .gratitude-recent,
.page-stats .events-recent,
.page-stats .flights-recent,
.page-stats .song-list-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.page-stats .gratitude-recent::-webkit-scrollbar,
.page-stats .events-recent::-webkit-scrollbar,
.page-stats .flights-recent::-webkit-scrollbar,
.page-stats .song-list-scroll::-webkit-scrollbar {
  width: 6px;
}
.page-stats .gratitude-recent::-webkit-scrollbar-track,
.page-stats .events-recent::-webkit-scrollbar-track,
.page-stats .flights-recent::-webkit-scrollbar-track,
.page-stats .song-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.page-stats .gratitude-recent::-webkit-scrollbar-thumb,
.page-stats .events-recent::-webkit-scrollbar-thumb,
.page-stats .flights-recent::-webkit-scrollbar-thumb,
.page-stats .song-list-scroll::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 3px;
}
.page-stats .gratitude-recent::-webkit-scrollbar-thumb:hover,
.page-stats .events-recent::-webkit-scrollbar-thumb:hover,
.page-stats .flights-recent::-webkit-scrollbar-thumb:hover,
.page-stats .song-list-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ink-tertiary);
}
/* Letadlo ikona na flight křivce — žádné pozadí (Leaflet defaultně dává white bg na divIcon) */
.flight-airplane-icon {
  background: transparent !important;
  border: 0 !important;
}

/* Mapa — vrstva toggle (Vše / Místa / Lety) v pravém horním rohu */
.map-layer-toggle {
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
  padding: 3px;
  display: flex;
  gap: 2px;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
}
.map-layer-toggle .mlt-btn {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-secondary, #555);
  cursor: pointer;
  border-radius: 100px;
  transition: background .15s, color .15s;
  letter-spacing: 0.02em;
}
.map-layer-toggle .mlt-btn:hover { background: rgba(0,0,0,0.05); }
.map-layer-toggle .mlt-btn.is-active {
  background: var(--ink, #1a1a1a);
  color: #fff;
}

/* Vděčnost text — víceřádkové znění, ale jinak stejný design jako Lety/Životní události */
.page-stats .gratitude-recent .flight-item .froute {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Songs list */
.page-stats .songs-list .song-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-stats .songs-list .song-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--rule);
}
.page-stats .songs-list .song-cover {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.page-stats .songs-list .song-title {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-stats .songs-list .song-artist {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-secondary);
  margin-top: 2px;
}

/* Place types breakdown — každá skupina v šedém boxu (override .place-type-group) */
.page-stats .place-types-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.page-stats .place-type-group {
  background: #F0F0F0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  padding: 14px 16px !important;
  transition: background .15s;
}
.page-stats .place-type-group:hover {
  background: #DCDCDC !important;
}
.page-stats .place-type-group h4 {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
}
.page-stats .place-type-group h4 .pt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink, #1a1a1a);
}
.page-stats .place-type-group h4 .pt-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.page-stats .place-type-group h4 .pt-label {
  flex: 1;
}
.page-stats .place-type-group .pt-total {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-tertiary) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}
.page-stats .place-type-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-stats .place-type-list li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 0 !important;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.page-stats .place-type-list .pt-name {
  color: var(--ink);
}
.page-stats .place-type-list .pt-count {
  font-variant-numeric: tabular-nums;
  color: var(--ink-tertiary);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 11px;
}

/* Top nav v stats */
.page-stats .top {
  border-bottom: 0;
  background: var(--paper);
}

/* Songs columns — Top skladby vlevo, Top interpreti vpravo (2col grid) */
.page-stats .songs-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 700px) {
  .page-stats .songs-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.page-stats .songs-col h4 {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-secondary);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.page-stats .songs-col .song-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-stats .songs-col .song-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.page-stats .songs-col .song-count {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  flex-shrink: 0;
}

/* Scrollable single-column list for Soundtrack / Filmy / Knihy (scrollbar styles sjednoceny výše) */
.page-stats .song-list-scroll {
  list-style: none;
  margin: 0;
}
.page-stats .song-list-scroll .song-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--rule);
}
.page-stats .song-list-scroll .song-count {
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  flex-shrink: 0;
}
/* Custom fields stats wrapper — display: contents → karty se účastní stats-grid */
.page-stats #customFieldsStats {
  display: contents;
}

/* Datum v songs/movies/books — IDENTICKÝ design jako .fdate u letů */
/* Pevná šířka (width, ne min-width) aby všechny postery byly přesně v jednom sloupci pod sebou */
.page-stats .song-list-scroll .song-item-date {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  flex: 0 0 92px;
  width: 92px;
  white-space: nowrap;
}
.page-stats .song-list-scroll .song-item-cover {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  object-fit: cover;
}
.page-stats .song-list-scroll .song-item-cover.fallback {
  background: #f0ede6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: none;
}
.page-stats .song-list-scroll .song-item-info {
  flex: 1;
  min-width: 0;
}
.page-stats .song-list-scroll .song-item-title {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Custom fields s dlouhým textem (např. trasy v Misích) — povolit wrap, omezit na 2 řádky */
  min-width: 0;
}
/* Custom field values — plný wrap přes všechny řádky (žádný line-clamp), zachytit dlouhé trasy / seznamy v plné délce */
.page-stats #customFieldsStats .song-item-title {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
  display: block;
  line-height: 1.45;
}
/* Custom field row: datum na top + obsah dýchá víc řádků */
.page-stats #customFieldsStats .song-item {
  align-items: flex-start;
}
.page-stats .song-list-scroll .song-item-title a {
  color: inherit;
  text-decoration: none;
}
.page-stats .song-list-scroll .song-item-title a:hover {
  color: var(--accent-gold);
}
.page-stats .song-list-scroll .song-item-artist {
  font-family: var(--font-serif);
  font-size: 10.5px;
  font-style: italic;
  color: var(--ink-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stat-card s charts — pevná výška + responsive canvas */
.page-stats .stat-card canvas {
  max-width: 100%;
  height: auto !important;
}
.page-stats #stepsChart,
.page-stats #sleepChart {
  min-height: 200px;
}

/* ─── Top lidé — původní pill design, jen šedá barva místo béžové ─── */
.page-stats .person-tag {
  background: #F0F0F0 !important;
  border-color: transparent !important;
}
.page-stats .person-tag:hover {
  background: #DCDCDC !important;
  border-color: transparent !important;
}
.page-stats .person-tag.is-editable:hover {
  border-color: transparent !important;
}
.page-stats .person-tag.is-editable:hover .avatar {
  background: var(--ink) !important;
}
.page-stats .person-tag.is-editable:hover .avatar-photo {
  border-color: var(--ink) !important;
}

/* ─── Foto roku — knižní pill v photo-actions + ⭐ badge ─── */
.diary-photo-column .modal-favorite {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  padding: 8px 14px;
  border: 0.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.diary-photo-column .modal-favorite:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-canvas);
}
.diary-photo-column .modal-favorite.is-active {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(184, 144, 47, 0.05);
}
.diary-photo-column .modal-favorite.is-active:hover {
  background: rgba(184, 144, 47, 0.10);
}

/* ⭐ Favorite badge na day card v calendar gridu */
.day .favorite-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  z-index: 2;
  pointer-events: none;
}
.day-wrap.has-photo .day.is-year-favorite img {
  outline: 2px solid var(--accent-gold);
  outline-offset: -2px;
}

/* ─── Top nav — žádné ohraničení, jen text (knižní minimal) ─── */
.top .btn,
.top .btn.icon-btn,
.top .year-select,
.top .lang-toggle,
.top .nav a {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
}
.top .btn:hover,
.top .btn.icon-btn:hover,
.top .year-select:hover,
.top .lang-toggle:hover,
.top .nav a:hover {
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
}
/* Icon button (settings ⚙️) — bez borderu, bez kruhu, jen ikona */
.top .btn.icon-btn {
  width: auto !important;
  height: auto !important;
}

/* ─── Mapa — CartoDB Voyager, jemně tlumené pro vystoupení markerů ─── */
.page-stats .map .leaflet-tile-pane {
  opacity: 0.85;
  filter: saturate(1.1);
}

/* ─── Settings — danger section (delete account) ─── */
.settings-section.settings-section-danger {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.settings-section-danger .settings-section-title {
  color: #a02020;
}
.settings-danger-btn {
  background: transparent;
  color: #c33;
  border: 1px solid #d99;
  padding: 10px 18px;
  border-radius: 100px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.settings-danger-btn:hover {
  background: #fbeaea;
  color: #a02020;
  border-color: #c33;
}

/* ─── Sub-readonly mode (Model C: year locked) — hide edit affordances ─── */
body.sub-readonly .modal-upload,
body.sub-readonly .add-place-btn,
body.sub-readonly .extras-add-link,
body.sub-readonly .add-cf-btn,
body.sub-readonly .modal-delete-photos,
body.sub-readonly .modal-delete-day,
body.sub-readonly .photo-action-danger,
body.sub-readonly .year-bulk-upload-btn,
body.sub-readonly .year-empty-cta,
body.sub-readonly .bulk-upload-btn,
body.sub-readonly #bulkUploadBtn,
body.sub-readonly #addYearBtn {
  display: none !important;
}
body.sub-readonly .day-wrap.no-photo .day::after {
  /* hide the "+ add photo" pseudo-prompt in edit mode */
  content: none !important;
}
body.sub-readonly .modal-input,
body.sub-readonly .diary-field-input,
body.sub-readonly .diary-field-textarea-story,
body.sub-readonly .gratitude-line {
  pointer-events: none;
  background: #fafaf7 !important;
  color: #999 !important;
  cursor: not-allowed;
}

/* ─── Top místa scroll: 12 viditelných + scroll pro zbytek ─── */
.page-stats .ranked-list {
  max-height: calc(12 * 56px);
  overflow-y: auto;
  padding-right: 4px;
}
.page-stats .ranked-list::-webkit-scrollbar {
  width: 6px;
}
.page-stats .ranked-list::-webkit-scrollbar-track {
  background: transparent;
}
.page-stats .ranked-list::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 3px;
}
.page-stats .ranked-list::-webkit-scrollbar-thumb:hover {
  background: var(--ink-tertiary);
}

/* ─── Place type list (Restaurace, Hotely…) — scroll po N položkách ─── */
.page-stats .place-type-list {
  max-height: calc(8 * 28px);
  overflow-y: auto;
  padding-right: 4px;
}
.page-stats .place-type-list::-webkit-scrollbar {
  width: 4px;
}
.page-stats .place-type-list::-webkit-scrollbar-track {
  background: transparent;
}
.page-stats .place-type-list::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 2px;
}

/* ─── Foto roku — vpravo v hero s labelem ─── */
.page-stats .stats-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.page-stats .stats-hero .hero-stats {
  flex: 1 1 auto;
}
.page-stats .stats-hero .hero-fav-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  text-decoration: none;
  transition: transform .15s;
}
.page-stats .stats-hero .hero-fav-photo:hover {
  transform: scale(1.03);
}
.page-stats .stats-hero .hero-fav-photo img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
  background: var(--paper-tinted);
  outline: 1.5px solid var(--accent-gold);
  outline-offset: -1.5px;
  border-radius: 0;
}
.page-stats .stats-hero .hero-fav-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  line-height: 1;
}

/* ─── Serendipity — setkání po dlouhé době ─── */
.page-stats .serendipity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-stats .serendipity-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--rule);
}
.page-stats .serendipity-item:first-child {
  border-top: 0.5px solid var(--rule);
}
.page-stats .ser-person {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.page-stats .ser-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.page-stats .ser-arrow {
  color: var(--ink-quaternary);
}
.page-stats .ser-gap {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--accent-gold);
  margin-left: 8px;
}

/* ─── Settings — Jazyk picker ─── */
.settings-lang-row {
  display: flex;
  gap: 8px;
}
.settings-lang-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  padding: 8px 16px;
  border: 0.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.settings-lang-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.settings-lang-btn.is-active {
  background: var(--ink);
  color: var(--ink-on-ink);
  border-color: var(--ink);
}

/* ─── Drag & drop overlay (full-screen) ─── */
.diary-drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(184, 144, 47, 0.06);
  border: 4px dashed var(--accent-gold);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: diaryDropFadeIn .15s ease-out;
}
@keyframes diaryDropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.diary-drop-overlay .drop-hint {
  background: var(--paper);
  padding: 24px 32px;
  border: 0.5px solid var(--rule-strong);
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.diary-drop-overlay .drop-hint-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.diary-drop-overlay .drop-hint-sub {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-secondary);
}

/* Day cell drag-target highlight */
.day-wrap.drag-target {
  outline: 2px solid var(--accent-gold);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}
.day-wrap.drag-target::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 200;
  color: var(--accent-gold);
  background: rgba(184, 144, 47, 0.18);
  pointer-events: none;
  z-index: 3;
}

/* ─── Progress toast (sticky bottom-right) ─── */
.diary-progress-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  background: var(--paper);
  border: 0.5px solid var(--rule-strong);
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 9999;
  animation: diaryToastSlideIn .2s ease-out;
}
@keyframes diaryToastSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.diary-progress-toast .toast-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.diary-progress-toast .toast-progress {
  height: 2px;
  background: var(--rule);
  margin-bottom: 8px;
  overflow: hidden;
}
.diary-progress-toast .toast-progress-bar {
  height: 100%;
  background: var(--accent-gold);
  transition: width .25s ease-out;
}
.diary-progress-toast .toast-status {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diary-progress-toast.is-done .toast-progress-bar {
  background: var(--ink);
}

/* ─── Year empty state — shown when current year has 0 photos ─── */
.year-empty {
  margin: 28px auto 40px;
  max-width: 720px;
  padding: 56px 40px;
  text-align: center;
  background: var(--paper, #fafaf7);
  border: 1px dashed var(--rule, #d4cfc1);
  border-radius: 4px;
  position: relative;
}
.year-empty-eyebrow {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute, #8a8474);
}
.year-empty-title {
  font-family: var(--font-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 400;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin: 14px 0 18px;
  color: var(--ink, #1a1a1a);
}
.year-empty-sub {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 26px;
  color: var(--ink-soft, #4a443a);
}
.year-empty-hint {
  display: inline-block;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent-gold, #b8902f);
  padding: 8px 16px;
  border: 1px solid var(--accent-gold, #b8902f);
  border-radius: 100px;
  background: rgba(184, 144, 47, 0.04);
}
.year-empty-cta {
  display: inline-block;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--ink, #1a1a1a);
  border: 0;
  padding: 12px 28px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.year-empty-cta:hover {
  background: #000;
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .year-empty {
    margin: 18px 16px 28px;
    padding: 36px 22px;
  }
  .year-empty-title { font-size: 30px; }
  .year-empty-sub { font-size: 15px; }
}
@media print {
  .year-empty { display: none !important; }
}

/* ─── Foto roku picker — modal s gridem všech fotek roku ─── */
.year-fav-picker {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: yfpFadeIn .18s ease-out;
}
@keyframes yfpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.year-fav-picker-box {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.30);
  animation: yfpSlide .22s ease-out;
}
@keyframes yfpSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.year-fav-picker-box header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px 16px;
  border-bottom: 1px solid #f0eee8;
}
.year-fav-picker-box header h3 {
  font-family: var(--font-serif, "Playfair Display", Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
}
.year-fav-close {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-mute, #888);
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.year-fav-close:hover { background: #f4f3ee; color: var(--ink); }
.year-fav-hint {
  padding: 0 28px 14px;
  font-size: 13px;
  color: var(--ink-mute, #6b6354);
  font-style: italic;
}
.year-fav-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 4px 28px 28px;
  overflow-y: auto;
}
.year-fav-pick {
  position: relative;
  background: #faf9f5;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.year-fav-pick:hover {
  transform: translateY(-2px);
  border-color: var(--accent-gold, #b8902f);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.year-fav-pick.is-current {
  border-color: var(--accent-gold, #b8902f);
  box-shadow: 0 0 0 2px rgba(184, 144, 47, 0.3);
}
.year-fav-pick.is-saving { opacity: 0.6; pointer-events: none; }
.year-fav-pick:disabled { opacity: 0.4; cursor: wait; }
.year-fav-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.year-fav-pick-date {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.year-fav-current-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* CTA fallback when no photo of year selected (in stats hero) */
.hero-fav-photo.hero-fav-empty {
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s, border-color .15s;
}
.hero-fav-photo.hero-fav-empty:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(201, 169, 97, 0.6);
}
.hero-fav-photo.hero-fav-empty .hero-fav-empty-icon {
  font-size: 32px;
  filter: grayscale(0.3);
  opacity: 0.7;
}
button.hero-fav-photo {
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

@media (max-width: 640px) {
  .year-fav-picker { padding: 0; }
  .year-fav-picker-box { max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .year-fav-picker-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 4px 16px 20px; }
  .year-fav-picker-box header { padding: 16px 20px 12px; }
  .year-fav-hint { padding: 0 20px 12px; }
}

/* ─── Day modal footer — danger zone (smazat fotky / smazat celý záznam) ─── */
.diary-card-footer {
  border-top: 1px solid var(--rule, #e8e3d5);
  padding: 18px clamp(20px, 3vw, 32px);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  background: #fafaf7;
}
.diary-card-footer .diary-danger-btn {
  margin-left: auto;
}
/* ─── iOS Safari scroll fixes ─── */
.day-modal-box {
  -webkit-overflow-scrolling: touch !important;  /* smooth momentum scroll on iOS */
  overscroll-behavior: contain;                  /* prevent scroll chaining to body */
  scroll-behavior: smooth;
}
/* On mobile, ensure modal close (×) is always reachable via fixed positioning.
   Sticky header has iOS Safari quirks inside overflow:scroll containers — use position:fixed
   on the close button itself so it stays pinned regardless of scroll. */
@media (max-width: 640px) {
  /* Pin the diary-card-close button to top-right of viewport on mobile */
  .day-modal .diary-card-close {
    position: fixed !important;
    top: 12px;
    right: 12px;
    z-index: 1200;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0;
  }
  .day-modal .diary-card-close svg {
    width: 14px;
    height: 14px;
  }
  /* Ensure header padding accommodates the pinned close button visually */
  .day-modal-box .diary-card-header {
    padding-right: 64px !important;
  }
  /* Larger tap target for modal-close on other modals (login, settings, etc.) */
  .modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 24px !important;
  }
  /* Floating close at bottom-right kept as secondary escape hatch */
  .day-modal .modal-close-floating {
    display: flex;
  }
}
/* Floating close button (mobile only) — visible escape from modal */
.modal-close-floating {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
  z-index: 1100;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.modal-close-floating:active {
  transform: scale(0.92);
}

/* ─── Upload progress overlay — visible during HEIC convert / resize / upload ─── */
#uploadOverlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  animation: uploadOverlayIn .2s ease-out;
}
@keyframes uploadOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.upload-overlay-box {
  background: #fff;
  padding: 28px 32px;
  border-radius: 14px;
  min-width: 220px;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.upload-overlay-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(110,145,180,0.2);
  border-top-color: #6E91B4;
  border-radius: 50%;
  animation: uploadSpin 0.8s linear infinite;
  position: relative;
}
@keyframes uploadSpin { to { transform: rotate(360deg); } }
.upload-overlay-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1a1a1a);
  text-align: center;
  letter-spacing: 0.01em;
}
#uploadOverlay.ok .upload-overlay-spinner {
  border-color: #4a8a4a;
  border-top-color: #4a8a4a;
  animation: none;
}
#uploadOverlay.ok .upload-overlay-spinner::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #4a8a4a; font-size: 20px; font-weight: 600;
}
#uploadOverlay.err .upload-overlay-spinner {
  border-color: #c0392b;
  border-top-color: #c0392b;
  animation: none;
}
#uploadOverlay.err .upload-overlay-spinner::after {
  content: "✗";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #c0392b; font-size: 20px; font-weight: 600;
}

/* ─── Self-export overlay — progress modal ─── */
.diary-export-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  padding: 20px;
  box-sizing: border-box;
}
.diary-export-box {
  background: #fff;
  padding: 28px 32px;
  border-radius: 14px;
  width: min(440px, 90vw);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.diary-export-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--ink, #1a1a1a);
}
.diary-export-progress {
  height: 8px;
  background: #f0ece2;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 12px;
}
.diary-export-bar {
  height: 100%;
  background: linear-gradient(90deg, #b88a3e 0%, #c9a961 100%);
  width: 0%;
  transition: width .3s ease;
}
.diary-export-status {
  font-size: 13px;
  color: var(--ink-mute, #888);
  margin-bottom: 16px;
  min-height: 18px;
}
.diary-export-cancel {
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-mute, #888);
  background: transparent;
  border: 1px solid var(--rule, #e0dccf);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.diary-export-cancel:hover {
  color: #c0392b;
  border-color: #c0392b;
}

/* Inline delete — pod Poznámkou, vpravo (bez border-top → bez „čáry" pod songem) */
.diary-inline-delete {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}
.diary-inline-delete .diary-danger-btn {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: #c0392b;
  background: transparent;
  border: 1px solid var(--rule, #e0dccf);
  padding: 9px 18px;
  border-radius: 100px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color .15s, border-color .15s, background .15s;
}
.diary-inline-delete .diary-danger-btn:hover {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}
.diary-card-footer .diary-danger-btn {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute, #888);
  background: transparent;
  border: 1px solid var(--rule, #e0dccf);
  padding: 9px 18px;
  border-radius: 100px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color .15s, border-color .15s, background .15s;
}
.diary-card-footer .diary-danger-btn:hover {
  color: #c0392b;
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.05);
}
.diary-card-footer .modal-delete-day {
  /* Slightly stronger to indicate it's the more destructive action */
  color: #c0392b;
}
.diary-card-footer .modal-delete-day:hover {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}
@media (max-width: 640px) {
  .diary-card-footer {
    padding: 14px 16px;
    flex-direction: column-reverse;
  }
  .diary-card-footer .diary-danger-btn { width: 100%; text-align: center; }
}

/* ─── Settings — SVG icons in checkbox list (override emoji styling) ─── */
.settings-row .se {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0;
}
.settings-row .se svg {
  width: 18px;
  height: 18px;
  display: block;
  color: var(--ink, #1a1a1a);
  flex-shrink: 0;
}
/* Vlastní pole — inline rows pod Váhou ve stejném UI jako settings-row */
.settings-list .custom-fields-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-list .cf-row {
  display: grid !important;
  grid-template-columns: 24px 28px 1fr 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
  border: 0;
}
.settings-list .cf-row:hover { background: #faf9f5; }
.settings-list .cf-row .cf-visible {
  margin: 0;
  cursor: pointer;
}
.settings-list .cf-row .cf-emoji {
  width: 28px;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  outline: none;
  color: var(--ink, #1a1a1a);
}
.settings-list .cf-row .cf-emoji::placeholder {
  color: var(--ink-mute, #b0aa9a);
  opacity: 0.55;
  font-size: 20px;
}
.settings-list .cf-row .cf-label {
  border: 0;
  background: transparent;
  color: var(--ink, #1a1a1a);
  font: inherit;
  padding: 0;
  outline: none;
  width: 100%;
}
.settings-list .cf-row .cf-label::placeholder {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute, #b0aa9a);
  opacity: 0.85;
}
.settings-list .cf-row .cf-emoji:focus,
.settings-list .cf-row .cf-label:focus {
  background: rgba(184, 144, 47, 0.08);
  border-radius: 3px;
}
.settings-list .cf-row .cf-x {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--ink-mute, #888);
  cursor: pointer;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.settings-list .cf-row:hover .cf-x { opacity: 1; }
.settings-list .cf-row .cf-x:hover {
  background: rgba(204, 51, 51, 0.12);
  color: #c33;
}
/* + Add custom field — last row, looks like a faded settings-row */
.settings-list .settings-row-add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--ink-mute, #888);
  font: inherit;
  font-size: 13px;
  font-style: italic;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  text-align: left;
}
.settings-list .settings-row-add:hover {
  background: #faf9f5;
  color: var(--ink, #1a1a1a);
}

/* Settings sync buttons — SVG icons inside align baseline */
.settings-sync-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}
.settings-sync-btn svg,
.settings-sync-btn img {
  flex-shrink: 0;
  margin-right: 0 !important;  /* gap handles spacing now */
}


/* ─── Custom field stats list (Film roku, Recepty roku, …) ─── */
.cf-stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cf-stats-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
}
.cf-stats-item:last-child { border-bottom: 0; }
.cf-stats-date {
  font-family: var(--font-serif, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute, #888);
  font-variant-numeric: tabular-nums;
}
.cf-stats-value {
  color: var(--ink, #1a1a1a);
  line-height: 1.5;
}

/* Custom fields stats wrapper — pass-through grid (children become direct grid items) */
#customFieldsStats {
  display: contents;
}

/* ─── Year-title bulk upload CTA (under year heading) ─── */
.year-actions {
  display: flex;
  justify-content: center;
  margin: -8px 0 28px;
}
.year-bulk-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--ink, #1a1a1a);
  border: 1px solid var(--ink, #1a1a1a);
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.year-bulk-upload-btn:hover {
  background: #000;
  border-color: #000;
  transform: translateY(-1px);
}
.year-bulk-upload-btn:active {
  transform: translateY(0);
}
@media print {
  .year-actions { display: none !important; }
}

/* ─── Oura Connect modal — instructions + paste field ─── */
.oura-steps {
  list-style: decimal;
  padding-left: 22px;
  margin: 0 0 16px;
  color: var(--ink-soft, #4a443a);
  font-size: 13px;
  line-height: 1.65;
}
.oura-steps li { margin-bottom: 4px; }
.oura-steps a {
  color: var(--ink, #1a1a1a);
  text-decoration: underline;
  text-decoration-color: var(--accent-gold, #b8902f);
  text-underline-offset: 2px;
}
.oura-token-row { margin-bottom: 14px; }
.oura-token-row input {
  width: 100%;
  font-family: ui-monospace, SF Mono, monospace;
  font-size: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule-strong, #d4cfc1);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s;
}
.oura-token-row input:focus {
  border-color: var(--accent-gold, #b8902f);
}
.oura-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.oura-actions .settings-sync-btn { flex: 0 0 auto; }
.oura-actions .settings-sync-status {
  flex: 1 1 auto;
  font-size: 12px;
}
/* Generic conn-area spacing */
.conn-area { margin-bottom: 6px; }

/* ─── Inline action links (Připojit svým tokenem, Odpojit) — zvýrazněné jako akce ─── */
.settings-hint a#ouraReconnectLink,
.settings-hint a#ouraDisconnectLink,
.settings-hint a#stravaDisconnectLink {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 10px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink, #1a1a1a);
  background: transparent;
  border: 1px solid var(--rule-strong, #d4cfc1);
  border-radius: 100px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.settings-hint a#ouraReconnectLink:hover,
.settings-hint a#ouraDisconnectLink:hover,
.settings-hint a#stravaDisconnectLink:hover {
  background: var(--ink, #1a1a1a);
  border-color: var(--ink, #1a1a1a);
  color: #fff;
}
/* Disconnect má lehce destruktivní hover (červená) */
.settings-hint a#ouraDisconnectLink:hover,
.settings-hint a#stravaDisconnectLink:hover {
  background: #c33;
  border-color: #c33;
}