/* Chronicle tab (R20). Built by js/ui/chronicle.js inside #chronicle-section.
   Follows docs/ui/mockups/chronicle.html: layer 3 owns the warm --sand accent. Tokens from
   css/tokens.css, components from css/components.css (.card, .btn, .chip, .bar, .tag, .icon-tile). */
.chr-wrap { display: flex; flex-direction: column; gap: var(--sp-4); font-family: var(--font-ui); }
.chr-wrap [hidden], .chr-scrim[hidden] { display: none !important; }

/* Chapter poster */
.chr-chapter { position: relative; overflow: hidden; padding: var(--sp-5); border-color: color-mix(in srgb, var(--sand) 50%, transparent);
  background: linear-gradient(135deg, var(--sand-dim), var(--bg-2) 60%); }
.chr-chapter .eyebrow { color: var(--sand); }
.chr-chapter h1 { margin: var(--sp-1) 0 0; font-family: var(--font-display); color: var(--sand); font-size: var(--fs-32); line-height: 1.15; }
.chr-blurb { max-width: 640px; margin: 6px 0 0; color: var(--text-2); font-size: var(--fs-14); }
.chr-rules { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--sp-3) 0; }
.chr-rules.is-off { opacity: 0.5; }
.chr-time { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center; }
.chr-time .bar-row .dim { white-space: nowrap; }
.chr-stats { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Two columns: challenges | pages */
.chr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.chr-row > .card { min-width: 0; }
.chr-row h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-18); color: var(--text-1); }
.chr-hint { font-size: var(--fs-12); color: var(--text-3); }
.chr-stack { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Challenge rows */
.chr-ch { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3);
  border-radius: var(--r-2); background: var(--bg-1); border: 1px solid var(--line-1); }
.chr-ch.done { border-color: var(--line-brand); }
.chr-ch.run { border-color: var(--sand); box-shadow: 0 0 0 1px var(--sand-dim), 0 0 16px color-mix(in srgb, var(--sand) 20%, transparent); }
.chr-ch.lock { opacity: 0.72; }
.chr-ch .n { font-weight: 700; color: var(--text-1); }
.chr-ch .n .tag { margin-inline-start: 4px; vertical-align: 1px; }
.chr-ch .tag.run { background: var(--sand); color: var(--text-on-accent); }
.chr-ch .r { font-size: var(--fs-12); color: var(--text-2); overflow-wrap: anywhere; }
.chr-ch .best { font-size: var(--fs-11); color: var(--text-3); overflow-wrap: anywhere; }
.chr-ch .bar { margin: 4px 0; }
.chr-ch-rules { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 2px; }
.chr-ch-rules .chip { min-height: 22px; height: auto; max-width: 100%; padding: 2px 8px; font-size: var(--fs-11); white-space: normal; text-align: start; }
.chr-ch .chip.life { white-space: nowrap; }
/* Permanent reward of the first clear (R56): dim until earned */
.chr-reward { margin: 2px 0; }
.chr-reward .chip { min-height: 22px; height: auto; max-width: 100%; padding: 2px 8px; font-size: var(--fs-11); white-space: normal; text-align: start; opacity: 0.75; }
.chr-reward.paid .chip { opacity: 1; }
.chr-reward-sum { font-size: var(--fs-12); color: var(--gold); margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.chr-chapter-h { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-14); color: var(--text-2); }
.chr-chapter-h:first-of-type { margin-top: 0; }

/* Pages tree */
.chr-ptree { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.chr-pnode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-1); background: var(--bg-1); border: 1px solid var(--line-2); color: var(--text-2);
  font: 500 var(--fs-12)/1.35 var(--font-ui); text-align: start; cursor: pointer; min-width: 0; }
.chr-pnode b { display: block; font-size: var(--fs-13); color: var(--text-1); }
.chr-pnode .c { color: var(--sand); font-weight: 700; margin-top: auto; }
.chr-pnode.own { border-color: var(--sand); background: var(--sand-dim); cursor: default; }
.chr-pnode.aff { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.chr-pnode.aff .c { color: var(--gold); }
.chr-pnode.lock { cursor: not-allowed; }
.chr-pnode.lock .c { color: var(--text-3); }
.chr-pnode.future { opacity: 0.5; cursor: default; }
.chr-pnode:focus-visible { outline: 2px solid var(--aether); outline-offset: 2px; }

/* Reset card: keeps / resets, gate, begin */
.chr-reset { margin-top: var(--sp-4); background: var(--bg-1); }
.chr-reset h3 { margin: 0 0 6px; font-size: var(--fs-14); color: var(--text-1); }
.chr-keep { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); font-size: var(--fs-12); color: var(--text-2); }
.chr-keep ul { margin: 4px 0 0 16px; padding: 0; }
.chr-keep li { overflow-wrap: anywhere; }
.chr-keep .h { font-weight: 700; }
.chr-gate { margin-top: var(--sp-3); }
.chr-begin { margin-top: var(--sp-3); border-color: var(--sand); color: var(--sand); }
.chr-begin.btn-primary { color: var(--text-on-accent); }
.chr-note { font-size: var(--fs-12); color: var(--text-3); margin-top: var(--sp-2); }

/* Confirm (epic): modal on desktop, bottom sheet on phone (style guide §5.7) */
.chr-scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--shade) 72%, transparent); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: var(--gutter, 16px); }
.chr-modal { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg-1);
  border: 1px solid var(--sand); border-radius: var(--r-3); box-shadow: var(--el-3); padding: var(--sp-5); font-family: var(--font-ui); }
.chr-modal h2 { margin: 0 0 var(--sp-2); font-family: var(--font-display); color: var(--sand); font-size: var(--fs-24); }
.chr-modal p { margin: 0; color: var(--text-2); font-size: var(--fs-14); }
.chr-modal .chr-keep { margin-top: var(--sp-3); }
.chr-modal .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.chr-modal .actions .btn { flex: 1; }

@media (max-width: 1023px) { .chr-row { grid-template-columns: 1fr; } }
@media (max-width: 639px) {
  .chr-chapter { padding: var(--sp-4); }
  .chr-chapter h1 { font-size: var(--fs-24); }
  .chr-time { grid-template-columns: 1fr; }
  .chr-ch { grid-template-columns: 40px minmax(0, 1fr); }
  .chr-ch > :last-child { grid-column: 2; justify-self: start; }
  .chr-keep { grid-template-columns: 1fr; }
  .chr-scrim { align-items: end; padding: 0; }
  .chr-modal { width: 100%; border-radius: var(--r-3) var(--r-3) 0 0; max-height: 92vh; padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) { .chr-ch .btn, .chr-begin, .chr-modal .btn { min-height: 44px; } }