/* Design preview chrome. Not part of the app. */
.pv-panel{position:fixed;right:12px;bottom:12px;z-index:9999;font:12px/1.4 Figtree,system-ui,sans-serif;
  background:rgba(20,18,16,.94);color:#e8e2d4;border:1px solid rgba(255,169,70,.45);border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);width:250px}
.pv-panel summary{cursor:pointer;padding:8px 12px;font-weight:700;list-style:none;display:flex;gap:8px;align-items:center}
.pv-panel summary::before{content:"";width:8px;height:8px;border-radius:50%;background:#ffa946}
.pv-panel .pv-body{padding:0 12px 10px;display:grid;gap:6px}
.pv-panel label{display:grid;grid-template-columns:78px 1fr;gap:6px;align-items:center}
.pv-panel select{font:inherit;background:#2a2622;color:#e8e2d4;border:1px solid #4a433b;border-radius:6px;padding:2px 4px}
.pv-panel .pv-note{color:#b8ad98;font-size:11px;margin:4px 0 0}
.pv-panel input[type=checkbox]{justify-self:start}
html.pv-capture .pv-panel{display:none}

/* Queued design 1: Help article (approved mock-up format) */
#page-help.pv-article-mode > .page-head > div:first-child, #page-help.pv-article-mode #help-search,
#page-help.pv-article-mode #lex-help-back {display:none !important}
#page-help.pv-article-mode .help-tools {justify-content:flex-end}
#page-help.pv-article-mode .help-card {background:none; border:0; box-shadow:none; padding:0; position:relative}
/* Sizes are in em of the reading-options text size, so Reading options still
   scale the whole article. Read this section floats, so a long or wrapped title
   flows beside it instead of running underneath it. */
#page-help.pv-article-mode .help-card > h2 {font-family:var(--rd-heading,'EB Garamond',serif); font-weight:500; font-size:2.6em;
  line-height:1.12; letter-spacing:-.01em; margin:.1em 0 .25em; overflow-wrap:anywhere}
#page-help.pv-article-mode .help-card > .gist {font-size:1em; font-weight:500; color:var(--sub); max-width:78ch; margin:0 0 1.1em}
#page-help.pv-article-mode .help-card > .read-section {float:right; margin:.9em 0 .6em 1em}
#page-help.pv-article-mode .help-card > .answer-tiles {clear:both; margin-bottom:1em}
.pv-back {display:block; background:none; border:0; padding:0; color:var(--accent); font:inherit; font-size:.87em; font-weight:700; cursor:pointer}
.pv-back:hover, .pv-back:focus-visible {text-decoration:underline}
.pv-article-body {clear:both; display:grid; gap:14px; max-width:none !important; min-width:0}
.pv-card {background:var(--rd-bg, var(--card)); color:var(--rd-ink, var(--ink)); border:1px solid var(--edge, var(--border));
  border-radius:18px; padding:1em 1.4em; min-width:0; overflow-wrap:anywhere}
.pv-card h3 {margin:0 0 .65em; font-size:1em; font-weight:700; font-family:inherit}
.pv-card ol, .pv-card ul {margin:0; padding-left:1.4em; max-width:calc(var(--rd-width, 70) * 1.25ch)}
.pv-card li {margin:.35em 0}
.pv-card.pv-tips, .pv-card.pv-detail, .pv-card.pv-extra {font-size:.94em}
.pv-card.pv-keys ul.key-list {padding-left:0; list-style:none}
.pv-where .ctl {display:flex; gap:8px; flex-wrap:wrap}
.pv-where .ctl .btn::after {content:" →" / ""}
.pv-stuck {color:var(--sub); font-size:.87em; display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:4px 0 0}
@media (max-width:900px) {#page-help.pv-article-mode .help-card > h2 {font-size:2.2em}}

/* Queued design 5: Settings header blends into the page glow; still opaque so
   scrolled text never shows through. Compact spacing starts the first card higher. */
#page-settings .set-head {
  background:radial-gradient(ellipse at 25% 15%,#ff7d5233,transparent 45%) fixed,
    radial-gradient(ellipse at 80% 30%,#f5c45119,transparent 45%) fixed,
    radial-gradient(ellipse at 75% 95%,#5fd0b814,transparent 45%) fixed, var(--bg);
  box-shadow:none; padding:0 0 10px; margin-bottom:6px}
#page-settings .set-head::before {content:""; position:absolute; left:0; right:0; bottom:100%; height:30px; background:inherit}
#page-settings .set-title {margin-bottom:10px}
#page-settings .set-title h1 {margin-top:0}
#page-settings .lex-settings-description {margin:2px 0 12px}
#page-settings .lex-settings-tools {margin-bottom:12px}

/* Screenshot stand-in for the native hover tooltip (the app uses a title attribute). */
.pv-hover {position:relative}
.pv-hover::after {content:attr(title); position:absolute; z-index:50; top:calc(100% + 8px); right:0; width:330px; white-space:normal;
  background:#2b2622; color:#f1ece2; border:1px solid #5a5047; border-radius:8px; padding:8px 10px; font:500 12px/1.45 Figtree,sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,.4)}