:root{
  /* Light theme inspired by soft paper tones */
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#1b2330;
  --muted:#5d6b85;
  --accent:#2e65f3; /* calm blue for actions */
  --border:#e1e6ef;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020;
    --card:#121735;
    --text:#e6e8ee;
    --muted:#a7acc4;
    --accent:#8b7cf6;
    --border:#27304f;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{max-width:960px;margin:0 auto;padding:1rem}
.intro{margin:1rem 0 0 0}
.intro p{margin:.25rem 0 0 0;color:var(--text)}
.byline{margin:.25rem 0 0 0;color:var(--muted)}
.facts{margin:.5rem 0 1rem 1rem;color:var(--muted)}
.facts li{margin:.15rem 0}
.site-header{padding:1.25rem;border-bottom:1px solid var(--border);text-align:center}
.site-header h1{margin:0 0 .25rem 0;font-size:1.75rem;color:var(--accent)}
.policy{margin:0;color:var(--muted);font-size:.95rem}
.header-hero{margin:1rem auto 0 auto;max-width:960px}
.header-hero img{width:100%;height:auto;display:block;border-radius:.6rem;border:1px solid var(--border);background:var(--card)}
.header-hero.img-failed{min-height:220px;border:1px dashed var(--border);border-radius:.6rem;background:linear-gradient(135deg, rgba(46,101,243,.12), transparent 60%), var(--card)}
.header-hero.img-failed::before{content:"Image unavailable";display:block;text-align:center;color:var(--muted);padding:3rem 0}
.search-row{margin:1rem 0}
#search{
  width:100%;padding:.75rem .9rem;border:1px solid var(--border);border-radius:.6rem;background:#fff;color:var(--text)
}
.guides{display:grid;gap:1rem;align-items:stretch}
.card{
  border:1px solid var(--border);
  border-radius:.8rem;
  padding:1rem;
  background:var(--card);
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.card-media{margin-bottom:.5rem}
.card-media img{width:100%;height:auto;display:block;border-radius:.5rem;border:1px solid var(--border);background:var(--bg)}
.card-media.img-failed{aspect-ratio:3/2;border:1px dashed var(--border);border-radius:.5rem;background:linear-gradient(135deg, rgba(46,101,243,.12), transparent 60%), var(--card)}
.card-media.img-failed::before{content:"Thumbnail";display:block;text-align:center;color:var(--muted);padding:2.5rem 0}
.img-attrib{margin-top:.25rem;color:var(--muted)}
.img-attrib a{color:var(--accent)}
.card-title{margin:.25rem 0 .25rem 0;font-size:1.125rem}
.card-desc{margin:0;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.tag{font-size:.75rem;line-height:1;border:1px solid var(--border);color:var(--muted);padding:.2rem .5rem;border-radius:.5rem;background:rgba(0,0,0,.02)}
.card-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.card-actions{margin-top:auto}
.btn{
  appearance:none;border:0;border-radius:.6rem;
  background:var(--accent);color:#fff;
  padding:.55rem .8rem;cursor:pointer;font-weight:600;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.btn.outline{
  background:transparent;color:var(--text);
  border:1px solid var(--border)
}
.viewer{margin-top:.75rem;border:1px solid var(--border);border-radius:.6rem;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.viewer iframe{display:block;width:100%;height:88vh;background:#f5f5f5;border:none}

/* Mobile PDF viewer optimizations */
@media (max-width: 768px) {
  .viewer iframe {
    height: 70vh; /* Shorter height on mobile for better usability */
    min-height: 400px; /* Ensure minimum readable height */
  }
  
  .card.open {
    margin-bottom: 1rem; /* Extra space when PDF is open on mobile */
  }
  
  .btn {
    padding: 0.7rem 1rem; /* Larger touch targets on mobile */
    font-size: 1rem;
  }
  
  .card-actions {
    gap: 0.75rem; /* More space between buttons on mobile */
  }
}

/* PDF.js specific optimizations */
.viewer iframe {
  transition: opacity 0.3s ease;
}

.viewer iframe[src=""] {
  opacity: 0;
}

.viewer iframe[src]:not([src=""]) {
  opacity: 1;
}
.site-footer{
  margin-top:2rem;padding:1rem;text-align:center;color:var(--muted);
  border-top:1px solid var(--border)
}
.footer-grid{display:grid;gap:.5rem .75rem;grid-template-columns:1fr;align-items:start;text-align:left;margin:0 auto;max-width:960px}
.footer-col{font-size:.95rem}
.footer-desc{margin:.25rem 0 0 0;color:var(--muted)}
.footer-links{list-style:none;padding:0;margin:.25rem 0 0 0}
.footer-links li{margin:.15rem 0}
.footer-links a{color:var(--accent);text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-attrib{margin-top:.35rem;color:var(--muted)}
@media (min-width:700px){
  .footer-grid{grid-template-columns:2fr 1fr}
}
a{color:var(--accent)}
/* Header accent */
.site-header::after{content:"";display:block;height:2px;margin-top:12px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.5}
@media (min-width:700px){
  .guides{grid-template-columns:1fr 1fr}
  /* When a viewer is open, make the card span full width for larger reading area */
  .card.open{grid-column:1 / -1}
}