:root {
  --bg: #fbfaf7;
  --surface: #f2f0ea;
  --text: #201f1b;
  --text-muted: #6b6a63;
  --border: #ddd9cf;
  --accent: #2c4b76;
  --hero-bg: #f4f2ec; --hero-fg: #201f1b; --hero-fade: 244, 242, 236; --hero-a1: 0; --hero-a2: 0.10;
  --hero-cover: url("/images/cover-light.png"); --hero-cover-m: url("/images/cover-m-light.png");
  --chip-bg: rgba(32,31,27,0.06); --chip-bg-hover: rgba(32,31,27,0.12); --chip-border: rgba(32,31,27,0.28);
  --photo-border: rgba(32,31,27,0.25);
  --ctl-bg: rgba(255,255,255,0.78); --ctl-border: rgba(32,31,27,0.3); --ctl-fg: #201f1b;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15161a;
    --surface: #1d1e23;
    --text: #ece9e2;
    --text-muted: #a0a0a0;
    --border: #33343a;
    --accent: #7fa8d9;
    --hero-bg: #0a0c10; --hero-fg: #fbfaf7; --hero-fade: 10, 12, 16; --hero-a1: 0.35; --hero-a2: 0.75;
    --hero-cover: url("/images/cover-dark.png"); --hero-cover-m: url("/images/cover-m-dark.png");
    --chip-bg: rgba(255,255,255,0.12); --chip-bg-hover: rgba(255,255,255,0.22); --chip-border: rgba(255,255,255,0.3);
    --photo-border: rgba(255,255,255,0.35);
    --ctl-bg: rgba(10,12,16,0.55); --ctl-border: rgba(255,255,255,0.35); --ctl-fg: #fbfaf7;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15161a;
  --surface: #1d1e23;
  --text: #ece9e2;
  --text-muted: #a0a0a0;
  --border: #33343a;
  --accent: #7fa8d9;
  --hero-bg: #0a0c10; --hero-fg: #fbfaf7; --hero-fade: 10, 12, 16; --hero-a1: 0.35; --hero-a2: 0.75;
  --hero-cover: url("/images/cover-dark.png"); --hero-cover-m: url("/images/cover-m-dark.png");
  --chip-bg: rgba(255,255,255,0.12); --chip-bg-hover: rgba(255,255,255,0.22); --chip-border: rgba(255,255,255,0.3);
  --photo-border: rgba(255,255,255,0.35);
  --ctl-bg: rgba(10,12,16,0.55); --ctl-border: rgba(255,255,255,0.35); --ctl-fg: #fbfaf7;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
}
.wrap { max-width: 1540px; margin: 0 auto; padding: 0 32px 64px; }
a { color: inherit; }

.hero {
  position: relative;
  margin-bottom: 36px;
  padding: 48px 32px 36px;
  color: var(--hero-fg);
  background: var(--hero-bg);
  overflow: hidden;
}
/* The cover photo sits in a height-capped band behind the hero, independent
   of how tall the text content makes the hero grow — this keeps the photo
   from being stretched/zoomed into an unrecognizable crop on narrow screens
   where the wrapped tagline makes the hero much taller than it is wide. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-cover) no-repeat right center / auto 100%;
  pointer-events: none;
}
/* Narrow screens: the artwork moves to its own band under the text so the
   loop is shown whole instead of sitting behind the name. */
@media (min-width: 701px) and (max-width: 1200px) {
  .hero { padding-bottom: 250px; }
  .hero::before { inset: auto 0 12px 0; height: 220px; background-position: 90% center;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }
}
/* Phones: the artwork is the background of the top part (photo, name, role);
   the link chips sit on a solid strip below it. */
@media (max-width: 700px) {
  .hero { padding: 36px 16px 0; }
  .hero::before {
    inset: 0 0 auto 0; height: 300px;
    background: var(--hero-cover-m) no-repeat right top / auto 100%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero .chips {
    position: relative;
    margin: 18px -16px 0;
    padding: 28px 16px 22px;
    background: linear-gradient(to bottom, rgba(var(--hero-fade), 0), rgb(var(--hero-fade)) 22px);
  }
}

/* Photo sits to the left of the name, side by side — note this means the
   name/tagline column starts after the photo+gap, so it won't line up
   with the body text's left edge below (that trade-off was requested). */
.hero-inner { position: relative; z-index: 1; max-width: 1540px; margin: 0 auto; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.hero-photo {
  width: 108px; height: 108px; border-radius: 10px; object-fit: cover; object-position: top center;
  border: 2px solid var(--photo-border);
  flex: none;
}
.hero-text { flex: 1 1 320px; min-width: 0; }
.hero h1 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 6px; text-wrap: balance; }
.hero .role { font-size: 1.05rem; opacity: 0.95; margin: 0 0 4px; }
.hero .degrees { font-size: 0.9rem; opacity: 0.8; margin: 0 0 10px; }
.hero .tagline {
  font-size: 0.95rem; max-width: 72ch; opacity: 0.92; margin: 0 0 16px;
  text-align: justify; text-justify: inter-word; hyphens: auto;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  background: var(--chip-bg); border: 1px solid var(--chip-border);
  color: var(--hero-fg);
}
.chip:hover { background: var(--chip-bg-hover); }

nav.toc {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 28px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
}
nav.toc a { color: var(--text-muted); text-decoration: none; }
nav.toc a:hover { color: var(--accent); }
nav.toc a.active-tab { color: var(--accent); }
/* The text link row is redundant on the homepage (the landing cards already
   cover navigation there) — show it only once a section tab is active. */
body.home-mode nav.toc { display: none; }

/* Hamburger ("3 dash") menu — fixed in place and always available, on the
   homepage and every section, as a constant way to jump around. */
.nav-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 20;
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--ctl-border);
  background: var(--ctl-bg); backdrop-filter: blur(4px);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--ctl-fg); border-radius: 1px;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu {
  position: fixed; top: 60px; right: 16px; z-index: 20;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; min-width: 180px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; padding: 7px 10px; border-radius: 6px;
}
.nav-menu a:hover { color: var(--accent); background: var(--bg); }
.nav-menu a.active-tab { color: var(--accent); }

.section-back {
  display: none; font-family: var(--mono); font-size: 0.78rem; color: var(--accent);
  text-decoration: none; margin: -14px 0 24px;
}
body.tab-mode .section-back { display: inline-block; }

/* The homepage is a short landing view (intro + section cards), not the
   full CV — each section only appears once its tab is active. */
section[id] { display: none; }
body.tab-mode section[id].active-tab { display: block; }
body.tab-mode footer { display: none; }

#home-landing { display: none; }
body.home-mode #home-landing { display: block; }

.landing-bio { margin: 0 0 28px; }
.landing-bio p { font-size: 1rem; margin: 0 0 12px; }
.landing-bio p:last-child { margin-bottom: 0; }
.landing-bio--justify p { text-align: justify; text-justify: inter-word; hyphens: auto; }

.landing-intro {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); max-width: 60ch; margin: 0 0 16px;
}
.landing-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
@media (max-width: 1100px) {
  .landing-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .landing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .landing-grid { grid-template-columns: 1fr; }
}
.landing-card {
  display: block; position: relative; overflow: hidden; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.landing-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: 0; transition: opacity .15s ease;
}
.landing-card:hover {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.landing-card:hover::before { opacity: 1; }
.landing-card h3 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 6px; color: var(--text); overflow-wrap: break-word; }
.landing-card p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

section { margin: 0 0 40px; }
h2.section-title {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
}
h3.section-heading { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 14px; }

/* Publications: peer-reviewed work gets a card preview, preprints/under
   review stay a plain compact list — the two are visibly different tiers. */
h4.pub-subheading {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin: 26px 0 12px;
}
h4.pub-subheading:first-of-type { margin-top: 4px; }
.pub-list { display: flex; flex-direction: column; gap: 12px; }
.pub-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px;
  background: var(--surface);
}
.pub-title { font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0 0 6px; }
.pub-authors { font-size: 0.84rem; color: var(--text-muted); margin: 0 0 12px; }
.pub-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-venue-chip {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--accent); background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px;
}
.pub-year { font-size: 0.78rem; color: var(--text-muted); }
.pub-read-link {
  margin-left: auto;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--accent); text-decoration: none;
  border: 1px solid var(--accent); border-radius: 999px; padding: 4px 12px;
}
.pub-read-link:hover { background: var(--accent); color: var(--bg); }

.pub-pending-list li { font-size: 0.9rem; color: var(--text-muted); }
.pub-pending-list li a { color: var(--accent); }
.status-tag {
  display: inline-block;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; margin-left: 4px; vertical-align: middle;
}
.status-tag--preprint { color: var(--accent); border: 1px solid var(--accent); }
.status-tag--submitted { color: var(--text-muted); border: 1px solid var(--border); }

ul.plain, ol.plain { margin: 0; padding-left: 1.2em; }
ul.plain li, ol.plain li { margin-bottom: 10px; }

/* Education's degree list: a structured record per degree (title, then a
   muted institution/dates line, then short labeled facts) instead of one
   run-on sentence — a left rule stands in for the bullet, timeline-style. */
ul.degree-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.degree-entry { padding-left: 18px; border-left: 2px solid var(--border); }
.degree-title { font-family: var(--serif); font-size: 1.08rem; margin: 0 0 2px; line-height: 1.3; }
.degree-meta {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--text-muted); margin: 0 0 6px;
}
.degree-detail {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 0.92rem; margin: 0 0 2px;
}
.degree-label {
  flex: 0 0 118px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 480px) {
  /* flex-basis is a main-axis size — once the row switches to a column
     here, that same 118px/64px basis (set for the desktop row's width)
     would apply to height instead, stretching the label into a tall empty
     box. "flex: none" resets flex-grow/shrink but not flex-basis, so set
     it explicitly back to auto. */
  .degree-detail { flex-direction: column; align-items: flex-start; gap: 2px; }
  ul.degree-list .degree-label { flex: none; flex-basis: auto; }
}

/* Research Interests: topics as scannable chips instead of one dense
   sentence, matching the venue-chip visual language used in Publications. */
.interest-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 14px; }
.interest-chip {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--accent); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px;
}
.interest-aside { color: var(--text-muted); font-style: italic; margin: 0; }

/* Experience reuses the degree-list classes but its labels ("PI", "Course",
   "Focus") are much shorter than Education's ("Research area"), so the
   shared 118px column left a wide gap — give it a narrower column. */
.exp-list .degree-label { flex-basis: 64px; }

/* A multi-course "Courses" detail lists each course on its own line instead
   of comma-separating them inline. The label sits on the same line as the
   first course, so the row aligns to the top rather than centering the
   label against the whole stack. */
.degree-detail--stack { align-items: flex-start; }
.degree-value-stack { display: flex; flex-direction: column; gap: 1px; }

.talk-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1100px) {
  .talk-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .talk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .talk-grid { grid-template-columns: 1fr; }
}
.talk-card {
  display: block; text-decoration: none; color: inherit; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.talk-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); }
.talk-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.talk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.talk-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
  transition: background .15s ease;
}
.talk-card:hover .talk-play { background: var(--accent); }
.talk-title { display: block; padding: 10px 12px; font-size: 0.88rem; font-weight: 500; overflow-wrap: break-word; }

/* Capped at 480px per card (not 1fr) so cards don't stretch to fill the
   row on a wide page — a LinkedIn/Facebook embed scaled up that far looks
   oversized relative to everything else on the site. */
.post-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.post-embed {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; max-width: 384px; max-height: 320px;
}
.post-embed iframe { display: block; width: 100%; border: none; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px 16px;
}
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.card-head svg { width: 17px; height: 17px; stroke: var(--accent); flex: none; }
.card-head .name { font-weight: 600; }
.name-btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: inherit; font: inherit; flex: 1 1 auto; text-align: left;
}
.name-btn:hover .name { color: var(--accent); }

.back-to-site {
  display: none; font-family: var(--mono); font-size: 0.78rem; color: var(--accent);
  text-decoration: none; margin-bottom: 10px;
}

/* Focus mode: a single category fills the page like its own view, with
   everything else (hero, static sections, other categories) hidden. */
body.focus-mode .hero,
body.focus-mode nav.toc,
body.focus-mode #research,
body.focus-mode #education,
body.focus-mode #experience,
body.focus-mode #publications,
body.focus-mode #conferences,
body.focus-mode #life,
body.focus-mode #contact,
body.focus-mode .section-back,
body.focus-mode footer { display: none; }
body.focus-mode #uploads > p { display: none; }
body.focus-mode .card-grid { display: block; }
body.focus-mode .card { display: none; }
body.focus-mode .card.active-card { display: block; padding: 20px; }
body.focus-mode .card.active-card .back-to-site { display: inline-block; }

.btn {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em; text-transform: uppercase;
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; display: inline-block;
  text-decoration: none;
}
.btn:hover { background: var(--accent); color: var(--bg); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-ghost {
  font-family: var(--mono); font-size: 0.7rem; background: none; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger:hover { border-color: #c0463a; color: #c0463a; }
.tree-file .file-tools { margin-left: auto; display: flex; gap: 4px; }

/* Credential cards under Education, one per degree that has a verifiable
   e-credential. Compact, icon-on-the-left strip rather than a tall block.
   Two kinds:
   - .diploma-card (flip): front is just the icon + name; tapping/clicking
     flips it to reveal a code (CeDiD) that needs to be copied/pasted
     elsewhere to verify — used for TAMU's CeDiploma.
   - .credential-badge (no flip): a direct, already-verifiable link with
     nothing to hide — used for WES, which verifies itself at its own URL. */
.degree-list .diploma-card,
.degree-list .credential-badge {
  margin: 10px 0 14px;
}
.diploma-card,
.credential-badge {
  width: 100%;
  max-width: 540px;
}
.diploma-card {
  height: 76px;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.diploma-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}
.diploma-card.is-flipped .diploma-card-inner { transform: rotateY(180deg); }
.diploma-card:focus-visible .diploma-card-inner { outline: 2px solid var(--accent); outline-offset: 5px; }
.diploma-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.diploma-front {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(44, 75, 118, 0.08), transparent 55%),
    var(--surface);
}
.diploma-seal {
  flex: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
}
.diploma-seal svg { width: 20px; height: 20px; stroke: var(--accent); }
.diploma-face-text { flex: 1 1 auto; min-width: 0; }
.diploma-eyebrow {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diploma-front h4, .credential-badge h4 {
  font-family: var(--serif); font-size: 0.98rem; margin: 0 0 2px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diploma-hint { margin: 0; font-size: 0.74rem; color: var(--accent); }
.diploma-back {
  transform: rotateY(180deg);
  background: var(--surface);
}
.diploma-back .diploma-face-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.diploma-cedid { font-family: var(--mono); font-size: 0.92rem; letter-spacing: 0.04em; margin: 0; }
.diploma-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Non-flip credential badge (WES): same icon-left strip, no back face. */
.credential-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px 16px;
  height: 76px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(44, 75, 118, 0.08), transparent 55%),
    var(--surface);
  text-decoration: none;
  color: var(--text);
}
.credential-badge:hover .diploma-hint { color: var(--accent); text-decoration: underline; }
.credential-badge .diploma-seal { background: var(--bg); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; font-family: var(--mono); font-size: 0.74rem; }
.breadcrumb .crumb {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--accent); font-family: var(--mono); font-size: 0.74rem;
}
.breadcrumb .crumb:disabled { color: var(--text-muted); cursor: default; }
.breadcrumb .crumb-sep { color: var(--text-muted); }

.tree { margin-top: 4px; font-size: 0.86rem; }
.tree ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tree > ul { margin-top: 0; }
.tree ul ul { margin-left: 16px; border-left: 1px solid var(--border); padding-left: 10px; }
.tree .empty, .tree .loading { color: var(--text-muted); font-style: italic; }
.tree .error { color: #c0463a; }
.tree-toggle {
  display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 0;
  font-family: var(--sans); font-size: 0.86rem; color: var(--text); cursor: pointer; text-align: left;
}
.tree-toggle .chev { display: inline-block; width: 9px; transition: transform .15s ease; color: var(--text-muted); }
.tree-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.tree-toggle svg { width: 14px; height: 14px; stroke: var(--accent); flex: none; }
.tree-file { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.tree-file svg { width: 13px; height: 13px; stroke: var(--text-muted); flex: none; }
.tree-file a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; overflow-wrap: anywhere; }
.tree-file a:hover { border-bottom-color: var(--accent); color: var(--accent); }

.tree-file-video { align-items: center; gap: 10px; padding: 6px 0; }
.tree-thumb {
  position: relative; display: block; flex: none; width: 112px; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden; background: #000;
}
.tree-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tree-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.65rem;
}
.tree-file-video-title { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; }
.tree-file-video-title:hover { border-bottom-color: var(--accent); color: var(--accent); }
@media (max-width: 480px) {
  .tree-thumb { width: 88px; }
}
.tree-row { display: flex; align-items: center; }
.tree-tools { display: inline-flex; gap: 4px; margin-left: 6px; }
.inline-form { display: flex; gap: 6px; margin: 6px 0 6px 20px; }
.inline-form input {
  flex: 1; min-width: 100px; font-family: var(--sans); font-size: 0.82rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
}
.inline-form button {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; background: var(--accent);
  color: var(--bg); border: none; border-radius: 6px; padding: 4px 9px; cursor: pointer;
}

.card-status { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.card-status.error { color: #c0463a; }

.admin-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 6;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  font-size: 1rem; line-height: 1; opacity: 0.55; transition: opacity .15s ease;
}
.admin-toggle:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }

.admin-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 20px; background: var(--surface); border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.75rem;
}
.admin-bar.hidden, .admin-bar[hidden] { display: none; }

.admin-login-form { display: flex; gap: 6px; align-items: center; }
.admin-login-form input {
  font-family: var(--sans); font-size: 0.82rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; width: 160px;
}

.life-block { margin: 0 0 28px; }
.life-block:last-child { margin-bottom: 0; }
.life-block h4 {
  font-family: var(--serif); font-size: 1.1rem; margin: 0 0 6px; color: var(--text);
}
.life-block p { margin: 0 0 10px; }
.life-img {
  max-width: 100%; border-radius: 10px; border: 1px solid var(--border);
  display: block; margin-top: 8px;
}
.life-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.life-gallery .life-img { margin-top: 0; width: 100%; height: 220px; object-fit: cover; }

footer { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }

@media (max-width: 480px) {
  .wrap { padding: 0 16px 48px; }
  .hero-inner { align-items: flex-start; }
  .hero { padding: 36px 16px 0; }
  .hero-photo { width: 84px; height: 84px; }
  nav.toc { gap: 6px 14px; margin-bottom: 22px; }
  .card-grid { grid-template-columns: 1fr; }
  .life-gallery { grid-template-columns: 1fr; }
  .admin-toggle { width: 30px; height: 30px; right: 12px; bottom: 12px; font-size: 0.9rem; }
  .admin-bar { padding: 8px 12px; flex-wrap: wrap; justify-content: center; }
  .admin-login-form input { width: 130px; }
  .nav-toggle { top: 12px; right: 12px; }
  .nav-menu { top: 54px; right: 12px; left: 12px; min-width: 0; }
}

/* In-page file viewer (lightbox over a Drive embed) */
.viewer-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10, 10, 10, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 1000;
}
.viewer-panel {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  width: min(900px, 100%); height: min(85vh, 1100px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.viewer-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.82rem;
}
.viewer-title {
  flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer-open-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.viewer-open-link:hover { text-decoration: underline; }
.viewer-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 4px 6px; border-radius: 4px;
}
.viewer-close:hover { color: var(--text); background: var(--surface); }
.viewer-frame { flex: 1; width: 100%; border: none; background: var(--surface); }

@media (max-width: 480px) {
  .viewer-overlay { padding: 0; }
  .viewer-panel { width: 100%; height: 100%; border-radius: 0; }
}


/* Light/dark toggle — sits just left of the hamburger. The hero cover and
   colors follow the theme tokens above; the icon swaps in pure CSS. */
.theme-toggle {
  position: fixed; top: 16px; right: 62px; z-index: 20;
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--ctl-border);
  background: var(--ctl-bg); backdrop-filter: blur(4px); color: var(--ctl-fg);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* Phones: compact nav dropdown — same text size, tighter spacing, sized to its content. */
@media (max-width: 700px) {
  .nav-menu { left: auto; right: 12px; width: max-content; min-width: 150px; padding: 4px; gap: 0; }
  .nav-menu a { padding: 4px 12px; line-height: 1.25; }
}

/* ---- Library ---- */
.lib-intro { max-width: 68ch; color: var(--text-muted); }
.lib-account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 14px 0 6px; }
.lib-who { font-weight: 600; }
.lib-quota { font-family: var(--mono); font-size: 0.82rem; color: var(--text-muted); }
.lib-note { flex-basis: 100%; margin: 4px 0 0; color: var(--text-muted); font-size: 0.92rem; }
.lib-msg { margin: 8px 0; padding: 9px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 0.92rem; }
.lib-msg.is-error { border-color: #c0463a; color: #c0463a; }
.lib-msg[hidden], .lib-my[hidden], .lib-admin[hidden], .lib-modal[hidden], .lib-field[hidden] { display: none; }

.lib-btn {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.2; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.lib-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lib-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lib-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.lib-btn-primary:hover:not(:disabled) { color: var(--bg); filter: brightness(1.1); }
.lib-btn-small { padding: 5px 10px; font-size: 0.76rem; }
.lib-btn-block { width: 100%; margin-top: auto; }

.lib-badge, .lib-chip {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap;
}
.lib-badge-approved, .lib-chip-ok { color: #2f8f5b; border-color: #2f8f5b; }
.lib-badge-pending, .lib-chip-requested, .lib-chip-approved { color: #b7791f; border-color: #b7791f; }
.lib-badge-rejected, .lib-chip-out, .lib-chip-declined { color: #c0463a; border-color: #c0463a; }
.lib-chip-lent { color: var(--accent); border-color: var(--accent); }
.lib-due { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.lib-due.is-late { color: #c0463a; font-weight: 600; }

.lib-my, .lib-admin { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lib-admin { margin-top: 28px; }
.lib-sub { margin: 4px 0 8px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.lib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.lib-row:first-of-type { border-top: 0; }
.lib-row-title { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }

.lib-search {
  display: block; width: 100%; max-width: 420px; margin: 14px 0; padding: 9px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}
.lib-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.lib-cat {
  font: inherit; font-size: 0.9rem; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.lib-cat:hover { border-color: var(--accent); }
.lib-cat.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lib-cat-n { opacity: 0.65; font-size: 0.8em; margin-left: 2px; }
.lib-more { grid-column: 1 / -1; justify-self: center; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
.lib-empty { grid-column: 1 / -1; color: var(--text-muted); }
.lib-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.lib-cover { aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.lib-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-cover-empty { display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-family: var(--serif); font-weight: 600; color: var(--text-muted); overflow-wrap: anywhere; }
.lib-title { margin: 6px 0 0; font-size: 0.98rem; line-height: 1.25; text-wrap: balance; }
.lib-author { margin: 0; color: var(--text-muted); font-size: 0.86rem; }
.lib-card .lib-chip { align-self: flex-start; }

body.lib-modal-open { overflow: hidden; }
.lib-modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.55); }
.lib-dialog { position: relative; width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; padding: 22px 20px 20px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); }
.lib-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lib-tabs { display: flex; gap: 6px; margin-bottom: 10px; padding-right: 28px; }
.lib-tab { flex: 1; padding: 8px 6px; font-family: var(--mono); font-size: 0.8rem; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted); }
.lib-tab.is-active { border-color: var(--accent); color: var(--accent); }
.lib-dialog-note { margin: 0 0 10px; font-size: 0.9rem; color: var(--text-muted); }
.lib-dialog-note:empty { display: none; }
.lib-confirm-title { margin: 0 0 6px; font-size: 1.1rem; }
.lib-confirm-book { margin: 0 0 10px; font-weight: 600; }
.lib-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lib-confirm-actions .lib-btn { flex: 1 1 140px; }
.lib-form { display: flex; flex-direction: column; gap: 12px; }
.lib-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; color: var(--text-muted); }
.lib-field input { padding: 9px 11px; font: inherit; font-size: 1rem; color: var(--text); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.lib-form-error { min-height: 1.2em; margin: 0; color: #c0463a; font-size: 0.88rem; }

.lib-publisher { margin: 0; color: var(--text-muted); font-size: 0.78rem; font-style: italic; }

/* ---- library.shafiqmme.com: a plain header, only the Library section ---- */
.lib-header {
  --lh-shelf: url("/images/library-shelf-light.png");
  --lh-top: #faf8f3; --lh-bot: #ece6d8; --lh-glow: rgba(255, 244, 214, 0.9);
  position: relative; display: flex; align-items: flex-start; min-height: 270px;
  padding: 36px 32px 128px; margin-bottom: 28px; color: var(--text); border-bottom: 1px solid var(--border);
  background:
    var(--lh-shelf) center bottom / auto 118px repeat-x,
    radial-gradient(ellipse 60% 80% at 18% 20%, var(--lh-glow), transparent 70%),
    linear-gradient(180deg, var(--lh-top), var(--lh-bot));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lib-header {
    --lh-shelf: url("/images/library-shelf-dark.png");
    --lh-top: #0d1014; --lh-bot: #191510; --lh-glow: rgba(214, 160, 70, 0.20);
  }
}
:root[data-theme="dark"] .lib-header {
  --lh-shelf: url("/images/library-shelf-dark.png");
  --lh-top: #0d1014; --lh-bot: #191510; --lh-glow: rgba(214, 160, 70, 0.20);
}
.lib-header-inner { width: 100%; max-width: 1540px; margin: 0 auto; padding-right: 96px; }
.lib-header h1 { font-family: var(--serif); font-size: clamp(1.8rem, 4.4vw, 2.6rem); margin: 0 0 8px; text-wrap: balance; }
.lib-header p { margin: 0 0 14px; color: var(--text-muted); }
@media (max-width: 700px) {
  .lib-header { min-height: 230px; padding: 28px 16px 96px; background-size: auto 88px, auto, auto; }
  .lib-header-inner { padding-right: 0; }
}
body.lib-site section:not(#library) { display: none !important; }
body.lib-site .theme-toggle { right: 16px; }
body.lib-site #library .section-title { display: none; }
.lib-footer { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 16px; margin-top: 28px; }
.lib-footer a { color: var(--text-muted); }