/* chapter.css: "Your visit". Uses the theme colors only, so it works in Blueprint and Skyline. Amber for anything due, never red.
   The picture is a plain labeled box until the paintings are approved (then an img.chap-img) (the box carries data-placeholder="yes"). */
.chap{max-width:760px}
.chap-live{display:grid;gap:14px}
.chap-note{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:12px 16px;display:grid;gap:8px;justify-items:start}
.chap-note p{margin:0}
.chap-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.chap-visit{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chap-art{margin:0;display:grid;gap:6px}
.chap-box{display:flex;align-items:center;justify-content:center;text-align:center;min-height:220px;padding:16px;border:1px dashed var(--line);border-radius:6px;color:var(--ink);font-weight:600;
  background:linear-gradient(180deg,var(--panel),var(--rule));transition:background .4s ease}
.chap-art[data-sky="dawn"] .chap-box{background:linear-gradient(180deg,#f3e3c0,#cfd9ea);color:#12233f}
.chap-art[data-sky="day"] .chap-box{background:linear-gradient(180deg,#dbe9f7,#f7f5ef);color:#12233f}
.chap-art[data-sky="dusk"] .chap-box{background:linear-gradient(180deg,#e7cfa0,#c7b8d9);color:#12233f}
.chap-art[data-sky="night"] .chap-box{background:linear-gradient(180deg,#0b1020,#26304a);color:#eef1f6}
.chap-art[data-lit="1"] .chap-box{box-shadow:inset 0 -6px 0 0 var(--accent)}
.chap-img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:6px;border:1px solid var(--rule);background:var(--panel)}
.chap-cap{font-size:14px;color:var(--muted)}
.chap-panel{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:16px;display:grid;gap:10px;justify-items:start;outline:none}
.chap-panel h3{margin:0}
.chap-panel p{margin:0}
.chap-next{color:var(--muted);font-size:14px}
.chap-list{margin:0;padding-left:22px;display:grid;gap:6px}
.chap-list .is-done{color:var(--muted)}
.chap-list .is-next{font-weight:700}
.chap-tiles h3{margin:0 0 8px}
.chap-tilelist{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.chap-tile{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.chap-tile .btn-ghost{width:100%}
.chap-tile .btn-ghost[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 -3px 0 0 var(--accent)}
.chap-read{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--muted)}
.chap-water{border:1px solid var(--rule);border-radius:4px;padding:10px 14px;display:grid;gap:8px;width:100%}
.chap-water legend{font-weight:650;padding:0 6px}
.chap-small{font-size:14px;color:var(--muted)}
.chap-q{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.chap-opt{display:inline-flex;align-items:center;min-height:44px;gap:4px;cursor:pointer}
.chap-result{font-weight:650;color:var(--ink)}
.chap-foot{margin:0;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chap-three,.chap-packs{margin:0 0 12px;padding-left:20px}
.chap-static[hidden],.chap-live:empty{display:none}
@media (max-width:640px){.chap-box{min-height:170px}}
@media (prefers-reduced-motion:reduce){.chap-box{transition:none}}