/* --- Consolidated & Corrected Theme Palettes --- */
:root {
  --bg: #0f172a;
  --card: #0b1224;
  --panel: #1e2b3b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #22c55e;
  --accent-2: #1e293b;
  --radius: 16px;
  --btn: #1f2937;
  --btn-fg: #ffffff;
}

:root[data-theme="teal"] {
  --bg: #071a1b; --card: #0b2426; --panel: #0d2f32; --accent: #12d1bd; --accent-2: #0f766e; --btn: #12363a; --btn-fg: #e2fffb;
}
:root[data-theme="emerald"] {
  --bg: #081912; --card: #0c241a; --panel: #0e2c20; --accent: #19d196; --btn: #113a2b; --btn-fg: #e2fff6;
}
:root[data-theme="orange"] {
  --bg: #1b1207; --card: #261a0b; --panel: #2b1f12; --accent: #ff7a1a; --accent-2: #c2410c; --btn: #3a2818; --btn-fg: #fff5e8;
}
:root[data-theme="purple"] {
  --bg: #130b1b; --card: #1b1026; --panel: #22183b; --accent: #9b6bff; --accent-2: #6d28d9; --btn: #2c2050; --btn-fg: #efe9ff;
}
:root[data-theme="pink"] {
  --bg: #1b0b16; --card: #261022; --panel: #331429; --accent: #ff5aa8; --accent-2: #be185d; --btn: #3f1a33; --btn-fg: #ffe6f1;
}
:root[data-theme="blue"] {
  --bg: #08121b; --card: #0c1724; --panel: #0d2033; --accent: #4a8fff; --accent-2: #1d4ed8; --btn: #142b44; --btn-fg: #e6f1ff;
}
:root[data-theme="amber"] {
  --bg: #1b1608; --card: #261f0c; --panel: #2e240e; --accent: #ffab1a; --accent-2: #b45309; --btn: #3b2f12; --btn-fg: #fff6e1;
}
:root[data-theme="lime"] {
  --bg: #121b08; --card: #17240c; --panel: #1d2e0d; --accent: #9be014; --accent-2: #3f6212; --btn: #243a12; --btn-fg: #f4ffe1;
}
:root[data-theme="fuchsia"] {
  --bg: #1a0819; --card: #240c22; --panel: #2e0d29; --accent: #de2693; --accent-2: #a11b6b; --btn: #3a1231; --btn-fg: #ffe5f5;
}
:root[data-theme="cyan"] {
  --bg: #081a1a; --card: #0c2424; --panel: #0d2e2e; --accent: #22d3ee; --accent-2: #11a3b8; --btn: #123a3a; --btn-fg: #e2ffff;
}

/* --- General Styles --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
a{color:inherit; text-decoration: none;}

/* --- Layout --- */
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.grid{display:grid;gap:16px}

/* --- Components --- */
.card{background:var(--card);border:1px solid rgb(255 255 255 / 0.06);border-radius:var(--radius);padding:12px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:0;border-radius:12px;padding:10px 14px;background:var(--btn);color:var(--btn-fg);cursor:pointer;text-decoration:none;font-weight:600;transition:filter .15s ease}
.btn.primary, header.site .btns .btn.switch, .btn.switch{ background:var(--accent); color:#06260f; }
a:hover.btn, .btn:hover{ filter:brightness(1.05); }

/* --- Header --- */
header.site{display:flex;align-items:center;justify-content:space-between;padding:10px 0 18px}
.brand{font-weight:700;font-size:18px}
header.site .btns .btn{ font-size:13px; padding:8px 11px; }
@media (max-width:420px){
  header.site .btns .btn{ font-size:12.5px; padding:7px 9px; }
}

/* --- Hero Section --- */
.hero{
  position:relative;
  overflow:hidden;
  background: radial-gradient(1200px 300px at 20% -10%, rgba(255,255,255,0.08), transparent),
              linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border:1px solid rgb(255 255 255 / 0.06);
  padding:24px 20px 18px;
  border-radius:var(--radius);
  margin-bottom:16px;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:18px;
  align-items:center;
}
@media (max-width:960px){
  .hero-inner{ grid-template-columns: 1fr; gap:12px; }
}
.hero h1{margin:0 0 8px;font-size:36px;line-height:1.1}
@media (max-width:960px){
  .hero h1{font-size:30px}
}
.hero p{margin:0 0 14px;color:var(--muted)}
.hero-img{
  border-radius:12px;
  width:100%;
  height:240px;         /* fixed visual height (banner look) */
  object-fit:cover;     /* may crop */
  object-position:50% 20%; /* bias crop upward so faces stay visible */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* On 4:3 tablets (older iPads etc.), lift the focal point further */
@media (aspect-ratio <= 4/3){
  .hero-img{
    object-position:50% 5%;
  }
}
.small{font-size:12px;color:var(--muted)}

/* --- PDF Reader & Placeholder --- */
.pdf-shell{position:relative;}
.pdf-frame{
  display:block;
  width:100%;
  height:min(82vh, 920px);
  border:0;
  background:#000;
  border-radius:12px;
}
.pdf-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.hint{color:var(--muted);font-size:13px;margin-top:8px}

.pdf-cover-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.pdf-cover-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

/* --- Search Panel --- */
.search h3{margin:0 0 10px}
.search input{width:100%;padding:10px;border-radius:10px;border:1px solid rgb(255 255 255 / 0.12);background:var(--panel);color:var(--text);margin-bottom:10px}
.search .item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  position:relative;
  min-height: 58px;
  background:var(--panel);
  border:1px solid rgb(255 255 255 / 0.06);
  margin-bottom:8px;
  padding:10px;
  border-radius: 10px;
}
.search .item:hover{ filter:brightness(1.05); }
.search .item > div{ flex:1 1 auto; min-width:0; word-break:break-word; }
.search .item > .btn{ flex:0 0 auto; white-space:nowrap; }
.item .meta{color:var(--muted);font-size:12px}
.search .item::before{
  content:"";
  position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--accent); border-radius:2px;
}

/* --- Footer --- */
footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 8px;color:var(--muted);font-size:12px}
.pill{border:1px solid rgb(255 255 255 / 0.1);padding:4px 8px;border-radius:999px;background:var(--panel);color:#cbd5e1}


/* --- ADAPTIVE HIDING/SHOWING FOR PDF VIEWER --- */
.pdf-placeholder { display: none; }
.pdf-shell { display: block; }

.touch-device .pdf-shell { display: none; }
.touch-device .pdf-placeholder { display: block; }
.touch-device .open-full-page-btn { display: none; }


/* --- RESPONSIVE & SYMMETRY LOGIC --- */

/* On narrow, stacked view (all devices < 960px wide) */
.search.card {
  max-height: 720px; /* Approx 8 rows + header/input */
  display: flex;
  flex-direction: column;
}
#results {
  overflow-y: auto;
}

/* On wide, side-by-side view (all devices >= 960px wide) */
@media (min-width: 960px) {
  .grid {
    grid-template-columns: 2fr 1fr;
    /* This aligns items to the top, so the reader panel */
    /* defines its own height and does not stretch. */
    align-items: start;
  }
  
  .search.card {
    /* This tells the search card to stretch to fill the grid row. */
    /* Because of `align-items: start` on the parent, the row's height */
    /* is now defined by the content of the reader card. */
    height: 100%; 
    display: flex;
    flex-direction: column;
    overflow: hidden; /* KEY CHANGE: Prevents the panel's content from expanding the grid row */
  }
  
  #results {
    flex-grow: 1; /* Makes the results list expand to fill the available space */
    min-height: 0; /* A flexbox fix to enable proper scrolling */
    overflow-y: auto; /* Adds a scrollbar ONLY if the content overflows */
  }
}