/* ui-v6.css
   Memory-book layer: shortcuts, backup controls, calendar jumps,
   gallery search/stats and performance containment. */

:root {
  --ui6-corner: 12px;
}

/* Keyboard help dialog. */
.ui6-help-dialog {
  width: min(520px, calc(100vw - 28px));
  padding: 28px;
  border: 2px solid var(--v3-ink, #27313a);
  border-radius: var(--ui6-corner);
  background: var(--v3-paper, #fffdf7);
  box-shadow: 10px 10px 0 var(--v3-yellow, #f2c64d);
}

.ui6-help-dialog h2 {
  margin: 0;
  font: 900 28px/1 var(--shared-font, sans-serif);
}

.ui6-help-dialog ul {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.ui6-help-dialog li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(39, 49, 58, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  font: 700 12px/1.4 var(--shared-font, sans-serif);
}

.ui6-help-dialog kbd {
  padding: 7px 9px;
  border: 2px solid var(--v3-ink, #27313a);
  border-bottom-width: 4px;
  border-radius: 6px;
  background: #fff;
  font: 900 11px/1 var(--shared-font, sans-serif);
  text-align: center;
}

.ui6-help-dialog .ui6-help-dialog__close {
  float: right;
}

/* Gallery search, stats and backup toolbar. */
.gallery-search-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
}

.gallery-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.gallery-search label {
  color: var(--shared-muted);
  font: 800 10px/1 var(--shared-font);
}

.gallery-search input {
  width: min(340px, 100%);
  min-height: 38px;
  padding: 0 12px;
  border: 2px solid var(--shared-ink);
  border-radius: 999px;
  color: var(--shared-ink);
  background: #fff;
  font: 700 12px/1 var(--shared-font);
}

.gallery-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.gallery-tools .command-button {
  min-height: 38px;
  padding: 0 13px;
}

.gallery-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.gallery-stats span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid rgba(39, 49, 58, .16);
  border-radius: 8px;
  background: rgba(255, 253, 247, .66);
  color: var(--shared-muted);
  font: 700 10px/1.3 var(--shared-font);
}

.gallery-stats b {
  color: var(--shared-ink);
  font: 900 14px/1 var(--shared-font);
}

/* Calendar month jump and copy controls. */
.calendar-toolbar__month {
  min-height: 38px;
  padding: 0 10px;
  border: 2px solid var(--shared-ink);
  border-radius: 999px;
  color: var(--shared-ink);
  background: #fff;
  font: 900 11px/1 var(--shared-font);
}

.calendar-today-status {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 2px solid var(--shared-ink);
  border-radius: 12px;
  color: var(--shared-ink);
  background: linear-gradient(120deg, rgba(255, 255, 255, .9), rgba(237, 247, 248, .9));
  box-shadow: 4px 4px 0 var(--shared-yellow);
  font: 900 14px/1.5 var(--shared-font);
}

.calendar-rail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.calendar-rail__actions .command-button {
  min-height: 36px;
  padding: 0 11px;
  font-size: 10px;
}

.calendar-legend-count {
  margin-left: auto;
  color: var(--shared-muted);
  font: 700 10px/1 var(--shared-font);
}

/* New long standalone sections keep reserved space. */
.memories-journal,
.memories-notes {
  content-visibility: auto;
  contain-intrinsic-size: auto 860px;
}

@media (max-width: 900px) {
  .ui5-mobile-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gallery-search-wrap {
    grid-template-columns: 1fr;
  }

  .gallery-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1160px) {
  body.line-puppy-theme .memory-mark__links {
    display: none;
  }

  body.line-puppy-theme .global-nav__menu {
    display: block;
  }
}

@media (max-width: 620px) {
  .gallery-stats {
    grid-template-columns: 1fr 1fr;
  }

  .ui6-help-dialog li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}