:root{
  --paper:#eef0e6;
  --paper-raised:#f7f7f0;
  --ink:#252220;
  --ink-dim:#5b5650;
  --line:#c9c3b3;
  --line-soft:#dbd6c8;
  --accent:#7d2e3a;
  --accent-strong:#5e2129;
  --gold:#8a6c23;
  --gold-soft:#b99a3f;
  --dm:#7d2e3a;
  --dm-bg:#f7e9e4;
  --dm-line:#c98a7a;
  --shadow:0 1px 2px rgba(37,34,32,.06), 0 6px 20px rgba(37,34,32,.08);
  --radius:10px;
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171712;
    --paper-raised:#201f19;
    --ink:#e9e3d3;
    --ink-dim:#a89f8d;
    --line:#3a372c;
    --line-soft:#2b2921;
    --accent:#d98e77;
    --accent-strong:#e6a68f;
    --gold:#d4af5a;
    --gold-soft:#a98735;
    --dm:#e6a68f;
    --dm-bg:#2c1e1c;
    --dm-line:#6b332c;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#171712;
  --paper-raised:#201f19;
  --ink:#e9e3d3;
  --ink-dim:#a89f8d;
  --line:#3a372c;
  --line-soft:#2b2921;
  --accent:#d98e77;
  --accent-strong:#e6a68f;
  --gold:#d4af5a;
  --gold-soft:#a98735;
  --dm:#e6a68f;
  --dm-bg:#2c1e1c;
  --dm-line:#6b332c;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
::selection{background:var(--gold-soft);color:#20180a;}
button{font-family:var(--font-mono);}

/* ---------- Layout ---------- */
#app{display:flex;min-height:100vh;}
#sidebar{
  width:290px;flex:0 0 290px;
  border-right:1px solid var(--line);
  background:var(--paper-raised);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
#sidebar-head{padding:22px 20px 14px;border-bottom:1px solid var(--line-soft);}
#brand{font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:.02em;color:var(--ink);display:flex;align-items:baseline;gap:8px;
  text-decoration:none;transition:color .15s;}
#brand:hover{color:var(--accent);text-decoration:none;}
#brand:hover small{color:var(--accent);}
#brand-mobile{color:var(--ink);text-decoration:none;}
#brand-mobile:hover{text-decoration:none;}
#brand small{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);letter-spacing:.08em;text-transform:uppercase;font-weight:500;}
#search-box{margin-top:14px;position:relative;}
#search-input{
  width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:14.5px;
}
#search-input:focus{outline:2px solid var(--gold-soft);outline-offset:1px;}
#nav-tree{padding:10px 10px 24px;flex:1;}
.nav-cat{margin-bottom:4px;}
.nav-cat-btn{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:9px 10px;border-radius:7px;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim);font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.nav-cat-btn:hover{background:var(--line-soft);color:var(--ink);}
.nav-cat-btn .chev{font-size:10px;transition:transform .15s;}
.nav-cat.open .chev{transform:rotate(90deg);}
.nav-cat-body{display:none;padding-left:6px;}
.nav-cat.open .nav-cat-body{display:block;}
.nav-folder{margin:1px 0;}
.nav-folder-btn{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  padding:5px 8px 5px 6px;border-radius:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink-dim);
}
.nav-folder-btn:hover{background:var(--line-soft);color:var(--ink);}
.nav-folder-btn .chev{font-size:9px;flex:0 0 auto;transition:transform .15s;}
.nav-folder.open > .nav-folder-btn .chev{transform:rotate(90deg);}
.nav-folder-btn .nf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-folder-btn .nf-count{flex:0 0 auto;font-size:10px;opacity:.65;}
.nav-folder-body{display:none;padding-left:10px;border-left:1px solid var(--line-soft);margin-left:9px;}
.nav-folder.open > .nav-folder-body{display:block;}
.nav-link{
  display:flex;align-items:center;gap:6px;
  padding:5px 10px 5px 18px;border-radius:6px;color:var(--ink);
  font-size:14px;text-decoration:none;line-height:1.35;
}
.nav-link:hover{background:var(--line-soft);text-decoration:none;}
.nav-link.active{background:var(--accent);color:#fdf6f2;}
.nav-link .lockdot{font-size:10px;color:var(--dm);flex:0 0 auto;}

/* ---- organising the sidebar -------------------------------------------------
   Only visible while DM Mode's "Organise the sidebar" is on. The tools sit in a
   row that appears under the folder button rather than inside it, because the
   button is the drop target and a nested button swallows the drag. */
.nav-cat-btn .lockdot,.nav-folder-btn .lockdot{font-size:10px;color:var(--dm);flex:0 0 auto;margin-right:4px;}
/* A tool row under every folder doubled the height of the sidebar. They appear
   on hover instead, and only for the innermost folder the pointer is actually
   over - :hover matches every ancestor, so without the :has() rule a deep
   folder lit up four rows of buttons at once. Where :has() isn't supported the
   first rule still stands on its own and you get the noisier version. */
.nav-tools{display:none;gap:2px;padding:2px 6px 4px 22px;}
body.nav-editing .nav-folder:hover > .nav-tools,
body.nav-editing .nav-cat:hover > .nav-tools,
body.nav-editing .nav-tools:focus-within{display:flex;}
body.nav-editing .nav-folder:hover:has(.nav-folder:hover) > .nav-tools,
body.nav-editing .nav-cat:hover:has(.nav-folder:hover) > .nav-tools{display:none;}
.nav-folder.is-dm > .nav-folder-btn .nf-name,.nav-cat.is-dm > .nav-cat-btn > span:first-of-type{color:var(--dm);}

.nav-organise{margin:0 0 8px;padding:7px 10px;border:1px solid var(--dm-line);background:var(--dm-bg);
  border-radius:7px;font-family:var(--font-mono);font-size:10.5px;line-height:1.5;color:var(--ink-soft);
  display:flex;gap:8px;align-items:center;justify-content:space-between;}
.nav-organise button{border:1px solid var(--dm-line);background:var(--paper);color:var(--ink);
  border-radius:5px;font-size:10.5px;padding:3px 8px;cursor:pointer;flex:0 0 auto;}
.nav-tool{border:1px solid var(--line);background:var(--paper-raised);color:var(--ink-soft);
  border-radius:5px;font-size:11px;line-height:1;padding:3px 6px;cursor:pointer;}
.nav-tool:hover:not(:disabled){border-color:var(--gold-soft);color:var(--ink);}
.nav-tool:disabled{opacity:.35;cursor:default;}
.nav-tool.on{color:var(--dm);border-color:var(--dm-line);background:var(--dm-bg);}
.nav-tool.danger:hover:not(:disabled){color:var(--dm);border-color:var(--dm-line);}
body.nav-editing .nav-link,body.nav-editing .nav-folder{cursor:grab;}
body.nav-editing .nav-link:active,body.nav-editing .nav-folder:active{cursor:grabbing;}
body.nav-editing .nav-link{border-left:2px solid transparent;}
body.nav-editing .nav-link:hover{border-left-color:var(--gold-soft);}
.nav-cat-btn.drop-into,.nav-folder-btn.drop-into{outline:2px dashed var(--gold-soft);outline-offset:-2px;background:var(--paper-raised);}
.nav-link.active .lockdot{color:#fdf6f2;}

/* The DM pill used to sit in a footer at the bottom of the sidebar, where the
   save bar - fixed, full width, z-index 60 - covered it the moment there was
   anything to save. It lives under the search box instead. */
#dm-pill{
  display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;margin-top:10px;cursor:pointer;color:var(--ink);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;
}
#dm-pill:hover{border-color:var(--gold-soft);}
#dm-pill.unlocked{border-color:var(--dm-line);background:var(--dm-bg);color:var(--dm);}
#dm-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-dim);}
#dm-pill.unlocked .dot{background:var(--dm);}

#main{flex:1;min-width:0;display:flex;justify-content:center;}
/* The column was a fixed 840px, which left most of a wide window empty. It now
   grows with the window and only stops at 1360px, with side padding that scales
   too. Character sheets get the extra room they need for their two columns and
   their spell lists; every other page gets it as well. */
#content{width:100%;max-width:1360px;padding:40px clamp(20px,3vw,56px) 100px;}
@media (max-width:760px){
  #sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s;z-index:50;box-shadow:var(--shadow);}
  #sidebar.open{transform:translateX(0);}
  #content{padding:24px 16px 80px;}
  /* Not enough gutter on a phone for two buttons side by side; stack them. */
  body.dm-editing #content{padding-left:52px;}
  body.dm-editing .block-handle{left:-46px;flex-direction:column;gap:3px;}
  .block-menu{top:0;left:28px;}
  #mobile-topbar{display:flex !important;}
}
#mobile-topbar{
  display:none;position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--line);padding:12px 16px;align-items:center;gap:12px;
}
#mobile-topbar button{background:none;border:1px solid var(--line);border-radius:7px;padding:6px 10px;color:var(--ink);}
#sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;}
#sidebar-scrim.show{display:block;}

/* ---------- Typography / content ---------- */
.crumbs{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim);letter-spacing:.03em;margin-bottom:10px;text-transform:uppercase;}
.crumbs a{color:var(--ink-dim);}
.crumbs .sep{margin:0 6px;opacity:.5;}
h1.page-title{font-family:var(--font-display);font-size:44px;font-weight:700;line-height:1.08;margin:0 0 6px;text-wrap:balance;color:var(--ink);}
.page-meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.tag-chip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;background:var(--line-soft);color:var(--ink-dim);padding:3px 9px;border-radius:100px;}

.infobox{
  float:right;width:230px;margin:2px 0 16px 24px;background:var(--paper-raised);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
}
.infobox dl{margin:0;}
.infobox dt{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);margin-top:10px;}
.infobox dt:first-child{margin-top:0;}
.infobox dd{margin:2px 0 0;font-size:14.5px;}
@media (max-width:600px){.infobox{float:none;width:auto;margin:0 0 20px;}}

.content h1{font-family:var(--font-display);font-size:30px;font-weight:700;margin:34px 0 10px;color:var(--ink);}
.content h2{font-family:var(--font-display);font-size:27px;font-weight:700;margin:34px 0 10px;color:var(--ink);}
.content h5,.content h6{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin:18px 0 6px;color:var(--ink-dim);}
.content h3{font-family:var(--font-display);font-size:21px;font-weight:700;margin:26px 0 8px;color:var(--ink);}
.content h4{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:22px 0 8px;color:var(--ink-dim);}
.content p{margin:0 0 15px;}
.content ul,.content ol{margin:0 0 15px;padding-left:1.4em;}
.content li{margin:3px 0;}
.content li>ul,.content li>ol{margin-top:4px;margin-bottom:4px;}
.content hr{border:none;border-top:1px solid var(--line);margin:28px 0;}
.content strong{color:var(--ink);}
.content blockquote{
  margin:16px 0;padding:2px 18px;border-left:3px solid var(--line);color:var(--ink-dim);font-style:italic;
}
.content code{font-family:var(--font-mono);font-size:.88em;background:var(--line-soft);padding:1px 5px;border-radius:4px;}
.content table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14.5px;}
.content th,.content td{border:1px solid var(--line);padding:6px 10px;text-align:left;}
.content th{background:var(--paper-raised);font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;}
.content img{max-width:100%;border-radius:8px;border:1px solid var(--line);display:block;margin:18px 0;box-shadow:var(--shadow);}
.content a{text-underline-offset:2px;}
/* A link to a whole-page-DM page, seen only in DM Mode: the padlock says the
   player's copy of this list doesn't have this entry at all. */
.content a.dm-link .lockdot{font-size:10px;color:var(--dm);}
.content a.dm-link{text-decoration-color:var(--dm-line);}

.callout{border:1px solid var(--line);border-left:4px solid var(--gold-soft);border-radius:8px;padding:12px 16px 4px;margin:18px 0;background:var(--paper-raised);}
.callout-title{font-family:var(--font-mono);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin-bottom:6px;}
.callout p:last-child{margin-bottom:8px;}
.callout-note{border-left-color:var(--gold-soft);}
.callout-tip,.callout-example{border-left-color:#5c8a5c;}
.callout-quote{border-left-color:var(--ink-dim);font-style:italic;}
.callout-danger,.callout-secret,.callout-warning,.callout-fail,.callout-failure,.callout-bug{
  border-left-color:var(--dm-line);background:var(--dm-bg);
}
.callout-danger .callout-title,.callout-secret .callout-title{color:var(--dm);}

/* ---------- Blocks / DM affordances ---------- */
.block{position:relative;}
/* A consecutive run of DM blocks is one container, so the panel is genuinely one
   box rather than several with their shared borders hidden. Each paragraph inside
   still keeps its own toggle.

   display:flow-root is the float fix: the infobox is floated right, and while a
   paragraph's TEXT wraps around a float, a block's background and border do not -
   the box runs full width straight underneath it. Making the run its own
   formatting context puts the panel beside the infobox instead of over it, and
   because it is ONE box the whole run keeps a single width instead of stepping
   outward where the infobox ends. Plain paragraphs are deliberately left alone, so
   their text still wraps around the infobox and back underneath it. */
.dm-run{
  border:1px dashed var(--dm-line);background:var(--dm-bg);border-radius:10px;
  padding:14px 18px 6px;margin:18px 0;
  display:flow-root;
}
.block.is-dm > *:first-child{margin-top:0;}
.dm-run > .block.is-dm:last-child > *:last-child{margin-bottom:8px;}
body.dm-editing .block.is-dm:not(.dm-first){padding-top:12px;}
.dm-flag{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dm);
  margin-bottom:8px;font-weight:600;
}
/* ---- per-paragraph controls, in the left gutter ----------------------------
   The old toolbar was pinned to each block's top-right corner, which put it on
   the paragraph's first line AND on top of the floated infobox - a block's box
   runs full width under a float even though its text doesn't. The gutter is
   outside the text column and the infobox never reaches it, so nothing there
   can collide. Edit mode widens the content's left padding to make the room. */
body.dm-editing #content{padding-left:86px;}
.block-handle{display:none;}
body.dm-editing .block-handle{
  display:flex;gap:4px;position:absolute;left:-62px;top:1px;
  visibility:hidden;                 /* hidden, so it can't swallow gutter clicks */
}
body.dm-editing .block:hover > .block-handle,
body.dm-editing .block-handle:focus-within,
body.dm-editing .block-handle.open{visibility:visible;}
body.dm-editing .block.editing > .block-handle{display:none;}
.blk-h{
  width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;cursor:pointer;color:var(--ink-dim);
  background:var(--paper-raised);border:1px solid var(--line);border-radius:6px;padding:0;
}
.blk-h:hover{color:var(--ink);border-color:var(--gold-soft);}
.block-handle.open .blk-h[data-block-menu]{color:var(--ink);border-color:var(--gold-soft);}
/* The "no paragraphs yet" prompt. flow-root so its box sits beside the floated
   infobox rather than painting under it - see claude/layout-and-css.md. */
.empty-blocks{
  display:flow-root;border:1px dashed var(--line);border-radius:10px;
  padding:18px 20px;margin:18px 0;text-align:center;background:var(--paper-raised);
}
.empty-blocks p{margin:0 0 12px;color:var(--ink-dim);font-family:var(--font-mono);font-size:12px;}

.block-menu{
  position:absolute;top:30px;left:0;z-index:40;width:max-content;min-width:186px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:9px;
  box-shadow:var(--shadow);padding:5px;
}
.blk-mi{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;color:var(--ink);white-space:nowrap;
}
.blk-mi:hover:not(:disabled){background:var(--paper);}
.blk-mi:disabled{opacity:.35;cursor:default;}
.blk-mi-ico{flex:0 0 14px;text-align:center;font-size:11px;color:var(--ink-dim);}
.blk-mi.on .blk-mi-ico,.blk-mi.on{color:var(--dm);}
.blk-mi.danger:hover:not(:disabled){background:var(--dm-bg);color:var(--dm);}
.blk-mi-sep{height:1px;background:var(--line-soft);margin:4px 6px;}
/* The hover indicator can't be an outline or a background on the block itself:
   the block's box runs full width under the floated infobox, so it drew right
   across it - the same trap the old toolbar fell into. A rule in the gutter
   marks the paragraph instead, where there is nothing to cross. */
body.dm-editing .block::before{
  content:"";position:absolute;left:-16px;top:2px;bottom:2px;width:2px;
  border-radius:2px;background:var(--line);opacity:0;transition:opacity .12s;
}
body.dm-editing .block:hover::before,
body.dm-editing .block:has(.block-handle.open)::before{opacity:1;}
body.dm-editing .block.editing::before{display:none;}
.mini-btn{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;cursor:pointer;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:6px;
  padding:4px 8px;color:var(--ink-dim);white-space:nowrap;
}
.mini-btn:hover{color:var(--ink);border-color:var(--gold-soft);}
.mini-btn.on{background:var(--dm);color:#fff;border-color:var(--dm);}
.mini-btn.danger:hover{color:#fff;background:var(--dm);border-color:var(--dm);}

/* ---- paragraph editor ---- */
.block.editing{
  outline:1px solid var(--gold-soft) !important;border-radius:8px;
  padding:10px 12px !important;margin:14px 0;background:var(--paper-raised);
  display:flow-root;   /* same float rule as .block.is-dm above */
}
.block-editor-head{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-dim);margin:2px 0 6px;
}
textarea.block-md{
  width:100%;box-sizing:border-box;min-height:96px;resize:vertical;
  font-family:var(--font-mono);font-size:13px;line-height:1.55;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;tab-size:2;
}
textarea.block-md:focus{outline:none;border-color:var(--gold-soft);}
.block-editor-bar{
  display:flex;align-items:center;gap:8px;margin:8px 0 4px;flex-wrap:wrap;
}
.block-editor-bar .hint{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);margin-right:auto;
}
.block-preview{
  border-top:1px dashed var(--line);padding-top:8px;
}
.block-preview > *:first-child{margin-top:0;}
.block-preview > *:last-child{margin-bottom:0;}
.block.is-dm.editing{background:var(--dm-bg);}
#save-bar-label{font-family:var(--font-mono);font-size:11px;}

/* ---- page actions + crowded block toolbar ---- */
.mini-btn[disabled]{opacity:.35;cursor:default;}
.mini-btn[disabled]:hover{color:var(--ink-dim);border-color:var(--line);}

/* ---- title row: the page's own edit menu ---- */
.title-row{display:flex;align-items:flex-start;gap:10px;position:relative;margin-bottom:6px;}
.title-row h1.page-title{margin-bottom:0;flex:0 1 auto;}
.title-edit{
  flex:0 0 auto;margin-top:10px;cursor:pointer;line-height:1;
  width:30px;height:30px;border-radius:8px;font-size:14px;
  background:var(--paper-raised);border:1px solid var(--line);color:var(--ink-dim);
}
.title-edit:hover{color:var(--ink);border-color:var(--gold-soft);background:var(--paper);}
.title-edit[aria-expanded="true"]{color:var(--ink);border-color:var(--gold-soft);}
.page-menu{
  position:absolute;top:100%;left:0;z-index:60;min-width:250px;padding:6px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);
}
.page-menu-item{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:8px 10px;border:none;border-radius:7px;background:none;color:var(--ink);
  font-family:var(--font-body);font-size:14px;
}
.page-menu-item:hover{background:var(--paper);}
.page-menu-item.danger{color:var(--dm);}
.page-menu-item.danger:hover{background:var(--dm-bg);}
.page-menu-sep{height:1px;background:var(--line);margin:5px 2px;}

/* ---- "New page" on the home and category pages ---- */
.index-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px;}
.index-actions .hint{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);}

/* ---- auto-link review ---- */
.al-toolbar{display:flex;align-items:center;gap:8px;margin:6px 0 10px;flex-wrap:wrap;}
.al-summary{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);margin-left:auto;}
.al-list{
  max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);padding:6px;
}
.al-group + .al-group{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:4px;}
.al-group-head{display:flex;align-items:center;gap:8px;padding:5px 4px;}
.al-toggle{
  background:none;border:none;cursor:pointer;color:var(--ink-dim);font-size:11px;
  padding:2px 4px;line-height:1;
}
.al-page-title{font-weight:600;font-size:13px;}
.al-count{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:20px;padding:1px 7px;
}
.al-rows{padding:2px 0 6px 20px;}
.modal .al-row{
  display:flex;align-items:baseline;gap:8px;padding:5px 6px;border-radius:7px;
  cursor:pointer;line-height:1.45;flex-wrap:wrap;
  /* these three undo .modal label, which is styled for form captions */
  text-transform:none;letter-spacing:normal;font-family:var(--font-body);font-size:13px;
  margin:0;color:var(--ink);
}
.modal .al-row:hover{background:var(--paper-raised);}
.modal .al-row.muted{opacity:.4;text-decoration:line-through;}
.modal .al-row input[type=checkbox]{margin-top:3px;flex:0 0 auto;}
.al-ctx{flex:1 1 320px;min-width:0;color:var(--ink-dim);font-family:var(--font-mono);font-size:11.5px;text-transform:none;}
.al-ctx mark{background:var(--gold-soft);color:#1a1710;padding:0 2px;border-radius:3px;}
.al-arrow{flex:0 0 auto;font-size:12px;color:var(--ink);text-transform:none;letter-spacing:normal;}
.al-badge{
  flex:0 0 auto;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.04em;border:1px solid var(--line);border-radius:20px;padding:1px 7px;color:var(--ink-dim);
}
.al-badge.warn{border-color:var(--dm-line);color:var(--dm);background:var(--dm-bg);}
.al-mute{flex:0 0 auto;font-size:9.5px;padding:2px 6px;}
/* checkbox rows in a dialog: .modal label is styled for form captions (caps, mono),
   so an option row has to opt out of all three explicitly */
.modal label.ln-opt{
  display:flex;align-items:center;gap:8px;
  text-transform:none;letter-spacing:normal;
  font-family:var(--font-body);font-size:13.5px;color:var(--ink);
  margin:10px 0 0;cursor:pointer;
}
.modal label.ln-opt input[type=checkbox]{flex:0 0 auto;margin:0;}
.modal label.ln-opt strong{font-weight:600;}

/* the create dialog is tall: let it scroll, and keep its buttons reachable */
.modal{max-height:86vh;overflow-y:auto;}
.modal .row{
  position:sticky;bottom:-1px;z-index:2;
  background:var(--paper-raised);border-top:1px solid var(--line-soft);
  padding:14px 0 4px;margin-bottom:-4px;
}
.modal textarea.block-md{margin-top:2px;}

@media (max-width:640px){
  .title-row{flex-wrap:wrap;}
  .page-menu{left:auto;right:0;min-width:220px;}
}

/* ---- wider modals for the page dialogs ---- */
.modal.wide{max-width:620px;width:100%;}
.modal select{
  width:100%;box-sizing:border-box;padding:9px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:14px;
}
.modal .url-preview{
  margin-top:14px;font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);
  background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:8px 10px;
  overflow-wrap:anywhere;
}
.modal .warn-note{
  background:var(--dm-bg);border:1px solid var(--dm-line);border-radius:8px;
  padding:10px 12px;font-size:13px;color:var(--dm);margin:0 0 14px;
}
.modal .link-list{margin:8px 0 0;padding-left:20px;font-size:13px;color:var(--ink-dim);}
.modal .link-list li{margin:2px 0;}
.kv-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.kv-row .kv-key{flex:0 0 34%;}
.kv-row .kv-val{flex:1 1 auto;min-width:0;}
.kv-row input{
  box-sizing:border-box;padding:7px 9px;border-radius:7px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:13px;
}
.kv-row input:focus{outline:none;border-color:var(--gold-soft);}
.kv-row.is-dm .kv-key,.kv-row.is-dm .kv-val{border-color:var(--dm-line);background:var(--dm-bg);}
.kv-row input[disabled]{opacity:.55;}

/* ---- infobox: DM-only rows and the edit affordance ---- */
.infobox{position:relative;}
.infobox-edit{
  position:absolute;top:10px;right:10px;cursor:pointer;line-height:1;
  width:26px;height:26px;border-radius:7px;font-size:12px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-dim);
}
.infobox-edit:hover{color:var(--ink);border-color:var(--gold-soft);}
.infobox.has-edit dt:first-child{padding-right:28px;}
.infobox dt.dm-field{color:var(--dm);}
.infobox dd.dm-field{
  color:var(--dm);background:var(--dm-bg);border-left:2px solid var(--dm-line);
  padding-left:7px;margin-left:-2px;border-radius:0 4px 4px 0;
}
.infobox-empty{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);
  margin:0;padding:2px 0;
}

/* ---- table editor ---- */
.table-editor-scroll{overflow-x:auto;max-width:100%;}
table.table-editor{border-collapse:separate;border-spacing:4px;width:auto;margin:0;}
table.table-editor th,table.table-editor td{padding:0;border:none;background:none;}
table.table-editor td.gutter,table.table-editor th.gutter{width:26px;}
table.table-editor .col-head{display:flex;justify-content:flex-end;margin-bottom:3px;}
table.table-editor input{
  box-sizing:border-box;min-width:130px;padding:6px 8px;border-radius:6px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--font-mono);font-size:12px;
}
table.table-editor thead input{font-weight:600;border-color:var(--gold-soft);}
table.table-editor input:focus{outline:none;border-color:var(--gold-soft);}

@media (max-width:640px){
  .kv-row{flex-wrap:wrap;}
  .kv-row .kv-key{flex:1 1 100%;}
}

.page-dm-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--dm-bg);border:1px solid var(--dm-line);border-radius:10px;
  padding:12px 16px;margin-bottom:22px;font-family:var(--font-mono);font-size:12px;color:var(--dm);
}

/* ---------- Home ---------- */
.hero{padding:6px 0 28px;border-bottom:1px solid var(--line);margin-bottom:28px;}
.hero h1{font-family:var(--font-display);font-size:52px;font-weight:700;margin:0 0 8px;line-height:1;text-wrap:balance;}
.hero p{color:var(--ink-dim);font-size:17px;max-width:60ch;margin:0;}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:26px 0 10px;}
.cat-card{
  display:block;padding:18px 18px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper-raised);color:var(--ink);box-shadow:var(--shadow);
}
.cat-card:hover{border-color:var(--gold-soft);text-decoration:none;}
.cat-card .n{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em;}
.cat-card .t{font-family:var(--font-display);font-size:22px;font-weight:700;margin-top:4px;}

/* ---------- Search results ---------- */
.result{padding:14px 0;border-bottom:1px solid var(--line-soft);}
.result .title{font-family:var(--font-display);font-size:20px;font-weight:700;}
.result .path{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.03em;margin:2px 0 4px;}
.result .snip{color:var(--ink-dim);font-size:14.5px;}
mark{background:var(--gold-soft);color:#241a05;border-radius:2px;padding:0 1px;}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,18,14,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;
  padding:26px 26px 22px;max-width:420px;width:100%;box-shadow:var(--shadow);
}
.modal h2{font-family:var(--font-display);font-size:24px;margin:0 0 6px;}

/* ---- the DM menu: states as switches, actions as rows ---- */
.modal.dm-menu{max-width:400px;padding-bottom:20px;}
.dm-group{
  font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-dim);margin:18px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--line-soft);
}
.dm-group:first-of-type{margin-top:6px;}
.dm-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:1px solid transparent;border-radius:9px;
  padding:8px 9px;margin:1px 0;cursor:pointer;color:var(--ink);
}
.dm-item:hover{background:var(--paper);border-color:var(--line);}
.dm-ico{flex:0 0 22px;text-align:center;font-size:14px;color:var(--ink-dim);line-height:1;}
.dm-item:hover .dm-ico{color:var(--accent);}
.dm-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;}
.dm-title{font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1.3;}
/* Let a subtitle wrap rather than truncate: an explanation cut off mid-word
   ("...and DM b…") is worse than a two-line row. */
.dm-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);line-height:1.4;}
.dm-go{flex:0 0 auto;color:var(--ink-dim);font-size:17px;line-height:1;}
.dm-item:hover .dm-go{color:var(--accent);}
.dm-item.danger .dm-title{color:var(--dm);}
.dm-item.danger:hover{border-color:var(--dm-line);background:var(--dm-bg);}
.dm-item.danger:hover .dm-ico,.dm-item.danger:hover .dm-go{color:var(--dm);}
.dm-switch{
  flex:0 0 auto;width:30px;height:17px;border-radius:20px;
  background:var(--line);border:1px solid var(--line);position:relative;transition:background .15s;
}
.dm-switch.on{background:var(--dm);border-color:var(--dm);}
.dm-knob{
  position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;
  background:var(--paper-raised);transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.dm-switch.on .dm-knob{transform:translateX(13px);}
.modal p.desc{color:var(--ink-dim);font-size:14px;margin:0 0 16px;}
.modal .fn-note{
  font-size:13px;line-height:1.5;color:var(--ink);background:var(--paper);
  border:1px solid var(--gold-soft);border-radius:8px;padding:10px 12px;margin:10px 0 0;
}
.modal .fn-note code{font-family:var(--font-mono);font-size:11.5px;background:var(--line-soft);
  padding:1px 5px;border-radius:4px;word-break:break-all;}
.modal label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);margin:12px 0 5px;}
.modal input[type=password],.modal input[type=text]{
  width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-family:var(--font-mono);font-size:14.5px;
}
.modal .err{color:var(--dm);font-size:13px;margin-top:8px;min-height:1.2em;}
.modal .row{display:flex;gap:10px;margin-top:18px;}
.btn{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;cursor:pointer;
  border-radius:8px;padding:9px 16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
}
.btn:hover{border-color:var(--gold-soft);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fdf6f2;}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
.btn.ghost{border-color:transparent;background:none;}
.modal .close-x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--ink-dim);font-size:18px;cursor:pointer;}
.modal{position:relative;}

/* ---------- Save bar ---------- */
#save-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--dm);color:#fff;padding:12px 20px;
  align-items:center;justify-content:center;gap:16px;font-family:var(--font-mono);font-size:13px;flex-wrap:wrap;
}
#save-bar.show{display:flex;}
#save-bar .btn{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08);}
#save-bar .btn.primary{background:#fff;color:var(--accent-strong);border-color:#fff;}

#toast-host{position:fixed;bottom:20px;right:20px;z-index:120;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:12.5px;padding:10px 16px;border-radius:8px;box-shadow:var(--shadow);max-width:340px;}

.empty-note{color:var(--ink-dim);font-style:italic;padding:20px 0;}

/* ---------- Generated link lists (auto index / backlinks / category tree) ---------- */
.auto-index,.backlinks{margin:30px 0 0;}
.backlinks{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);}
.auto-head{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);margin:0 0 10px;
  display:flex;align-items:center;gap:8px;
}
.auto-note{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim);margin:-4px 0 18px;}
.index-count{
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.03em;
  background:var(--line-soft);color:var(--ink-dim);border-radius:100px;padding:1px 7px;
}
.content ul.index-list,ul.index-list{
  list-style:none;margin:0 0 10px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 18px;
}
.content ul.index-list li,ul.index-list li{margin:0;}
ul.index-list li a{
  display:block;padding:4px 8px;border-radius:6px;font-size:15px;line-height:1.35;
  color:var(--ink);border-left:2px solid transparent;
}
ul.index-list li a:hover{background:var(--paper-raised);border-left-color:var(--gold-soft);text-decoration:none;color:var(--accent);}
ul.index-list .lockdot{font-size:10px;color:var(--dm);}
.index-group{margin:14px 0 0;}
.index-group-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 6px;padding-left:8px;
  display:flex;align-items:center;gap:8px;
}
.index-group-label a{color:var(--ink-dim);}
.index-group-label a:hover{color:var(--accent);}

/* category folder tree */
.tree-root{margin-top:18px;}
details.tree-folder{margin:6px 0;border-left:1px solid var(--line-soft);padding-left:0;}
details.tree-folder>summary{
  cursor:pointer;list-style:none;padding:7px 8px;border-radius:7px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;display:flex;align-items:center;gap:8px;
}
details.tree-folder>summary::-webkit-details-marker{display:none;}
details.tree-folder>summary::before{
  content:"\25B8";font-size:9px;transition:transform .15s;display:inline-block;opacity:.7;
}
details.tree-folder[open]>summary::before{transform:rotate(90deg);}
details.tree-folder>summary:hover{background:var(--line-soft);color:var(--ink);}
.tree-body{padding-left:14px;}

/* ---- imported character sheets ---------------------------------------------
   The panel is a box in the content column, so it needs display:flow-root to
   sit beside the floated infobox rather than paint under it - the rule from
   claude/layout-and-css.md that has now caught four different things. */
.csheet{
  display:flow-root;border:1px solid var(--line);border-radius:12px;
  background:var(--paper-raised);padding:16px 18px 14px;margin:0 0 22px;
}
.cs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.cs-name{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.1;}
.cs-sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);margin-top:3px;}
.cs-player{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-dim);}
.cs-h{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-dim);margin:16px 0 7px;padding-bottom:4px;border-bottom:1px solid var(--line-soft);}
.cs-note{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-dim);}

.cs-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.cs-stat{border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--paper);
  display:flex;flex-direction:column;gap:2px;min-width:64px;}
.cs-k{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-dim);}
.cs-v{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1;}

.cs-hp{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--paper);}
.cs-hp-v{font-family:var(--font-display);font-size:18px;}
.cs-hp-v b{font-size:22px;}
.cs-hp-v.hurt b{color:var(--dm);}
.cs-hp-v i{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);font-style:normal;}
.cs-btn{font-family:var(--font-mono);font-size:10.5px;cursor:pointer;color:var(--ink);
  background:var(--paper-raised);border:1px solid var(--line);border-radius:6px;padding:3px 8px;}
.cs-btn:hover{border-color:var(--gold-soft);}
.cs-btn.ghost{color:var(--ink-dim);}

/* Six equal columns rather than flex-wrap: with a flex-basis the sixth ability
   dropped to a row of its own the moment the infobox narrowed the panel. */
.cs-abilities{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px;}
@media (max-width:820px){ .cs-abilities{grid-template-columns:repeat(3,1fr);} }
.cs-ab{border:1px solid var(--line);border-radius:10px;background:var(--paper);
  text-align:center;padding:7px 4px 5px;min-width:0;}
.cs-ab-n{font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;color:var(--ink-dim);}
.cs-ab-m{font-family:var(--font-display);font-size:23px;font-weight:700;line-height:1.1;}
.cs-ab-s{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);}

.cs-cols{display:flex;gap:26px;flex-wrap:wrap;}
.cs-cols > div{flex:1 1 220px;min-width:0;}
.cs-list{list-style:none;margin:0;padding:0;}
.cs-list li{display:flex;align-items:center;gap:8px;padding:2.5px 0;font-size:13.5px;}
.cs-dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--line);flex:0 0 auto;}
.cs-list li.on .cs-dot{background:var(--accent);border-color:var(--accent);}
.cs-list li.on .cs-l{font-weight:600;}
.cs-l{flex:1 1 auto;min-width:0;}
.cs-n{font-family:var(--font-mono);font-size:12px;color:var(--ink-dim);flex:0 0 auto;}

.cs-wpn{width:100%;border-collapse:collapse;font-size:13.5px;}
.cs-wpn td{border-bottom:1px solid var(--line-soft);padding:5px 8px 5px 0;}
.cs-wpn td:nth-child(2),.cs-wpn td:nth-child(3){font-family:var(--font-mono);font-size:12px;width:1%;white-space:nowrap;}

.cs-res-row{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:13.5px;}
.cs-pips{display:flex;gap:3px;flex:0 0 auto;}
.cs-pip{width:14px;height:14px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;padding:0;}
.cs-pip.full{background:var(--accent);border-color:var(--accent);}
.cs-rest{margin-top:8px;}

.cs-facts{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13.5px;}
.cs-facts dt{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-dim);padding-top:3px;white-space:nowrap;}
.cs-facts dd{margin:0;}

/* ---- the import dialog ---- */
.cs-report{margin-top:14px;}
.cs-rep-head{font-size:14px;line-height:1.5;padding-bottom:6px;}
.cs-notes{margin:0;padding-left:18px;font-size:12.5px;line-height:1.5;color:var(--ink);}
.cs-notes li{margin:3px 0;}
.cs-diff{list-style:none;margin:0;padding:0;font-size:13px;}
.cs-diff li{display:flex;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--line-soft);}
.cs-from{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim);text-decoration:line-through;}
.cs-arrow{color:var(--ink-dim);}
.cs-to{font-family:var(--font-mono);font-size:11.5px;font-weight:600;}
.cs-sections{display:flex;flex-direction:column;gap:2px;}
.modal label.cs-sec{display:flex;align-items:center;gap:9px;margin:0;padding:5px 6px;border-radius:7px;
  text-transform:none;letter-spacing:normal;font-family:var(--font-body);font-size:13.5px;color:var(--ink);cursor:pointer;}
.modal label.cs-sec:hover{background:var(--paper);}
.modal label.cs-sec input{flex:0 0 auto;margin:0;}
.cs-badge{flex:0 0 auto;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.04em;border:1px solid var(--line);border-radius:20px;padding:1px 7px;color:var(--ink-dim);}
.cs-sec.edited .cs-badge{border-color:var(--dm-line);color:var(--dm);background:var(--dm-bg);}
#cs-file{font-family:var(--font-mono);font-size:12px;margin-top:6px;}

/* derived skill/save values: present, but visibly not from the sheet */
.cs-list li.derived .cs-n{color:var(--ink-dim);opacity:.8;}
.cs-list li.derived .cs-n sup{font-size:8px;margin-left:1px;}
.cs-derived-note{margin-top:7px;}

/* spells, grouped by the section of the page they were written in */
.cs-spell-head{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-dim);margin-bottom:8px;}
.cs-spell-lvl{display:flex;align-items:center;gap:9px;margin:10px 0 4px;
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-dim);}
.cs-spell-lvl .cs-l{flex:0 0 auto;}
.cs-spell-lvl .cs-pips{margin-left:auto;}
.cs-spell-list{display:flex;flex-wrap:wrap;gap:4px 6px;}
.cs-spell{font-size:12.5px;border:1px solid var(--line);border-radius:20px;
  padding:2px 9px;background:var(--paper);}

/* class-table cross-check */
.cs-feats{list-style:none;margin:0;padding:0;}
.cs-feats li{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:13.5px;}
.cs-lv{flex:0 0 22px;text-align:center;font-family:var(--font-mono);font-size:9.5px;
  color:var(--ink-dim);border:1px solid var(--line);border-radius:5px;padding:1px 0;}
.cs-feats li.off .cs-l{color:var(--ink-dim);}
.cs-feats li.routine,.cs-feats li.opt,.cs-feats li.ph{opacity:.55;}
.cs-badge.warn{border-color:var(--dm-line);color:var(--dm);background:var(--dm-bg);}
.cs-warn{color:var(--dm);}
.cs-wiki{text-decoration-style:dotted;text-underline-offset:2px;}
.modal label.cs-sub-pick{display:flex;align-items:center;gap:10px;margin:6px 0 0;
  text-transform:none;letter-spacing:normal;font-family:var(--font-body);font-size:13.5px;color:var(--ink);}
.modal label.cs-sub-pick select{flex:1 1 auto;min-width:0;padding:5px 8px;border-radius:7px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--font-mono);font-size:12px;}

/* with a wider column the sheet can use real columns */
@media (min-width:1000px){
  .cs-cols > div{flex:1 1 300px;}
  .cs-feats{columns:2;column-gap:28px;}
  .cs-feats li{break-inside:avoid;}
}

/* dead-link check rows: the same list chrome as the autolink dialog, but each row
   carries a choice rather than a checkbox, so it needs room on the right. */
.modal .al-row.lc-row{align-items:flex-start;gap:14px;flex-wrap:nowrap;cursor:default;
  border-top:1px solid var(--line,#e6e1d6);border-radius:0;padding:10px 6px}
.modal .al-row.lc-row:first-child{border-top:0}
/* min-width:0 or the long <code> href sets a min-content floor wide enough to
   bump the control onto its own line — on some rows but not others, which reads
   as a broken dialog rather than a wrap. */
.modal .al-row.lc-row .al-ctx{flex:1 1 auto;min-width:0;line-height:1.55}
.modal .al-row.lc-row code{font-size:.85em;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;
  word-break:break-all}
.modal .al-row.lc-row .al-badge{white-space:nowrap}
.modal .al-row .lc-pick{flex:0 0 auto;max-width:240px;font:inherit;font-size:.9em;padding:5px 8px;
  border:1px solid var(--line,#d8d3c8);border-radius:6px;background:#fff}