/* ═══════════════════════════════════════════════
   DIARY
   ═══════════════════════════════════════════════ */

.mylog-bottom-row {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: start;
  width: 100%;
  overflow: visible;
}

.mylog-progress-col { min-width: 0; }

.mylog-diary-col {
  height: 300px;
  display: flex;
  overflow: visible;
}

.diary-nb-closed {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  display: flex;
  transform-origin: bottom center;
  user-select: none;
  animation: diary-sway 7s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.diary-nb-closed:hover {
  animation: none;
  transform: translateY(-14px) rotate(-2.5deg) scale(1.03);
}

.diary-nb-closed:hover .diary-nb-shadow {
  animation: none;
  opacity: 0.9;
  transform: translateY(16px) scaleX(0.72) rotate(2deg);
}

.diary-nb-shadow {
  position: absolute;
  bottom: -8px;
  left: 8%;
  right: 8%;
  height: 18px;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.45;
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: diary-sway-shadow 7s ease-in-out infinite;
  z-index: 0;
}

@keyframes diary-sway {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(0.4deg); }
  50%  { transform: rotate(-0.3deg); }
  80%  { transform: rotate(0.35deg); }
  100% { transform: rotate(0deg); }
}

@keyframes diary-sway-shadow {
  0%   { transform: translateX(0px) scaleX(1);     opacity: 0.45; }
  20%  { transform: translateX(2px) scaleX(0.97);  opacity: 0.48; }
  50%  { transform: translateX(-2px) scaleX(1.03); opacity: 0.42; }
  80%  { transform: translateX(1.5px) scaleX(0.98); opacity: 0.47; }
  100% { transform: translateX(0px) scaleX(1);     opacity: 0.45; }
}

.diary-nb-book {
  position: relative;
  z-index: 1;
  flex: 1;
  border: 3px solid #6B4423;
  border-radius: 6px;
  background: #8B5E3C;
  display: flex;
  box-shadow: 4px 6px 20px rgba(0,0,0,.4), 8px 12px 40px rgba(0,0,0,.25);
}

.diary-nb-book::before,
.diary-nb-book::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #C8972A, #e8c050);
  z-index: 10;
}

.diary-nb-book::before {
  top: -4px;
  left: -4px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.diary-nb-book::after {
  bottom: -4px;
  right: -4px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.diary-nb-spine {
  width: 26px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #5A3518, #6B4423 60%, #8B5E3C);
  border-right: 2px solid rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 22px 0;
  border-radius: 3px 0 0 3px;
}

.diary-nb-hole {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6B4423, #5A3518);
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}

.diary-nb-cover {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #A0722A 0%, #8B5E3C 45%, #7a5228 100%);
  border-radius: 0 3px 3px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 22px 28px 18px;
}

.diary-nb-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,.03) 4px,
    rgba(0,0,0,.03) 8px
  );
  pointer-events: none;
}

.diary-nb-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  pointer-events: none;
}

.diary-nb-gutter {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, rgba(0,0,0,.22), transparent);
  z-index: 1;
}

.diary-nb-pages-edge {
  position: absolute;
  right: -5px;
  top: 5px;
  bottom: 5px;
  width: 6px;
  background: repeating-linear-gradient(
    to bottom,
    #E8DFC4 0px,
    #E8DFC4 2px,
    #F2EDD8 2px,
    #F2EDD8 4px
  );
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 0 4px rgba(0,0,0,.15);
}

.diary-nb-ribbon {
  position: absolute;
  top: -4px;
  right: 18px;
  width: 13px;
  height: 32px;
  background: linear-gradient(180deg, #C8A832, #b89020);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  z-index: 5;
}

.diary-nb-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.diary-nb-title {
  font-family: 'Fraunces', serif;
  font-size: 2.5rem;
  font-weight: 700;
  font-style: italic;
  color: white;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.diary-nb-month {
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.5);
  margin-top: 8px;
}

.diary-nb-rule {
  width: 100%;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

.diary-nb-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.diary-nb-stat strong {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 3rem;
  color: white;
  line-height: 1;
  display: block;
}

.diary-nb-stat span {
  font-family: 'Sora', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,.45);
}

.diary-nb-hint {
  font-family: 'Sora', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.28);
  animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.6; }
}

/* ── Cover corner overrides ────────────────────────── */
.diary-cover-bold  .diary-nb-book::before,
.diary-cover-bold  .diary-nb-book::after {
  background: linear-gradient(135deg, #E8C97A, #F8D98A);
}

.diary-cover-quiet .diary-nb-book::before,
.diary-cover-quiet .diary-nb-book::after {
  background: linear-gradient(135deg, #C3342B, #D85F54);
}

.diary-cover-moody .diary-nb-book::before,
.diary-cover-moody .diary-nb-book::after {
  background: linear-gradient(135deg, #C8972A, #E8C050);
}

/* ── Tagline ────────────────────────────────────────── */
.diary-nb-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-top: 10px;
  line-height: 1;
}

/* ── Palette button (closed notebook) ──────────────── */
.diary-nb-palette-btn {
  position: absolute;
  bottom: 10px;
  left: 32px;
  z-index: 10;
  background: none;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 2px;
}

.diary-nb-closed:hover .diary-nb-palette-btn { opacity: 1; }

/* ── Cover popover (closed notebook + open modal) ──── */
.diary-cover-popover {
  position: absolute;
  z-index: 50;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Closed-notebook anchor: above the 🎨 trigger button */
.diary-nb-closed .diary-cover-popover {
  bottom: 34px;
  left: 28px;
}

/* Inline horizontal row (mobile sheet) — same content, no popover chrome */
.diary-cover-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 6px 2px 4px;
}

/* Each cover slot: mini + name stacked */
.diary-cover-slot {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.diary-cover-slot:hover { transform: translateY(-2px); }

.diary-cover-slot--selected {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.diary-cover-slot--locked { cursor: not-allowed; }
.diary-cover-slot--locked .diary-mini-cover { filter: brightness(0.55); }
.diary-cover-slot--locked .diary-cover-slot-name { opacity: 0.55; }

.diary-cover-lock {
  position: absolute;
  top: calc(50% - 12px);
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  z-index: 2;
}

/* The thumbnail itself */
.diary-mini-cover {
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.diary-mini-cover-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

/* Name caption below the mini */
.diary-cover-slot-name {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.diary-cover-slot--selected .diary-cover-slot-name { color: var(--ink); }

/* Per-month override caption */
.diary-cover-slot-override {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.66rem;
  color: var(--ink-faint);
  margin-top: 2px;
  line-height: 1.1;
}

/* Modal left page trigger button (replaces the old swatch row) */
.diary-modal-cover-trigger {
  background: none;
  border: none;
  padding: 0;
  margin-top: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.diary-modal-cover-trigger .diary-mini-cover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.diary-modal-cover-trigger-caret {
  font-size: 0.7rem;
  color: var(--ink-soft);
  line-height: 1;
}

/* ── Open notebook modal ───────────────────────────── */
.diary-modal-overlay,
.diary-pages-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,10,24,.88);
  backdrop-filter: blur(10px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.diary-modal-overlay.is-open,
.diary-pages-overlay.is-open {
  opacity: 1;
}

.diary-modal-book {
  width: min(960px, 94vw);
  height: min(600px, 84vh);
  display: flex;
  position: relative;
  border-radius: 4px 14px 14px 4px;
  transform: scale(0.98);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.diary-modal-overlay.is-open .diary-modal-book {
  transform: scale(1);
}

.diary-modal-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 20;
  background: linear-gradient(135deg, #C8972A, #e8c050);
}

.diary-modal-corner--tl { top: -3px; left: -3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.diary-modal-corner--tr { top: -3px; right: -3px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.diary-modal-corner--bl { bottom: -3px; left: -3px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.diary-modal-corner--br { bottom: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.diary-modal-spine {
  width: 30px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #5A3518, #6B4423 60%, #8B5E3C);
  border-radius: 4px 0 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 22px 0;
}

.diary-modal-left {
  width: 300px;
  flex-shrink: 0;
  background-color: #F2EDD8;
  background-image: radial-gradient(circle, #C8BD9C 0.9px, transparent 1px);
  background-size: 18px 18px;
  background-position: 8px 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.diary-modal-left::before {
  content: "";
  position: absolute;
  top: 0; left: 44px; bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--red) 25%, transparent);
  pointer-events: none;
  z-index: 1;
}

.diary-modal-left::after {
  content: "";
  position: absolute;
  left: -6px; top: 4px; bottom: 4px;
  width: 8px;
  background: repeating-linear-gradient(
    to bottom,
    #E8DFC4 0px, #E8DFC4 2px,
    #F2EDD8 2px, #F2EDD8 4px
  );
  border-radius: 3px 0 0 3px;
  box-shadow: -2px 0 4px rgba(0,0,0,.1);
}

.diary-modal-crease {
  width: 14px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.08) 40%,
    rgba(255,255,255,.04) 60%,
    transparent 100%
  );
  pointer-events: none;
}

.diary-modal-right {
  flex: 1;
  min-width: 0;
  background-color: #FAF7ED;
  background-image: radial-gradient(circle, #D5C9A8 0.9px, transparent 1px);
  background-size: 18px 18px;
  background-position: 8px 8px;
  overflow: hidden;
  position: relative;
  border-radius: 0 14px 14px 0;
  display: flex;
  flex-direction: column;
}

.diary-modal-right::before {
  content: "";
  position: absolute;
  top: 0; left: 48px; bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--red) 22%, transparent);
  pointer-events: none;
  z-index: 1;
}

.diary-modal-right::after {
  content: "";
  position: absolute;
  right: -6px; top: 4px; bottom: 4px;
  width: 8px;
  background: repeating-linear-gradient(
    to bottom,
    #E8DFC4 0px, #E8DFC4 2px,
    #FAF7ED 2px, #FAF7ED 4px
  );
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 0 4px rgba(0,0,0,.1);
}

.diary-modal-left-head {
  padding: 14px 14px 10px 52px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.diary-modal-left-head-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2A2218;
  line-height: 1;
}

.diary-modal-left-head-sub {
  font-size: 0.62rem;
  color: #7A6F55;
  margin-top: 4px;
}

.diary-modal-left-toggle {
  display: flex;
  gap: 0;
  padding: 0 14px 0 52px;
  border-bottom: 1px solid #D5C9A8;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.diary-modal-left-toggle button {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7A6F55;
  padding: 6px 10px 6px 0;
  margin-right: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.diary-modal-left-toggle button.active {
  border-bottom-color: #8B5E3C;
  color: #2A2218;
}

.diary-modal-left-cal {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 10px 52px;
  position: relative;
  z-index: 2;
}

.diary-modal-cal-month {
  font-family: 'Fraunces', serif;
  font-size: 0.8rem;
  font-weight: 700;
  font-style: italic;
  color: #2A2218;
  margin-bottom: 8px;
}

.diary-modal-cal-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.diary-modal-cal-header {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #7A6F55;
  text-align: center;
  padding: 2px 0;
}

.diary-modal-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.diary-modal-cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.65rem;
  color: #7A6F55;
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}

.diary-modal-cal-day:hover {
  background: rgba(139,94,60,.1);
}

.diary-modal-cal-day.has-entry {
  font-weight: 700;
  color: #2A2218;
}

.diary-modal-cal-day.active {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  outline: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

.diary-modal-cal-day.offset {
  visibility: hidden;
  pointer-events: none;
}

.diary-modal-cal-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  margin-top: 1px;
}

.diary-modal-cal-fill { display: none; }

.diary-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  background: none;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}

.diary-modal-close:hover {
  background: var(--color-primary);
  color: #FAF7ED;
}

.diary-modal-right-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 16px 60px;
  position: relative;
  z-index: 2;
  transition: opacity 0.2s ease;
}

.diary-modal-page-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 8px 20px 10px;
  border-top: 1px solid rgba(197, 185, 156, 0.5);
  background: rgba(250, 247, 237, 0.92);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.diary-modal-page-nav::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--red);
  opacity: 0.65;
  flex-shrink: 0;
  order: 2;
}

.diary-modal-pf-btn {
  background: none;
  border: none;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
  padding: 2px 0;
  min-width: 80px;
}

.diary-modal-pf-btn:first-child { order: 1; text-align: right; }
.diary-modal-pf-btn:last-child  { order: 3; text-align: left; }
.diary-modal-pf-btn:disabled { opacity: 0.2; pointer-events: none; }
.diary-modal-pf-btn:hover:not(:disabled) { color: var(--red-hover); }

.diary-modal-entry-date {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #2A2218;
  line-height: 28px;
  margin-bottom: 6px;
}

.diary-modal-entry-date strong {
  font-weight: 700;
  font-style: normal;
  color: var(--color-primary);
}

.diary-modal-entry-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.diary-modal-entry-chip {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  color: white;
  font-family: 'Sora', sans-serif;
}

.diary-modal-entry-chip--undone {
  background: transparent;
  color: #7A6F55;
  border: 1px solid #D5C9A8;
}

.diary-modal-entry-note {
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: #2A2218;
  line-height: 28px;
  white-space: pre-wrap;
  margin-bottom: 14px;
}

.diary-modal-empty-date {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  color: #7A6F55;
  margin-bottom: 8px;
}

.diary-modal-empty-text {
  font-family: 'Caveat', cursive;
  font-size: 1rem;
  color: #B5A88A;
  margin-bottom: 14px;
}

.diary-modal-write-btn, .diary-modal-edit-btn {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
}

.diary-modal-edit-btn {
  margin-top: 10px;
  display: inline-block;
}

.diary-modal-edit-btn:hover, .diary-modal-write-btn:hover { background: var(--red-hover); }

.diary-modal-polaroid {
  display: block;
  background: white;
  padding: 6px 6px 24px 6px;
  transform: rotate(1.8deg);
  box-shadow: 2px 3px 10px rgba(0,0,0,.15);
  width: 100%;
  max-width: 180px;
  margin-bottom: 10px;
  position: relative;
}

.diary-modal-polaroid::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 20%;
  right: 20%;
  height: 8px;
  background: rgba(248,192,138,.55);
  border-radius: 2px;
}

.diary-modal-polaroid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ── Pages modal ── */
.diary-pages-modal {
  width: min(960px, 94vw);
  height: min(600px, 84vh);
  background: var(--bg-surface);
  border: 4px solid #6B4423;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px #C8972A, 0 24px 64px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transform: scale(0.98);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.diary-pages-overlay.is-open .diary-pages-modal { transform: scale(1); }

.diary-pages-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 20;
  background: linear-gradient(135deg, #C8972A, #e8c050);
}

.diary-pages-corner--tl { top: -3px; left: -3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.diary-pages-corner--tr { top: -3px; right: -3px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.diary-pages-corner--bl { bottom: -3px; left: -3px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.diary-pages-corner--br { bottom: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.diary-pages-head {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.diary-pages-head-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  flex: 1;
}

.diary-pages-head-sub { font-size: 0.65rem; color: var(--text-faint); margin-top: 2px; }

.diary-pages-back-btn {
  background: none;
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  font-family: inherit;
}

.diary-pages-close-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}

.diary-pages-grid-wrap { flex: 1; overflow-y: auto; padding: 16px 20px; }

.diary-pages-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.diary-mini-page {
  background-color: #FAF7ED;
  background-image: radial-gradient(circle, #D5C9A8 0.6px, transparent 0.7px);
  background-size: 10px 10px;
  background-position: 5px 5px;
  aspect-ratio: 3/4;
  border-radius: 6px;
  border: 1.5px solid #E8DFC4;
  box-shadow: 1px 2px 6px rgba(0,0,0,.12);
  padding: 8px 6px 6px 14px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, opacity 0.22s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.diary-mini-page::before {
  content: "";
  position: absolute;
  top: 0; left: 10px; bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--red) 20%, transparent);
  pointer-events: none;
}

.diary-mini-page:hover { transform: translateY(-3px) rotate(0.4deg); box-shadow: 3px 5px 14px rgba(0,0,0,.18); }
.diary-mini-page.empty { opacity: 0.25; cursor: default; }
.diary-mini-page.empty:hover { transform: none; box-shadow: 1px 2px 6px rgba(0,0,0,.12); }
.diary-mini-page.today { outline: 2px solid var(--color-primary); }

.diary-mini-day {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2A2218;
  line-height: 1;
  margin-bottom: 4px;
}

.diary-mini-note {
  font-family: 'Caveat', cursive;
  font-size: 0.6rem;
  color: #5A4F38;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  flex: 1;
}

.diary-mini-polaroid {
  display: block;
  background: white;
  padding: 3px 3px 10px 3px;
  transform: rotate(-1deg);
  box-shadow: 1px 2px 5px rgba(0,0,0,0.18);
  margin-top: 5px;
  width: calc(100% - 4px);
  position: relative;
}

.diary-mini-polaroid::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 20%;
  right: 20%;
  height: 6px;
  background: rgba(248,192,138,.55);
  border-radius: 2px;
}

.diary-mini-polaroid-inner { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }

/* ─── Gear button on desktop badge ──────────────────────── */
.tracker-badge-gear {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 0.95rem;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s;
  color: inherit;
  z-index: 2;
}
.tracker-badge-gear:hover { opacity: 1; background: rgba(255,255,255,0.2); }

/* ─── Manage Activities Modal ────────────────────────────── */
.manage-activities-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 46, 69, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manage-activities-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: min(440px, 92vw);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 72px rgba(0,0,0,0.26);
  z-index: 9998;
}

.ma-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}

.ma-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}

.ma-subtitle { font-size: 0.72rem; color: var(--text-faint); margin-top: 2px; }

.ma-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
}
.ma-close:hover { background: var(--border); }

.ma-list {
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ma-row {
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  transition: border-color 0.15s;
}
.ma-row.is-focused {
  border-color: var(--color-primary);
}

.ma-row-top { display: flex; align-items: center; gap: 8px; }

.ma-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.ma-name-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ma-name-was-hint {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
}
.ma-name-was {
  text-decoration: line-through;
  color: var(--yellow);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="light"] .ma-name-was { color: var(--yellow); }
.ma-name-arrow { color: var(--text-faint); font-size: 0.6rem; }

.ma-name-edit {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  outline: none;
  background: transparent;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.4;
}
.ma-name-edit:focus {
  cursor: text;
  white-space: normal;
}

.ma-name-pencil {
  font-size: 0.72rem;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  flex-shrink: 0;
  margin-right: 2px;
}
.ma-row:not(.is-focused):hover .ma-name-pencil { opacity: 0.5; }
.ma-row.is-focused .ma-name-pencil { opacity: 0; }

.ma-delete-btn {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ma-delete-btn:hover { opacity: 1; color: var(--color-primary); }

.ma-cadence-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ma-cadence-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  white-space: nowrap;
}

.ma-cadence-btn {
  font-family: 'Sora', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.ma-cadence-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

.ma-change-indicator {
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  flex-wrap: wrap;
}
.ma-inline-was { text-decoration: line-through; color: var(--yellow); }
[data-theme="light"] .ma-inline-was { color: var(--yellow); }
.ma-inline-arrow { color: var(--text-faint); font-size: 0.6rem; }
.ma-inline-new { color: var(--green); }
[data-theme="light"] .ma-inline-new { color: var(--green); }

.ma-add-btn {
  width: calc(100% - 28px);
  margin: 0 14px 8px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px dashed var(--border);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.ma-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--bg-subtle); }

.ma-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}

.ma-btn {
  font-family: 'Sora', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 9px 20px;
  cursor: pointer;
}

.ma-btn--ghost { background: transparent; border: 1.5px solid var(--border); color: var(--text-muted); }
.ma-btn--save  { background: var(--color-primary); color: white; border: none; }
.ma-btn--save:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 768px) {
  .ma-footer { flex-direction: column; gap: 8px; }
  .ma-btn { width: 100%; padding: 12px; }
  .ma-btn--save { order: -1; }
}

/* ─── Confirm Modals (delete + edit) ───────────────────── */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 46, 69, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: min(400px, 92vw);
  padding: 28px 28px 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  z-index: 9999;
}

.confirm-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.confirm-icon-wrap { font-size: 1.1rem; flex-shrink: 0; padding-top: 2px; }

.confirm-title {
  font-family: 'Fraunces', serif;
  font-weight: 550;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

.confirm-body {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.confirm-change-list {
  margin: 8px 0 0 4px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.confirm-change-list li {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 4px 8px;
  background: var(--bg-subtle);
  border-radius: 6px;
  line-height: 1.4;
}

.confirm-highlight { font-weight: 700; color: var(--yellow); }
[data-theme="light"] .confirm-highlight { color: var(--yellow); }
.confirm-new { font-weight: 700; color: var(--green); }
[data-theme="light"] .confirm-new { color: var(--green); }

.confirm-body-emphasis { font-weight: 700; color: var(--color-primary); }

.confirm-body-note {
  display: block;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-faint);
  margin-top: 6px;
}

.confirm-divider { height: 1px; background: var(--border); margin: 20px 0; }

.confirm-actions { display: flex; gap: 10px; align-items: center; }

.confirm-btn {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
}

.confirm-btn--ghost      { background: transparent; border: 1.5px solid var(--border); color: var(--text-muted); }
.confirm-btn--danger     { background: var(--color-primary); color: white; border: none; flex: 1; }
.confirm-btn--danger-soft{ background: var(--bg-subtle); color: var(--color-primary); border: 1.5px solid var(--border); flex: 1; }
.confirm-btn--save       { background: var(--color-primary); color: white; border: none; flex: 1; }

@media (max-width: 768px) {
  .confirm-actions { flex-direction: column; }
  .confirm-btn { width: 100%; padding: 12px; }
  .confirm-btn--danger, .confirm-btn--danger-soft, .confirm-btn--save { order: -1; }
}

/* ═══════════════════════════════════════════════
   MOBILE DIARY NOTEBOOK
   ═══════════════════════════════════════════════ */

.mob-diary-card {
  width: 100%;
  border-radius: 10px;
  overflow: visible;
  cursor: pointer;
  position: relative;
  border: 2px solid #A83428;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  margin-top: 16px;
}

.mob-diary-card:hover {
  transform: translateY(-6px);
}

.mob-diary-spine {
  padding: 7px 0 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 8px 8px 0 0;
}

.mob-diary-hole-outer {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

.mob-diary-cover {
  min-height: 160px;
  padding: 18px 20px 14px;
  border-radius: 0 0 8px 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mob-diary-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,0.03) 4px,
    rgba(0,0,0,0.03) 8px
  );
  pointer-events: none;
  z-index: 0;
}

.mob-diary-cover::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
  z-index: 0;
}

.mob-diary-gutter {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 14px;
  z-index: 1;
}

.mob-diary-pages-edge {
  position: absolute;
  right: -4px;
  top: 6px;
  bottom: 6px;
  width: 5px;
  background: repeating-linear-gradient(
    to bottom,
    #E8DFC4 0px, #E8DFC4 2px,
    #F2EDD8 2px, #F2EDD8 4px
  );
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 0 4px rgba(0,0,0,0.15);
}

.mob-diary-ribbon {
  position: absolute;
  top: -3px;
  right: 22px;
  width: 12px;
  height: 28px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  z-index: 5;
}

.mob-diary-corner--bl {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 18px;
  height: 18px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  z-index: 10;
}

.mob-diary-corner--br {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  z-index: 10;
}

.mob-diary-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.mob-diary-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.mob-diary-month {
  font-family: 'Sora', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 6px;
}

.mob-diary-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-top: 8px;
}

.mob-diary-rule {
  width: 100%;
  height: 1px;
  margin: 12px 0;
}

.mob-diary-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.mob-diary-stat strong {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  display: block;
}

.mob-diary-stat span {
  font-family: 'Sora', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mob-diary-bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.mob-diary-hint {
  font-family: 'Sora', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: breathe 2.8s ease-in-out infinite;
}

.mob-diary-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(8,10,24,0.88);
  backdrop-filter: blur(10px);
}

.mob-diary-sheet {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #F5EDE0;
  will-change: transform;
}

.mob-diary-sheet-spine {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 7px 0 6px;
}

.mob-diary-sheet-topbar {
  padding: 9px 14px 7px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.mob-diary-sheet-topbar-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
}

.mob-diary-sheet-topbar-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.57rem;
  margin-top: 3px;
}

.mob-diary-sheet-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: none;
  color: white;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.mob-diary-sheet-palette {
  padding: 4px 14px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.mob-diary-nb-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #F5EDE0;
  background-image: radial-gradient(circle, #C8BD9C 0.8px, transparent 0.9px);
  background-size: 18px 18px;
  background-position: 8px 8px;
  position: relative;
}

.mob-diary-nb-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--red) 22%, transparent);
  pointer-events: none;
  z-index: 1;
}

.mob-diary-strip-row {
  height: 27px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 0 4px 0 6px;
  background: rgba(242,237,216,0.96);
  border-bottom: 1px solid rgba(139,100,60,0.18);
  z-index: 5;
  flex-shrink: 0;
}

.mob-diary-strip {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
  padding: 2px 0;
}

.mob-diary-strip::-webkit-scrollbar { display: none; }

.mob-diary-pip {
  width: 26px;
  height: 21px;
  border-radius: 5px;
  border: 1px solid rgba(139,100,60,0.2);
  background: #F5EDE0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.mob-diary-pip.active {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

.mob-diary-pip.has-entry::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--yellow);
}

.mob-diary-pip.active.has-entry::after {
  background: rgba(255,255,255,0.7);
}

.mob-diary-pip.future {
  opacity: 0.28;
  pointer-events: none;
}

.mob-diary-pip-num {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}

.mob-diary-pip-dow {
  font-size: 0.38rem;
  font-weight: 700;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.65;
  line-height: 1;
}

.mob-diary-pip.active .mob-diary-pip-dow {
  opacity: 0.85;
}

.mob-diary-cal-btn {
  width: 22px;
  height: 21px;
  border-radius: 5px;
  border: 1px solid rgba(139,100,60,0.2);
  background: #F5EDE0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: rgba(42,34,24,0.6);
  transition: background 0.15s, color 0.15s;
}

.mob-diary-cal-btn:hover {
  background: var(--red);
  color: white;
}

[data-theme="side-b"] .mob-diary-sheet,
[data-theme="side-b"] .mob-diary-nb-body {
  color: #2A2218;
}

[data-theme="side-b"] .mob-diary-strip-row {
  background: rgba(235,227,206,0.97);
  border-bottom-color: rgba(139,100,60,0.28);
}

[data-theme="side-b"] .mob-diary-pip {
  background: #F5EDE0;
  border-color: rgba(139,100,60,0.45);
  color: #2A2218;
}

[data-theme="side-b"] .mob-diary-cal-btn {
  background: #F5EDE0;
  border-color: rgba(139,100,60,0.45);
  color: rgba(42,34,24,0.6);
}

.mob-diary-entry-area {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.mob-diary-flip-card {
  width: 100%;
  height: 100%;
  position: relative;
}

.mob-diary-flip-card.flipping-next {
  animation: mobFlipNext 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mob-diary-flip-card.flipping-prev {
  animation: mobFlipPrev 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes mobFlipNext {
  0%   { transform: scaleX(1);    opacity: 1; }
  45%  { transform: scaleX(0.0);  opacity: 0.6; }
  46%  { transform: scaleX(0.0);  opacity: 0.6; }
  100% { transform: scaleX(1);    opacity: 1; }
}

@keyframes mobFlipPrev {
  0%   { transform: scaleX(1);    opacity: 1; }
  45%  { transform: scaleX(0.0);  opacity: 0.6; }
  46%  { transform: scaleX(0.0);  opacity: 0.6; }
  100% { transform: scaleX(1);    opacity: 1; }
}

.mob-diary-flip-face {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px 16px 40px;
}

.mob-diary-cal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,22,16,0.55);
  z-index: 50;
  display: none;
  align-items: flex-end;
  overflow: hidden;
}

.mob-diary-cal-overlay.open {
  display: flex;
}

.mob-diary-cal-sheet {
  width: 100%;
  background: #F5EDE0;
  border-radius: 18px 18px 0 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0 0 16px;
  will-change: transform;
}

.mob-diary-cal-overlay.open .mob-diary-cal-sheet {
  transform: translateY(0);
}

.mob-diary-cal-handle {
  width: 36px;
  height: 4px;
  background: rgba(139,100,60,0.25);
  border-radius: 2px;
  margin: 10px auto 12px;
}

.mob-diary-cal-head-row {
  padding: 0 14px 10px;
  border-bottom: 1px solid rgba(139,100,60,0.15);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.mob-diary-cal-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #2A2218;
}

.mob-diary-cal-close {
  border: none;
  background: none;
  font-size: 0.7rem;
  color: rgba(42,34,24,0.55);
  cursor: pointer;
}

.mob-diary-cal-grid-wrap {
  padding: 10px 14px 0;
}

.mob-diary-cal-dow-row,
.mob-diary-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mob-diary-cal-dow {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #7A6F55;
  text-align: center;
  padding: 2px 0;
}

.mob-diary-cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.mob-diary-cal-cell.active {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  outline: 1.5px solid var(--red);
}

.mob-diary-cal-cell.active .mob-diary-cal-num {
  color: var(--red);
  font-weight: 700;
}

.mob-diary-cal-cell.offset {
  visibility: hidden;
  pointer-events: none;
}

.mob-diary-cal-cell.future {
  opacity: 0.25;
  pointer-events: none;
}

.mob-diary-cal-cell.today .mob-diary-cal-num {
  color: var(--red);
  font-weight: 700;
}

.mob-diary-cal-cell.active.today .mob-diary-cal-num {
  color: white;
}

.mob-diary-cal-num {
  font-size: 0.65rem;
  font-weight: 500;
  color: #2A2218;
  line-height: 1;
}

.mob-diary-cal-cell:has(.mob-diary-cal-dot) .mob-diary-cal-num {
  font-weight: 700;
  color: #2A2218;
}

.mob-diary-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  margin-top: 1px;
}

.mob-diary-cal-cell.active .mob-diary-cal-dot {
  background: color-mix(in srgb, var(--red) 60%, transparent);
}

/* ─── Strip icons (calendar + pages) ─────────────────── */
.mob-diary-strip-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.mob-diary-pages-btn {
  width: 22px;
  height: 21px;
  border-radius: 5px;
  border: 1px solid rgba(139,100,60,0.2);
  background: #F5EDE0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: rgba(42,34,24,0.6);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mob-diary-pages-btn:hover {
  background: var(--red);
  color: white;
}

.mob-diary-pages-btn.active {
  background: color-mix(in srgb, var(--yellow) 18%, transparent);
  border-color: color-mix(in srgb, var(--yellow) 55%, rgba(139,100,60,0.2));
  color: color-mix(in srgb, var(--yellow) 75%, var(--ink));
}

.mob-diary-pages-btn.active:hover {
  background: var(--yellow);
  color: white;
}

[data-theme="side-b"] .mob-diary-pages-btn {
  background: #F5EDE0;
  border-color: rgba(139,100,60,0.45);
  color: rgba(42,34,24,0.6);
}

/* ─── Pages view (fill bar + grid) ──────────────────── */
.mob-diary-pages-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.mob-diary-fill-bar-wrap {
  padding: 6px 18px 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mob-diary-fill-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.48rem;
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
}

.mob-diary-fill-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.mob-diary-fill-bar {
  height: 100%;
  width: 0;
  background: var(--yellow);
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mob-diary-fill-pct {
  font-family: 'DM Mono', monospace;
  font-size: 0.48rem;
  font-weight: 600;
  color: var(--yellow);
  min-width: 22px;
  text-align: right;
}

.mob-diary-pages-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 6px 14px 14px;
  background-color: #F5EDE0;
  background-image: radial-gradient(circle, #C8BD9C 0.8px, transparent 0.9px);
  background-size: 18px 18px;
  background-position: 8px 8px;
}

.mob-diary-pages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.mob-diary-mini-page {
  aspect-ratio: 3 / 4;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.12s ease;
  overflow: hidden;
  position: relative;
}

.mob-diary-mini-page:active {
  transform: scale(0.96);
}

.mob-diary-mini-page.filled {
  background: var(--bg);
  border-color: color-mix(in srgb, var(--yellow) 40%, var(--border));
}

.mob-diary-mini-page.empty {
  opacity: 0.35;
  cursor: default;
}

.mob-diary-mini-page.empty:active {
  transform: none;
}

.mob-diary-mini-page.today {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

.mob-diary-mini-day {
  font-family: 'Fraunces', serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 2px;
}

.mob-diary-mini-page.today .mob-diary-mini-day {
  color: var(--red);
}

.mob-diary-mini-note {
  font-family: 'Caveat', cursive;
  font-size: 0.5rem;
  color: var(--text-muted);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-shrink: 0;
}

.mob-diary-mini-polaroid {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.7);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.08);
}

.mob-diary-mini-polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mob-diary-mini-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
}

.mob-diary-mini-lines {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mob-diary-mini-line {
  height: 1px;
  background: var(--border);
  opacity: 0.4;
}

.mob-diary-mini-line:nth-child(2) { width: 80%; }
.mob-diary-mini-line:nth-child(3) { width: 55%; }

/* ═══════════════════════════════════════════════
   DIARY TAB
   ═══════════════════════════════════════════════ */

#tab-diary {
  padding: 28px 32px;
}

/* ── Hero ────────────────────────────────────── */
.diary-tab-hero {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 36px;
}

.diary-tab-notebook-wrap {
  width: 180px;
  height: 240px;
  flex-shrink: 0;
  position: relative;
}

.diary-tab-hero-text {
  flex: 1;
  padding-top: 8px;
  min-width: 0;
}

.diary-tab-hero-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}

.diary-tab-hero-sub {
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 16px;
}

.diary-tab-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, transform 0.18s ease;
}

.diary-tab-hero-btn:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
}

/* ── Section heads ──────────────────────────── */
.diary-tab-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--hairline);
}

.diary-tab-section-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.diary-tab-section-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* ── Fill bar ───────────────────────────────── */
.diary-tab-fill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.diary-tab-fill-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.diary-tab-fill-track {
  flex: 1;
  height: 3px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}

.diary-tab-fill-bar {
  height: 100%;
  background: var(--yellow);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.diary-tab-fill-pct {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  font-weight: 600;
  color: var(--yellow);
}

/* ── Pages grid (override existing diary-mini-page class family) ── */
.diary-tab-pages-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 40px;
}

/* Amber dot on filled pages in the tab grid */
.diary-tab-pages-grid .diary-mini-page-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--yellow);
}

/* Today: coral border ring */
.diary-tab-pages-grid .diary-mini-page.today {
  outline: none;
  border: 1.5px solid var(--red);
  box-shadow: 0 0 0 1px var(--red), 1px 2px 6px rgba(0,0,0,.12);
}

.diary-tab-pages-grid .diary-mini-page.today .diary-mini-day {
  color: var(--red);
}

/* Faint ruled lines on empty pages in tab context */
.diary-tab-pages-grid .diary-mini-lines {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.diary-tab-pages-grid .diary-mini-line {
  height: 1px;
  background: var(--hairline);
  opacity: 0.5;
}

.diary-tab-pages-grid .diary-mini-line:nth-child(2) { width: 75%; }
.diary-tab-pages-grid .diary-mini-line:nth-child(3) { width: 50%; }

/* ── Bookshelf ──────────────────────────────── */
.diary-tab-bookshelf {
  position: relative;
  margin-bottom: 12px;
}

.diary-tab-shelf-scroll {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px;
}
.diary-tab-shelf-scroll::-webkit-scrollbar { display: none; }

.diary-tab-shelf-plank {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 14px 0;
  min-height: 140px;
  min-width: min-content;
  background: var(--shelf-wall);
  border-radius: 6px 6px 0 0;
}

.diary-tab-shelf-surface {
  position: relative;
  height: 12px;
  border-radius: 2px 2px 4px 4px;
  background: var(--shelf-bg);
  box-shadow:
    0 2px 4px var(--shelf-shadow),
    0 4px 12px var(--shelf-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  margin: 0 6px;
}
.diary-tab-shelf-surface::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--shelf-top);
  border-radius: 2px 2px 0 0;
}
.diary-tab-shelf-surface::after {
  content: "";
  position: absolute;
  inset: 3px 0 0 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(0, 0, 0, 0.03) 18px,
    rgba(0, 0, 0, 0.03) 20px
  );
  border-radius: 0 0 4px 4px;
}

.diary-tab-shelf-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-align: right;
  padding: 6px 6px 0;
}

.diary-tab-bookshelf-empty {
  font-family: 'Caveat', cursive;
  font-size: 0.9rem;
  color: var(--ink-faint);
  text-align: center;
  padding: 28px 12px;
}

/* ── Book spine ─────────────────────────────── */
.diary-tab-book-spine {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 110px;
  border-radius: 3px 5px 4px 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 3px 8px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.25),
    inset -2px 0 4px rgba(0, 0, 0, 0.1),
    inset 2px 0 3px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.diary-tab-book-spine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.04) 3px,
    rgba(0, 0, 0, 0.04) 6px
  );
  pointer-events: none;
  z-index: 1;
}

.diary-tab-book-spine::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px 5px 0 0;
  z-index: 2;
}

.diary-tab-spine-band-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0 0 4px 2px;
  z-index: 2;
}

.diary-tab-spine-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  position: relative;
  z-index: 3;
}
.diary-tab-spine-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.diary-tab-spine-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.52rem;
  color: rgba(255, 255, 255, 0.85);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.06em;
  line-height: 1;
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  flex: 1;
  display: flex;
  align-items: center;
}

.diary-tab-spine-count {
  font-family: 'DM Mono', monospace;
  font-size: 0.38rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 3;
}

/* Light covers (e.g. Quiet): dark text instead of white */
.diary-tab-book-spine.light-cover .diary-tab-spine-title {
  color: rgba(42, 31, 26, 0.7);
  text-shadow: none;
}
.diary-tab-book-spine.light-cover .diary-tab-spine-count {
  color: rgba(42, 31, 26, 0.4);
}
.diary-tab-book-spine.light-cover .diary-tab-spine-dot {
  background: rgba(42, 31, 26, 0.3);
}

/* Height + width variants */
.diary-tab-book-spine.h-tall   { height: 118px; }
.diary-tab-book-spine.h-medium { height: 105px; }
.diary-tab-book-spine.h-short  { height: 96px; }
.diary-tab-book-spine.w-thick  { width: 42px; }
.diary-tab-book-spine.w-thin   { width: 32px; }

/* Slight lean per spine so the row doesn't look perfectly aligned */
.diary-tab-shelf-plank .diary-tab-book-spine:nth-child(3n+1) { transform: rotate(-0.8deg); }
.diary-tab-shelf-plank .diary-tab-book-spine:nth-child(3n+2) { transform: rotate(0.5deg); }
.diary-tab-shelf-plank .diary-tab-book-spine:nth-child(3n)   { transform: rotate(-0.3deg); }

.diary-tab-book-spine:hover {
  transform: translateY(-12px) rotate(-2deg);
  box-shadow:
    4px 6px 16px rgba(0, 0, 0, 0.35),
    inset -2px 0 4px rgba(0, 0, 0, 0.1),
    inset 2px 0 3px rgba(255, 255, 255, 0.08);
}
.diary-tab-shelf-plank .diary-tab-book-spine:nth-child(3n+1):hover { transform: translateY(-12px) rotate(-2.5deg); }
.diary-tab-shelf-plank .diary-tab-book-spine:nth-child(3n+2):hover { transform: translateY(-12px) rotate(-1.5deg); }
.diary-tab-shelf-plank .diary-tab-book-spine:nth-child(3n):hover   { transform: translateY(-12px) rotate(-2.2deg); }

/* Tooltip */
.diary-tab-spine-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: var(--ink);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.diary-tab-spine-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.diary-tab-book-spine:hover .diary-tab-spine-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 767px) {
  #tab-diary {
    padding: 20px 16px;
  }

  .diary-tab-hero {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
  }

  .diary-tab-notebook-wrap {
    width: 140px;
    height: 190px;
  }

  /* Scale the closed notebook's internals down to fit the 140x190 wrap.
     The default sizes are tuned for the ~300px-tall mylog notebook. */
  .diary-tab-notebook-wrap .diary-nb-spine {
    width: 18px;
    padding: 12px 0;
  }
  .diary-tab-notebook-wrap .diary-nb-hole {
    width: 6px;
    height: 6px;
    border-width: 1.5px;
  }
  .diary-tab-notebook-wrap .diary-nb-cover {
    padding: 14px 14px 12px 14px;
  }
  .diary-tab-notebook-wrap .diary-nb-gutter {
    width: 10px;
  }
  .diary-tab-notebook-wrap .diary-nb-title {
    font-size: 1.4rem;
  }
  .diary-tab-notebook-wrap .diary-nb-month {
    font-size: 0.5rem;
    margin-top: 4px;
  }
  .diary-tab-notebook-wrap .diary-nb-tagline {
    font-size: 0.44rem;
    margin-top: 6px;
  }
  .diary-tab-notebook-wrap .diary-nb-rule {
    margin: 8px 0;
  }
  .diary-tab-notebook-wrap .diary-nb-stat strong {
    font-size: 1.6rem;
  }
  .diary-tab-notebook-wrap .diary-nb-stat span {
    font-size: 0.46rem;
  }
  .diary-tab-notebook-wrap .diary-nb-hint {
    font-size: 0.46rem;
  }
  .diary-tab-notebook-wrap .diary-nb-ribbon {
    right: 12px;
    width: 10px;
    height: 24px;
  }
  /* The palette button is meant for the larger mylog notebook; hide on
     the diary-tab hero to keep the small cover uncluttered. */
  .diary-tab-notebook-wrap .diary-nb-palette-btn {
    display: none;
  }

  .diary-tab-hero-text {
    text-align: center;
    padding-top: 0;
    width: 100%;
  }

  .diary-tab-hero-title {
    font-size: 1.3rem;
  }

  .diary-tab-pages-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 32px;
  }

  /* Bookshelf — slightly smaller plank + spines on phones */
  .diary-tab-shelf-plank {
    min-height: 120px;
    gap: 6px;
    padding: 12px 10px 0;
  }

  .diary-tab-book-spine {
    width: 34px;
    height: 95px;
    padding: 8px 2px 6px;
  }
  .diary-tab-book-spine.h-tall   { height: 100px; }
  .diary-tab-book-spine.h-medium { height: 90px; }
  .diary-tab-book-spine.h-short  { height: 82px; }
  .diary-tab-book-spine.w-thick  { width: 38px; }
  .diary-tab-book-spine.w-thin   { width: 28px; }

  .diary-tab-spine-title { font-size: 0.46rem; }

  /* Tooltips depend on hover; touch users get none. Hide to avoid a
     ghost flash if mobile browsers ever synthesize a hover state. */
  .diary-tab-spine-tooltip { display: none; }
}