/* brojudd.com — seminary
   Dark, quiet, fast. No web fonts, no frameworks, no images.
   Everything here is served from /seminary/ so it can be updated remotely. */

:root {
  --bg: #0c0d0f;
  --surface: #15171a;
  --surface-2: #1b1e22;
  --line: #24282d;
  --line-soft: #1e2126;
  --text: #e9ebee;
  --muted: #99a0a8;
  --dim: #6c737b;
  --accent: #e3b665;
  --accent-quiet: rgba(227, 182, 101, 0.10);
  --radius: 14px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- header --- */

header { padding: 26px 0 4px; }

.brand {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}

.datebar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.daynote {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--dim);
}

.chip.black { background: #101114; color: #c8ced6; border-color: #2c3138; }
.chip.gold  { background: var(--accent-quiet); color: var(--accent); border-color: rgba(227,182,101,.35); }

/* -------------------------------------------------------------- cards --- */

section { margin-top: 22px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px;
}

.label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
  margin: 0 0 12px;
}

.today-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.today-focus {
  margin: 12px 0 0;
  color: #c6ccd3;
  font-size: 17px;
}

.empty {
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------ scripture -- */

.reading {
  font-size: 20px;
  line-height: 1.35;
  margin: 0;
  font-weight: 550;
}

.reading-dates {
  color: var(--dim);
  font-size: 14px;
  margin: 0 0 8px;
}

.refs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.refs a {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  font-weight: 550;
}
.refs a:hover { border-color: rgba(227,182,101,.45); text-decoration: none; }

/* --------------------------------------------------------------- quotes -- */

blockquote {
  margin: 0 0 16px;
  padding: 0 0 0 16px;
  border-left: 2px solid rgba(227,182,101,.45);
}
blockquote:last-child { margin-bottom: 0; }

blockquote p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: #dde1e6;
}

blockquote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 14px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- files -- */

.files { display: grid; gap: 10px; }

.file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  font-weight: 550;
}
.file:hover { border-color: rgba(227,182,101,.45); text-decoration: none; }
.file .kind {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 650;
  white-space: nowrap;
}

/* ------------------------------------------------------------- details --- */

details {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
}
details + details { margin-top: 12px; }

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--dim);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}
details[open] summary::after { content: "\2212"; }
details[open] summary { margin-bottom: 14px; }

.dm { margin: 0; padding: 0; list-style: none; }
.dm li {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.dm li:first-child { border-top: 0; }
.dm a { font-weight: 600; display: block; font-size: 16px; }
.dm span { color: var(--muted); font-size: 15px; display: block; margin-top: 2px; }

.facts { margin: 0; }
.facts div {
  display: flex;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--dim); min-width: 74px; margin: 0; font-size: 15px; }
.facts dd { margin: 0; font-size: 15px; }

footer {
  margin-top: 34px;
  color: var(--dim);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  h1 { font-size: 24px; }
  .today-title { font-size: 20px; }
  .card, details { padding: 16px; }
}

/* =======================================================================
   Display mode — brojudd.com/?screen
   The projected classroom screen. Same markup, sized to be read from the
   back of the room. Type scales with the viewport so it fits any projector.
   ======================================================================= */

body.screen {
  font-size: clamp(18px, 1.5vw, 30px);
  padding-bottom: 0;
  overflow: hidden;
}

body.screen .wrap {
  max-width: none;
  padding: clamp(20px, 3vw, 56px) clamp(24px, 4vw, 80px) 0;
}

body.screen header { padding: 0 0 clamp(10px, 1.5vw, 26px); }
body.screen .brand { font-size: clamp(13px, 1.05vw, 22px); letter-spacing: 0.2em; }
body.screen h1 { font-size: clamp(30px, 3.4vw, 68px); }
body.screen .chip { font-size: clamp(12px, 1vw, 21px); padding: 0.35em 0.9em; }
body.screen .daynote { font-size: clamp(13px, 1vw, 21px); }

body.screen section { margin-top: clamp(12px, 1.6vw, 30px); }
body.screen .card { padding: clamp(18px, 2.2vw, 44px); border-radius: clamp(14px, 1.1vw, 22px); }
body.screen .label { font-size: clamp(12px, 0.95vw, 20px); margin-bottom: clamp(8px, 1vw, 18px); }

body.screen .today-title { font-size: clamp(26px, 3vw, 60px); }
body.screen .today-focus { font-size: clamp(18px, 1.7vw, 34px); margin-top: clamp(10px, 1.1vw, 22px); }
body.screen .refs a { font-size: clamp(16px, 1.4vw, 28px); padding: 0.45em 0.9em; }
body.screen .reading { font-size: clamp(20px, 2vw, 40px); }
body.screen .reading-dates { font-size: clamp(13px, 1vw, 21px); }

/* One quote at a time, rotating. */
body.screen #quotes blockquote { display: none; margin: 0; border-left-width: 3px; }
body.screen #quotes blockquote.shown { display: block; }
body.screen blockquote p { font-size: clamp(20px, 2.1vw, 42px); line-height: 1.45; }
body.screen blockquote cite { font-size: clamp(13px, 1.05vw, 22px); margin-top: 0.6em; }

/* Reference material and anything tappable is for phones, not the wall. */
body.screen details,
body.screen #files-sec,
body.screen .refs li.gl { display: none; }

/* Tell the room where to find it themselves. */
body.screen footer {
  margin-top: clamp(14px, 1.6vw, 30px);
  font-size: clamp(15px, 1.5vw, 30px);
  color: var(--accent);
  letter-spacing: 0.04em;
  font-weight: 600;
}

@media (min-aspect-ratio: 3/2) {
  /* Projectors and TVs: two columns so nothing scrolls off. */
  body.screen .wrap {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0 clamp(20px, 2.5vw, 48px);
    height: 100vh;
    align-content: start;
  }
  body.screen header { grid-column: 1 / -1; }
  body.screen footer { grid-column: 1 / -1; }
  body.screen section { margin-top: 0; }
  body.screen #today-sec { grid-column: 1; }
  body.screen #quotes-sec,
  body.screen #poll-sec { grid-column: 2; grid-row: 2; margin-top: 0; }
  body.screen #week-sec { grid-column: 1 / -1; margin-top: clamp(12px, 1.6vw, 30px); }
  body.screen #week-sec .card { height: auto; }
  body.screen .card { height: 100%; }
}

/* ---------------------------------------------- live poll (screen only) --- */

#poll-sec { display: none; }
body.screen #poll-sec { display: block; }

.join { display: flex; align-items: center; gap: clamp(16px, 2vw, 40px); }
.qr {
  width: clamp(120px, 12vw, 260px);
  height: auto;
  border-radius: clamp(8px, .7vw, 14px);
  background: #fff;
  padding: clamp(6px, .5vw, 12px);
  flex: 0 0 auto;
}
.join-url {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 46px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--accent);
}
.join-sub { margin: .35em 0 0; color: var(--muted); font-size: clamp(14px, 1.3vw, 27px); }

.poll-q {
  margin: 0 0 clamp(10px, 1.4vh, 22px);
  font-size: clamp(18px, 1.9vw, 38px);
  line-height: 1.3;
  font-weight: 600;
}
.poll-opts { display: grid; gap: clamp(6px, .8vh, 12px); }
.poll-opt {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(9px, 1.1vh, 18px) clamp(12px, 1.1vw, 22px);
  border-radius: clamp(9px, .7vw, 14px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: clamp(15px, 1.5vw, 30px);
  font-weight: 550;
}
.poll-opt .fill {
  position: absolute; inset: 0 auto 0 0;
  background: rgba(227,182,101,.18);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.poll-opt .t { position: relative }
.poll-opt .p {
  position: relative;
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .3s;
}
.poll-opt.show .p { opacity: 1 }

/* On a wide screen the poll takes the right column, under the quotes. */


/* While a question is actually running, the poll is the point of the screen.
   The reference cards stand down so nothing is ever clipped on a projector. */
body.screen.poll-live #quotes-sec,
body.screen.poll-live #week-sec { display: none; }

@media (min-aspect-ratio: 3/2) {
  body.screen.poll-live #poll-sec { grid-column: 2; grid-row: 2; margin-top: 0; }
  body.screen.poll-live #poll-sec .card { height: 100%; }
}

/* Slides fade rather than snap — a hard cut on a projector reads as a glitch. */
body.screen #quotes-sec,
body.screen #poll-sec { animation: slide-in .5s ease both; }
@keyframes slide-in { from { opacity: 0 } to { opacity: 1 } }

body.screen #quotes-sec .card,
body.screen #poll-sec .card { height: 100%; }

/* The join line kept on screen while a question is open, for latecomers. */
.poll-join {
  display: flex;
  align-items: center;
  gap: clamp(8px, .8vw, 16px);
  margin: clamp(12px, 1.6vh, 24px) 0 0;
  color: var(--muted);
  font-size: clamp(13px, 1.2vw, 24px);
  font-weight: 600;
}
.qr-mini {
  width: clamp(38px, 3.4vw, 74px);
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  flex: 0 0 auto;
}

/* =======================================================================
   Display mode, light. A dim projector puts out light for white pixels and
   nothing for black ones, so a dark theme that looks good on a monitor
   reads as grey mush on the wall. Screen mode only — phones stay dark.
   ======================================================================= */

body.screen {
  --bg: #ffffff;
  --surface: #f5f6f8;
  --surface-2: #eaecf0;
  --line: #d6dae0;
  --line-soft: #e3e6ea;
  --text: #14171b;
  --muted: #4f555d;
  --dim: #6a7078;
  --accent: #8a6a12;
  --accent-quiet: rgba(138, 106, 18, 0.10);
  background: #fff;
  color: #14171b;
}

body.screen .today-focus { color: #2c3138; }
body.screen blockquote p { color: #1c2026; }
body.screen blockquote { border-left-color: rgba(138,106,18,.6); }
body.screen .chip.black { background: #14171b; color: #fff; border-color: #14171b; }
body.screen .chip.gold  { background: var(--accent-quiet); color: #6f5510; border-color: rgba(138,106,18,.45); }
body.screen .poll-opt .fill { background: rgba(138,106,18,.20); }
body.screen .qr, body.screen .qr-mini { background: #fff; }

/* The join line lives in the footer so it is on screen on every slide —
   including while a quote is up, and for anyone without a camera. */
body.screen footer {
  color: var(--accent);
  font-weight: 650;
}
body.screen footer .join-hint { color: var(--muted); font-weight: 500; }