/* The journal demo's look. Same palette and scales as ../style.css (twilight
   always, the Terrain agent purple as accent); cards and entity chips follow the app's
   journal (EntryCard, entities.css). Mobile-first; nothing under 12px;
   everything tappable about 40px tall. */

:root {
  --bg: #14101e;
  --card: #1e1830;
  --text: #ddd0e8;
  --text-2: rgba(200, 185, 220, 0.75);
  --muted: rgba(170, 155, 190, 0.62);
  --border: #2e2545;
  --accent: #7c5cbf;
  --accent-text: #a58cdc;  /* the same purple, lighter, for words on the dark ground */
  --person-light: 70%;
  --radius: 6px;  /* the one corner rounding, everywhere */
  --fs-sm: 14px;
  --fs-body: 17px;
  --fs-md: 21px;
  --fs-lg: 27px;
  /* Two faces, as on the main page: Marcellus for headings, Jost for the rest. */
  --display: 'Marcellus', Optima, Candara, serif;
  --sans: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
}

button { font: inherit; color: inherit; }

/* Text styles: the main page's six (see ../style.css), nothing else sets a font. */
.intro h1 { font-family: var(--display); font-size: var(--fs-lg); font-weight: 400; line-height: 1.2; }
.day-nav h2, .panel-head h2 { font-size: var(--fs-md); font-weight: 500; line-height: 1.25; }
.roster h2, .panel-section h3 {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.entity, .day-chip-number, .who, strong, b { font-weight: 600; }
.day-chip-weekday, .who, .time, .muted, .mention-date, .source-chip { font-size: var(--fs-sm); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Intro and roster ---------------------------------------------------- */

.intro, .journal {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

.intro { padding-top: 24px; }
.intro h1 { margin: 12px 0; }
.intro p { color: var(--text-2); margin: 0 0 12px; }
.intro .hint { color: var(--text); }

.back {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text-2);
  text-decoration: none;
}
.back:hover { text-decoration: underline; }

.roster {
  display: grid;
  gap: 8px;
  margin: 16px 0 8px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.roster h2 {
  color: var(--muted);
  margin: 4px 0;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row .entity { min-height: 40px; padding: 0 12px; }

/* --- Names and threads inside text (the app's entities.css) -------------- */

.entity {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: hsl(var(--hue) 65% var(--person-light));
  border-bottom: 1px dotted currentColor;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.entity:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }

.entity-thread {
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0 4px;
}
.entity-thread:hover { background: var(--accent); color: #fff; }

/* --- The day ------------------------------------------------------------- */

.day-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.day-nav h2 { flex: 1; text-align: center; margin: 0; }

.nav-btn, .close-btn {
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}
.nav-btn:disabled { opacity: 0.35; cursor: default; }

.day-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px;
  scrollbar-width: thin;
}
.day-chip {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.day-chip.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.day-chip-weekday { opacity: 0.8; }

.cards { list-style: none; margin: 4px 0 64px; padding: 0; }

.card {
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 16px 12px;
  margin-bottom: 12px;
}
.card.who-K {
  border-style: dashed;
  background: color-mix(in srgb, var(--card) 55%, transparent);
}
.card.flash { animation: flash 1.6s ease-out; }
@keyframes flash {
  0%, 30% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

.card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.who {
  padding: 2px 8px;
  border-radius: var(--radius);
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.who-K .who {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  font-style: italic;
}
.time { color: var(--muted); }
.card-text { margin: 0; }
.who-K .card-text { font-style: italic; color: var(--text-2); }

/* --- The panel: bottom sheet on phones, right column on wide screens ----- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 16, 0.4);
  z-index: 10;
}

.panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  z-index: 11;
}
.panel[hidden], .scrim[hidden] { display: none; }

@media (min-width: 900px) {
  .panel {
    left: auto;
    top: 0;
    width: 420px;
    max-height: none;
    border-top: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
  }
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 8px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { flex: 1; margin: 0; }
.panel-head h2.person-title { color: hsl(var(--hue) 65% var(--person-light)); }
.close-btn { font-size: var(--fs-body); }

.panel-body { overflow-y: auto; padding: 12px 16px 32px; }

.panel-section h3 {
  color: var(--muted);
  margin: 24px 0 8px;
}

.blurb, .charter { margin: 0 0 12px; }
.charter { font-style: italic; color: var(--text-2); }
.muted { color: var(--muted); margin: 8px 0 0; }

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.timeline { display: flex; gap: 4px; }
.timeline-cell {
  flex: 1;
  height: 28px;
  min-width: 0;
  border-radius: var(--radius);
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.timeline-cell.on {
  background: hsl(var(--hue) 65% var(--person-light));
  cursor: pointer;
}

.mentions { list-style: none; margin: 0; padding: 0; }
.mention {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-bottom: 8px;
  padding: 8px 12px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.mention:hover { border-color: var(--accent); }
.mention-date { display: block; color: var(--muted); margin-bottom: 2px; }

.fact {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 8px;
}
.fact p { margin: 0 0 8px; }

.source-chip {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.source-chip:hover { border-color: var(--accent); color: var(--accent-text); }