/* Tanulmány-lap (HT-STUDY) — dokumentum-tipográfia a kalkulátor-kabát tetején.
 *
 * A calc-shell.css adja a keretet (fejléc, kártya, gomb, Alex-blokk, lábléc, nyomtatás),
 * itt csak az van, ami egy olvasható dokumentumhoz kell, és amit a kalkulátorok nem
 * használnak. Ugyanaz az elv, mint ott: minden szín a --calc-* tokenekből jön, hogy a
 * képviselet akcentusa egyetlen <style> blokkból átfesse az egészet, és hogy az offline,
 * egyfájlos másolat a DS stíluslap nélkül is helyesen jelenjen meg.
 */

.study-body { padding-bottom: 40px; }

.study { display: block; }

.study-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--calc-accent); margin-bottom: 7px;
}

.study-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px;
  font-size: 12px; color: var(--calc-muted);
}
.study-meta span::before { content: "· "; color: var(--calc-hairline); }
.study-meta span:first-child::before { content: none; }

/* ---------- letöltés ---------- */

.study-download {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 14px 0 18px; border-bottom: 1px solid var(--calc-hairline); margin-bottom: 4px;
}
.study-download .calc-hint { flex: 1; min-width: 220px; font-size: 12.5px; }
.study-ico { width: 17px; height: 17px; stroke-width: 1.8; }

/* ---------- határidők ---------- */

.study-filter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 0 12px; border-bottom: 1px solid var(--calc-hairline); margin-bottom: 4px;
}

.study-deadlines { list-style: none; margin: 0; padding: 0; }
.study-deadline { border-top: 1px solid var(--calc-hairline); }
.study-deadline:first-child { border-top: 0; }
.study-deadline[data-done] > .study-check { opacity: .5; }
.study-deadline[data-done] .study-deadline-main strong { text-decoration: line-through; }

/* A pipa és a szöveg egy <label>, hogy a teljes sor kattintható legyen — telefonon ez
   a különbség a használható és a bosszantó között. */
.study-check {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 13px 0; font-size: 14px; line-height: 1.55; color: var(--calc-body);
}
.study-check input[type="checkbox"] {
  flex-shrink: 0; width: 19px; height: 19px; margin: 1px 0 0;
  accent-color: var(--calc-accent); cursor: pointer;
}
.study-check-sub { padding: 5px 0 5px 30px; font-size: 13.5px; }

.study-deadline-main { display: block; min-width: 0; }
.study-deadline-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 3px;
}
.study-deadline-head time {
  font-size: 13px; font-weight: 600; color: var(--calc-ink);
  font-variant-numeric: tabular-nums;
}
.study-deadline-main strong { display: block; color: var(--calc-ink); font-weight: 600; font-size: 14.5px; }
.study-deadline-text { display: block; margin-top: 3px; color: var(--calc-body); }
.study-source { display: block; margin-top: 5px; font-size: 12px; color: var(--calc-muted); }
.study-source a { color: var(--calc-muted); }
.study-source a:hover { color: var(--calc-accent); }

.study-sub {
  padding: 0 0 12px; margin-top: -6px;
  border-left: 2px solid var(--calc-hairline); margin-left: 9px; padding-left: 0;
}

.study-badge {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.study-badge-bad  { background: var(--calc-bad-soft); color: #8F1818; }
.study-badge-warn { background: var(--calc-warn-soft); color: #7A4E05; }
.study-badge-ok   { background: var(--calc-ok-soft); color: #0D6630; }

/* „hány nap van hátra" — a lap tölti ki a megnyitás napjához képest */
.study-left { font-size: 12px; font-weight: 600; color: var(--calc-muted); }
.study-left[data-tone="soon"] { color: var(--calc-bad); }
.study-left[data-tone="near"] { color: #7A4E05; }
.study-left[data-tone="past"] { color: var(--calc-muted); font-weight: 500; }

/* ---------- a törzs ---------- */

.study-body-text { display: block; }
.study-body { font-size: 15px; line-height: 1.7; color: var(--calc-body); padding: 4px 0 6px; }
.study-body > :first-child { margin-top: 0; }
.study-body h2 {
  font-family: Cal Sans, Inter, -apple-system, Arial, sans-serif;
  font-size: 20px; line-height: 1.25; letter-spacing: -.3px; font-weight: 600;
  color: var(--calc-ink); margin: 30px 0 10px;
}
.study-body h3 { font-size: 16px; font-weight: 600; color: var(--calc-ink); margin: 22px 0 6px; }
.study-body p { margin: 0 0 14px; max-width: 68ch; }
.study-body ul, .study-body ol { margin: 0 0 14px; padding-left: 22px; max-width: 68ch; }
.study-body li { margin-bottom: 5px; }
.study-body a { color: var(--calc-accent); }
.study-body strong { color: var(--calc-ink); font-weight: 600; }
.study-body blockquote {
  margin: 0 0 14px; padding: 2px 0 2px 15px;
  border-left: 3px solid var(--calc-hairline); color: var(--calc-muted);
}
.study-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.study-body th, .study-body td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--calc-hairline); vertical-align: top;
}
.study-body th { color: var(--calc-ink); font-weight: 600; font-size: 12.5px; }

/* ---------- személyre szabott blokkok ---------- */

/* Láthatóan más: a címzett tudja, hogy ez a rész neki szól, és utólag mi is látjuk,
   melyik állítás volt személyre szabott. */
.study-block {
  position: relative;
  background: var(--calc-accent-soft);
  border-left: 3px solid var(--calc-accent);
  border-radius: 0 var(--calc-radius-sm) var(--calc-radius-sm) 0;
  padding: 15px 17px 3px; margin: 0 0 18px;
}
.study-block > :first-child { margin-top: 0; }
.study-block-generikus { background: var(--calc-soft); border-left-color: var(--calc-hairline); }

.study-block-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--calc-accent-ink); margin-bottom: 6px;
}

.study-houses { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; }
@media (min-width: 640px) { .study-houses { grid-template-columns: 1fr 1fr; } }
.study-houses li {
  background: var(--calc-canvas); border: 1px solid var(--calc-hairline);
  border-radius: var(--calc-radius-sm); padding: 8px 11px; font-size: 13.5px; color: var(--calc-ink);
}

/* ---------- források ---------- */

.study-sources { border: 1px solid var(--calc-hairline); border-radius: var(--calc-radius-sm); overflow: hidden; }
.study-source-row {
  padding: 11px 13px; font-size: 13px; line-height: 1.55; color: var(--calc-muted);
  border-top: 1px solid var(--calc-hairline);
}
.study-source-row:first-child { border-top: 0; }
.study-source-row strong { color: var(--calc-ink); font-weight: 600; }
.study-source-row a { color: var(--calc-ink); }
.study-checked { display: block; margin-top: 2px; font-size: 11.5px; }

/* ---------- hub ---------- */

.study-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .study-list { grid-template-columns: 1fr 1fr; } }
.study-card { display: flex; flex-direction: column; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.study-card:hover { border-color: var(--calc-accent); box-shadow: 0 4px 14px rgba(11,19,33,.07); }
.study-card h2 { margin: 6px 0 6px; font-size: 17px; }
.study-card .study-meta { margin-top: 10px; }

/* ---------- nyomtatás: a dokumentum, a felület nélkül ---------- */
@media print {
  .study-download, .study-filter { display: none !important; }
  .study-block { background: none; border-left: 2px solid #999; }
  .study-check input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }
  .study-deadline { break-inside: avoid; page-break-inside: avoid; }
  .study-body a::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; word-break: break-all; }
}