/* The whole journey on one page.
 *   .sj  the story's Field notes (js/story-journey.js), on the teal field-notes card
 *   .cj  the original campaign's journal tab (js/chapter.js journeyPage), on the charter journal
 *   .ow-dial-wait  where the time dial takes you ("until dusk") */

/* ------------------------------------------------------------ the story */
.sj { --sj-brass:#d9c48f; --sj-cream:#f1ead4; --sj-ink:#d7ddd3; --sj-dim:#8a978f; --sj-faint:#5f6f6a; --sj-leaf:#9fc7a5;
  --sj-card:#16282d; --sj-line:#80938d40;
  margin:20px 0 6px; padding-top:16px; border-top:1px solid var(--sj-line); color:var(--sj-ink); }
.sj-head { margin-bottom:12px; }
.sj-eyebrow { margin:0; font:700 12px/1.4 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--sj-brass); }
.sj .sj-lede { margin:2px 0 0; font:italic 15px/1.5 Georgia,serif; color:#b9c4b8; }
.sj-tallies { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; margin:0 0 6px; }
.sj-tally { display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:6px; padding:10px 12px 9px; background:var(--sj-card); border:1px solid #2b4247; border-radius:9px; }
.sj-tally b { font:500 26px/1 Georgia,serif; color:var(--sj-cream); }
.sj-tally .sj-of { font:14px/1 Georgia,serif; color:var(--sj-dim); }
.sj-tally small { grid-column:1 / -1; margin-top:5px; font:700 10px/1.3 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--sj-dim); }

.sj-part { margin-top:18px; }
.sj-part-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.sj-part-head h4 { margin:0; font:700 11px/1.4 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--sj-brass); }
.sj-part-note { font:13px/1.3 Georgia,serif; color:var(--sj-dim); white-space:nowrap; }
.sj .sj-quiet { margin:6px 0 0; font:italic 14px/1.5 Georgia,serif; color:var(--sj-faint); }

/* chapters: a numbered road, each part a line you can open */
.sj-chapters { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.sj-chapter-row { background:var(--sj-card); border:1px solid #2b4247; border-radius:9px; }
.sj-chapter-sum { display:grid; grid-template-columns:24px minmax(0,1fr) minmax(48px,90px) auto; align-items:center; gap:10px; padding:9px 12px; list-style:none; cursor:pointer; }
.sj-chapter-sum::-webkit-details-marker { display:none; }
div.sj-chapter-sum { cursor:default; }
.sj-chapter-sum:focus-visible { outline:2px solid var(--sj-brass); outline-offset:2px; border-radius:9px; }
.sj-num { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font:700 11px/1 system-ui,sans-serif; color:var(--sj-dim); border:1px solid #3b5257; }
.sj-chapter.done .sj-num { color:#10211f; background:var(--sj-leaf); border-color:var(--sj-leaf); }
.sj-chapter.now .sj-num { color:#1a2320; background:var(--sj-brass); border-color:var(--sj-brass); }
.sj-chapter-name { min-width:0; font:16px/1.3 Georgia,serif; color:var(--sj-cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sj-chapter.ahead .sj-chapter-name { color:var(--sj-faint); letter-spacing:.2em; }
.sj-chapter.ahead .sj-chapter-row { background:transparent; border-style:dashed; border-color:#2f4449; }
.sj-bar { position:relative; height:4px; border-radius:2px; background:#2a3f43; overflow:hidden; }
.sj-bar i { position:absolute; inset:0 auto 0 0; background:var(--sj-brass); border-radius:2px; }
.sj-chapter.done .sj-bar i { background:var(--sj-leaf); }
.sj-count { font:700 10px/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--sj-dim); white-space:nowrap; }
.sj-chapter-row[open] > .sj-chapter-sum { border-bottom:1px solid #2b4247; }
.sj-stages { list-style:none; margin:0; padding:8px 12px 10px 46px; display:grid; gap:3px; }
.sj-stages li { position:relative; font:14px/1.5 Georgia,serif; color:#c9d2c4; }
.sj-stages li::before { content:'✓'; position:absolute; left:-18px; top:0; font:700 11px/21px system-ui,sans-serif; color:var(--sj-leaf); }
.sj-stages li.now { color:var(--sj-cream); }
.sj-stages li.now::before { content:'◆'; color:var(--sj-brass); font-size:9px; }
.sj-stages li.now::after { content:'  now'; font:700 9px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--sj-brass); }
.sj-stages li.ahead { color:var(--sj-faint); letter-spacing:.2em; }
.sj-stages li.ahead::before { content:''; }

/* rows: workings, and the scenes off the path */
.sj-rows { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.sj-row { display:grid; grid-template-columns:18px minmax(0,auto) 1fr; align-items:baseline; gap:4px 10px; padding:7px 10px; border-radius:7px; background:var(--sj-card); }
.sj-row b { font:600 15px/1.4 Georgia,serif; color:var(--sj-cream); white-space:nowrap; }
.sj-what { font:14px/1.45 Georgia,serif; color:#b9c4b8; }
.sj-mark { font:13px/1 system-ui,sans-serif; color:var(--sj-leaf); text-align:center; }
.sj-row.trying .sj-mark, .sj-row.open .sj-mark { color:var(--sj-brass); }
.sj-row.open { box-shadow:inset 2px 0 0 var(--sj-brass); }
.sj-row.passed b, .sj-row.passed .sj-what { color:var(--sj-dim); }
.sj-row.passed .sj-mark, .sj-row.ahead .sj-mark { color:var(--sj-faint); }
.sj-row.ahead { background:transparent; border:1px dashed #2f4449; }
.sj-row.sj-row-empty { display:block; padding:9px 12px; font:italic 14px/1.5 Georgia,serif; color:var(--sj-faint); }
.sj-row.ahead b { color:var(--sj-faint); letter-spacing:.2em; font-weight:400; }

/* cards kept: small painted-paper chips */
.sj-cards { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.sj-card { display:inline-flex; align-items:baseline; gap:8px; padding:6px 11px; border:1px solid #bca56e; border-radius:8px; background:#ede6d1; color:#14242a; box-shadow:0 2px 6px #0003; }
.sj-card b { font:600 14px/1.3 Georgia,serif; }
.sj-card span { font:700 10px/1 system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#6e5d33; }

/* people: names that read like a guest list */
.sj .sj-talk-chapter { display:flex; justify-content:space-between; gap:10px; margin:0 0 4px; font:700 10px/1.4 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--sj-dim); }
summary.sj-talk-chapter { list-style:none; cursor:pointer; padding:7px 10px; border-radius:7px; background:var(--sj-card); margin:0; }
summary.sj-talk-chapter::-webkit-details-marker { display:none; }
summary.sj-talk-chapter > span:first-child::before { content:'▸'; display:inline-block; width:14px; color:var(--sj-faint); }
details[open] > summary.sj-talk-chapter > span:first-child::before { content:'▾'; }
details[open] > summary.sj-talk-chapter { margin-bottom:6px; }
summary.sj-talk-chapter:focus-visible { outline:2px solid var(--sj-brass); outline-offset:2px; }
.sj-talk-count { color:var(--sj-faint); letter-spacing:.06em; }
.sj-talk-group + .sj-talk-group { margin-top:6px; }
.sj-people { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px 14px; }
.sj-person { display:flex; flex-direction:column; padding:3px 0 3px 12px; border-left:2px solid #2b4247; }
.sj-person b { font:500 15px/1.35 Georgia,serif; color:var(--sj-cream); }
.sj-person.heard { border-left-color:var(--sj-leaf); }
.sj-person.heard b::after { content:' ✓'; font:700 11px/1 system-ui,sans-serif; color:var(--sj-leaf); }
.sj-person.here { border-left-color:var(--sj-brass); }
.sj-person.passed b, .sj-person.ahead b { color:var(--sj-dim); }
.sj-where { font:italic 13px/1.4 Georgia,serif; color:var(--sj-dim); }
.sj-person.here .sj-where { color:var(--sj-brass); font-style:normal; }

/* found again: place by place, names found, and a clue for who is not */
.sj-places { list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px; }
.sj-place { display:grid; align-content:start; gap:2px; padding:8px 12px; border-radius:8px; background:var(--sj-card); }
.sj-place-name { font:700 10px/1.4 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#aebaa9; }
.sj-found { font:15px/1.5 Georgia,serif; color:var(--sj-cream); }
.sj-clue { font:italic 14px/1.45 Georgia,serif; color:var(--sj-brass); }
.sj-place.all .sj-place-name::after { content:'  ✓'; color:var(--sj-leaf); }

@media (max-width: 560px) {
  .sj-tallies.three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .sj-tallies.four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .sj-tally { padding:9px 10px 8px; }
  .sj-tally b { font-size:22px; }
  .sj-tally small { font-size:9px; letter-spacing:.06em; }
  .sj-chapter-sum { grid-template-columns:22px minmax(0,1fr) auto; gap:8px; padding:9px 10px; }
  .sj-chapter-sum .sj-bar { grid-column:2 / -1; grid-row:2; }
  .sj-stages { padding-left:40px; }
  .sj-row { grid-template-columns:16px minmax(0,1fr); }
  .sj-row .sj-what { grid-column:2; }
  .sj-row b { white-space:normal; }
  .sj-people { grid-template-columns:1fr; }
}

/* ------------------------------------------------------ the original campaign */
.cj-tabs { display:flex; gap:4px; margin:-4px 0 16px; padding:4px; border-radius:12px; background:rgba(10,8,30,.35); border:1px solid rgba(255,243,220,.1); }
.cj-tab { flex:1; padding:9px 12px; border:0; border-radius:9px; background:transparent; color:rgba(255,243,220,.62); cursor:pointer;
  font:700 12px/1 var(--ow-font-ui, system-ui); letter-spacing:.06em; text-transform:uppercase; }
.cj-tab[aria-selected="true"] { background:rgba(255,214,107,.16); color:#fff3dc; box-shadow:inset 0 0 0 1px rgba(255,214,107,.45); }
.cj-tab:focus-visible { outline:2px solid var(--ow-gold, #ffd66b); outline-offset:2px; }
.cj-panel[hidden] { display:none !important; }

.cj { color:#e9e2f5; text-align:left; }
.cj-tallies { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; margin-bottom:14px; }
.cj-tally { padding:10px 12px; border-radius:10px; background:rgba(255,243,220,.05); border:1px solid rgba(255,243,220,.12); }
.cj-tally b { display:block; font:700 22px/1 var(--ow-font-story, Georgia, serif); color:#fff3dc; }
.cj-tally b span { font-size:13px; color:rgba(255,243,220,.5); font-weight:400; }
.cj-tally small { display:block; margin-top:5px; font:700 9px/1.3 var(--ow-font-ui, system-ui); letter-spacing:.12em; text-transform:uppercase; color:#c3b7e8; }
.cj-part { margin-top:16px; }
.cj-part > h3 { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 8px; font:700 10px/1.3 var(--ow-font-ui, system-ui);
  letter-spacing:.14em; text-transform:uppercase; color:#ffd66b; }
.cj-part > h3 span { color:rgba(255,243,220,.55); letter-spacing:.06em; }
.cj-chapters { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.cj-chapter { padding:9px 12px; border-radius:10px; background:rgba(255,243,220,.05); border:1px solid rgba(255,243,220,.1); }
.cj-chapter.here { border-color:rgba(255,214,107,.45); }
.cj-chapter.unknown { background:transparent; border-style:dashed; }
.cj-chapter-top { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; }
.cj-chapter-top > i { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font:700 10px/1 var(--ow-font-ui, system-ui); font-style:normal;
  color:rgba(255,243,220,.55); border:1px solid rgba(255,243,220,.22); }
.cj-chapter.done .cj-chapter-top > i { background:#9de0c0; border-color:#9de0c0; color:#14142f; }
.cj-chapter.here .cj-chapter-top > i { background:#ffd66b; border-color:#ffd66b; color:#14142f; }
.cj-chapter-top b { font:700 14px/1.25 var(--ow-font-story, Georgia, serif); color:#fff3dc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cj-chapter.unknown .cj-chapter-top b { color:rgba(255,243,220,.4); font-weight:400; }
.cj-chapter-top small { font:700 9px/1 var(--ow-font-ui, system-ui); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,243,220,.55); white-space:nowrap; }
.cj-chapter.done .cj-chapter-top small { color:#9de0c0; }
.cj-chapter-bits { display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 0 32px; font:600 11px/1.4 var(--ow-font-ui, system-ui); color:rgba(255,243,220,.62); }
.cj-chapter-bits span b { color:#fff3dc; }
.cj-chapter-bits .full b { color:#9de0c0; }

.cj-list { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.cj-item { display:grid; grid-template-columns:14px minmax(0,1fr); gap:3px 10px; align-items:baseline; padding:7px 10px; border-radius:8px; background:rgba(255,243,220,.04); }
.cj-item > i { width:9px; height:9px; margin-top:3px; border-radius:50%; border:1.5px solid rgba(255,243,220,.3); }
.cj-item.found > i { background:#9de0c0; border-color:#9de0c0; box-shadow:0 0 8px rgba(157,224,192,.55); }
.cj-item.clue > i { border-color:#ffd66b; border-style:dashed; }
.cj-item b { font:700 13px/1.3 var(--ow-font-story, Georgia, serif); color:#fff3dc; }
.cj-item small { grid-column:2; font:600 11px/1.4 var(--ow-font-ui, system-ui); color:rgba(255,243,220,.6); }
.cj-item.clue b { color:#ffe6a6; font-style:italic; font-weight:400; }
.cj-item.unknown { background:transparent; border:1px dashed rgba(255,243,220,.12); }
.cj-item.unknown b { color:rgba(255,243,220,.42); font-weight:400; }
.cj-when { display:inline-block; margin-left:6px; padding:2px 6px; border-radius:6px; font:700 9px/1.2 var(--ow-font-ui, system-ui); letter-spacing:.08em; text-transform:uppercase; vertical-align:1px; }
.cj-when.day { background:rgba(255,214,107,.16); color:#ffd66b; }
.cj-when.night { background:rgba(140,160,255,.18); color:#b9c6ff; }
.cj .cj-note, .overlay .obox .cj-note { margin:6px 0 0; font:600 11.5px/1.5 var(--ow-font-ui, system-ui); color:rgba(255,243,220,.58); }
.cj-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
@media (max-width: 560px) {
  .cj-tallies { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cj-cols { grid-template-columns:1fr; }
  .cj-tab { padding:9px 6px; font-size:11px; }
}

/* the dial says where waiting takes you */
.ow-dial-wait { position:absolute; right:calc(100% + 8px); top:calc(50% + 3px); white-space:nowrap; pointer-events:none;
  font:700 8px/1 var(--ow-font-ui, system-ui); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,214,107,.78); }
.ow-dial:has(.ow-dial-wait) .ow-dial-label { transform:translateY(calc(-50% - 6px)); }
@media (max-width: 760px) { .ow-dial-wait { font-size:7px; letter-spacing:.06em; } }
/* the longer "wait until morning" needs more room beside the stardust than the time did */
@media (min-width: 761px) { .ow-dial:has(.ow-dial-wait) { margin-left: 114px; } }
@media (max-width: 760px) {
  #overworld .ow-dial:has(.ow-dial-wait), #lantern-hollow .ow-dial:has(.ow-dial-wait),
  #cloudbreak .ow-dial:has(.ow-dial-wait), #wild-route .ow-dial:has(.ow-dial-wait), #road-east .ow-dial:has(.ow-dial-wait) { margin-left: 96px; }
}