/* compass.css — Daddy's Compass reading library. Brand tokens only (maps --moore-* → local names,
   like the rest of the kit). Green / cream / gold; NO blue. Serif for story + headings, sans for chrome.
   Honest, calm surfaces; no scores, no streaks. Reduced-motion respected. */

:root {
  --c-forest: var(--moore-forest);
  --c-green: var(--moore-green);
  --c-leaf: var(--moore-good);
  --c-brass: var(--moore-gold);
  --c-brass-deep: var(--moore-gold-deep);
  --c-cream: var(--moore-cream);
  --c-cream-2: var(--moore-cream-2);
  --c-paper: var(--moore-paper);
  --c-ink: var(--moore-ink);
  --c-muted: var(--moore-muted);
  --c-line: var(--moore-line);
  --c-good-soft: var(--moore-good-soft);
  --c-serif: "Cormorant Garamond", Georgia, "Iowan Old Style", serif;
  --c-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--c-sans); color: var(--c-ink);
  background: radial-gradient(1100px 520px at 50% -8%, #ffffff 0%, var(--c-cream) 55%);
  min-height: 100vh; padding: 26px 16px 64px; line-height: 1.55;
}
.wrap { width: 100%; max-width: 700px; margin: 0 auto; }

.kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--c-brass-deep);
  font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: 11.5px; }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-brass); }

.card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 22px;
  box-shadow: 0 20px 55px -26px rgba(27, 42, 29, .4); padding: 26px 28px 24px; position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--c-leaf), var(--c-brass)); }

h1.compass-name { font-family: var(--c-serif); font-weight: 600; font-size: 34px; line-height: 1.08;
  margin: .1em 0 .12em; color: var(--c-forest); }
.compass-tagline { font-family: var(--c-serif); font-style: italic; font-size: 19px; color: var(--c-green); margin: 0 0 10px; }
.compass-desc { font-size: 15px; color: var(--c-muted); margin: 0 0 6px; }
.compass-author { font-size: 13.5px; color: var(--c-brass-deep); font-weight: 600; margin: 8px 0 2px; }

/* ---- shelf of categories ---- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 18px; }
.shelf-title { font-family: var(--c-serif); font-size: 22px; color: var(--c-forest); margin: 22px 0 2px; }
.tile { text-align: left; background: var(--c-cream); border: 1.5px solid var(--c-line); border-radius: 16px;
  padding: 16px 16px 15px; cursor: pointer; font-family: inherit; color: var(--c-ink); position: relative;
  transition: border-color .15s ease, transform .12s ease; }
.tile:hover { border-color: var(--c-leaf); transform: translateY(-1px); }
.tile:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 2px; }
.tile.soon { cursor: default; opacity: .82; }
.tile.soon:hover { border-color: var(--c-line); transform: none; }
.tile.has-cover { padding-top: 0; overflow: hidden; }
.tile-cover { position: relative; height: 96px; margin: 0 -16px 12px; border-radius: 15px 15px 0 0;
  background-color: var(--c-cream-2); background-size: cover; background-position: center; background-repeat: no-repeat; }
.tile-cover .t-pill { top: 10px; right: 10px; box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); }
.tile .t-name { font-family: var(--c-serif); font-size: 20px; font-weight: 600; color: var(--c-forest); margin-bottom: 4px; }
.tile .t-tag { font-size: 13.5px; color: var(--c-green); line-height: 1.4; }
.tile .t-meta { font-size: 11.5px; color: var(--c-muted); margin-top: 10px; font-weight: 600; }
.tile .t-pill { position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px; }
.tile .t-pill.ready { background: var(--c-good-soft); color: #2b6a37; }
.tile .t-pill.soon { background: #f3ecda; color: var(--c-brass-deep); }
.tile .t-pill.locked { background: #f3ecda; color: var(--c-brass-deep); }
.tile.locked { cursor: pointer; opacity: .92; border-style: dashed; }
.tile.locked:hover { border-color: var(--c-brass); transform: none; }
.tile.locked .t-name { color: var(--c-green); }

.unlocknote { background: var(--c-good-soft); border: 1px solid #bfe0c6; border-radius: 12px; padding: 10px 14px;
  color: #2b6a37; font-weight: 600; font-size: 14px; margin: 12px 0 2px; }
.lockmsg { background: #f3ecda; border: 1px solid var(--c-line); border-radius: 11px; padding: 10px 13px;
  color: var(--c-brass-deep); font-size: 14px; font-weight: 600; margin: 8px 0 2px; }

.story-row.locked { border-style: dashed; opacity: .92; }
.story-row .sr-lock { margin-left: 8px; }
.story-row .sr-lockmsg { font-size: 12.5px; color: var(--c-brass-deep); font-weight: 700; margin-top: 7px; }

/* ---- back / breadcrumb ---- */
.crumb { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 14px; color: var(--c-brass-deep); padding: 4px 0; margin-bottom: 8px; }
.crumb:hover { text-decoration: underline; }

/* ---- category → story list ---- */
.storylist { display: grid; gap: 12px; margin-top: 14px; }
.story-row { display: flex; gap: 13px; align-items: flex-start; text-align: left; background: var(--c-cream);
  border: 1.5px solid var(--c-line); border-radius: 14px; padding: 13px 15px; cursor: pointer; font-family: inherit; color: var(--c-ink); }
.story-row .sr-cover { width: 66px; height: 66px; flex: 0 0 auto; border-radius: 11px; background-color: var(--c-cream-2);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.story-row .sr-body { flex: 1 1 auto; min-width: 0; }
.story-row.locked .sr-cover { filter: grayscale(.4) opacity(.85); }
.story-row:hover { border-color: var(--c-leaf); }
.story-row .sr-num { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-brass-deep); }
.story-row .sr-title { font-family: var(--c-serif); font-size: 21px; font-weight: 600; color: var(--c-forest); margin: 2px 0 3px; }
.story-row .sr-blurb { font-size: 14px; color: var(--c-green); line-height: 1.45; }
.story-row .sr-done { font-size: 12px; color: #2b6a37; font-weight: 700; margin-top: 7px; }

/* ---- story reading view ---- */
.catbadge { display: inline-flex; align-items: center; gap: 8px; background: var(--c-cream); border: 1px solid var(--c-line);
  color: var(--c-green); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; margin-bottom: 8px; }
.story-hero { height: 168px; border-radius: 16px; margin: 10px 0 14px; background-color: var(--c-cream-2);
  background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 10px 30px -18px rgba(27,42,29,.5); }
h2.story-title { font-family: var(--c-serif); font-size: 30px; line-height: 1.1; margin: .1em 0 .28em; color: var(--c-forest); }
.blurb { font-size: 16.5px; color: var(--c-green); background: var(--c-cream); border-left: 3px solid var(--c-brass);
  padding: 11px 14px; border-radius: 10px; margin: 4px 0 14px; }
.hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-muted);
  background: var(--c-cream); border-radius: 999px; padding: 5px 11px; margin: 2px 0 16px; }
.hint .u { border-bottom: 2px dotted var(--c-brass); }

.story { font-family: var(--c-serif); font-size: 20px; line-height: 1.62; color: var(--c-ink); }
.story p { margin: 0 0 15px; }
.def { border-bottom: 2px dotted var(--c-brass); cursor: pointer; color: var(--c-forest); font-style: normal; padding-bottom: 1px; }
.def:hover { background: #f6edd8; }
.def:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 2px; }

.readmore { margin: 8px 0 4px; }
button.primary { font-family: inherit; cursor: pointer; border: none; border-radius: 12px; font-weight: 700; font-size: 16px;
  padding: 12px 20px; background: linear-gradient(180deg, #4a4f39, var(--c-green)); color: #fff; border: 1px solid var(--c-brass); }
button.primary:hover { filter: brightness(1.06); }
button.ghost { font-family: inherit; cursor: pointer; border: 1.5px solid var(--c-line); border-radius: 12px; font-weight: 700;
  font-size: 15px; padding: 10px 16px; background: var(--c-cream); color: var(--c-ink); }
button.ghost:hover { border-color: var(--c-leaf); }

.rule { height: 1px; background: var(--c-line); margin: 20px 0; }
.sec-title { font-family: var(--c-serif); font-size: 21px; color: var(--c-forest); margin: 24px 0 4px; display: flex; align-items: center; gap: 8px; }

/* quiz */
.q { margin: 16px 0 4px; }
.q-kind { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-brass-deep); margin-bottom: 5px; }
.q-text { font-size: 17.5px; font-weight: 700; color: var(--c-forest); line-height: 1.35; margin-bottom: 9px; font-family: var(--c-serif); }
.opt { display: block; width: 100%; text-align: left; background: var(--c-cream); border: 1.5px solid var(--c-line); color: var(--c-ink);
  border-radius: 11px; padding: 12px 15px; margin: 7px 0; font-weight: 600; font-size: 15.5px; cursor: pointer; font-family: inherit; }
.opt:hover { border-color: var(--c-leaf); }
.opt.correct { background: var(--c-good-soft); border-color: var(--c-leaf); color: #1c5b2d; }
.opt.chosen-wrong { background: #FBF1E7; border-color: #d8a25f; color: #7a4a17; }
.opt[disabled] { cursor: default; opacity: .96; }
.fb { margin: 6px 0 2px; font-size: 15px; line-height: 1.5; padding: 10px 13px; border-radius: 9px; display: none; }
.fb.show { display: block; }
.fb.good { background: var(--c-good-soft); color: #1c5b2d; }
.fb.soft { background: #FBF1E7; color: #7a4a17; }

/* reflection */
textarea { width: 100%; min-height: 92px; resize: vertical; border: 1.5px solid var(--c-line); border-radius: 12px;
  background: var(--c-cream); padding: 13px 14px; font-family: inherit; font-size: 16px; color: var(--c-ink); line-height: 1.5; }
textarea:focus { outline: none; border-color: var(--c-leaf); }
.savebar { display: flex; align-items: center; gap: 12px; margin-top: 11px; flex-wrap: wrap; }
.saved { display: none; font-size: 14.5px; color: var(--c-brass-deep); font-weight: 700; }
.saved.show { display: inline; }
.savedbox { display: none; margin-top: 12px; background: var(--c-good-soft); border: 1px solid #bfe0c6; border-radius: 11px; padding: 12px 14px; }
.savedbox.show { display: block; }
.savedbox .lbl { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: #2b6a37; margin-bottom: 4px; }
.savedbox .txt { font-family: var(--c-serif); font-size: 17px; color: var(--c-forest); font-style: italic; }

/* honest coming-soon panel */
.soon-panel { background: var(--c-cream); border: 1px dashed var(--c-line); border-radius: 14px; padding: 18px 18px;
  color: var(--c-muted); font-size: 15px; line-height: 1.55; margin-top: 14px; }
.soon-panel b { color: var(--c-brass-deep); }

.foot { margin-top: 20px; text-align: center; color: var(--c-muted); font-size: 12px; line-height: 1.6; }
.foot b { color: var(--c-brass-deep); }

/* tap-a-word popover */
#pop { position: fixed; max-width: 280px; background: var(--c-forest); color: var(--c-cream); border-radius: 14px;
  padding: 13px 15px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5); z-index: 50; display: none; font-size: 14.5px; line-height: 1.45; }
#pop.show { display: block; }
#pop .pword { font-family: var(--c-serif); font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 3px; text-transform: capitalize; }
#pop .keep { margin-top: 10px; background: var(--c-brass); color: #2a2010; border: none; border-radius: 9px; font-weight: 800;
  font-size: 13px; padding: 8px 12px; cursor: pointer; width: 100%; }
#pop .keep.kept { background: #6f5a34; color: var(--c-cream); }
#pop .arrow { position: absolute; bottom: -7px; left: 24px; width: 14px; height: 14px; background: var(--c-forest); transform: rotate(45deg); }

/* ---- teaser / reveal curtain (excitement while it's still locked) ---- */
.card.teaser { text-align: center; }
.card.teaser::before { background: linear-gradient(90deg, var(--c-brass), var(--c-leaf), var(--c-brass)); }
.teaser-spark { font-size: 40px; line-height: 1; margin: 2px 0 6px; animation: teaser-twinkle 2.6s ease-in-out infinite; }
.teaser-lead { font-size: 17px; color: var(--c-green); line-height: 1.5; margin: 4px auto 10px; max-width: 460px; }
.teaser-count { display: inline-block; background: var(--c-cream); border: 1px solid var(--c-line); color: var(--c-brass-deep);
  font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px; margin: 6px 0 16px; }
.teaser-peek { margin-top: 6px; }
.teaser-tile { position: relative; overflow: hidden; opacity: .96; cursor: default; border-style: dashed; }
.teaser-tile:hover { transform: none; border-color: var(--c-line); }
.teaser-tile .t-name { color: var(--c-green); }
.teaser-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,
  transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%);
  animation: teaser-shimmer 3.2s ease-in-out infinite; pointer-events: none; }
.teaser-foot { margin-top: 16px; color: var(--c-brass-deep); font-weight: 600; font-size: 14.5px; }
@keyframes teaser-shimmer { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes teaser-twinkle { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.15); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .teaser-spark, .teaser-tile::after { animation: none; }
  .teaser-tile::after { display: none; }
}