/* =====================================================================
   1765 Regina — shared tool + resource-page styles (V1)
   Extends styles.css. Loaded only on /examen/, /novenas/,
   /liturgical-home/, /resources/*.
   ===================================================================== */

.tool-head {
  padding: 150px 0 46px;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(46,78,126,0.28), transparent 70%),
    var(--c-base);
  text-align: center;
}
.tool-head .lede { max-width: 700px; margin-left: auto; margin-right: auto; }

.tool-shell { padding: 26px 0 110px; }

.tool-panel {
  background: linear-gradient(180deg, var(--c-base-3), var(--c-base-2));
  border: 1px solid rgba(196,154,60,0.2);
  padding: clamp(28px, 4.5vw, 48px);
  margin: 0 auto 26px;
  max-width: 860px;
  position: relative;
}
.tool-panel::before {
  content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold-bri), transparent);
  opacity: 0.7;
}
.tool-panel h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 3vw, 32px); margin: 0 0 16px; color: var(--c-ivory); }
.tool-panel h3 { font-family: var(--f-cinzel); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold); margin: 26px 0 12px; }

.tool-meta {
  font-family: var(--f-cinzel); font-size: 11.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-marian-soft);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  margin-top: 18px;
}

/* Choice chips (state of life, novena picker) */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.chip {
  font-family: var(--f-cinzel); font-size: 12.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-ivory-dim);
  background: rgba(9,11,18,0.6);
  border: 1px solid rgba(244,237,223,0.22);
  padding: 12px 20px; cursor: pointer;
  transition: border-color 240ms var(--ease), color 240ms var(--ease), background 240ms var(--ease), transform 240ms var(--ease);
}
.chip:hover { border-color: var(--c-gold-fade); color: var(--c-ivory); transform: translateY(-1px); }
.chip.on {
  color: var(--c-base);
  background: linear-gradient(180deg, var(--c-gold-bri), var(--c-gold));
  border-color: var(--c-gold);
}
.chip:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

/* Streak / status row */
.status-row {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 4px;
}
.status-cell {
  flex: 1 1 140px;
  border: 1px solid rgba(159,182,218,0.18);
  background: rgba(46,78,126,0.10);
  padding: 16px 18px; text-align: center;
}
.status-cell .n { font-family: var(--f-display); font-size: 34px; font-weight: 600; color: var(--c-gold-bri); display: block; line-height: 1.1; }
.status-cell .l { font-family: var(--f-cinzel); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-ivory-mut); }

/* Examen steps / question lists */
.q-list { list-style: none; margin: 0; padding: 0; }
.q-list li {
  padding: 13px 0 13px 30px; position: relative;
  color: var(--c-ivory-dim); font-size: 18px; line-height: 1.6;
  border-bottom: 1px solid rgba(244,237,223,0.07);
}
.q-list li::before {
  content: "✦"; position: absolute; left: 4px; top: 13px;
  color: var(--c-gold); font-size: 13px;
}
.step-nav { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.step-dots { display: flex; gap: 8px; align-items: center; margin: 0 auto 22px; justify-content: center; }
.step-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(244,237,223,0.18); transition: background 240ms var(--ease), transform 240ms var(--ease); }
.step-dots span.on { background: var(--c-gold-bri); transform: scale(1.25); }

.prayer-block {
  font-family: var(--f-display); font-size: 20px; line-height: 1.7;
  color: var(--c-ivory); font-style: italic;
  border-left: 2px solid var(--c-gold-fade);
  padding: 6px 0 6px 24px; margin: 20px 0;
  white-space: pre-line;
}
.rubric { font-family: var(--f-cinzel); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-rose); filter: brightness(1.6); }

/* Novena cards */
.nov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; }
@media (max-width: 760px) { .nov-grid { grid-template-columns: 1fr; } }
.nov-card {
  border: 1px solid rgba(196,154,60,0.16);
  background: linear-gradient(180deg, var(--c-base-3), var(--c-base-2));
  padding: 28px 26px; cursor: pointer;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease);
}
.nov-card:hover { transform: translateY(-4px); border-color: rgba(196,154,60,0.45); }
.nov-card h3 { font-family: var(--f-display); font-size: 23px; font-weight: 600; margin: 0 0 6px; color: var(--c-ivory); }
.nov-card .for { font-family: var(--f-display); font-style: italic; font-size: 15.5px; color: var(--c-marian-soft); display: block; margin-bottom: 12px; }
.nov-card p { font-size: 15.5px; margin: 0 0 14px; }
.nov-card .prog { font-family: var(--f-cinzel); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-bri); }

.day-track { display: flex; gap: 9px; flex-wrap: wrap; margin: 20px 0; }
.day-pip {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--f-cinzel); font-size: 14px; color: var(--c-ivory-dim);
  border: 1px solid rgba(244,237,223,0.22); cursor: pointer; user-select: none;
  transition: all 240ms var(--ease);
}
.day-pip.done { background: linear-gradient(180deg, var(--c-gold-bri), var(--c-gold)); color: var(--c-base); border-color: var(--c-gold); }
.day-pip.today { border-color: var(--c-marian-bri); box-shadow: 0 0 0 3px rgba(91,127,180,0.25); }
.day-pip:hover { border-color: var(--c-gold-bri); }

/* Liturgical home */
.season-banner {
  max-width: 860px; margin: 0 auto 26px; padding: clamp(30px, 5vw, 50px);
  text-align: center; position: relative;
  border: 1px solid rgba(196,154,60,0.3);
}
.season-banner .season-name { font-family: var(--f-cinzel); font-weight: 600; font-size: clamp(30px, 4.6vw, 48px); letter-spacing: 0.06em; margin: 6px 0 10px; }
.season-banner .season-sub { font-family: var(--f-display); font-style: italic; font-size: 19px; color: var(--c-ivory-dim); }
.season-advent  { background: linear-gradient(180deg, rgba(72,48,120,0.35), var(--c-base-2)); }
.season-christmas { background: linear-gradient(180deg, rgba(196,154,60,0.22), var(--c-base-2)); }
.season-ordinary { background: linear-gradient(180deg, rgba(28,84,58,0.30), var(--c-base-2)); }
.season-lent { background: linear-gradient(180deg, rgba(90,32,66,0.35), var(--c-base-2)); }
.season-triduum { background: linear-gradient(180deg, rgba(110,27,31,0.4), var(--c-base-2)); }
.season-easter { background: linear-gradient(180deg, rgba(196,154,60,0.26), rgba(244,237,223,0.06), var(--c-base-2)); }

.feast-list { list-style: none; margin: 0; padding: 0; }
.feast-list li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid rgba(244,237,223,0.07);
}
.feast-date { font-family: var(--f-cinzel); font-size: 12.5px; letter-spacing: 0.14em; color: var(--c-gold); white-space: nowrap; min-width: 86px; }
.feast-name { color: var(--c-ivory-dim); font-size: 17.5px; }
.feast-name .rank { font-family: var(--f-cinzel); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-marian-soft); margin-left: 10px; }

/* Resource pages */
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
@media (max-width: 760px) { .res-grid { grid-template-columns: 1fr; } }
.res-card {
  border: 1px solid rgba(196,154,60,0.18);
  background: linear-gradient(180deg, var(--c-base-3), var(--c-base-2));
  padding: 32px 28px; border-bottom: none; display: block;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease);
}
.res-card:hover { transform: translateY(-4px); border-color: rgba(196,154,60,0.5); }
.res-card h3 { font-family: var(--f-display); font-size: 23px; font-weight: 600; margin: 0 0 8px; color: var(--c-ivory); }
.res-card p { font-size: 15.5px; margin: 0; }

.source-note {
  max-width: 860px; margin: 10px auto 0; font-size: 14.5px; color: var(--c-ivory-mut);
  border-top: 1px solid rgba(244,237,223,0.1); padding-top: 18px;
}
.tool-note { font-size: 15px; color: var(--c-ivory-mut); margin-top: 14px; }

/* Print */
@media print {
  body { background: #fff; color: #111; }
  .nav, .footer, .step-nav, .chips, .no-print { display: none !important; }
  .tool-panel, .season-banner { border: 1px solid #999; background: #fff; }
  .tool-panel::before { display: none; }
  .prayer-block, .tool-panel h2, .q-list li, p, .feast-name { color: #111 !important; }
  .tool-head { padding: 20px 0; background: #fff; }
  .display-h2, .lede { color: #111 !important; }
}