/* Silver Sands Maintenance Manual — application styles.
   Extracted from templates/layout.php so the markup stays readable and the browser can cache this. */

/* Inter, self-hosted. The same files Google Fonts serves (SIL Open Font License), vendored so
   the site has no third-party dependency, works if Google is blocked, tells nobody who is
   reading the manual, and lets the Content-Security-Policy stay closed.

   font-display is `optional`, not `swap`: with swap the first paint uses the fallback and the text
   then visibly changes size when Inter arrives — a flicker on every load. `optional` gives the
   font a brief moment and, if it misses, simply keeps the fallback for that page view instead of
   swapping mid-render. Paired with the preload in layout.php it is ready in time in practice. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('../fonts/inter/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('../fonts/inter/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('../fonts/inter/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('../fonts/inter/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/inter/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/inter/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('../fonts/inter/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('../fonts/inter/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{ --ink:#141414; --muted:#6b6b6b; --line:#e6e6e6; --bg:#fafafa; --panel:#fff; }
*{box-sizing:border-box} html,body{margin:0}
/* Label text that only screen readers need, and a skip link that appears on keyboard focus. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--panel);color:var(--ink);padding:10px 16px;border:1px solid var(--line);border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.site-header{display:flex;align-items:center;gap:14px;padding:16px 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;flex:0 0 auto}
.site-header nav{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:14px;font-weight:500;color:var(--muted)}
.site-header nav a{text-decoration:none}
.site-header nav a:hover{text-decoration:underline}
.hamburger{display:none;cursor:pointer;font-size:20px;line-height:1;user-select:none}
.container{max-width:1080px;margin:0 auto;padding:32px 24px}
h1{font-weight:700;letter-spacing:-.01em;margin:.2em 0 .4em} h2{font-weight:600}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.muted{color:var(--muted)} .ok{color:#0a7d38;font-weight:600}
.site-footer{color:var(--muted);font-size:12px;text-align:center;padding:28px 24px;border-top:1px solid var(--line);margin-top:40px}
.app-shell{display:flex;align-items:flex-start}
.sidebar{width:250px;flex:0 0 250px;border-right:1px solid var(--line);background:var(--panel);position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto}
.sidebar-inner{padding:18px 14px}
.sidebar-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px 8px}
.content-area{flex:1;min-width:0}.content-area .container{max-width:1040px;margin:0;padding:32px 40px}
/* Accordion sidebar */
.nav-topics{list-style:none;margin:0;padding:0}
.nav-topic{margin:1px 0}
.topic-row{display:flex;align-items:center;gap:2px;border-radius:8px}
.topic-row:hover{background:var(--bg)}
.t-name{flex:1;min-width:0;display:block;padding:7px 9px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.t-name:hover{text-decoration:underline}
.caret-btn{border:0;background:none;cursor:pointer;padding:6px 9px;border-radius:8px;color:var(--muted);line-height:1}
.caret-btn:hover{background:var(--line)}
.caret{display:inline-block;font-size:15px;line-height:1;transition:transform .18s}
.nav-topic.open .caret{transform:rotate(90deg)}
.mode-toggle{border:1px solid var(--line);border-radius:20px;padding:5px 14px;font-size:13px;text-decoration:none;color:var(--muted)}
.mode-toggle.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.arm.armed{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}
.note-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:10px;width:420px;max-width:82vw}
.note-pop textarea{width:100%;min-height:64px;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;resize:vertical;box-sizing:border-box}
.user-menu{position:relative}
.user-menu>summary{cursor:pointer;list-style:none;height:34px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--line);border-radius:20px;font-weight:500;font-size:14px;color:var(--ink);white-space:nowrap;box-sizing:border-box}
.user-menu>summary::-webkit-details-marker{display:none}
.user-menu[open]>summary{background:var(--bg)}
.user-menu-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:170px;padding:6px;z-index:40;display:flex;flex-direction:column}
.user-menu-pop a{padding:8px 12px;border-radius:7px;text-decoration:none;color:var(--ink);font-size:14px}
.user-menu-pop a:hover{background:var(--bg)}
.nav-articles{display:none;margin:2px 6px 8px;padding:6px;background:#f4f4f4;border-radius:9px}
.nav-topic.open .nav-articles{display:block}
.nav-articles a{display:block;padding:5px 9px;border-radius:6px;font-size:13.5px;text-decoration:none;color:var(--ink)}
.nav-articles a:hover{background:#e9e9e9}
.nav-article.active{background:var(--ink);color:#fff}
.nav-draft{font-size:10px;color:#a07a00;text-transform:uppercase;letter-spacing:.04em}
.nav-empty{display:block;padding:5px 9px;font-size:12.5px;color:var(--muted)}
/* Structure list + generic reorder rows */
.struct-list{display:flex;flex-direction:column;gap:8px}
.struct-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.struct-row.dragging{opacity:.4}
.drag-handle{cursor:grab;color:var(--muted);letter-spacing:-3px;user-select:none;padding:0 2px}
/* Desktop: drag handle only. Mobile: arrows only (I21). */
.reorder-arrow{display:none;border:1px solid var(--line);background:#fff;color:var(--muted);width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:9px;line-height:1;padding:0;flex:0 0 auto}
.reorder-arrow:hover{background:var(--bg);color:var(--ink)}
.struct-row .icon-btn{width:38px;height:38px}
.rename-input{flex:1;min-width:0;padding:6px 8px;border:1px solid transparent;border-radius:7px;font:inherit;background:transparent}
.rename-input:hover{border-color:var(--line)}.rename-input:focus{border-color:var(--ink);background:#fff;outline:none}
.rename-form .save-btn{display:none}
.rename-form:focus-within .save-btn{display:inline-flex}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;font-size:14px;flex:0 0 auto}
.icon-btn:hover{background:var(--bg)}
.reorder-row.dragging{opacity:.4}
.article-body{font-size:15.5px}
.article-body p{margin:.7em 0}.article-body code{background:#f2f2f2;padding:1px 5px;border-radius:5px;font-size:.9em}
/* Lists: circled chevron / number marker with a hanging indent, block indented 2em (design ref) */
.article-body ul,.article-body ol{list-style:none;padding-left:0;margin:1.1em 0 1.1em 2em}
.article-body ol{counter-reset:li}
.article-body li{position:relative;padding-left:50px;min-height:34px;margin:.7em 0;line-height:1.5}
/* Circle marker centred on the first text line (top:-4 aligns its centre with the line centre).
   The bullet glyph is a CSS-drawn chevron (not a font char, which drifted off-centre); the number
   is flex-centred. box-sizing:border-box is set explicitly — the global * rule doesn't reach ::before. */
.article-body ul>li::before,.article-body ol>li::before{box-sizing:border-box;position:absolute;left:0;top:-6px;width:32px;height:32px;border:1.5px solid var(--ink);border-radius:50%}
.article-body ul>li::before{content:""}
.article-body ul>li::after{content:"";position:absolute;left:10px;top:5px;width:8px;height:8px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)}
.article-body ol>li{counter-increment:li}
.article-body ol>li::before{content:counter(li);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;line-height:1;padding-top:2px}
/* Nested list: no extra LEFT margin (parent's 50px padding already lands the nested marker's left
   edge at the parent's text start); more TOP margin so it isn't glued under the parent line. (David) */
.article-body li>ul,.article-body li>ol{margin:1em 0 .5em}
/* Tables: horizontal rules only + row hover (design ref) */
.article-body table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:15px}
.article-body th,.article-body td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)}
.article-body thead th{border-bottom-width:1.5px}
.article-body th{font-weight:700}
.article-body tbody th{background:#f6f6f6}
.article-body td:last-child,.article-body th:last-child{text-align:right}
.article-body tbody tr:hover{background:var(--bg)}
.article-body blockquote{margin:1em 0 1em 2em;padding:.4em 0 .4em 18px;border-left:3px solid var(--line);color:var(--muted);font-style:italic}
.article-body hr,.trix-content hr{border:0;border-top:1px solid var(--line);margin:1.5em 0;clear:both;height:0}
/* Divider inserted by "---" (content attachment). The content figure is inline-block by default, so
   an empty child had zero width and showed nothing — force the figure + line to full width. */
.trix-content figure.attachment--content,.article-body figure.attachment--content{display:block;width:100%;margin:.9em 0}
.cb-hr{display:block;width:100%;height:0;border-top:1px solid rgba(20,20,20,.22);margin:0;clear:both}
.article-body a{color:#2e7d32;text-decoration:none}
.article-body a:hover{text-decoration:underline}
/* Text-label toolbar (B I U S H1 H2 H3): replace Trix's ::before sprite icon with a letter */
/* Text-label toolbar (B I U S H1 H2 H3): native + custom buttons share the same icon box,
   with the letter drawn on ::before (background sprite off, text-indent reset). */
trix-toolbar .trix-button--icon-bold,
trix-toolbar .trix-button--icon-italic,
trix-toolbar .trix-button--icon-strike,
trix-toolbar .trix-button--icon-heading-1,
trix-toolbar .trix-txtbtn{width:2.2em}
trix-toolbar .trix-button--icon-bold::before,
trix-toolbar .trix-button--icon-italic::before,
trix-toolbar .trix-button--icon-strike::before,
trix-toolbar .trix-button--icon-heading-1::before,
trix-toolbar .trix-txtbtn::before{
  background-image:none !important;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;line-height:1;color:#000;
  text-indent:0;
}
trix-toolbar .trix-button--icon-bold::before{content:"B"}
trix-toolbar .trix-button--icon-italic::before{content:"I";font-style:italic}
trix-toolbar .trix-button--icon-strike::before{content:"S";text-decoration:line-through}
trix-toolbar .trix-button--icon-heading-1::before{content:"H1";font-size:11px}
trix-toolbar .cb-u::before{content:"U";text-decoration:underline;text-underline-offset:1px}
trix-toolbar .cb-h2::before{content:"H2";font-size:11px}
trix-toolbar .cb-h3::before{content:"H3";font-size:11px}
/* Highlight button: an outlined white "H" (white fill, dark outline). */
trix-toolbar .cb-hl::before{content:"H";background:none;color:#fff;-webkit-text-stroke:1px #111;text-stroke:1px #111;font-size:13px}
/* Image float buttons: glyph buttons inside the attach-file group (even cells with the image
   button). Keep the trix-button--icon width so all four cells match; show the glyph, hide the sprite. */
trix-toolbar .cb-floatbtn{text-indent:0;font-size:16px;color:#333;line-height:1}
trix-toolbar .cb-floatbtn::before{content:none !important;background:none !important}
trix-toolbar .cb-floatbtn.trix-active{background:var(--line)}
trix-toolbar .cb-floatbtn:disabled{opacity:.35;cursor:default}
/* The attach-file button reads as an image, since it is mostly used for photos. */
trix-toolbar .trix-button--icon-attach::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='13' height='11' rx='2'/%3E%3Ccircle cx='6.4' cy='7.2' r='1.3'/%3E%3Cpath d='M3.5 13l3.8-3.6 2.7 2.6 2.2-2.1 2.3 2.2'/%3E%3C/svg%3E") !important;background-size:18px 18px}
/* Toolbar layout: pack button groups left at body width, even small gaps, no empty strip.
   Trix defaults spread groups edge-to-edge (space-between plus a flex spacer) and add a 1.5vw margin
   between groups and a bottom margin under each, which leaves the toolbar looking too wide and with
   an empty strip beneath it. */
/* One toolbar that stays reachable: sticks just under the site header while the editor is in view.
   White padding top+bottom so scrolling content never touches the buttons and it reads as separate. */
/* top:66 leaves a small gap under the site header; the upward box-shadow paints that gap with the
   page background so scrolling content doesn't flicker through it. */
trix-toolbar{margin-bottom:6px;position:sticky;top:66px;z-index:20;background:var(--panel);padding:7px 0;box-shadow:0 -9px 0 0 var(--bg)}
trix-toolbar .trix-button-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 6px;margin:0}
trix-toolbar .trix-button-group{margin:0 !important;border:1px solid var(--line);border-radius:8px;overflow:hidden}
trix-toolbar .trix-button-group-spacer{display:none !important}
trix-toolbar .trix-button{border-bottom:0}
trix-toolbar .trix-dialogs{margin:0}
/* Editor tables (backlog task 1): the article view styles tables via .article-body, but inside the
   Trix editor they'd be borderless — draw a light grid so cells are visible while editing. The
   pointer cursor is editor-only; rendered article tables are not links/buttons. */
trix-editor.trix-content figure.attachment--content table{width:100%;border-collapse:collapse;margin:.4em 0;cursor:pointer}
trix-editor.trix-content figure.attachment--content th,trix-editor.trix-content figure.attachment--content td{border:1px solid var(--line);padding:7px 9px;text-align:left;font-size:14px}
trix-editor.trix-content figure.attachment--content th{background:#f4f4f4;font-weight:700}
.article-body table{cursor:default}
.article-body tbody tr:hover{background:#f3f3ef}
.trix-toolbar .cb-tablebtn,trix-toolbar .cb-tablebtn{text-indent:0;font-size:15px;color:#333;line-height:1}
trix-toolbar .cb-tablebtn::before{content:none !important;background:none !important}
/* Grid-editor modal */
.cb-tbl-ov{position:fixed;inset:0;z-index:70;background:rgba(20,20,20,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.cb-tbl-modal{background:var(--panel);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.28);width:640px;max-width:96vw;max-height:90vh;overflow:auto;padding:18px}
.cb-tbl-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cb-tbl-gridwrap{overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px}
.cb-tbl-grid{border-collapse:collapse;width:100%}
.cb-tbl-grid td{padding:2px}
.cb-tbl-grid input{width:100%;min-width:90px;padding:7px 8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13.5px;box-sizing:border-box}
.cb-tbl-grid input:focus{border-color:var(--ink);outline:none}
.cb-tbl-opt{font-weight:400;font-size:13px;display:inline-flex;align-items:center;gap:6px;margin-left:14px}
.cb-tbl-tools{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.cb-tbl-mini{padding:6px 12px;border:1px solid var(--line);border-radius:7px;background:#fff;font:inherit;font-size:13px;cursor:pointer}
.cb-tbl-mini:hover{background:var(--bg)}
.cb-tbl-foot{display:flex;align-items:center;gap:8px;margin-top:6px}
.cb-tbl-save{padding:8px 18px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-weight:600;cursor:pointer;font:inherit;font-size:13px}
.cb-tbl-cancel{padding:8px 15px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font:inherit;font-size:13px}
.cb-tbl-del{padding:8px 14px;border:1px solid #e0b4b4;border-radius:8px;background:#fff;color:#a11;font-weight:600;cursor:pointer;font:inherit;font-size:13px}
/* Access lock as a small float popover (mdiLock) — used in the article action bar and topics admin.
   Just a lock icon; the panel floats like the dashboard Calendar popover. */
.lockpop{position:relative;display:inline-block}
.lockpop>summary{list-style:none;cursor:pointer}
.lockpop>summary::-webkit-details-marker{display:none}
.lockpop-btn{width:36px;height:36px;padding:0}
/* The icon carries the state (not colour): open padlock = everyone, closed padlock = restricted. */
.lockpop-btn .ic-lock{display:none}
.lockpop-btn.restricted .ic-unlock{display:none}
.lockpop-btn.restricted .ic-lock{display:inline}
.lockpop-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:50;width:330px;max-width:86vw;box-shadow:0 8px 28px rgba(0,0,0,.16);text-align:left}
.access-badge{background:#f3e9c9;color:#7a5c00;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:20px}
/* Highlighted text: greenish background, dark readable text — editor, article and PDF. */
mark,.trix-content mark,.article-body mark{background:#dff0df;color:#173a1c;padding:0 2px;border-radius:3px}
/* Heading sizes (editor + render): H1 > H2 > H3, overriding Trix defaults */
.trix-content h1{font-size:25px;font-weight:700;margin:.6em 0 .3em}
.trix-content h2{font-size:20px;font-weight:700;margin:.6em 0 .3em}
.trix-content h3{font-size:16.5px;font-weight:700;margin:.5em 0 .3em}
.trix-content img{max-width:100%;height:auto;border-radius:8px}
.trix-content .attachment img{width:100%}
.trix-content figure{margin:1.1em 0}
/* Float image + text wrap: ~1/3-width image with text flowing beside it. The article page
   uses the server-applied class; the editor previews live via the Trix attachment attribute. */
/* Editor float: a one-shot class gives instant feedback on click; the data-trix-attachment selector
   holds it after Trix's own re-render (which strips the class). No JS re-apply on events → no loop.
   Article render uses the img-float class Html::applyFloats adds server-side. */
.article-body figure.img-float-left,.trix-content figure.img-float-left,
.trix-content figure[data-trix-attachment*='"float":"left"']{float:left;width:34%;max-width:320px;margin:.2em 1.3em .5em 0}
.article-body figure.img-float-right,.trix-content figure.img-float-right,
.trix-content figure[data-trix-attachment*='"float":"right"']{float:right;width:34%;max-width:320px;margin:.2em 0 .5em 1.3em}
/* Contain floats so a floated image at the very end still extends the editor box / article body. */
.article-body::after,.trix-content::after{content:"";display:block;clear:both}
/* Lift floated images above the following block so the WHOLE image is clickable for the lightbox
   (the block after a float overlaps the image's protruding part and was stealing the clicks). */
.article-body figure.img-float-left,.article-body figure.img-float-right{position:relative;z-index:1}
/* Instant "off" override that beats a still-stale data-trix-attachment until Trix re-renders. */
.trix-content figure.img-float-none{float:none !important}
/* Double-enter clear: ends a float wrap. Invisible in the article; a faint dashed marker in the
   editor only (trix-editor, so it never shows in the rendered article which also has .trix-content). */
.cb-clear{clear:both;display:block;height:0;font-size:0;line-height:0}
trix-editor .cb-clear{border-top:1px dashed rgba(20,20,20,.3)}
/* A floated image must never take a heading's size just because it landed inside one. */
.article-body h1 figcaption,.article-body h2 figcaption,.article-body h3 figcaption,
.trix-content h1 figcaption,.trix-content h2 figcaption,.trix-content h3 figcaption{font-size:12.5px;font-weight:400;line-height:1.4}
.article-body h1>figure,.article-body h2>figure,.article-body h3>figure,
.trix-content h1>figure,.trix-content h2>figure,.trix-content h3>figure{font-size:15.5px;font-weight:400}
.article-body::after{content:"";display:block;clear:both}
@media (max-width:560px){.article-body figure.img-float-left,.article-body figure.img-float-right,
  .trix-content figure[data-trix-attachment*='"float"']{float:none;width:100%;max-width:none;margin:1.1em 0}}
/* A list beside a floated image. A list is a block box, and a float only shortens the
   LINE boxes inside a block — the block itself still starts at the container's left edge. So the
   list text wrapped beside the image while the markers (absolutely positioned at the li's own left)
   stayed at the far left, under the photo. Giving lists their own block formatting context places
   the whole list box — markers included — next to the float, in the editor and on the page alike.
   A BFC also stops the item margins collapsing out through the list edges, so the first/last item
   margins are zeroed to keep exactly the previous vertical rhythm. */
.article-body ul,.article-body ol,.trix-content ul,.trix-content ol{display:flow-root}
.article-body ul>li:first-child,.article-body ol>li:first-child,
.trix-content ul>li:first-child,.trix-content ol>li:first-child{margin-top:0}
.article-body ul>li:last-child,.article-body ol>li:last-child,
.trix-content ul>li:last-child,.trix-content ol>li:last-child{margin-bottom:0}
/* Section break (⤓ end-wrap) / "---" divider after a floated image. Clearing only the inner div
   is not enough: the attachment figure's own full-width — and invisible — box then still begins
   level with the image and covered the photo's caption: in the editor the caption stopped being
   clickable because the break figure won the hit test. Clearing the FIGURE puts the break below the
   whole attachment, caption included. */
.article-body figure[data-trix-attachment*="vnd.trix.clear"],
.trix-content figure[data-trix-attachment*="vnd.trix.clear"],
.article-body figure[data-trix-attachment*="horizontal-rule"],
.trix-content figure[data-trix-attachment*="horizontal-rule"]{clear:both}
/* Same for a break authored outside the editor, which carries only the inner div (no attachment
   JSON). Kept as its own rule: an unsupported :has() would otherwise void the whole selector list. */
.article-body figure.attachment--content:has(>.cb-clear),.trix-content figure.attachment--content:has(>.cb-clear),
.article-body figure.attachment--content:has(>.cb-hr),.trix-content figure.attachment--content:has(>.cb-hr){clear:both}
/* Edit mode gets the article's "lift the floated image above the following block" rule too, so the
   caption keeps its clicks even when some other block still lands beside the image. */
.trix-content figure.img-float-left,.trix-content figure.img-float-right,
.trix-content figure[data-trix-attachment*='"float":"left"'],
.trix-content figure[data-trix-attachment*='"float":"right"']{position:relative;z-index:1}
.trix-content figure.attachment--file{display:inline-block}
.trix-content figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:4px}
/* Inline pills — mention (@), task ref (#) and checklist ref ($) share one size + a border so they
   read consistently and sit on the text baseline. */
.mention{background:#efece3;color:#5a4a1a;padding:1px 8px;border-radius:20px;border:1px solid #e0d7c2;font-weight:600;font-size:.9em;white-space:nowrap}
.task-ref{background:#eceff1;color:#41505a;padding:1px 8px;border-radius:20px;font-weight:600;font-size:.9em;white-space:nowrap;text-decoration:none;border:1px solid #d7dde1;cursor:pointer}
.task-ref:hover{background:#dfe5e9}
/* Inline "$Checklist:Step" bubble: step text + a live checkbox you tick in the prose. Rendered as a
   plain inline pill (not flex) so it lines up on the baseline exactly like the @/# pills. */
.checklist-ref{background:#eef1ec;color:#3f4a37;padding:1px 8px;border-radius:20px;border:1px solid #d5ddcf;font-weight:600;font-size:.9em;white-space:nowrap;cursor:pointer}
.checklist-ref .cl-txt{cursor:pointer}
.checklist-ref .cl-inline{width:13px;height:13px;margin:0 0 0 5px;vertical-align:middle;position:relative;top:-1px;cursor:pointer}
.checklist-ref.cl-flash,.cl-step-row.cl-flash,.panel.cl-flash{animation:taskflash 1.3s ease}
.cl-step-row,[data-checklist-id]{scroll-margin-top:74px}
.task-back{margin-left:6px;color:var(--muted);text-decoration:none;font-size:.9em}
.task-back:hover{color:var(--ink)}
.task-row:target{background:#dff0df;transition:background .4s}
.task-row.task-flash,.task-ref.task-flash{animation:taskflash 1.3s ease}
@keyframes taskflash{0%,30%{background:#dff0df}100%{background:transparent}}
.task-ref:focus{outline:none}
/* Offset so #task / #taskref jumps clear the sticky header instead of hiding under it. */
.task-row,[id^="taskref-"]{scroll-margin-top:74px}
html{scroll-behavior:smooth}
.rel-pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:5px 6px 5px 12px;font-size:13px}
.rel-x{border:0;background:#e3e3e3;color:#444;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.rel-x:hover{background:#a11;color:#fff}
.segmented{display:flex;flex-wrap:wrap;gap:4px;flex-basis:100%}
.seg{flex:1 1 auto;justify-content:center;position:relative;padding:0 8px;height:36px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;font-size:11.5px;cursor:pointer;user-select:none;color:var(--muted);white-space:nowrap}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg:has(input:checked),.seg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg:hover{border-color:var(--ink)}
.lb{position:fixed;inset:0;z-index:60;background:rgba(20,20,20,.92);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:92vw;display:flex;flex-direction:column;align-items:center}
.lb-img{max-width:92vw;max-height:80vh;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lb-cap{color:#eaeaea;font-size:14px;margin-top:14px;text-align:center;max-width:80vw;line-height:1.4}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;border-radius:50%;width:44px;height:44px;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb-close{top:18px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.sidebar-secondary{display:none}
.sidebar-secondary details>summary::-webkit-details-marker{display:none}
.sidebar-secondary details[open]>summary .caret{transform:rotate(90deg)}
@media(max-width:820px){
  .site-header nav{display:none}
  .sidebar-secondary{display:block}
  .hamburger{display:inline-block}
  .drag-handle{display:none}
  .reorder-arrow{display:inline-flex;align-items:center;justify-content:center}
  .app-shell{display:block}
  .sidebar{position:fixed;top:58px;left:0;z-index:20;transform:translateX(-100%);transition:transform .2s;box-shadow:2px 0 12px rgba(0,0,0,.08)}
  #navtoggle:checked ~ .app-shell .sidebar{transform:translateX(0)}
  .content-area .container{padding:22px 16px}.container{padding:22px 16px}
}

/* ---------------------------------------------------------------------------
   Form, table and button primitives.

   These replace style attributes that were repeated across the templates — and, in the case of
   the per-template PHP variables ($inp, $lbl, $th, $td, $btn), repeated inconsistently: $inp had
   four different definitions and $th meant a table header in one template and a form control in
   another. Naming them once here makes the markup describe what a thing IS rather than how it
   looks, and is what lets the Content-Security-Policy stop allowing inline styles.
   --------------------------------------------------------------------------- */

/* Form fields */
.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.field-hint { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 4px; }

.control {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff; box-sizing: border-box;
}
.control--line { height: 42px; padding: 0 11px; }          /* single-line inputs and selects */
.control--compact { height: 32px; padding: 0 8px; font-size: 12px; border-radius: 7px; }
.control--auto { width: auto; padding: 8px 10px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  text-decoration: none; font: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.btn--primary { padding: 9px 16px; border: 0; background: var(--ink); color: #fff; }
.btn--danger { border-color: #e0b4b4; color: #a11; }

/* Data tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
.data-table td.nowrap, .data-table th.nowrap { white-space: nowrap; }
/* The filter row sits inside <thead> but holds controls, not headings, so it opts out of the
   heading treatment its parent selector would otherwise give it. */
.data-table .filter-cell {
  padding: 6px 10px; border-bottom: 1px solid var(--line);
  /* font-weight is left at the th default: the controls inherit it, and that is how this row
     has always looked. white-space is reset here rather than on the descendants, so a <select>
     keeps its own user-agent value. */
  font-size: 16px; text-transform: none; letter-spacing: normal;
  color: var(--ink); text-align: center; white-space: normal; line-height: 1.55;
}
.data-table tr.is-alert { background: #fcf3f3; }
.data-table td.is-alert { color: #a11; font-weight: 600; }

/* Small layout helpers, so a one-off flex row does not need its own style attribute */
.stack { display: flex; }
.stack--wrap { flex-wrap: wrap; }
.stack--center { align-items: center; }
.stack--baseline { align-items: baseline; }
.stack--gap-xs { gap: 4px; }
.stack--gap-sm { gap: 6px; }
.stack--gap-md { gap: 8px; }
.stack--gap { gap: 12px; }
.grow { flex: 1; min-width: 0; }
.flush { margin: 0; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }

/* Error and notice panels */
.panel--error { border-color: #e0b4b4; background: #fcf5f5; color: #a11; margin-bottom: 14px; }
.page-title { margin-bottom: .2em; }
.flush-top { margin-top: 0; }
.panel--table { padding: 0; overflow-x: auto; }
.pager { margin-top: 12px; }

/* Sign-in */
.auth { max-width: 380px; margin: 6vh auto; }
.auth h1 { text-align: center; margin-bottom: 6px; }
.auth-sub { text-align: center; margin-top: 0; font-size: 13px; }
.auth .panel { margin-top: 14px; }
.auth label { font-size: 13px; font-weight: 500; }
.auth input { width: 100%; padding: 9px; margin: 6px 0 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.auth input[type="password"] { margin-bottom: 18px; }
.auth button { width: 100%; padding: 11px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; font: inherit; }
.panel--error-inline { border-color: #e0b4b4; background: #fcf5f5; color: #a11; margin: 14px 0; }

/* Search */
.searchform { margin-bottom: 20px; position: relative; max-width: none; }
.searchform input { width: 100%; padding: 11px 40px 11px 15px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 15px; }
.searchclear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: #e3e3e3; color: #444; width: 24px; height: 24px; border-radius: 50%;
  font-size: 15px; line-height: 1; text-decoration: none;
}

/* A panel that is a list of links rather than a box of prose */
.panel--list { padding: 0; }
.list-row { display: block; padding: 13px 16px; border-top: 1px solid var(--line); text-decoration: none; }
.list-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.list-title { display: block; margin-top: 1px; }
.list-note { display: block; font-size: 13px; margin-top: 2px; }
.list-note--tight { display: block; font-size: 12px; margin-top: 3px; }
.badge-soft { font-weight: 400; font-size: 12px; }

/* Page header row: title plus actions */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h1 { flex: 1; margin-bottom: .2em; }
.title-inline { margin: 0; font-size: 22px; }

/* Completion history rows */
.history-row { display: flex; gap: 12px; align-items: baseline; padding: 11px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.history-when { flex: 0 0 auto; }
.history-time { font-weight: 300; color: var(--muted); }
.history-who { flex: 1; min-width: 120px; }
.history-note { flex-basis: 100%; font-size: 13px; }

.backrow { gap: 10px; }
.history-sub { margin-top: 6px; }

/* Toolbar above a listing: title on the left, actions pushed right */
.list-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.list-head h1 { margin: 0; margin-right: auto; }
.btn--solid {
  padding: 9px 16px; border: 0; border-radius: 8px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.panel--scroll { padding: 0; overflow: auto; }

/* The users listing keeps its own slightly roomier cells */
.user-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.user-table thead tr { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.user-table thead th:first-child { padding: 11px 14px; }
.user-table tbody tr { border-top: 1px solid var(--line); }
.user-table tbody td:first-child { padding: 11px 14px; font-weight: 500; }
.user-table tbody td:last-child { padding-right: 14px; }

/* Back-arrow header used by history, revision and completion pages */
.subpage-head { display: flex; align-items: center; gap: 10px; }
.subpage-head--wrap { flex-wrap: wrap; }
.subpage-sub { margin-top: 6px; }
.spacer { flex: 1; }
.inline-form { margin: 0; }
.btn--quiet { padding: 9px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; font: inherit; }
.btn--quiet-sm { padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }

/* Revision preview */
.rev-title { margin-top: 18px; }
.rev-summary { border-left: 3px solid var(--ink); padding-left: 14px; color: #333; }

/* Revision list rows */
.rev-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); }
.rev-main { flex: 1; min-width: 0; }
.rev-time { font-weight: 300; color: var(--muted); }
.rev-meta { font-size: 12px; }
.rev-subject { display: block; font-size: 13px; margin-top: 1px; }

/* Stacked form (users, topics): a label wrapping its own control */
.stacked-form { max-width: 540px; }
/* Labels stay inline, as they were: each one wraps its own control, which is what makes
   the pairs in .field-pair sit side by side. */
.stacked-form label { font-size: 13px; font-weight: 500; }
.stacked-form input[type="text"], .stacked-form input[type="email"], .stacked-form input:not([type]),
.stacked-form input[type="password"], .stacked-form select {
  width: 100%; height: 40px; padding: 9px; margin: 6px 0 14px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff;
}
.stacked-form input:disabled { background: #f4f4f4; }
.field-pair { display: flex; gap: 12px; }
.field-pair label { flex: 1; }

/* Structure screen */
.struct-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.struct-head-main { flex: 1; min-width: 0; }
.btn--pin { flex: 0 0 auto; }
.addbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.addbar input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; flex: 1; min-width: 180px; }
.addbar button { padding: 9px 18px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; }
.panel--spaced { margin-bottom: 16px; }
.rename-form { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.count-note { font-size: 12px; white-space: nowrap; }

/* Access lock popover */
.lockpop-title { font-weight: 700; margin: 0 0 8px; font-size: 14px; }
.lockpop-intro { font-size: 12.5px; margin: 0 0 10px; }
.rolelist { display: flex; flex-direction: column; gap: 4px; }
.rolelist--spaced { margin-bottom: 12px; }
.rolelist label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; }
.btn--save { padding: 8px 16px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.icon-btn--danger { color: #a11; border-color: #e0b4b4; }
.icon-btn--disabled { opacity: .35; cursor: not-allowed; }

/* Users form extras */
.rolebox { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 14px; }
.rolebox legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.rolebox label { display: inline-flex; align-items: center; gap: 6px; margin: 5px 14px 5px 0; font-weight: 400; font-size: 14px; }
.toggle-row { display: flex; gap: 12px; margin-bottom: 16px; }
.stacked-form label.toggle-box, .toggle-box {
  flex: 1; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px; font-weight: 500; font-size: 14px;
  margin: 0; cursor: pointer;
}
.btn--delete-wide {
  flex: 1; height: 40px; padding: 0 12px; border: 1px solid #e0b4b4; border-radius: 8px;
  background: #fff; color: #a11; font-weight: 500; font-size: 14px; cursor: pointer;
  font: inherit; display: flex; align-items: center; justify-content: center;
}
.btn--submit { padding: 10px 20px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; font: inherit; }

.cancel-link { margin-left: 12px; color: var(--muted); }
.plain-link { text-decoration: none; }

/* Dashboard */
.stat-card { flex: 1; min-width: 120px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.stat-number { font-size: 26px; font-weight: 700; }
.stat-number--alert { color: #a11; }
.stat-number--warn { color: #7a5c00; }
.cal-wrap { margin: 0; flex: 0 0 auto; display: flex; gap: 6px; align-items: center; position: relative; }
.cal-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 340px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.cal-subscribe { display: inline-block; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.cal-note { font-size: 12px; margin: 0 0 8px; }
.cal-url { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 12px; }
.btn--ghost { padding: 8px 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.is-hidden { display: none; }
.spread { flex: 0 0 auto; position: relative; }
.narrow { min-width: 0; }
.mt-14 { margin-top: 14px; }
.mt-2 { margin-top: 2px; }
.strong-sm { font-size: 13px; font-weight: 600; }

/* Profile */
.profile-panel { max-width: 500px; }
.profile-panel--spaced { max-width: 500px; margin-top: 18px; }
.pull-up { margin-top: -6px; }
.btn--danger-solid { padding: 8px 14px; border: 1px solid #e0b4b4; border-radius: 8px; background: #fff; color: #a11; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.btn--sm { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.btn--dark-sm { padding: 9px 16px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.label-inline { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Layout odds and ends */
.sidebar-search { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; box-sizing: border-box; }
.sidebar-search-wrap { margin: 6px 8px 10px; }
.nav-heading { padding: 8px 12px 6px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.nav-heading--sm { padding: 6px 9px 5px; font-weight: 700; font-size: 13.5px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.nav-item { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.nav-item--sm { padding: 5px 9px; font-size: 13.5px; white-space: nowrap; }
.mode-on { text-decoration: underline; color: var(--ink); }
.mode-off { text-decoration: none; color: var(--ink); }
.centered { text-align: center; }
.grow-label { font-size: 13px; font-weight: 500; flex: 1; }
.plain-label { font-size: 13px; font-weight: 500; }
.panel--ok { border-color: #b6d7b6; background: #f0f7f0; color: #2a6b2a; margin-bottom: 14px; }
.control--muted, .stacked-form input.control--muted { background: #f4f4f4; color: var(--muted); }
.control--mono { font-size: 12px; margin-top: 4px; font-family: monospace; }
.control--tiny { font-size: 12px; margin-top: 4px; }
.h-sub { margin: 0 0 4px; font-size: 17px; }
.p-lead { font-size: 13px; margin: 0 0 12px; }
.normal-weight { font-weight: 400; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.summary-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; list-style: none; }

/* Dashboard task rows and stat strip */
.copy-btn { display: inline-block; padding: 6px 10px; border-radius: 7px; background: #fff; color: var(--ink); border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; margin-top: 8px; }
.stat-strip { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 26px; }
.task-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.task-row--clickable { cursor: pointer; }
.task-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 220px; }
.badge--fixed { flex: 0 0 auto; }
.badge--own { background: var(--ink); color: #fff; margin-left: 6px; }
.task-note { display: block; font-size: 13.5px; color: #333; margin-top: 1px; }
.task-sub { display: block; font-size: 12.5px; margin-top: 2px; }

/* Layout chrome */
.brand-logo { height: 23px; display: block; }
.header-search { height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 20px; font: inherit; font-size: 13px; width: 130px; box-sizing: border-box; }
.side-row { display: flex; align-items: center; justify-content: space-between; margin: 0 8px 8px; }
.side-row--spaced { display: flex; align-items: center; justify-content: space-between; margin: 18px 8px 6px; }
.side-pill { font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: 3px 8px; border: 1px solid var(--line); border-radius: 20px; text-decoration: none; color: var(--muted); }
.side-note { font-size: 13px; margin: 6px 8px; }
.side-rule { border: 0; border-top: 1px solid var(--line); margin: 16px 8px; }
.bare-summary { list-style: none; cursor: pointer; }
.caret-cell { flex: 0 0 auto; padding: 7px 9px; display: inline-flex; align-items: center; }
.block { display: block; }
.mode-on-inline { display: inline; text-decoration: underline; color: var(--ink); }
.mode-off-inline { display: inline; text-decoration: none; color: var(--ink); }

/* Task status badges. The colours belong to the status, so they live here rather than being
   recomputed per row in the template. */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}
.badge--overdue  { color: #a11;    background: #fbeaea; }
.badge--due-soon { color: #7a5c00; background: #f6efd6; }
.badge--upcoming { color: #3a6b3a; background: #e9f1e9; }

/* A plain outlined link. Unlike .btn it does not become a flex box or take a white background —
   it is an <a> that reads as a button, and nothing more. */
.btn-outline {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none;
  font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink);
}
.btn-outline--tight { padding: 8px 13px; }
.btn-outline--fixed { flex: 0 0 auto; }

/* Article page */
.no-indent { margin-left: 0; }
.section-gap { margin-top: 26px; }
.section-gap--wide { margin-top: 28px; }
.tight-gap { margin-top: 6px; }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: 0 0 auto; }
.tickbox { width: 19px; height: 19px; margin-top: 1px; cursor: pointer; flex: 0 0 auto; }
.btn--quiet-xs { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 12.5px; }
.panel-note { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
.panel--list-spaced { padding: 0; margin-bottom: 14px; }
.summary-line { font-style: italic; color: var(--ink); font-size: 16.5px; margin: 8px 0 10px; }
.crumb { font-size: 13px; text-decoration: none; }
.lead-note { font-size: 13px; margin: 0 0 20px; }
.meta-fixed { font-size: 12px; flex: 0 0 auto; }
.fixed { flex: 0 0 auto; }
.grow--180 { flex: 1; min-width: 180px; }
.grow--150 { flex: 1; min-width: 150px; }
.tag { display: inline-block; margin: 0 8px 8px 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; text-decoration: none; font-size: 13px; color: var(--ink); }
.btnpair { display: flex; gap: 8px; flex: 0 0 auto; }
.step-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.head-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.link-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); text-decoration: none; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sub-note { display: block; font-size: 12.5px; color: #333; margin-top: 1px; }
.sub-plain { display: block; font-size: 12.5px; }
.done-note { font-size: 12px; }
.is-done { color: var(--muted); text-decoration: line-through; }
.badge--role { background: #f3e9c9; color: #7a5c00; vertical-align: middle; }
.badge--info { background: #e7eef5; color: #33506b; vertical-align: middle; }

/* The article page's badges are a touch smaller and lighter than the dashboard's. */
.badge--article {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle;
}

/* Media library */
.lib-inp { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13.5px; }
.lib-btn { padding: 9px 16px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.lib-ghost { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.lib-ghost--wide { width: auto; padding: 0 14px; height: 36px; gap: 7px; font-size: 13px; font-weight: 600; }
.lib-ghost--link { width: auto; padding: 0 12px; font-size: 13px; text-decoration: none; }
.lib-toolbar { margin-bottom: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lib-group { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.lib-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; background: var(--bg); }
.lib-thumb--doc {
  width: 100%; aspect-ratio: 4/3; border-radius: 6px; background: var(--bg); display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: var(--muted); letter-spacing: .08em;
}
.crumb-link { text-decoration: none; padding: 3px 8px; margin: -3px -2px; border: 1px solid transparent; border-radius: 8px; }
.crumb-link--current { font-weight: 600; color: var(--ink); }
.crumb-link--parent { color: var(--muted); }
.plain-block { text-decoration: none; color: inherit; display: block; }
.offscreen-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kind-pill { padding: 7px 14px; border: 1px solid var(--line); border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--ink); }
.kind-pill--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.empty-drop { padding: 26px 0; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.lib-card { padding: 10px; display: flex; flex-direction: column; cursor: grab; transition: opacity .12s; }
.is-disabled { opacity: .35; cursor: not-allowed; }
.lib-caption { margin-top: 7px; padding: 4px 5px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.35; cursor: text; border-radius: 6px; color: var(--ink); }
.lib-caption--empty { color: var(--muted); font-style: italic; }
.lib-name { font-size: 13.5px; font-weight: 600; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-nowrap { font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.bold { font-weight: 600; }
.text-sm-gap { font-size: 13px; margin-top: 14px; }
.lib-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin: 12px 0 14px; }
.lib-search { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 240px; }
.lib-inp--grow { flex: 1; min-width: 150px; }
.lib-inp--wide { min-width: 170px; }
.dropzone { border: 2px dashed transparent; border-radius: 12px; padding: 2px; transition: border-color .12s, background .12s; }
.drop-hint { display: none; margin: 0 0 12px; font-size: 13.5px; }
.folder-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.folder-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.usage-note { font-size: 12px; margin-top: 2px; color: var(--muted); }
.usage-note--unused { color: #8a6d00; font-weight: 600; }

/* .muted on its own loses to any component class defined later in this file, which is not what
   the inline style it replaced did. Spell the combination out so it wins where it is used. */
.icon-btn.muted { color: var(--muted); }

/* File detail */
.file-cols { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.file-preview { flex: 0 0 auto; max-width: 320px; }
.file-image { max-width: 320px; width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.file-doc {
  display: flex; width: 220px; height: 150px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  text-decoration: none; font-weight: 700; color: var(--muted); letter-spacing: .08em;
}
.file-facts { display: flex; flex-direction: column; gap: 16px; }
.file-title { margin: 0 0 .3em; font-size: 22px; }
.file-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin: 0 0 10px; }
.file-h2 { font-size: 17px; margin: 22px 0 8px; }
.file-label { font-size: 13px; font-weight: 600; min-width: 74px; }
.file-label--top { padding-top: 10px; }
.file-usage-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.file-usage-row--ruled { border-top: 1px solid var(--line); }
.file-actions { border-top: 1px solid var(--line); padding-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row-baseline { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.row-start { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.row-center { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wrapline { flex: 1 0 100%; margin: 0; font-size: 13px; }
.grow--240 { flex: 1; min-width: 240px; }
.grow--200 { flex: 1; min-width: 200px; margin: 0; font-size: 13px; }
.lib-inp--field { flex: 1; min-width: 200px; }
.lib-inp--white { flex: 1; min-width: 200px; background: #fff; }
.lib-inp--area { flex: 1; min-width: 200px; resize: vertical; line-height: 1.4; box-sizing: border-box; }
.chip-link { flex: 0 0 auto; font-size: 13px; text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: inherit; }
.btn--danger-outline { padding: 9px 16px; border: 1px solid #e0b4b4; border-radius: 8px; background: #fff; color: #a11; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.btn--danger-outline.is-disabled { opacity: .4; cursor: not-allowed; }
.plain { text-decoration: none; }
.plain-muted { text-decoration: none; color: var(--muted); }
.plain-strong { font-weight: 600; text-decoration: none; }
.note-13 { margin: 0; font-size: 13.5px; }
.note-13--gap { margin: 0 0 10px; font-size: 13.5px; }
.cap-line { margin: 0 0 10px; }
.tiny-tag { font-size: 11px; margin-left: 6px; }
.tiny-tag--strong { font-size: 11px; font-weight: 700; letter-spacing: .05em; margin-left: 6px; }
.ml-6 { margin-left: 6px; }
.mt-8 { font-size: 13px; margin-top: 8px; }
.mt-3 { font-size: 13px; margin-top: 3px; }

/* Article editor */
.ed-actionbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ed-actionbar--top { margin-bottom: 16px; }
.ed-actionbar--bottom { margin-top: 24px; }
.ed-back { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 16px; line-height: 1; font-weight: 600; }
.ed-title { flex: 1; margin: 0; font-size: 22px; }
.ed-publish { padding: 8px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.ed-publish--is-published { background: #fff; color: var(--ink); }
.ed-delete { padding: 8px 15px; border: 1px solid #e0b4b4; border-radius: 8px; background: #fff; color: #a11; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.ed-save { padding: 8px 18px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; font: inherit; font-size: 13px; }
.ed-add { padding: 9px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; }
.ed-editor { min-height: 300px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.ed-dropzone { min-height: 54px; border: 1px dashed var(--line); border-radius: 8px; padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-content: flex-start; }
.ed-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: 0 0 auto; }
.ed-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ed-row--gap-b { margin-bottom: 10px; }
.ed-row--gap-b14 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ed-inline { display: flex; gap: 6px; flex: 1; min-width: 0; align-items: center; }
.ed-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-th { height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.ed-th--full { flex-basis: 100%; }
.ed-th--170 { flex: 1; min-width: 170px; }
.ed-th--160 { flex: 1; min-width: 160px; font-weight: 600; }
.ed-th--150 { flex: 1; min-width: 150px; }
.ed-th--w150 { width: 150px; }
.ed-plain { font: inherit; flex: 1; min-width: 180px; }
.ed-inp-line { height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; flex: 1; min-width: 160px; }
.ed-note { font-size: 13px; margin-top: -6px; }
.ed-gap { margin-top: 34px; }
.ed-legend { font-weight: 600; font-size: 13px; margin: 0 0 10px; }
.control--area { resize: vertical; }
.field--reset { margin: 16px 0 0; }
.control--line-gap { margin-top: 8px; }
.rev-link { margin: -8px 0 16px; }
.icon-btn--ok { color: #0a7d38; border-color: #b6d9c0; }
.wrap-center { flex-wrap: wrap; align-items: center; }
.align-center { align-items: center; }
.small-muted { font-size: 12.5px; color: var(--muted); }
.small-plain { font-size: 12.5px; }
.panel--warn { border-color: #e0b4b4; color: #a11; margin-bottom: 14px; }
.panel--warn-tight { border-color: #e0b4b4; color: #a11; margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-10 { margin-bottom: 10px; }
.pointer { cursor: pointer; }
.rolelist-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; font-weight: 400; }
.hint-125 { font-size: 12.5px; margin: 0 0 10px; }
.hint-125--gap { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.hint-12 { font-size: 12px; margin: 6px 0 0; }
.hint-13-gap { font-size: 13px; margin-top: 14px; }
.full-12 { font-size: 12px; width: 100%; }

/* The media folder body is rendered already expanded, so it needs to override whatever collapsed
   state .nav-articles carries. It used to be an inline style, which always won; as a class it has
   to be spelled out against the same selector. */
.nav-articles.is-open { display: block; }
/* "Unfiled" is a label, not a link — no pointer. */
.t-name--static { cursor: default; }

/* Editor bits built by JavaScript. These used to be style attributes and cssText assignments in
   editor.js, which a strict style-src refuses just as firmly as a style attribute in the markup. */
.cb-menu {
  position: fixed; z-index: 2000; min-width: 190px; max-width: 320px; max-height: 250px;
  overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14); display: none; padding: 4px;
}
.cb-menu-row {
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-menu-row.is-active { background: #eef2ff; }
.cb-tbl-opt--right { margin-left: auto; }
.cb-tbl-head { font-weight: 700; }
.step-form { flex-wrap: wrap; align-items: center; }
/* Inline caption editor in the media library, created by files.js. */
.cap-input {
  width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--ink);
  border-radius: 6px; font: inherit; font-size: 12px; background: #fff;
  color: var(--ink); outline: none;
}
/* A ticked checklist step, in the section list and in an inline "$" bubble. Toggled by article.js
   as a class: the server renders the same class, so the two cannot disagree the way an inline
   style and a class did — clearing the inline style used to leave the class, and the text stayed
   struck through after unticking. */
.cl-step-text.is-done { color: var(--muted); text-decoration: line-through; }
.cl-txt.is-done { text-decoration: line-through; opacity: .65; }

/* Password fields: rules in plain sight, a confirmation box, and a reveal toggle. Hidden by
   default — the toggle is there for someone who wants to check what they typed, not the other
   way round. */
.pw-field { position: relative; }
.pw-field input { padding-right: 42px; }
.pw-reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0; line-height: 1;
}
.pw-reveal:hover { color: var(--ink); }
.pw-reveal .ic-hide { display: none; }
.pw-reveal.is-on .ic-show { display: none; }
.pw-reveal.is-on .ic-hide { display: inline; }
.pw-rules { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.pw-match { display: block; font-size: 12px; margin: 4px 0 0; }
.pw-match.is-bad { color: #a11; }
.pw-match.is-good { color: #0a7d38; }