/* ==========================================================================
   Game — Journal (unit E). Prefix gm-jou-.
   ==========================================================================
   Tokens only. A mood's tone (5 thriving … 1 burning out, LiFE RPG's two
   ends of the Memos map) is --jou-c: good-text, accent, muted text, warning,
   critical — the order every palette preset keeps. Energy bolts are gold as
   in LiFE RPG (frame 45), focus diamonds the accent, stress the critical.
   The tone classes are shared with Quests' tier classes (.t1–.t5); each
   sheet sets only its own custom property on them.                         */

.t5 { --jou-c: var(--good-text); }
.t4 { --jou-c: color-mix(in srgb, var(--accent) 62%, var(--text-muted)); }
.t3 { --jou-c: var(--text-muted); }
.t2 { --jou-c: var(--warning); }
.t1 { --jou-c: var(--critical); }

.gm-jou { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.gm-jou-pane { display: flex; flex-direction: column; gap: 14px; }
.gm-jou-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm-jou .section-head { margin-top: 4px; }

/* --- the day bar ------------------------------------------------------------ */

.gm-jou-daybar { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
.gm-jou-daybar .icon-btn { font-size: 19px; }
.gm-jou-daybar .icon-btn:disabled { opacity: .25; }
.gm-jou-day { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.gm-jou-day b { font-family: var(--s-display); font-size: 20px; font-weight: 600; }
.gm-jou-day span { font-family: var(--s-mono); font-size: 11px; color: var(--text-muted); }
.gm-jou-back { align-self: center; }
.gm-jou-foot { text-align: center; }

/* --- faces ---------------------------------------------------------------------- */

.gm-jou-face { display: block; color: var(--jou-c, var(--text-secondary)); }
.gm-jou-face-bg { fill: color-mix(in srgb, var(--jou-c, var(--text-muted)) 16%, transparent); stroke: currentColor; stroke-width: 1.4; }

/* --- the check-in ------------------------------------------------------------------ */

.gm-jou-check {
  display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
  transition: border-color 0.3s ease;
}
.gm-jou-check[class*=" t"] {
  border-color: color-mix(in srgb, var(--jou-c) 35%, transparent);
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--jou-c) 12%, transparent), transparent 70%), var(--surface-1);
}
.gm-jou-check-top { display: flex; align-items: center; gap: 12px; }
.gm-jou-check-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-jou-feel { font-family: var(--s-display); font-size: 25px; font-weight: 600; line-height: 1.15; color: var(--jou-c, var(--text-primary)); }
.gm-jou-check:not([class*=" t"]) .gm-jou-feel { color: var(--text-primary); }
.gm-jou-feel-sub { font-size: 12.5px; color: var(--text-muted); }
.gm-jou-perf { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gm-jou-perf .gm-eyebrow { font-size: 8.5px; letter-spacing: 0.1em; }
.gm-jou-ring { width: 64px; height: 64px; display: block; }
.gm-jou-ring circle { fill: none; stroke-width: 5; }
.gm-jou-ring .bg { stroke: var(--surface-2); }
.gm-jou-ring .fg {
  stroke: var(--jou-c, var(--accent)); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 26px 26px;
  transition: stroke-dasharray 0.45s cubic-bezier(0.23, 1, 0.32, 1), stroke 0.3s ease;
}
.gm-jou-check:not([class*=" t"]) .gm-jou-ring .fg { stroke: var(--accent); }
.gm-jou-ring text { fill: var(--text-primary); font-family: var(--s-value-f); font-weight: 600; font-size: 15px; }

/* Moods: a row of faces; the chosen one grows and takes its colour. */
.gm-jou-moods {
  display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px;
  scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 16px;
}
.gm-jou-moods::-webkit-scrollbar { display: none; }
.gm-jou-mood {
  appearance: none; flex: 0 0 auto; min-width: 60px; cursor: pointer; font: inherit; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px 7px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 14px;
  color: var(--text-muted); font-size: 11.5px;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.2s ease, border-color 0.2s ease;
}
.gm-jou-mood .gm-jou-face { color: var(--text-muted); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; }
.gm-jou-mood .gm-jou-face-bg { fill: transparent; }
.gm-jou-mood:active { transform: scale(0.94); }
.gm-jou-mood.on {
  color: var(--text-primary); font-weight: 600;
  background: color-mix(in srgb, var(--jou-c) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--jou-c) 55%, transparent);
}
.gm-jou-mood.on .gm-jou-face { color: var(--jou-c); transform: scale(1.14); }
.gm-jou-mood.on .gm-jou-face-bg { fill: color-mix(in srgb, var(--jou-c) 18%, transparent); }
@media (hover: hover) and (pointer: fine) { .gm-jou-mood:hover .gm-jou-face { color: var(--jou-c); } }

.gm-jou-rows { display: flex; flex-direction: column; gap: 6px; }
.gm-jou-k {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 1px;
  font-family: var(--s-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.gm-jou-k svg { color: var(--warning); }
.gm-jou-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; }
.gm-jou-slot { font-size: 13px; color: var(--text-secondary); }
.gm-jou-pips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; max-width: 300px; }
.gm-jou-pip {
  appearance: none; cursor: pointer; height: 38px; border-radius: 10px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2);
  color: color-mix(in srgb, var(--text-muted) 55%, transparent);
  transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.gm-jou-pip:active { transform: scale(0.9); }
.gm-jou-pip i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.gm-jou-pip svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gm-jou-pips.energy .gm-jou-pip.on { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.gm-jou-pips.focus .gm-jou-pip.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.gm-jou-pips.stress .gm-jou-pip.on { color: var(--critical); background: color-mix(in srgb, var(--critical) 11%, var(--surface-1)); border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.gm-jou-pips.stress .gm-jou-pip i { width: calc(5px + var(--i) * 2px); height: calc(5px + var(--i) * 2px); }
.gm-jou-pip.on svg { transform: scale(1.12); }

.gm-jou-pay {
  display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--grid);
  font-size: 12.5px; color: var(--text-muted);
}
.gm-jou-pay.done { color: var(--good-text); }
.gm-jou-pay-mark {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--surface-1); background: var(--good-text); animation: gm-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.gm-jou-flame {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--s-mono); font-size: 11.5px; color: var(--serious);
  padding: 3px 7px; border-radius: 5px; background: color-mix(in srgb, var(--serious) 12%, transparent);
}

/* --- the diary ------------------------------------------------------------------- */

.gm-jou-diary { display: flex; flex-direction: column; gap: 12px; }
.gm-jou-sec-head { display: flex; align-items: center; gap: 8px; }
.gm-jou-status { margin-left: auto; font-family: var(--s-mono); font-size: 10.5px; color: var(--text-muted); }
.gm-jou-status span { display: inline-flex; align-items: center; gap: 4px; }
.gm-jou-status.saved { color: var(--good-text); }
.gm-jou-status.editing { color: var(--text-secondary); }
.gm-jou-status.error { color: var(--critical); }
.gm-jou-sections { display: flex; flex-direction: column; gap: 14px; }
.gm-jou-sec { display: flex; flex-direction: column; gap: 6px; }
.gm-jou-sec-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.gm-jou-refill {
  appearance: none; margin-left: auto; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  color: var(--accent); background: var(--accent-quiet); border: 0;
}
.gm-jou-ta {
  width: 100%; resize: none; min-height: 84px; font: inherit; font-size: 14.5px; line-height: 1.55;
  color: var(--text-primary); background: var(--surface-2); border: 1px solid transparent; border-radius: 12px;
  padding: 10px 12px; outline: none; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gm-jou-ta:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--surface-1); }
.gm-jou-ta::placeholder { color: var(--text-muted); }
.gm-jou-ta:disabled { opacity: .6; }
.gm-jou-sec.pre .gm-jou-ta { font-family: var(--s-mono); font-size: 12px; line-height: 1.6; color: var(--text-secondary); border-style: dashed; border-color: var(--border-strong); }
.gm-jou-sec.foreign .gm-jou-ta { border: 1px dashed var(--border-strong); }

/* --- the lock --------------------------------------------------------------------- */

.gm-jou-lock {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 20px 20px;
  background: radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--surface-1);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.gm-jou-lock.opening { opacity: 0; transform: scale(0.97); }
.gm-jou-lock-ico {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-quiet);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
}
.gm-jou-lock.opening .gm-jou-lock-ico { transform: translateY(-4px); }
.gm-jou-lock-t { font-family: var(--s-display); font-size: 21px; font-weight: 600; margin-top: 4px; }
.gm-jou-lock-sub { font-size: 13px; line-height: 1.5; color: var(--text-secondary); max-width: 440px; }
.gm-jou-lock-sub b { color: var(--text-primary); font-weight: 600; }
.gm-jou-lock-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; margin-top: 4px; }
.gm-jou-pass { margin: 0; text-align: center; }
.gm-jou-unlock { width: 100%; }
.gm-jou-lock-msg { font-size: 12.5px; color: var(--critical); min-height: 1em; }
.gm-jou-lock-note { font-size: 11.5px; color: var(--text-muted); }

/* --- memos -------------------------------------------------------------------------- */

.gm-jou-streak { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }
.gm-jou-streak-ico {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  color: var(--serious); background: color-mix(in srgb, var(--serious) 14%, transparent);
}
.gm-jou-streak:not(.cold) .gm-jou-streak-ico { animation: gm-jou-flicker 2.6s ease-in-out infinite; }
@keyframes gm-jou-flicker { 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--serious) 45%, transparent); } }
.gm-jou-streak.cold .gm-jou-streak-ico { color: var(--text-muted); background: var(--surface-2); }
.gm-jou-streak-n { font-size: 13px; color: var(--text-secondary); }
.gm-jou-streak-n b { font-family: var(--s-value-f); font-weight: var(--s-value-w, 600); font-size: 32px; line-height: 1; color: var(--text-primary); }
.gm-jou-streak-t { font-size: 13px; font-style: italic; color: var(--text-secondary); margin: 2px 0; }

.gm-jou-memos { display: flex; flex-direction: column; gap: 12px; }
.gm-jou-map { display: grid; grid-template-columns: 38px repeat(7, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 380px; margin: 0 auto; }
.gm-jou-dow, .gm-jou-wk {
  display: grid; place-items: center; height: 22px; border-radius: 5px;
  font-family: var(--s-mono); font-size: 10px; color: var(--text-muted); background: var(--surface-2);
}
.gm-jou-wk:first-child { background: transparent; }
.gm-jou-cell {
  appearance: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; background: var(--heat-0);
  transition: transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
}
span.gm-jou-cell { cursor: default; }
.gm-jou-cell:active { transform: scale(0.9); }
.gm-jou-cell i { width: 42%; height: 42%; border-radius: 3px; }
.gm-jou-cell[class*=" t"] { background: color-mix(in srgb, var(--jou-c) 16%, var(--heat-0)); }
.gm-jou-cell[class*=" t"] i { background: var(--jou-c); }
.gm-jou-cell.plain i { background: var(--text-muted); }
.gm-jou-cell.out { visibility: hidden; }
.gm-jou-cell.future { opacity: .45; }
.gm-jou-cell.today { box-shadow: inset 0 0 0 1.5px var(--text-secondary); }
.gm-jou-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--s-mono); font-size: 10.5px; color: var(--text-muted); }
.gm-jou-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gm-jou-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--jou-c); }

.gm-jou-trendcard { padding: 12px 14px 8px; }
.gm-jou-trend { width: 100%; height: auto; display: block; }
.gm-jou-trend .grid { stroke: var(--grid); }
.gm-jou-trend .ax { fill: var(--text-muted); font-family: var(--s-mono); font-size: 9px; }
.gm-jou-trend .bar {
  fill: var(--jou-c, var(--accent)); transform-box: fill-box; transform-origin: bottom;
  animation: gm-jou-up 0.5s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--i) * 25ms);
}
.gm-jou-trend .none { fill: var(--surface-2); }
@keyframes gm-jou-up { from { transform: scaleY(0.05); } }

.gm-jou-counts { display: flex; flex-direction: column; gap: 8px; }
.gm-jou-count { display: grid; grid-template-columns: 26px 72px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 13px; }
.gm-jou-count-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-jou-count-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.gm-jou-count-bar i {
  display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--jou-c);
  transform-origin: left; animation: gm-ene-grow 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--i) * 40ms);
}
.gm-jou-count b { font-family: var(--s-mono); font-size: 12px; text-align: right; color: var(--text-secondary); }

/* --- the log --------------------------------------------------------------------------- */

.gm-jou-logday { display: flex; flex-direction: column; gap: 6px; }
.gm-jou-logday-h { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.gm-jou-logday-tot { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.gm-jou-logday-tot .gm-chip { font-size: 10.5px; padding: 1px 6px; }
.gm-jou-more { align-self: center; padding: 6px 0 10px; }
.gm-jou-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 20px; }
.gm-jou-empty .sub { font-size: 13px; line-height: 1.5; max-width: 340px; }
.gm-jou-empty-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--accent); background: var(--accent-quiet); }

/* --- the hub nudge (inside the Energy card) ------------------------------------------------ */

.gm-jou-nudge {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 11px;
  padding-top: 10px; border-top: 1px solid var(--grid); cursor: pointer;
}
.gm-jou-nudge-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-quiet);
}
.gm-jou-nudge-face { width: 40px; height: 40px; display: grid; place-items: center; }
.gm-jou-nudge-face .gm-jou-face { width: 32px; height: 32px; }
.gm-jou-nudge-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.gm-jou-nudge-t b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.gm-jou-nudge-t span { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gm-jou-nudge-t .gm-chip { font-size: 10.5px; padding: 1px 6px; }
.gm-jou-nudge .gm-jou-flame { margin-left: 0; }
.gm-jou-nudge-btn { min-height: 38px; padding: 0 14px; border-radius: 999px; }

/* --- settings --------------------------------------------------------------------------------- */

.gm-jou-set-moods, .gm-jou-set-tpl { display: flex; flex-direction: column; gap: 6px; }
.gm-jou-set-mood { display: grid; grid-template-columns: 40px minmax(0, 1fr) 112px 36px; gap: 6px; align-items: center; }
.gm-jou-set-mood .sheet-input, .gm-jou-set-sec .sheet-input { margin: 0; }
.gm-jou-set-face {
  appearance: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
}
.gm-jou-set-tone { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }
.gm-jou-set-sec { display: grid; grid-template-columns: minmax(0, 1fr) 36px 36px 36px; gap: 6px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.gm-jou-set-sec:last-child { border-bottom: 0; }
.gm-jou-set-sec-main { display: flex; flex-direction: column; gap: 5px; }
.gm-jou-set-prompt { font-size: 13px; }

@media (max-width: 440px) {
  .gm-jou-feel { font-size: 22px; }
  .gm-jou-row { grid-template-columns: 56px minmax(0, 1fr); }
  .gm-jou-set-mood { grid-template-columns: 40px minmax(0, 1fr) 118px 36px; }
  .gm-jou-set-tone { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-jou-pay-mark, .gm-jou-streak-ico, .gm-jou-trend .bar, .gm-jou-count-bar i { animation: none !important; }
  .gm-jou-mood, .gm-jou-mood .gm-jou-face, .gm-jou-pip, .gm-jou-pip svg, .gm-jou-ring .fg, .gm-jou-lock, .gm-jou-cell { transition: none; }
}