/* Shared theme for the potm web service.
   Colours/feel adapted from the Ravenloft: Prisoners of the Mist sites
   (nwnravenloft.com main site + SMF "Ravenloft" forum theme): gothic blood-red
   on near-black, light warm-grey text, bright-red links, antique-gold accents.
   Served by the portal at /static/app.css; linked absolutely from both apps. */
:root {
  --bg:        #2b0a0a;   /* page — darkest maroon */
  --nav:       #3a0708;   /* top navigation bar (main-site nav red #380607) */
  --card:      #551313;   /* panel surface (forum .windowbg / .titlebg) */
  --card-2:    #6e1818;   /* raised / alt panel (forum .windowbg2) */
  --inset:     #2a0808;   /* inputs, code, log background */
  --fg:        #e3d6d6;   /* light warm grey text (#dfdfdf) */
  --muted:     #b29898;   /* muted maroon-grey */
  --accent:    #f23535;   /* blood-red links/accents (forum link colour) */
  --accent-2:  #c72c2c;   /* deeper red */
  --gold:      #cda35a;   /* antique gold accent */
  --border:    #2e0a0a;   /* recessed outline */
  --border-2:  #6e1818;   /* stronger maroon border */
  --font-body: Tahoma, Geneva, Verdana, sans-serif;
  --font-head: Georgia, "Times New Roman", Times, serif;
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.55 var(--font-body);
       background:var(--bg); color:var(--fg); }
main { max-width:880px; margin:0 auto; padding:2rem 1.25rem 5rem; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:#ff7a7a; text-decoration:underline; }
h1, h2, h3 { font-family:var(--font-head); font-weight:700; }
h1 { font-size:1.9rem; margin:.2rem 0 1.2rem; color:#f0e6e6;
     text-shadow:0 1px 2px #000; }
h2 { font-size:1.05rem; margin:2rem 0 .6rem; color:var(--gold);
     text-transform:uppercase; letter-spacing:.06em; font-style:italic; }

.card { background:var(--card); border:1px solid var(--border);
        border-radius:8px; padding:1.25rem 1.5rem; margin:1rem 0;
        box-shadow:0 1px 3px #0006; }

.btn { display:inline-block; background:linear-gradient(#7a1818, #551313);
       color:#fff; padding:.6rem 1.2rem; border-radius:6px; text-decoration:none;
       font-weight:700; border:1px solid var(--accent-2); cursor:pointer;
       font-size:.95rem; font-family:var(--font-body); }
.btn:hover { background:linear-gradient(#9a2222, #6e1818); color:#fff;
             border-color:var(--accent); text-decoration:none; }
.btn.secondary { background:transparent; border:1px solid var(--border-2);
                 color:var(--fg); }
.btn.secondary:hover { background:var(--card); border-color:var(--accent-2); }
.btn:disabled { opacity:.4; cursor:default; }

.id-head { display:flex; align-items:center; gap:1rem; }
.id-head img { width:80px; height:80px; border-radius:50%;
               border:2px solid var(--accent-2); }
.id-head .name { font-size:1.4rem; font-weight:700; font-family:var(--font-head); }
.id-head .sub { color:var(--muted); }

table { width:100%; border-collapse:collapse; }
td, th { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--border);
         vertical-align:top; word-break:break-word; }
th { color:var(--muted); font-weight:600; width:34%; }

.pill { display:inline-block; background:var(--inset); border:1px solid var(--border-2);
        border-radius:999px; padding:.15rem .6rem; margin:.15rem; font-size:.82rem;
        color:var(--muted); }
.pill.named { background:#5a1414; border-color:var(--gold); color:#f0d9a8;
              font-weight:600; }

pre { background:var(--inset); border:1px solid var(--border); border-radius:6px;
      padding:1rem; overflow:auto; font-size:.82rem; color:#cdbcbc; }
details summary { cursor:pointer; color:var(--muted); }
.muted { color:var(--muted); }

input[type=text], select { background:var(--inset); color:var(--fg);
  border:1px solid var(--border-2); border-radius:6px; padding:.6rem .8rem;
  font-size:1rem; font-family:var(--font-body); }
input[type=text]:focus, select:focus { outline:none; border-color:var(--accent-2);
  box-shadow:0 0 0 2px #f2353533; }

/* --- top navigation bar (mirrors the main site's blood-red nav frame) --- */
.navbar { display:flex; align-items:center; flex-wrap:wrap; gap:.15rem;
  background:var(--nav); border-bottom:2px solid var(--border-2);
  box-shadow:0 2px 10px #000a; padding:.25rem .75rem;
  position:sticky; top:0; z-index:50; }
.navbar .brand { font-family:var(--font-head); font-weight:700; font-size:1.15rem;
  color:#e9d7a8; letter-spacing:.02em; text-decoration:none; padding:.4rem .7rem;
  margin-right:.5rem; white-space:nowrap; text-shadow:0 1px 2px #000; }
.navbar .brand:hover { color:#fff; text-decoration:none; }
.navbar .brand .by { color:var(--accent); }
.navbar .spacer { flex:1; }
.navbar a.nav-link { color:#e8d6d6; text-decoration:none; font-family:var(--font-head);
  padding:.5rem .8rem; border-radius:5px; font-size:.95rem; white-space:nowrap; }
.navbar a.nav-link:hover { background:var(--card-2); color:#fff; text-decoration:none; }
.navbar a.nav-link.active { background:var(--card); color:#fff;
  box-shadow:inset 0 -2px 0 var(--gold); }
.navbar .ext-group { display:flex; gap:.15rem; align-items:center; }
.navbar a.ext { color:var(--muted); font-size:.86rem; }
.navbar a.ext:hover { color:#fff; background:transparent; text-decoration:underline; }
.navbar .sep { width:1px; align-self:stretch; background:var(--border-2);
  margin:.3rem .25rem; }

/* --- landing hero (the full title banner) --- */
.hero { text-align:center; margin:1.5rem 0 2rem; }
.hero img { max-width:100%; height:auto; border:1px solid var(--border-2);
  border-radius:8px; box-shadow:0 4px 18px #000a; }
.lede { color:var(--muted); font-size:1.05rem; max-width:60ch; margin:0 auto 1.5rem; }

/* --- name generator page --- */
.gen-controls { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; }
.gen-controls label { display:flex; flex-direction:column; gap:.3rem;
  font-size:.86rem; color:var(--muted); }
.gen-controls input[type=text] { width:5.5rem; }
.gen-output { font-size:1rem; line-height:1.7; font-family:var(--font-head);
  color:var(--fg); }

/* --- logs page --- */
.searchbar { display:flex; gap:.5rem; align-items:center; margin:0; }
.searchbar input { flex:1; }
.pager { display:flex; align-items:center; gap:1rem; margin-top:.75rem; }
.pager .muted { flex:1; text-align:center; }
.logrow { display:flex; gap:.75rem; padding:.2rem 0; border-bottom:1px solid var(--border);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; }
.logrow .ts { color:var(--gold); white-space:nowrap; opacity:.85; }
.logrow .ln { white-space:pre-wrap; word-break:break-word; }

/* Alpine: hide un-initialized components to avoid a flash of raw markup. */
[x-cloak] { display:none !important; }

@media (max-width:600px) {
  .navbar .ext-group { display:none; }   /* keep the bar tidy on phones */
}