/* Docugen app styles. Assets are bundled under app/assets/. This file lives
   under app/css/, so ../assets/ reaches the bundled fonts and textures. The app
   is self-contained and served at the site root. */

@font-face { font-family:"NotoSans";
  src:url("../assets/fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight:normal; font-style:normal; }
@font-face { font-family:"NotoSans";
  src:url("../assets/fonts/NotoSans-Bold.ttf") format("truetype");
  font-weight:bold; font-style:normal; }
@font-face { font-family:"DotMatrix";
  src:url("../assets/fonts/DotMatrixDuo-CondensedRegular.otf") format("opentype");
  font-weight:normal; font-style:normal; }
@font-face { font-family:"DotMatrix";
  src:url("../assets/fonts/DotMatrix-CondensedBold.otf") format("opentype");
  font-weight:bold; font-style:normal; }

* { box-sizing:border-box; }
body { margin:0; height:100vh; display:flex; flex-direction:column; overflow:hidden;
       font-family:"Segoe UI",system-ui,sans-serif; background:#14161a; color:#d7dae0; }

/* Shared top tab bar */
.topnav { flex:0 0 auto; display:flex; align-items:center; gap:2px; height:38px;
          background:#0e1013; border-bottom:1px solid #000; padding:0 10px; }
.topnav .brand { font-family:"DotMatrix",monospace; font-size:15px; letter-spacing:1px;
          color:#c9cfd8; margin-right:14px; }
.topnav a { color:#aeb4be; text-decoration:none; font-size:12.5px; padding:6px 12px;
          border-radius:5px 5px 0 0; }
.topnav a:hover { background:#1c1f24; color:#fff; }
.topnav a.active { background:#23262b; color:#fff; }
.appmain { flex:1; display:flex; min-height:0; }

/* Login state slot in the top nav */
#authslot { margin-left:auto; display:flex; align-items:center; gap:8px;
          font-size:12px; color:#9aa0aa; }
#authslot .who { color:#c9cfd8; }
#authslot button, #authslot a.authbtn { background:#2c3037; color:#e6e9ee; border:1px solid #444b55;
          border-radius:4px; padding:4px 10px; font-size:12px; cursor:pointer; text-decoration:none; }
#authslot button:hover, #authslot a.authbtn:hover { background:#363c45; }

/* Left: document list */
#docs { width:234px; flex:0 0 234px; background:#1c1f24; border-right:1px solid #000;
        display:flex; flex-direction:column; }
#docs h2 { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#8890a0;
           margin:0; padding:12px 12px 6px; }
#docs .group-label { font-size:10px; text-transform:uppercase; letter-spacing:.5px;
           color:#6a7180; padding:10px 12px 4px; }
#docs .grp { border-bottom:1px solid #101216; }
#docs .grp-hdr { display:flex; align-items:center; gap:6px; padding:8px 10px; cursor:pointer;
           border-left:3px solid #7d8593; background:#20242b; font-size:10px; text-transform:uppercase;
           letter-spacing:.5px; color:#c4c9d2; user-select:none; }
#docs .grp-hdr:hover { background:#272c34; }
#docs .grp.collapsed .grp-hdr { color:#9aa0aa; }
#docs .grp-name { flex:1; }
#docs .grp-n { color:#6a7180; }
#docs .chev { font-size:9px; color:#8890a0; display:inline-block; width:9px; }
#docs .grp.collapsed .chev { transform:rotate(-90deg); }
#docs .grp.collapsed .grp-items { display:none; }
#docs .item { display:flex; align-items:center; flex-wrap:wrap; gap:4px 5px;
           padding:5px 10px 5px 16px; font-size:12px; cursor:pointer; color:#c3c8d0;
           border-left:3px solid transparent; }
#docs .item-nm { flex:1 1 58%; }
#docs .pill { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
           color:#0d1013; border-radius:7px; padding:1px 5px; white-space:nowrap; }
#docs .item.alt { background:#1d2127; }
#docs .item:hover { background:#2a2f37; }
#docs .item.active { background:#313741; border-left-color:#5a8dd6; color:#fff; }
#docs .list { overflow:auto; flex:1; }

/* Middle: editor */
#editor { width:360px; flex:0 0 360px; display:flex; flex-direction:column;
          background:#23262b; border-right:1px solid #000; }
#editor header { padding:10px 12px; border-bottom:1px solid #000; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row + .row { margin-top:8px; }
.row label { font-size:12px; color:#9aa0aa; }
input[type=text], button.tool { background:#2c3037; color:#e6e9ee; border:1px solid #444b55;
          border-radius:4px; padding:5px 8px; font-size:12px; }
button.tool { cursor:pointer; } button.tool:hover { background:#363c45; }
textarea { flex:1; resize:none; border:0; outline:0; padding:12px; background:#1b1e22;
          color:#cfd3d9; font-family:"JetBrains Mono",Consolas,monospace; font-size:12.5px; line-height:1.5; }
.hint { font-size:11px; color:#7c828c; padding:6px 12px; border-top:1px solid #000; }

/* Variables / letterhead panel */
.vars-panel { margin-top:8px; border:1px solid #333a44; border-radius:4px; background:#1f232a; }
.vars-panel .vars-hdr { font-size:10px; text-transform:uppercase; letter-spacing:.5px;
          color:#8890a0; padding:6px 8px 2px; }
.vars-panel .vars-grid { display:grid; grid-template-columns:auto 1fr; gap:4px 8px;
          align-items:center; padding:4px 8px 8px; }
.vars-panel label { font-size:11px; color:#9aa0aa; text-align:right; }
.vars-panel input[type=text] { width:100%; font-size:11px; padding:3px 6px; }

/* Insert palette */
.palette { margin-top:8px; border:1px solid #333a44; border-radius:4px; background:#1f232a; }
.palette .group { padding:4px 8px 8px; }
.palette .group + .group { border-top:1px solid #2a2f37; }
.palette .group-title { font-size:10px; text-transform:uppercase; letter-spacing:.5px;
          padding:6px 0 4px; display:flex; align-items:center; gap:6px; }
.palette .print .group-title { color:#7fae7f; }
.palette .preview .group-title { color:#c99b6b; }
.palette .group-note { font-size:9.5px; color:#6a7180; text-transform:none; letter-spacing:0; }
.palette .items { display:flex; gap:4px; flex-wrap:wrap; }
.palette .pbtn { font-size:11px; cursor:pointer; border:1px solid #444b55;
          background:#2c3037; color:#e6e9ee; border-radius:4px; padding:3px 7px; }
.palette .pbtn:hover { background:#363c45; }
.palette .preview .pbtn { border-left-width:4px; }
.palette .preview .pbtn.armed { background:#3a4657; border-color:#5a8dd6; }

/* Right: paper stage */
#stage { flex:1; overflow:auto; padding:34px; display:flex; justify-content:center; background:#101216; }
.paper {
  position:relative;
  width:512px; min-height:640px; align-self:flex-start;
  background-image:url("../assets/paper.png");
  background-size:cover; background-repeat:no-repeat; background-color:#efe7d2;
  color:#111111; padding:34px 40px; border-radius:2px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  font-family:"NotoSans",sans-serif; font-size:12px; line-height:1.5;
  white-space:pre-wrap; word-wrap:break-word;
}
.paper.arming { cursor:crosshair; }

/* Stamp overlays: real game sprites tinted by their modulate colour. */
.stamp { position:absolute; width:92px; height:92px; pointer-events:auto; cursor:pointer;
         opacity:.8; mix-blend-mode:multiply; }
.stamp .ink { width:100%; height:100%;
         -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
         -webkit-mask-position:center; mask-position:center;
         -webkit-mask-size:contain; mask-size:contain; }

/* Stamp toolbar */
.stamps { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.stamp-btn { font-size:11px; cursor:pointer; border:1px solid #444b55; border-left-width:4px;
         background:#2c3037; color:#e6e9ee; border-radius:4px; padding:4px 7px; }
.stamp-btn:hover { background:#363c45; }
.stamp-btn.armed { background:#3a4657; border-color:#5a8dd6; }
.paper .dot { font-family:"DotMatrix",monospace; letter-spacing:1px; display:inline-block; }

.btn-form,.btn-sign,.btn-dt,.btn-check {
  font-family:"Segoe UI",sans-serif; font-size:11px; line-height:1; border:1px solid #6b6252;
  background:#e3d8bf; color:#2a2620; border-radius:3px; padding:2px 6px; margin:0 1px;
  cursor:pointer; vertical-align:middle; }
.btn-check { min-width:20px; text-align:center; font-size:13px; padding:1px 4px; }
.btn-form:hover,.btn-sign:hover,.btn-dt:hover,.btn-check:hover { background:#d3c6a6; }
.filled { color:#14346e; text-decoration:underline; text-underline-offset:2px; }
.sig { color:#14346e; font-style:italic; text-decoration:underline; text-underline-offset:2px; }

/* --- Auth slot: avatar --------------------------------------------------- */
#authslot .avatar { width:22px; height:22px; border-radius:50%; object-fit:cover;
          border:1px solid #444b55; }

/* --- Mode-based visibility ---------------------------------------------- */
/* needs-auth elements only show for a signed-in user. */
body:not(.mode-authed) .needs-auth { display:none !important; }

/* needs-admin elements only show for a signed-in admin. */
body:not(.mode-admin) .needs-admin { display:none !important; }

/* Topnav open-request badge (admins only). */
#authslot .inbox-badge { background:#7a4a1e; border:1px solid #b5762f; color:#f4e2c9;
          border-radius:10px; padding:3px 9px; font-size:11px; font-weight:700; cursor:pointer; }
#authslot .inbox-badge:hover { background:#8c5622; }

/* --- Left panel view tabs ----------------------------------------------- */
.viewtabs { display:flex; gap:2px; padding:8px 8px 0; }
.viewtabs .vtab { flex:1; background:#20242b; color:#aeb4be; border:1px solid #101216;
          border-bottom:0; border-radius:5px 5px 0 0; font-size:10.5px; text-transform:uppercase;
          letter-spacing:.4px; padding:6px 4px; cursor:pointer; }
.viewtabs .vtab:hover { background:#272c34; color:#fff; }
.viewtabs .vtab.active { background:#313741; color:#fff; }

/* --- Editor: document actions and meta ---------------------------------- */
.doc-actions button.tool { flex:1; }
.doc-meta input[type=text] { flex:1; }
.doc-meta select { background:#2c3037; color:#e6e9ee; border:1px solid #444b55;
          border-radius:4px; padding:5px 8px; font-size:12px; max-width:150px; }
button.tool.danger { border-color:#7a3b3b; color:#e8b4b4; }
button.tool.danger:hover { background:#4a2626; }
button.tool.primary { border-color:#3a5a8a; background:#2f4a78; color:#fff; }
button.tool.primary:hover { background:#365688; }
button.tool:disabled { opacity:.5; cursor:default; }
.vars-actions .hint-inline { font-size:10px; color:#7c828c; }

/* --- Public Library rows ------------------------------------------------ */
#docs .grp-by { font-size:9px; color:#7c828c; text-transform:none; letter-spacing:0; }
#docs .col-desc { font-size:11px; color:#9aa0aa; padding:6px 12px 4px; }
#docs .add-all { display:block; width:calc(100% - 20px); margin:4px 10px 6px;
          font-size:11px; cursor:pointer; }
#docs .libitem { justify-content:space-between; }
#docs .libitem .item-nm { cursor:pointer; }
#docs .add-one { font-size:10px; border:1px solid #3a5a8a; background:#2f4a78; color:#fff;
          border-radius:4px; padding:2px 8px; cursor:pointer; }
#docs .add-one:hover { background:#365688; }
#docs .add-one:disabled { opacity:.5; cursor:default; }

/* --- Account panel ------------------------------------------------------ */
.account { padding:10px 12px; overflow:auto; }
.acct-who { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.acct-avatar { width:36px; height:36px; border-radius:50%; border:1px solid #444b55; }
.acct-name { font-size:13px; color:#e6e9ee; }
.acct-section { margin-bottom:14px; }
.acct-section-title { font-size:10px; text-transform:uppercase; letter-spacing:.5px;
          color:#8890a0; margin-bottom:6px; }
.acct-section input[type=text] { width:100%; margin-bottom:6px; }
.acct-section .tool { margin-right:6px; margin-bottom:4px; display:inline-block;
          text-decoration:none; }
.acct-note { font-size:11px; color:#9aa0aa; margin:0 0 6px; line-height:1.4; }
.acct-links { display:flex; gap:12px; border-top:1px solid #101216; padding-top:10px; }
.acct-link { font-size:11px; color:#8aa6d6; text-decoration:none; }
.acct-link:hover { text-decoration:underline; }

/* --- Data requests (user side, inside Account) and Admin Inbox ---------- */
.req-form { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.req-form select, .req-form input[type=text], .req-form .req-subject,
.req-note-input, .req-body-input { background:#2c3037; color:#e6e9ee; border:1px solid #444b55;
          border-radius:4px; padding:5px 8px; font-size:12px; width:100%; font-family:inherit; }
.req-body-input, .req-note-input { resize:vertical; line-height:1.4; }
.req-form .req-subject { width:100%; }
.req-form .tool { align-self:flex-start; }

.req-hist-title { font-size:10px; text-transform:uppercase; letter-spacing:.5px;
          color:#8890a0; margin:4px 0 6px; }

.req-filter { display:flex; gap:4px; padding:10px 12px 6px; }
.req-filter-btn { background:#20242b; color:#aeb4be; border:1px solid #101216;
          border-radius:4px; font-size:11px; padding:4px 10px; cursor:pointer; }
.req-filter-btn:hover { background:#272c34; color:#fff; }
.req-filter-btn.active { background:#313741; color:#fff; }

.req-list { padding:0 12px 12px; }
.req-empty { font-size:11px; color:#7c828c; padding:8px 0; }

.req-item { border:1px solid #2a2f37; border-radius:5px; background:#1f232a;
          padding:8px 10px; margin-bottom:8px; }
.req-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.req-kind { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:#8aa6d6; }
.req-status { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
          border-radius:8px; padding:1px 7px; }
.req-status.open { background:#7a4a1e; color:#f4e2c9; }
.req-status.resolved { background:#2f5a3a; color:#cfe6d4; }
.req-subject-line { font-size:12.5px; color:#e6e9ee; font-weight:600; margin-bottom:2px; }
.req-meta { font-size:10px; color:#7c828c; margin-bottom:4px; }
.req-body { font-size:11.5px; color:#c3c8d0; line-height:1.4; white-space:pre-wrap;
          word-wrap:break-word; margin-bottom:4px; }
.req-note { border-left:3px solid #3a5a8a; background:#1a1e24; padding:5px 8px; margin-top:4px;
          border-radius:0 4px 4px 0; }
.req-note-label { font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:#8aa6d6; }
.req-note div { font-size:11.5px; color:#c3c8d0; line-height:1.4; white-space:pre-wrap;
          word-wrap:break-word; margin-top:2px; }
.req-actions { display:flex; gap:6px; margin-top:6px; }
.req-resolve-box { margin-top:6px; display:flex; flex-direction:column; gap:6px; }
.req-resolve-box .tool { align-self:flex-start; }

/* --- Toast -------------------------------------------------------------- */
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
          background:#23262b; color:#e6e9ee; border:1px solid #444b55; border-radius:6px;
          padding:8px 14px; font-size:12px; opacity:0; pointer-events:none;
          transition:opacity .2s, transform .2s; z-index:50; box-shadow:0 6px 24px rgba(0,0,0,.5); }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.err { border-color:#7a3b3b; color:#e8b4b4; }

/* --- Consent page ------------------------------------------------------- */
body.consent-page { overflow:auto; }
.consent-wrap { flex:1; display:flex; justify-content:center; padding:34px 16px; overflow:auto; }
.consent-card { max-width:640px; width:100%; background:#1c1f24; border:1px solid #000;
          border-radius:8px; padding:24px 28px; }
.consent-card h1 { font-size:20px; margin:0 0 8px; color:#e6e9ee; }
.consent-card h2 { font-size:13px; text-transform:uppercase; letter-spacing:.5px;
          color:#8890a0; margin:18px 0 6px; }
.consent-card p { font-size:13px; color:#c3c8d0; line-height:1.5; margin:0 0 8px; }
.consent-card ul { margin:0 0 8px; padding-left:20px; }
.consent-card li { font-size:13px; color:#c3c8d0; line-height:1.5; margin-bottom:4px; }
.consent-card code { font-family:Consolas,monospace; font-size:12px; background:#2c3037;
          padding:1px 4px; border-radius:3px; }
.consent-links a { color:#8aa6d6; text-decoration:none; }
.consent-links a:hover { text-decoration:underline; }
.consent-actions { display:flex; gap:10px; margin-top:16px; }
.consent-status { font-size:12px; color:#9aa0aa; margin-top:10px; min-height:16px; }