/* Ensure any [hidden] element is truly hidden even if inline styles set display */
[hidden]{display:none !important}

/* Inspired by moosedept.org — friendly serif headings, roomy spacing, minimal chrome */
:root{
  --bg:#212121; /* background */
  --ink:#bdbdbd; /* main text */
  --muted:#9e9e9e; /* slightly darker than main text */
  --line:#444444; /* a little darker than muted */
  --link:#ffc107; /* link */
  --link-hover:#ffeb3b; /* link hover */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-primary: var(--link);
  --bs-primary-rgb: 255, 193, 7;
  --bs-secondary: var(--muted);
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: var(--muted);
  --bs-dark: var(--bg);
  --bs-border-color: var(--line);
}

html{color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Roboto, Helvetica, sans-serif;
  line-height:1.6;
}

/* Bootstrap overrides */
.container-fluid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

h1,h2,h3{
  font-family:'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
  line-height:1.2;
  margin:0 0 .5rem;
  color:var(--ink);
  font-weight: 600;
}

/* Site name should be white, not link color */
.site-header h1 a {
  color: var(--ink);
}

.site-header .tag{color:var(--muted);margin:.25rem 0 1rem}
.site-footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.9rem;
  background:var(--bg);
  margin-top: 2rem;
}

a{color:var(--link)}
a:hover{color:var(--link-hover)}

.intro{margin:2rem 0 1rem}
.lede{color:var(--muted);max-width:80ch}

.controls{margin:2rem 0}
.status{color:var(--muted);min-height:1.2em}
.login-link{margin-left:0;font-size:.9rem;color:var(--muted);text-decoration:none;opacity:.7}
.login-link:hover{opacity:1;text-decoration:underline; color:var(--link-hover)}

/* Bootstrap form overrides - need !important to override Bootstrap defaults */
.form-control.input, .input{
  padding:.55rem .7rem;
  border:1px solid var(--line) !important;
  border-radius:.4rem;
  background:var(--bg) !important;
  color:var(--ink) !important;
}

.form-control:focus {
  border-color: var(--link) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

/* Placeholder text styling */
.form-control::placeholder,
.input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.form-control::-webkit-input-placeholder,
.input::-webkit-input-placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.form-control::-moz-placeholder,
.input::-moz-placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.form-control:-ms-input-placeholder,
.input:-ms-input-placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.muted{color:var(--muted)}

/* Bootstrap button overrides */
.btn{
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  padding:.6rem .9rem;
  border-radius:.4rem;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}

.btn-primary {
  background-color: var(--link) !important;
  border-color: var(--link) !important;
  color: var(--bg) !important;
}

.btn-primary:hover {
  background-color: var(--link-hover) !important;
  border-color: var(--link-hover) !important;
  color: var(--bg) !important;
}

.btn-outline-primary {
  color: var(--link) !important;
  border-color: var(--link) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  color: var(--bg) !important;
  background-color: var(--link) !important;
  border-color: var(--link) !important;
}

.btn-secondary {
  background-color: var(--bg) !important;
  border-color: var(--link) !important;
  color: var(--link) !important;
}

.btn:hover{border-color:var(--link)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent}

/* Bootstrap alert overrides */
.alert {
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: #151515;
  color: var(--ink);
}

.alert-success {
  border-color: var(--line);
  background-color: #151515;
}

.alert-warning {
  border-color: var(--line);
  background-color: #151515;
}

.alert-danger {
  border-color: var(--line);
  background-color: #151515;
}

.alert-info {
  border-color: var(--line);
  background-color: #151515;
}

.output{margin:1rem 0 2rem}
.story{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  min-height:auto;
  font-size:1.1rem;
  color:var(--ink);
  font-family:'Roboto Serif', Georgia, serif;
  line-height:1.8;
}

.art{margin:1rem 0;text-align:center}
.art img{max-width:100%;height:auto;border:none;border-radius:0;background:transparent}

/* two-column layout for story detail: image left, story right */
.art-left{margin:0}
.story-right{margin:0}

/* Archive tiles: make whole card clickable, no underline on text */
.story-tile{display:block;text-decoration:none;color:inherit}
.story-tile .tile-text{
  text-decoration:none;
  font-family:'Roboto Serif', Georgia, serif;
  line-height:1.8;
}
/* Remove hover effects on archive text */
.story-tile:hover .tile-text{color:inherit}

/* Mobile text truncation for archive tiles */
@media (max-width: 767px) {
  .tile-text {
    display: -webkit-box;
    font-size: 0.8rem;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5 !important;
    max-height: 6em; /* 4 lines at 1.5 line-height */
  }
}

/* Simple wait spinner when .waiting is applied (optional) */
body.waiting::after{
  content:"";position:fixed;inset:0;backdrop-filter:blur(2px);background:rgba(0,0,0,.1);pointer-events:none
}

/* homepage recent strip */
.recent-strip{margin:1rem 0 2rem}

/* Lightbox inner card look */
.lb-inner{background:#151515;border:1px solid var(--line);border-radius:.4rem}

/* recent strip link visuals */
.tile-link{display:block; width:100%; height:100%; text-decoration:none}
.tile-link:hover{outline:1px solid var(--link)}

/* Lightbox styles */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.84);
  z-index: 1000;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-inner {
  position: relative;
  max-width: min(1100px, 100%);
  width: 100%;
  max-height: 95vh;
  background: #151515;
  border: 1px solid var(--line);
  border-radius: .4rem;
  padding: 0;
}

.lb-img {
  max-height: 40vh;
  width: calc(100% - 2rem);
  object-fit: contain;
  border: none;
  border-radius: 0;
  display: block;
}

.lb-text {
  max-height: 45vh;
  overflow-y: auto;
  padding: 1rem;
  box-sizing: border-box;
}

.lb-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none !important;
  border: none !important;
  color: var(--ink);
  font-size: 1.5rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  opacity: 0.8;
  box-shadow: none !important;
  outline: none !important;
}

.lb-close:hover {
  opacity: 1;
  color: var(--link-hover);
}

@media (min-width: 992px) {
  .lb-inner {
    max-height: 85vh;
  }
  
  .lb-text {
    max-height: 50vh;
    width: calc(100%);
    margin: 1rem;
    box-sizing: border-box;
  }
  
  .lb-img {
    max-height: 55vh;
    width: calc(100% - 2rem);
    margin: 1rem;
    display: block;
  }
}



/* The grid that holds image + text */
.lb-content{
  display: grid;
  grid-template-columns: 1fr;     /* small: stack */
  grid-template-rows: auto 1fr;   /* image takes natural height, text fills and can scroll */
  gap: 0;
  height: min(85vh, 100%);        /* keep within viewport */
  min-height: 300px;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

/* Make children shrink properly so overflow works */
.lb-content > div{
  min-width: 0;
  min-height: 0;
}

/* Image: fill its grid cell, keep aspect */
.lb-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  margin: 0 !important;
  display: block;
}

/* Text: scroll if needed */
.lb-text{
  overflow: auto;
  margin: 0 !important;
}

/* Large screens: two equal columns with equal height */
@media (min-width: 992px){
    .lb-inner{
          padding: 0;              /* give the content breathing room */
        }
  .lb-content{
    grid-template-columns: 1fr 1fr; /* equal width */
    grid-template-rows: 1fr;        /* equal height */
    gap: 1rem; /* space between columns */
    padding: 0; /* remove padding */
  }
  .lb-text {
      padding: 1rem;
      width: calc(100% - 2rem);
  }

}