/*  THEME ROOTS  ---------------------------------------------------------- */
:root{
  --bg-color:#EFEBE9; --text-color:#1A2639; --text-color-light:rgba(26,38,57,.8);
  --panel-buttons-bg:#0E1B30; --panel-buttons-text:#EFEBE9;
  --button-border:var(--panel-buttons-text); --button-hover-bg:rgba(239,235,233,.10);
  --button-active-bg:var(--panel-buttons-text); --button-active-text:var(--panel-buttons-bg);
  --arrow-filter:invert(0%); --theme-icon:#bbb;
}
body.dark-mode{
  --bg-color:#1A2639; --text-color:#EFEBE9; --text-color-light:rgba(239,235,233,.8);
  --panel-buttons-bg:#101825; --panel-buttons-text:#DBD7D5;
  --button-border:var(--panel-buttons-text); --button-hover-bg:rgba(219,215,213,.10);
  --button-active-text:#101825; --arrow-filter:invert(100%); --theme-icon:#888;
}

/*  RESET / FOUNDATION  --------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg-color);color:var(--text-color);
  font-family:'Source Sans Pro',sans-serif;font-size:14px;line-height:1.6;
  transition:background .3s ease,color .3s ease;
}

/*  FLOATING THEME TOGGLE  ------------------------------------------------ */
.theme-toggle-floating{
  position:fixed;top:16px;right:16px;z-index:1000;background:none;border:none;
  font-size:.8em;opacity:.45;color:var(--theme-icon);border-radius:50%;padding:4px;
  cursor:pointer;line-height:1;transition:opacity .25s,transform .2s}
.theme-toggle-floating:hover{opacity:.85;transform:scale(1.1)}
.icon-sun{display:none}
body.dark-mode .icon-sun{display:inline} body.dark-mode .icon-moon{display:none}

/*  JUMBOTRONS  ----------------------------------------------------------- */
.quote-jumbotron{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:40px 20px;background:var(--bg-color)}
.quote-content-wrapper{max-width:700px;width:90%;text-align:left}
#quote-text,#quote-text-yesterday{
  font-family:'Source Serif Pro',serif;font-size:1.5em;font-weight:400;line-height:1.55;
  margin-bottom:1.5em;white-space:pre-line}
.quote-author{
  font-family:'Source Sans Pro',sans-serif;font-size:1.4em;font-weight:400;color:var(--text-color-light)}
.quote-actions{display:none}
.status-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.status-message,.copy-status{font-size:.95em;color:var(--text-color-light);min-height:1.2em}
.copy-status{margin:0}
.button-inline{min-width:auto;padding:.5em 1em;color:var(--text-color);border-color:var(--text-color)}

/*  ↓ MAIN SCROLL ARROW – now left-justified  */
.scroll-down-arrow{
  position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);
  opacity:.5;cursor:pointer;transition:opacity .25s;
  background:none;border:none;padding:0}
.scroll-down-arrow img{width:24px;height:auto;filter:var(--arrow-filter)}
.scroll-down-arrow:hover{opacity:.8}

/*  PANELS ---------------------------------------------------------------- */
.panel-content-constrained{max-width:700px;margin:0 auto;padding:0 20px}
.panel-citation{padding:2.5vh 0 12vh;text-align:center}
#quote-source-full{
  font-family:'Source Sans Pro',sans-serif;font-size:1.4em;font-weight:400;color:var(--text-color-light)}

.panel-buttons{background:var(--panel-buttons-bg);color:var(--panel-buttons-text);text-align:center}
.panel-date{border-bottom:1px solid rgba(255,255,255,.08);padding:20px 0}
.panel-buttons-yesterday{padding:27px 0}
.buttons-layout-centered{display:flex;justify-content:center}

.button{
  border:2px solid var(--button-border);background:transparent;color:var(--panel-buttons-text);
  padding:.9em 1.4em;font-size:1em;border-radius:3px;min-width:120px;
  transition:background .25s,color .25s;font-weight:400;text-decoration:none;cursor:pointer}
.button:disabled{opacity:.6;cursor:not-allowed}
.button:hover{background:var(--button-hover-bg)}
.button-active{background:var(--button-active-bg);color:var(--button-active-text)}

.badi-date-title{font-family:'Source Serif Pro',serif;font-size:2.2em;font-weight:600;
  margin-bottom:.3em;cursor:pointer}
.date-text{font-size:1em;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .3s,max-height .3s;color:var(--panel-buttons-text)}
.date-text.visible{opacity:.85;max-height:3em}
.date-note{font-size:.95em;color:var(--panel-buttons-text);opacity:.85;margin-top:.6em}

/*  YESTERDAY ARROW & CITATION ------------------------------------------- */
.toggle-citation-arrow{
  display:block;margin:12vh 0 0;opacity:.5;cursor:pointer;transition:opacity .25s;
  background:none;border:none;padding:0}
  /* left-justified by default (inside left-aligned content) */
.toggle-citation-arrow img{width:24px;height:auto;filter:var(--arrow-filter)}
.toggle-citation-arrow:hover{opacity:.8}

.yesterday-citation{
  font-family:'Source Sans Pro',sans-serif;font-size:1.4em;font-weight:400;color:var(--text-color-light);
  text-align:center;margin:7.5vh auto 12vh;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .3s,max-height .3s}
.yesterday-citation.visible{opacity:.9;max-height:5em}

/*  FOCUS STYLES  --------------------------------------------------------- */
.button:focus-visible,
.scroll-down-arrow:focus-visible,
.toggle-citation-arrow:focus-visible,
.theme-toggle-floating:focus-visible{
  outline:2px solid currentColor;outline-offset:3px}

/*  REDUCED MOTION  ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body{transition:none}
  .scroll-down-arrow,
  .toggle-citation-arrow,
  .button,
  .date-text,
  .yesterday-citation{transition:none}
}

/*  MOBILE  --------------------------------------------------------------- */
@media(max-width:768px){
  body{font-size:13.5px}
  .panel-date{padding:15px 0}
  .panel-buttons-yesterday{padding:22px 0}
}
@media(max-width:480px){
  body{font-size:13px}
  .buttons-layout-centered{flex-direction:column;gap:10px}
  .panel-date{padding:12px 0}
  .panel-buttons-yesterday{padding:18px 0}
}