/* Patch Notes reader and patch tour (js/patch-reader.js). Release cards, version stickers on tape, a notebook page for the notes. */
.prBackdrop, .ptrBackdrop{ position:fixed; inset:0; z-index:var(--z-reader, 10075); background:rgba(40,32,12,0.5); display:flex; align-items:stretch; justify-content:center; padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.ptrBackdrop{ z-index:calc(var(--z-reader, 10075) + 1); align-items:center; }
.prSheet, .ptrCard{ --sheet:#fffdf4; --desk:#efe7cd; --ink:#33301f; --soft:#5b5640; --line:#e4dbb9; --rule:rgba(92,134,184,0.18); --accent:#8a4f0d; --focus:#8f5710; --tape:rgba(255,226,120,0.85);
  position:relative; display:flex; flex-direction:column; background:var(--desk); color:var(--ink); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.4); overflow:hidden; font-family:'Sora','Heebo',system-ui,sans-serif; outline:none; }
body.dark .prSheet, body.dark .ptrCard{ --sheet:#27232f; --desk:#17131f; --ink:#ede9f7; --soft:#b9b1d3; --line:#3b3454; --rule:rgba(150,170,220,0.15); --accent:#ffb454; --focus:#ffb454; --tape:rgba(242,234,219,0.22); }
.prSheet{ width:min(1040px, 100%); max-height:100%; }
.prSheet :focus-visible, .ptrCard :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.prHead{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--sheet); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.prBrand{ display:flex; align-items:center; gap:7px; } .prMark{ display:inline-flex; width:24px; height:24px; } .prMark svg{ width:100%; height:100%; } .prWord{ font-weight:700; }
.prTitle{ font:1.2rem 'Patrick Hand','Alef',sans-serif; color:var(--soft); padding-inline-start:10px; border-inline-start:1px solid var(--line); }
.prSearch{ flex:1 1 180px; max-width:340px; margin-inline-start:auto; min-height:38px; padding:6px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--desk); color:var(--ink); font:0.9rem 'Sora',sans-serif; }
.prClose{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--sheet); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.prClose:hover{ background:color-mix(in srgb, var(--sheet) 80%, var(--line)); }
.prChips{ display:flex; gap:6px; overflow-x:auto; padding:8px 14px; background:var(--desk); scrollbar-width:thin; }
.prChip{ flex:none; min-height:34px; padding:3px 13px; border-radius:999px; border:1px solid var(--line); background:var(--sheet); color:var(--ink); font:600 0.8rem 'Sora',sans-serif; cursor:pointer; }
.prChip[aria-pressed="true"]{ background:var(--ink); color:var(--sheet); border-color:var(--ink); }
.prMain{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(260px, 340px) 1fr; }
.prList{ overflow:auto; padding:6px 10px 16px 14px; display:flex; flex-direction:column; gap:8px; }
.prNone{ margin:20px; color:var(--soft); }
/* a release card: a taped version sticker and the codename */
.prItem{ all:unset; box-sizing:border-box; display:flex; gap:10px; padding:10px 12px; border-radius:10px; background:var(--sheet); border:1px solid var(--line); cursor:pointer; box-shadow:0 1px 3px rgba(60,45,10,0.12); }
.prItem:hover{ border-color:var(--accent); } .prItem.on{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink), 0 2px 6px rgba(60,45,10,0.18); }
.prItem:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.prSticker{ flex:none; align-self:flex-start; padding:2px 8px; border-radius:3px; background:var(--tape); color:#4a3a00; font:700 0.72rem 'Sora',sans-serif; transform:rotate(-2deg); box-shadow:0 1px 2px rgba(60,45,10,0.2); white-space:nowrap; }
body.dark .prSticker{ color:#f2eadb; } .prSticker.big{ font-size:0.95rem; padding:4px 12px; }
.prItemText{ min-width:0; display:flex; flex-direction:column; gap:2px; } .prItemText strong{ font-size:0.95rem; } .prItemText small{ color:var(--soft); font-size:0.72rem; }
.prSum{ font-size:0.76rem; color:var(--soft); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prDetail{ overflow:auto; padding:6px 22px 28px; outline:none; border-inline-start:1px solid var(--line); background:var(--sheet); }
.prBack{ display:none; }
.prDHead{ display:flex; gap:14px; align-items:flex-start; padding-top:16px; }
.prDTitle h2{ margin:0; font:1.9rem/1.1 'Patrick Hand','Alef',sans-serif; }
.prMeta{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.prStatus, .prNow, .prTag{ font:600 0.7rem 'Sora',sans-serif; padding:2px 9px; border-radius:999px; border:1px solid var(--line); color:var(--soft); }
.prStatus.development{ background:#fff3a8; color:#4a3a00; border-color:transparent; } body.dark .prStatus.development{ background:#4a4228; color:#f2eadb; }
.prNow{ background:var(--ink); color:var(--sheet); border-color:var(--ink); }
.prSummary{ font-size:1rem; line-height:1.55; margin:14px 0; }
.prActs{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; } .prNav{ display:flex; gap:6px; margin-inline-start:auto; }
.prBtn{ min-height:40px; padding:6px 14px; border-radius:10px; border:1px solid var(--line); background:var(--sheet); color:var(--ink); font:600 0.85rem 'Sora',sans-serif; cursor:pointer; }
.prBtn:hover:not(:disabled){ border-color:var(--accent); } .prBtn:disabled{ opacity:0.45; cursor:default; }
.prBtn.primary{ background:var(--btn-fill, #9a5d12); border-color:var(--btn-fill, #9a5d12); color:var(--btn-fg, #fff); } .prBtn.primary:hover:not(:disabled){ background:var(--btn-fill-hover, #865210); }
.prBody{ --ln:28px; background-image:none; }
.prSec h3{ font:1.25rem 'Patrick Hand','Alef',sans-serif; margin:22px 0 4px; padding-bottom:3px; border-bottom:1px solid var(--rule); }
.prSec h4{ font:700 0.88rem 'Sora',sans-serif; margin:14px 0 2px; color:var(--soft); }
.prSec p, .prSec li{ font-size:0.92rem; line-height:1.6; overflow-wrap:anywhere; } .prSec p{ margin:6px 0; } .prSec ul{ margin:4px 0 6px; padding-inline-start:1.3em; }
.prSec code{ font:0.85em ui-monospace, Consolas, monospace; background:color-mix(in srgb, var(--sheet) 85%, var(--line)); padding:1px 5px; border-radius:4px; border:1px solid var(--line); }
.prTopWrap{ margin:24px 0 0; }
/* the tour card */
.ptrCard{ width:min(460px, 100%); padding:0 0 14px; }
.ptrHead{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--sheet); border-bottom:1px solid var(--line); } .ptrName{ font:1.1rem 'Patrick Hand','Alef',sans-serif; flex:1; }
.ptrBody{ padding:20px 22px 6px; min-height:170px; text-align:start; background:var(--sheet); animation:ptrIn .22s ease both; }
.ptrCard.still .ptrBody{ animation:none; }
@keyframes ptrIn{ from{ opacity:0; transform:translateY(6px); } }
.ptrIcon{ width:38px; height:38px; border-radius:50%; background:var(--tape); color:#4a3a00; display:flex; align-items:center; justify-content:center; font:700 1rem 'Sora',sans-serif; margin-bottom:10px; transform:rotate(-4deg); } body.dark .ptrIcon{ color:#f2eadb; }
.ptrTitle{ margin:0 0 8px; font:1.6rem/1.15 'Patrick Hand','Alef',sans-serif; } .ptrText{ margin:0; font-size:0.95rem; line-height:1.55; }
.ptrDots{ display:flex; gap:6px; justify-content:center; padding:12px 0 2px; background:var(--sheet); } .ptrDot{ width:8px; height:8px; border-radius:50%; background:var(--line); } .ptrDot.on{ background:var(--ink); }
.ptrIndex{ text-align:center; font:600 0.74rem 'Sora',sans-serif; color:var(--soft); padding-bottom:6px; background:var(--sheet); }
.ptrActs{ display:flex; gap:8px; justify-content:space-between; padding:10px 16px 0; } .ptrActs .show{ margin-inline:auto; } .ptrActs .show[hidden]{ display:none; }
.ptrHint{ margin:8px 16px 0; text-align:center; font-size:0.7rem; color:var(--soft); }
@media (prefers-reduced-motion: reduce){ .ptrBody{ animation:none; } }
html[data-a11y-motion="reduce"] .ptrBody{ animation:none; }
/* phones: the list and the notes are two screens */
@media (max-width:700px){
  .prBackdrop{ padding:0; } .prSheet{ border-radius:0; width:100%; }
  .prMain{ display:block; position:relative; } .prList{ height:100%; padding:8px 10px 16px; } .prDetail{ display:none; height:100%; border-inline-start:0; padding:4px 14px 24px; }
  .prSheet.detail .prList{ display:none; } .prSheet.detail .prDetail{ display:block; }
  .prBack{ display:inline-flex; align-items:center; min-height:44px; margin-top:4px; padding:0 4px; border:0; background:none; color:var(--accent); font:600 0.9rem 'Sora',sans-serif; cursor:pointer; }
  .prTitle{ display:none; } .prSearch{ max-width:none; margin-inline-start:0; } .prHead{ padding:8px 10px; gap:6px; } .prBtn, .prChip{ min-height:44px; } .prDTitle h2{ font-size:1.55rem; }
  .ptrBackdrop{ padding:0; align-items:flex-end; } .ptrCard{ width:100%; border-radius:16px 16px 0 0; }
}

/* the release map (v0.8.3.3): versions pinned on one string, oldest to newest */
.prMap{ position:relative; padding:6px 14px 4px; background:var(--desk); overflow-x:auto; scrollbar-width:thin; }
.prString{ position:absolute; left:14px; right:14px; top:23px; height:0; border-top:2px dashed color-mix(in srgb, var(--ink) 35%, transparent); pointer-events:none; }
.prPins{ list-style:none; margin:0; padding:0; display:flex; gap:6px; min-width:max-content; position:relative; }
.prPinItem{ flex:none; }
.prPin{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:76px; padding:0 6px 4px; cursor:pointer; border-radius:8px; }
.prPinDot{ width:14px; height:14px; border-radius:50%; background:var(--sheet); border:3px solid var(--ink); box-shadow:0 1px 2px rgba(0,0,0,0.3); margin-top:3px; }
.prPinV{ font:700 0.72rem 'Sora',sans-serif; color:var(--ink); background:var(--tape); padding:1px 7px; border-radius:3px; transform:rotate(-2deg); }
.prPinName{ font:0.7rem 'Sora',sans-serif; color:var(--soft); text-align:center; max-width:90px; line-height:1.2; }
.prPin:hover .prPinDot{ border-color:var(--accent); }
.prPin.on .prPinDot{ background:var(--accent); border-color:var(--ink); transform:scale(1.25); } .prPin.on .prPinV{ background:var(--ink); color:var(--sheet); }
.prPin.now .prPinName::after{ content:" \2022 here"; color:var(--accent); font-weight:700; }
.prPin:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
@media (max-width:700px){ .prPin{ min-width:84px; min-height:44px; } }
.wnLatest{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; margin-bottom:8px; border-radius:12px; background:var(--accent-soft, #fff3c4); border:1px solid var(--line, #e4dbb9); }
.wnSticker{ align-self:flex-start; padding:2px 10px; border-radius:3px; background:rgba(255,226,120,0.9); color:#4a3a00; font:700 0.72rem 'Sora',sans-serif; transform:rotate(-1.5deg); box-shadow:0 1px 2px rgba(60,45,10,0.2); }
.wnName{ font:1.25rem 'Patrick Hand','Alef',sans-serif; } .wnTldr{ margin:0; font-size:0.84rem; line-height:1.45; opacity:0.85; }
.wnActs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.wnCount{ font-size:0.78rem; opacity:0.7; margin-inline-end:6px; }