/* feladatok.com — vizuális rendszer.
   Tézis: a magyar "felad" ige kétjelentésű (levelet ad fel / feladatot ad) —
   a felület ezért a feladott küldemény papír-vernakulárisából épül: irodai
   papír, tinta, bélyegzőzöld, gépelt időbélyegek, perforáció-motívum.
   Csendes utalások, modern kivitel; az egyetlen látványelem a Kész-pipa
   tollvonás-animációja (a termék varázspillanata, koncepció 6.2).
   SPEC §3.3: minden betű self-hosted (public/fonts) vagy rendszer-font. */

@font-face {
  font-family: "Crete Round";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/crete-round-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Crete Round";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/crete-round-italic.woff2") format("woff2");
}

:root {
  /* papír és tinta */
  --paper: #edefe8;
  --card: #fcfcf8;
  --ink: #232f28;
  --muted: #64716a;
  --line: #dde0d5;
  --dash: #b7c0af;
  /* bélyegzőzöld — az egyetlen erős szín */
  --stamp: #1e6b45;
  --stamp-deep: #155334;
  --stamp-soft: #e3ede2;
  /* golyóstoll-kék — kizárólag linkek és "kézzel írt" adatok */
  --pen: #2c4a8a;
  --danger: #9c4536;
  --danger-soft: #f2e6e1;

  --font-display: "Crete Round", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(35, 47, 40, 0.05), 0 10px 30px rgba(35, 47, 40, 0.08);
}

* {
  box-sizing: border-box;
}

/* a display-t állító osztályok (pl. .button) ne írhassák felül a hidden-t */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;
}

:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 2px;
}

.page {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

.page-center {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

/* --- kártya = papírlap; tetején keskeny légiposta-csík --- */

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 30px 30px;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    135deg,
    var(--stamp) 0 10px,
    transparent 10px 20px
  );
  opacity: 0.85;
}

@media (max-width: 480px) {
  .card {
    padding: 26px 20px 24px;
  }
}

/* --- tipográfia --- */

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 5vw, 2.05rem);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: 0.005em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 22px 0 10px;
}

h3,
h4 {
  font-size: 1.05rem;
  margin: 18px 0 6px;
}

p {
  margin: 0 0 12px;
}

.muted {
  color: var(--muted);
}

.overline {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.meta-line {
  font-size: 0.92rem;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--dash); /* perforáció */
}

/* D4: az alapértelmezett link-kék kivezetve — a prózán belüli link marad
   link, de zölddel (a toll-kék a díszítő elemeké marad) */
a {
  color: var(--stamp-deep);
  text-underline-offset: 2px;
}

time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

/* --- markdown tartalom --- */

.markdown {
  margin-bottom: 22px;
}

.markdown pre {
  background: #f1f1ea;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.88rem;
}

.markdown code {
  font-family: var(--font-mono);
  background: #f1f1ea;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.88em;
}

.markdown pre code {
  background: none;
  border: none;
  padding: 0;
}

.markdown blockquote {
  margin: 0 0 12px;
  padding: 4px 16px;
  border-left: 3px solid var(--dash);
  color: var(--muted);
  font-style: italic;
}

.markdown ul,
.markdown ol {
  margin: 0 0 12px;
  padding-left: 24px;
}

/* --- gombok, űrlapelemek --- */

.button {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 9px;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button:hover {
  background: var(--stamp-soft);
  border-color: var(--dash);
}

.button-primary {
  background: var(--stamp);
  border-color: var(--stamp);
  color: #fff;
}

.button-primary:hover {
  background: var(--stamp-deep);
  border-color: var(--stamp-deep);
}

.button-big {
  font-size: 1.12rem;
  padding: 15px 36px;
  border-radius: 11px;
  width: 100%;
}

.button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Vezérlő-nyelvtan v2 (D4, ratifikálva 2026-08-28): "a gomb legyen gomb" —
   az önálló akció-link kivezetve, a harmadlagos szint a GHOST-GOMB: halvány
   háttér + halvány körvonal, hoverre felerősödik. A .link-button az összes
   meglévő hívóhelyen ezt a szemantikát kapja (mind önálló akció volt); az
   aláhúzott link egyetlen legitim élőhelye a futó szöveg belseje. */
.link-button,
.button-ghost {
  display: inline-block;
  font: inherit;
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--stamp) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--stamp) 24%, transparent);
  border-radius: 8px;
  color: var(--stamp-deep);
  padding: 4px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.link-button:hover,
.button-ghost:hover {
  background: var(--stamp-soft);
  border-color: var(--stamp);
  color: var(--stamp-deep);
}

.input,
textarea.input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 13px;
}

/* csak függőleges átméretezés: vízszintesen kiszökne a kártya vágott zónájába,
   ahonnan a fogantyú visszahozhatatlan */
textarea.input {
  resize: vertical;
  max-height: 60vh;
}

.input:focus {
  outline: 2px solid var(--stamp);
  outline-offset: 0;
  border-color: var(--stamp);
}

.field-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  margin: 20px 0 6px;
}

.field-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 6px 0 0;
}

/* --- checklist --- */

.checklist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.checklist li {
  border-top: 1px solid var(--line);
}

.checklist li:last-child {
  border-bottom: 1px solid var(--line);
}

.checklist label {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 6px;
  cursor: pointer;
}

.checklist input[type="checkbox"] {
  width: 21px;
  height: 21px;
  margin-top: 3px;
  accent-color: var(--stamp);
  flex-shrink: 0;
  cursor: pointer;
}

.checklist label span {
  transition: color 0.2s ease;
}

.checklist input[type="checkbox"]:checked + span {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--dash);
}

.checklist-progress {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 22px;
}

/* --- Kész: a varázspillanat --- */

.done-row {
  margin: 26px 0 8px;
  text-align: center;
}

.done-badge {
  color: var(--stamp);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.check-draw {
  width: 46px;
  height: 46px;
  display: block;
  margin: 0 auto 4px;
}

.check-draw path {
  fill: none;
  stroke: var(--stamp);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 31;
  stroke-dashoffset: 31;
  animation: check-draw 0.5s ease-out 0.1s forwards;
}

@keyframes check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.confirm-box {
  background: var(--stamp-soft);
  border-radius: 11px;
  padding: 18px 20px;
}

.confirm-question {
  font-weight: 650;
  margin-bottom: 12px;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- válasz --- */

.reply-block {
  border-top: 1px dashed var(--dash);
  margin-top: 26px;
  padding-top: 8px;
}

.reply-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* Design-revízió D1: a visszajelzés a gomb ALATT, halkan — kis, zöld,
   nem-félkövér sor; a gombot nem nyomja össze, mobilon nem tördel */
.reply-sent-note {
  color: var(--stamp);
  font-size: 0.85rem;
  font-weight: 400;
  margin: 6px 0 0;
}

.flash {
  color: var(--danger);
  font-size: 0.9rem;
}

/* --- státusz-oldal: tértivevény --- */

.state-badge {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--stamp);
  background: transparent;
  border: 1px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
  padding: 5px 12px;
  margin: 2px 3px 18px;
}

.state-badge.state-expired {
  color: var(--danger);
}

.timeline {
  list-style: none;
  margin: 14px 0 22px;
  padding: 0;
}

.timeline li {
  position: relative;
  padding: 0 0 16px 22px;
}

/* pötty */
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stamp);
}

/* perforált összekötő a következő pöttyig — az utolsó után nincs */
.timeline li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  bottom: -9px;
  border-left: 2px dashed var(--dash);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li:last-child::after {
  display: none;
}

.timeline-label {
  display: block;
  font-weight: 600;
}

.timeline time {
  color: var(--muted);
}

.reply-quote {
  margin: 8px 0 0;
  padding: 10px 14px;
  background: var(--stamp-soft);
  border-radius: 8px;
  font-family: var(--font-display);
  font-style: italic;
}

.keep-note {
  font-size: 0.85rem;
  margin: 4px 0 0;
}

/* Akció-zóna a /s/ kártyán (design-revízió D1): EGY igazítási rend — az
   igazolás-letöltés másodlagos gomb, a harmadlagos linkek egy blokkban */
.status-actions {
  margin-top: 24px;
  border-top: 1px dashed var(--dash);
  padding-top: 16px;
}

.status-actions .cert-export-row {
  margin: 0 0 12px;
}

/* Export-nudge (30. kör): halk meta-hang az igazolás-cselekvés mellett —
   informál, nem sürget (a D3 .auto-delete-note hangereje) */
.cert-nudge {
  font-size: 0.8rem;
  margin: -6px 0 14px;
  max-width: 34rem;
}

.dash-cert-nudge {
  flex-basis: 100%;
}

.status-action-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  font-size: 0.88rem;
}

.status-actions .vault-row,
.status-actions .closure-row,
.status-actions .qr-row {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0.88rem;
}

/* D4/b (32. kör, ratifikálva — György fogása): a feladat-kártyák alsó
   akció/meta/destruktív zónája KÖZÉPRE, mindkét oldalon azonosan — azonos
   elem azonos helyen és rendben; a tartalom (checklist, idővonal) balra
   marad, ahogy olvasnivalóhoz illik. Az azonos-rend őr gépi kontraktus. */
.status-card .status-actions,
.status-card .auto-delete-note,
.status-card .keep-note,
.status-card .danger-zone {
  text-align: center;
}

.status-card .status-action-links {
  justify-content: center;
}

.status-card .cert-nudge {
  margin-left: auto;
  margin-right: auto;
}

/* --- shell: a /t/ és /s/ oldal JS nélkül sem lehet üres --- */

.shell-brand {
  font-family: var(--font-display);
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink);
  /* D4: a nyelvváltó horgonya (a .locale-switch abszolút a jobb szélen) */
  position: relative;
  align-self: stretch;
}

.shell-app {
  display: contents; /* a JS-renderelt kártyák a main flex-elrendezésében élnek */
}

/* ha az app ~8 mp alatt nem indul el (webview-gond), emberi útmutató bukkan elő */
.boot-help {
  font-size: 0.88rem;
  color: var(--muted);
  opacity: 0;
  animation: boot-help-reveal 0.4s ease-out 8s forwards;
  margin: 14px 0 0;
}

@keyframes boot-help-reveal {
  to {
    opacity: 1;
  }
}

/* --- állapot-kártyák (lejárt, 404, hiba) --- */

.state-card {
  text-align: center;
  padding: 52px 30px;
}

.state-card h1 {
  font-size: 1.5rem;
}

/* Design-revízió D3: hosszú bekezdés középre zárva sehol — a cím marad
   középen, a magyarázó bekezdés balra zárt (őr-képernyők, üres-állapotok) */
.state-card p.muted {
  text-align: left;
}

/* --- márka-lábléc (statikus a shellben) --- */

.brand-footer {
  text-align: center;
  font-size: 0.88rem;
}

.brand-footer p {
  margin-bottom: 6px;
}

.brand-footer > p > a {
  font-family: var(--font-display);
  color: var(--ink);
  text-decoration: none;
}

.brand-footer > p > a:hover {
  color: var(--stamp);
}

.shell-footer-links {
  font-size: 0.8rem;
  color: var(--muted);
}

.shell-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}

.shell-footer-links a {
  color: var(--muted);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.shell-footer-links a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--stamp) 8%, transparent);
}

/* --- oldal-lábléc a React-oldalakon --- */

.site-footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 28px;
}

.site-footer-brand {
  font-family: var(--font-display);
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap; /* mobilon a 8 link nem fér egy sorba — kilógás helyett törik */
  justify-content: center;
  gap: 6px 16px;
  padding: 0 12px;
}

.site-footer-links a {
  color: var(--muted);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-footer-links a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--stamp) 8%, transparent);
}

/* --- jogi oldalak --- */

.legal h2 {
  font-size: 1.15rem;
  margin-top: 26px;
}

.legal-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
}

.legal-dl {
  margin: 0 0 12px;
}

.legal-dl > div {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--dash);
}

.legal-dl dt {
  flex: 0 0 150px;
  font-weight: 650;
  font-size: 0.9rem;
}

.legal-dl dd {
  margin: 0;
  font-size: 0.95rem;
}

.legal-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-bottom: 1px dashed var(--dash);
}

.legal-table th {
  font-weight: 650;
  width: 45%;
}

.how-divider {
  border: none;
  border-top: 1px dashed var(--dash);
  margin: 30px 0 22px;
}

.legal h2.overline {
  font-size: 0.72rem;
  margin-top: 0;
}

/* külső hivatkozás jelölése a renderelt markdownban (koncepció 2.6) */
.markdown a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.85em;
}

/* --- szerkesztő --- */

.editor-header {
  text-align: center;
  margin-bottom: 22px;
}

.editor-header h1 {
  margin-bottom: 6px;
}

/* Feladataim-fejléc (design-revízió D1): a fő művelet kézközelben — cím balra,
   az oldal egyetlen elsődleges gombja jobbra; mobilon egymás alá törik */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  text-align: left;
}

.dash-header h1 {
  margin: 0;
}

/* Link-képernyő (design-revízió D1): a "Kész!" heading h1-ként él (a hero itt
   nem renderelődik), de a kártya nyugalmához mért méretben */
.links-heading {
  font-size: 1.55rem;
  margin: 0 0 14px;
}

.checklist-builder {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-builder li {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.expiry-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 22px;
}

.link-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: #fff;
}

/* a státusz-link megőrzendő szelvény: perforált keret */
.link-box.link-box-status {
  background: var(--stamp-soft);
  border: 1.5px dashed var(--stamp);
}

.link-box .link-url {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--pen);
  word-break: break-all;
  display: block;
  margin: 8px 0;
}

.link-box-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.link-box-head strong {
  font-size: 0.95rem;
}

.share-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 36. boríték/F2: halk alsor a natív megosztás-gomb alatt — meta-szint,
   a gombbal együtt jelenik meg és tűnik el (csak ahol van Web Share) */
.share-app-hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  text-align: right;
}

.share-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
  background: var(--paper);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 0;
}

/* --- eszköz-lokális lista (vault, A csomag) --- */

.vault-row {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--dash);
  text-align: center;
  font-size: 0.88rem;
}

.vault-saved {
  color: var(--stamp);
  font-weight: 650;
}

.dash-new-project {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

/* Összecsukott létrehozó-vezérlő (design-revízió D2): a ritka művelet
   harmadlagos linkként pihen, csak kérésre nyílik inputtá */
.dash-create-row {
  margin: 0 0 14px;
  font-size: 0.88rem;
}

.dash-create-row.dash-new-team,
.dash-new-project.dash-new-team {
  margin: 22px 0 0;
}

/* Név-plafon hibája a létrehozó-sor alatt (33. kör): a wrapper viszi a külső
   margót, a flex-sor és a hibaüzenet szorosan egymás alatt ül */
.dash-create-box {
  margin-bottom: 18px;
}

.dash-create-box .dash-new-project,
.dash-create-box .dash-new-project.dash-new-team {
  margin: 0;
}

.dash-create-box.dash-new-team {
  margin: 22px 0 0;
}

.dash-project-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.dash-project-head h2 {
  margin: 18px 0 4px;
}

.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-entry {
  border-top: 1px solid var(--line);
  padding: 12px 4px;
}

.dash-entry-row {
  display: flex;
  flex-wrap: nowrap; /* a cím hossza nem rendezheti át a sort — a ⋯ helye fix */
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.dash-entry-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.dash-entry-title {
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* a cím nem link: hover-aláhúzás nincs (affordancia-kör, 2026-08-23) —
   az affordancia a mindig látható ▸ + desktopon a sor szelíd hover-tónusa */
@media (hover: hover) {
  .dash-entry-row:hover {
    background: color-mix(in srgb, #b08a3c 7%, transparent);
  }
}

.dash-meta {
  font-size: 0.8rem;
}

.role-tag {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

/* Szemantikus státusz-színek (design-revízió D3): a semleges az alap —
   a zöld kizárólag a kész állapoté, a vörös-barna a lejárt/törölté */
.dash-state {
  color: var(--muted);
  font-weight: 400;
}

.dash-state-done {
  color: var(--stamp);
  font-weight: 600;
}

.dash-state-expired {
  color: var(--danger);
}

.dash-entry-actions {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.85rem;
  flex: 0 0 auto; /* mindig jobb felül, a tartalomtól függetlenül */
}

.dash-entry-actions .nuke-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  text-align: right;
}

.dash-project-select select {
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  background: #fff;
  color: var(--ink);
}

/* --- mozgás-fegyelem --- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .check-draw path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* --- fiók-oldal --- */

.account-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.account-actions {
  margin-top: 16px;
}

.recovery-code {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  background: var(--stamp-soft);
  border: 1.5px dashed var(--stamp);
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}

.recovery-ack {
  display: block;
  margin: 12px 0;
}

.dash-banner {
  margin-bottom: 14px;
}

/* --- fiók-törlés (danger zone) + ÁSZF-checkbox --- */

.danger-zone {
  border-top: 1px dashed var(--dash);
  margin-top: 22px;
  padding-top: 14px;
}

.button-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.button-danger:hover {
  background: #833a2e;
  border-color: #833a2e;
}

/* Fiók-oldal szakaszos rendje (design-revízió D2): Fiók / Előfizetés /
   Beállítások / Veszélyzóna — a szakasz-cím adja az elválasztást */
.account-section-title {
  font-size: 1.12rem;
  margin: 26px 0 10px;
  padding-top: 18px;
  border-top: 1px dashed var(--dash);
}

.account-card > .account-section-title:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.account-section-danger {
  color: var(--danger);
}

/* a fiók-kártyán a szakasz-cím választ el — a blokkok saját vonala duplázna */
.account-card .danger-zone,
.account-card .email-block,
.account-card .billing-block {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* csomagválasztó gomb kiválasztott állapota (előfizetés-indítás lépés) */
.billing-block .button.is-selected {
  border-color: var(--stamp);
  background: var(--stamp-soft);
}

/* Vezérlő-szótár (design-revízió B1): destruktív trigger = piros KÖRVONALAS
   gomb — a kitöltött piros a megerősítő "Igen, törlöm" gombé marad */
.button-danger-outline {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.button-danger-outline:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.terms-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  margin: 14px 0 4px;
  cursor: pointer;
}

.terms-accept input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--stamp);
  flex-shrink: 0;
}

/* --- jelszó-erősség jelző --- */

.pw-strength {
  font-size: 0.8rem;
  margin: 4px 0 0;
}

.pw-weak { color: var(--danger); }
.pw-ok { color: var(--muted); }
.pw-strong { color: var(--stamp); }

/* --- e-mail-kezelő blokk a fiók-oldalon --- */

.email-block {
  border-top: 1px dashed var(--dash);
  margin-top: 18px;
  padding-top: 6px;
}

.email-add-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* --- jelszómező megjelenítés-kapcsolóval --- */

.pw-field {
  position: relative;
}

.pw-field .input {
  padding-right: 82px;
}

.pw-toggle {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  padding: 2px 8px;
}

/* --- statisztika-oldal --- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.stat-tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--stamp);
}

.stat-masked {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.stat-weekly h2 {
  font-size: 1.1rem;
}

.stat-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 8px;
}

.stat-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.stat-bar {
  width: 100%;
  max-width: 46px;
  background: var(--stamp);
  opacity: 0.85;
  border-radius: 4px 4px 0 0;
}

.stat-bar-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
}

.stat-ops {
  border-top: 1px dashed var(--dash);
  margin-top: 24px;
  padding-top: 14px;
}

/* --- fejléc-wordmark + hero (élesítés előtti kör) --- */

.site-header {
  text-align: center;
  margin-bottom: 14px;
}

/* Munkavégző-nav a fejlécben (design-revízió D2, terv B4): kis, harmadlagos
   sor a wordmark alatt — mobilon (320-on is) ugyanez a sor, elfér */
.site-nav {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

/* D4: csendes fülek — nyugalmi sima szöveg, hover halvány pasztilla; se
   aláhúzás, se kék */
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-nav a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--stamp) 8%, transparent);
}

.site-nav a.site-nav-active {
  color: var(--stamp-deep);
  font-weight: 600;
  background: color-mix(in srgb, var(--stamp) 10%, transparent);
}

/* D4: a navigáció egyetlen CTA-ja — kis kitöltött zöld gomb a nav sorában
   (a dashboard oldal-szintű gombjának ratifikált kivezetésével) */
.site-nav a.site-nav-cta {
  background: var(--stamp);
  color: #fff;
  font-weight: 600;
  padding: 3px 12px;
}

.site-nav a.site-nav-cta:hover {
  background: var(--stamp-deep);
}

/* D4: nyelvváltó a fejléc jobb szélén — HU | EN, az aktív fél csendes címke */
.site-header {
  position: relative;
}

/* D4-hotfix (György fogása): VALÓDI szegmentált váltó — fix sorrend (HU
   balra, EN jobbra), a KIVÁLASZTOTT fél kap kiemelést, csere soha nincs */
.site-header .locale-switch,
.shell-brand .locale-switch {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--stamp) 24%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--stamp) 4%, transparent);
}

.locale-switch .locale-opt {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.locale-switch .locale-opt:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--stamp) 10%, transparent);
}

.locale-switch .locale-opt.locale-current {
  background: color-mix(in srgb, var(--stamp) 14%, transparent);
  color: var(--stamp-deep);
  font-weight: 700;
  cursor: default;
}

.site-header a,
.shell-brand a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.site-header a:hover,
.shell-brand a:hover {
  color: var(--stamp);
}

.hero {
  text-align: center;
  margin-bottom: 22px;
}

.hero-line {
  font-size: clamp(1.5rem, 4.6vw, 1.95rem);
  margin-bottom: 10px;
}

.hero-rotate {
  color: var(--stamp);
  font-style: italic;
  display: inline-block;
  animation: hero-word-in 0.45s ease-out;
}

@keyframes hero-word-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.trust-list {
  list-style: none;
  margin: 0 auto 6px;
  padding: 0;
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-how {
  font-size: 0.9rem;
  margin: 4px 0 0;
}

@media (max-width: 480px) {
  .trust-list {
    font-size: 0.84rem;
  }

  .hero {
    margin-bottom: 16px;
  }
}

/* --- hogyan-működik történet-csík --- */

.story-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0 26px;
}

@media (max-width: 640px) {
  .story-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.story-panel {
  margin: 0;
  text-align: center;
}

.story-panel svg {
  width: 100%;
  height: auto;
  display: block;
}

.story-panel figcaption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}

.story-panel figcaption strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.98rem;
}

.story-panel figcaption span {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

/* rajzelemek */
.sp-card {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.5;
}

.sp-stripe {
  fill: var(--stamp);
  opacity: 0.85;
}

.sp-line {
  stroke: var(--dash);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.sp-box {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
}

/* 1. panel: a sorok megíródnak, ütemezve, végtelen szelíd ciklusban */
.sp-write {
  stroke: var(--ink);
  opacity: 0.55;
  stroke-dasharray: 100;
  animation: sp-draw 6s ease-in-out infinite;
}

.sp-w1 { animation-delay: 0s; }
.sp-w2 { animation-delay: 0.5s; }
.sp-w3 { animation-delay: 1s; }
.sp-w4 { animation-delay: 1.5s; }

@keyframes sp-draw {
  0% { stroke-dashoffset: 100; }
  22%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

/* 2. panel: menetelő perforáció a címzett felé */
.sp-route {
  fill: none;
  stroke: var(--stamp);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 4 8;
  animation: sp-march 1.4s linear infinite;
}

@keyframes sp-march {
  to { stroke-dashoffset: -12; }
}

.sp-node {
  fill: var(--stamp-soft);
  stroke: var(--stamp);
  stroke-width: 1.6;
}

.sp-node-check {
  fill: none;
  stroke: var(--stamp);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3. panel: a pipák sorban tollvonásként */
.sp-check {
  fill: none;
  stroke: var(--stamp);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  animation: sp-check-draw 7s ease-out infinite;
}

.sp-c1 { animation-delay: 0.4s; }
.sp-c2 { animation-delay: 1.3s; }
.sp-c3 { animation-delay: 2.2s; }

@keyframes sp-check-draw {
  0% { stroke-dashoffset: 26; }
  8%, 90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 26; }
}

/* 4. panel: a cetli elhalványul, a pipa marad */
.sp-card-dashed {
  stroke-dasharray: 6 5;
}

.sp-line-dashed {
  stroke-dasharray: 5 6;
}

.sp-dissolve {
  animation: sp-fade 7s ease-in-out infinite;
}

@keyframes sp-fade {
  0%, 25% { opacity: 1; }
  60%, 85% { opacity: 0.18; }
  100% { opacity: 1; }
}

.sp-final {
  stroke-dasharray: 40;
  stroke-dashoffset: 0;
}

/* reduced-motion: a globális szabály leállítja az animációkat; a statikus
   végállapotok (megírt sorok, kipipált pipák) így is teljes képet adnak */
@media (prefers-reduced-motion: reduce) {
  .sp-write { stroke-dashoffset: 0; }
  .sp-check { stroke-dashoffset: 0; }
  .sp-dissolve { opacity: 1; }
}

/* --- lenyitható technika-blokk (hogyan-működik) --- */

.tech-details summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.tech-details summary::-webkit-details-marker {
  display: none;
}

.tech-details summary::after {
  content: "▾";
  font-size: 0.8rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.tech-details[open] summary::after {
  transform: rotate(180deg);
}

.tech-details summary:hover {
  color: var(--ink);
}

.tech-why {
  margin-top: 10px;
  font-style: italic;
}

/* --- formázás-segítő (leírás-mező) --- */

.fmt-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.fmt-button {
  font: inherit;
  font-size: 0.78rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 7px;
  padding: 3px 10px;
  cursor: pointer;
}

.fmt-button:hover {
  background: var(--stamp-soft);
}

.fmt-preview-toggle {
  margin-left: auto;
  color: var(--stamp);
  font-weight: 600;
}

.editor-preview {
  border: 1px dashed var(--dash);
  border-radius: 9px;
  padding: 12px 14px;
  min-height: 148px;
  background: var(--card);
  margin-bottom: 0;
}

/* --- végleges törlés (nuke) + dashboard-rend + oszlopos nézet --- */

/* Meta-degradálás (design-revízió D3, terv B2): a törlés-dátum halk sor a
   kártya alján — a /t/ közép-rendjéhez igazítva, a /s/-en balra */
.auto-delete-note {
  font-size: 0.85rem;
}

.task-card .auto-delete-note {
  margin: 16px 0 0;
  text-align: center;
}

.status-card .auto-delete-note {
  margin: 14px 0 0;
}

/* Destruktív zóna (design-revízió B1/D1): saját, elválasztott blokk a kártya
   legalján — sosem jóindulatú műveletek tőszomszédságában. A /t/ kártya alja
   középre rendezett, a /s/ kártyáé balra — a zóna a kártyája rendjét követi. */
.danger-zone {
  margin-top: 26px;
  border-top: 1px dashed var(--dash);
  padding-top: 16px;
  font-size: 0.9rem;
}

.task-card .danger-zone {
  text-align: center;
}

.nuke-confirm {
  margin-top: 10px;
  background: var(--danger-soft);
}

.nuke-inline {
  font-size: 0.82rem;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.nuke-inline .flash {
  margin: 0;
}

.nuke-inline .button-danger {
  padding: 3px 10px;
  font-size: 0.8rem;
}

.state-badge.state-deleted {
  color: var(--danger);
}

.dash-inactive {
  border-top: 1px dashed var(--dash);
  margin-top: 22px;
  padding-top: 12px;
}

.dash-inactive summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dash-inactive summary::-webkit-details-marker {
  display: none;
}

.dash-inactive summary::after {
  content: "▾";
  font-size: 0.8rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.dash-inactive[open] summary::after {
  transform: rotate(180deg);
}

.dash-inactive .dash-entry {
  opacity: 0.7;
}

/* Design-revízió D2 (terv B3): a lista-oldal a kártya TELJES szélességét
   használja — a projektek egymás alatt, teljes-szélességű sorokkal (a korábbi
   oszlop-grid ~320 px-es hasábokba szorította a tartalmat); a sor desktopon
   egy sorban (cím + pillek + státusz + meta), a lenyitott tartalom két hasáb
   (bal: tartalom, jobb: idővonal). Dokumentum-oldalak érintetlenek. */
@media (min-width: 1000px) {
  .page-wide {
    max-width: 1180px;
  }

  .page-wide .site-header {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .dash-entry-main {
    flex-direction: row;
    align-items: baseline;
    column-gap: 12px;
    flex-wrap: wrap;
  }

  .dash-entry-main .dash-note {
    flex-basis: 100%;
    margin: 0;
  }

  .dash-expand:has(.dash-expand-timeline) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 36px;
    align-items: start;
  }

  .dash-expand-timeline li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .dash-expand-timeline time {
    white-space: nowrap;
  }
}

/* ---- Bizonyíték-export: igazolás-dokumentum + ellenőrző oldal (2. fázis) ---- */

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82em;
  word-break: break-all;
}

.cert-page {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

.cert-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}

/* 36. boríték/F1: iOS-PWA útbaigazítás a halott print-gomb helyén */
.cert-pwa-hint {
  margin: 0;
  font-size: 0.9rem;
  max-width: 34rem;
}

.cert-appendix-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.cert-doc {
  padding: 2rem;
}

.cert-doc-header {
  text-align: center;
  border-bottom: 2px dashed var(--stamp);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.cert-wordmark {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stamp-deep);
}

.cert-skeleton-banner {
  border: 2px solid var(--pen);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  color: var(--pen);
}

.cert-caption {
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.75;
  margin-bottom: 0.75rem;
}

.cert-certified {
  border: 2px solid var(--stamp);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  background: var(--stamp-soft);
}

.cert-certified h2 {
  color: var(--stamp-deep);
}

.cert-content {
  border: 2px solid var(--pen);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.cert-content h2 {
  color: var(--pen);
}

.cert-table {
  width: 100%;
  border-collapse: collapse;
}

.cert-table th,
.cert-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.35rem 0.5rem 0.35rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cert-table th {
  white-space: nowrap;
  font-weight: 600;
  padding-right: 1rem;
}

.cert-table td.mono {
  word-break: break-all;
}

.cert-checklist li::marker {
  content: "☐  ";
}

.cert-certblock-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.cert-qr {
  flex: 0 0 9rem;
  width: 9rem;
  height: 9rem;
  color: var(--ink);
}

.cert-string {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding: 0.75rem;
  overflow-x: auto;
}

.cert-appendix {
  border-top: 2px dashed var(--pen);
  padding-top: 1rem;
  margin-top: 1.25rem;
}

.cert-appendix-label {
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
}

.cert-doc-footer {
  border-top: 2px dashed var(--stamp);
  margin-top: 1.5rem;
  padding-top: 1rem;
  font-size: 0.9rem;
}

.cert-export-row {
  margin-top: 0.5rem;
}

/* --- ellenőrző oldal --- */

.verify-input {
  width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
}

.verify-result {
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.verify-valid {
  border: 2px solid var(--stamp);
  background: var(--stamp-soft);
}

.verify-invalid {
  border: 2px solid #a33;
  background: #f7e9e9;
}

.verify-ok {
  color: var(--stamp-deep);
  font-weight: 600;
}

.verify-bind-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.verify-bind-row .input {
  flex: 1 1 auto;
}

.verify-keylist {
  font-size: 0.85rem;
  word-break: break-all;
}

.verify-honesty,
.verify-keys {
  margin-top: 2rem;
}

@media (max-width: 640px) {
  .cert-certblock-row {
    flex-direction: column;
  }

  .cert-doc {
    padding: 1.25rem;
  }
}

/* --- nyomtatás: csak maga a dokumentum, tiszta papíron --- */
@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .page {
    padding: 0;
  }

  .cert-doc {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .cert-certified,
  .cert-content,
  .cert-appendix,
  .cert-doc-footer {
    break-inside: avoid;
  }

  .cert-string {
    background: none;
    border: 1px solid #ccc;
  }
}

/* ---- PIN-kapu (2. fázis §2) ---- */

.pin-input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.35em;
  max-width: 10rem;
}

.pin-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
}

.pin-card {
  text-align: center;
}

.pin-note {
  margin: 0.5rem 0 1rem;
}

/* ---- QR a link-képernyőn (személyes átadás) ---- */

.link-qr {
  text-align: center;
  padding: 0.75rem 0 0.25rem;
}

.link-qr svg {
  width: 11rem;
  height: 11rem;
  max-width: 60vw;
  color: var(--ink);
}

/* ---- mobil: a tanúsítvány-táblázat sorai egymás alá tördelve ----
   (a nowrap címke + 43 karakteres mono-érték együtt szélesebb a kijelzőnél) */
@media (max-width: 640px) {
  .cert-table tr {
    display: block;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .cert-table th,
  .cert-table td {
    display: block;
    border-bottom: none;
    padding: 0;
    white-space: normal;
    word-break: break-word;
  }

  .cert-table td.mono {
    word-break: break-all;
  }

  .verify-bind-row {
    flex-wrap: wrap;
  }
}

/* ---- Dashboard-figyelem réteg (2. fázis §3): nyugodt jelzés-nyelv ---- */

.dash-attn {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--pen);
  color: var(--pen);
  background: transparent;
}

.dash-attn-doneNew {
  border-color: var(--stamp);
  color: var(--stamp-deep);
  background: var(--stamp-soft);
}

.dash-attn-expiresToday,
.dash-attn-expiresTomorrow {
  border-color: #8a6d2c;
  color: #8a6d2c;
}

.dash-attn-notOpened {
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

/* Változott a legutóbbi látogatás óta: szelíd kiemelés, nem riasztás */
.dash-changed {
  border-left: 3px solid var(--pen);
  padding-left: 0.6rem;
  background: color-mix(in srgb, var(--pen) 5%, transparent);
  border-radius: 4px;
}

/* ---- Sor-műveletek: ⋯-menü + eltávolítás-toast (ratifikálva 2026-08-19) ---- */

.dash-menu-wrap {
  position: relative;
  display: inline-block;
}

.dash-menu-button {
  border: 1px solid transparent;
  background: none;
  border-radius: 6px;
  padding: 0 0.5rem;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.65;
  cursor: pointer;
}

.dash-menu-button:hover,
.dash-menu-button[aria-expanded="true"] {
  opacity: 1;
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.dash-menu {
  /* a pozíciót inline style adja (position:fixed a gomb helyéből számolva) */
  min-width: 14rem;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  padding: 0.35rem;
  z-index: 30;
}

.dash-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.dash-menu-item:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.dash-menu-current {
  font-weight: 700;
}

.dash-menu-danger {
  margin-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 0 0 6px 6px;
  color: #8a3333;
}

.dash-menu-confirm {
  padding: 0.5rem 0.6rem;
  font-size: 0.88rem;
  max-width: 18rem;
}

.dash-menu-confirm p {
  margin: 0 0 0.6rem;
}

.dash-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  z-index: 40;
}

.dash-toast .button {
  padding: 0.2rem 0.7rem;
}

/* ---- Lenyitható sor (accordion, ratifikálva 2026-08-22) ---- */

.dash-expand-toggle {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.dash-chevron {
  display: inline-block;
  width: 0.9em;
  font-size: 0.8em;
  color: var(--stamp);
  transition: transform 0.15s ease;
}

.dash-expand-toggle[aria-expanded="true"] .dash-chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .dash-chevron {
    transition: none;
  }
}

.dash-expand {
  margin: 8px 0 4px 1.1em;
  padding: 10px 14px;
  border-left: 2px dashed var(--stamp-soft);
  font-size: 0.9rem;
}

/* Design-revízió D3 (terv B2): a dátum-sor halk meta a tartalom alján —
   a .dash-hard-date osztály szemantikus horgonyként megmarad (date-truth őr),
   de a hangereje a metáé */
.dash-expand-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.dash-hard-date {
  font-weight: 400;
  color: inherit;
}

.dash-expand-progress {
  margin: 0 0 4px;
  font-size: 0.8rem;
}

.dash-expand-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.dash-expand-checklist li.is-checked {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* D3-söprés: az accordion-checklist ugyanazt a read-only dobozt kapja, mint
   a /s/ — az accordion léptékéhez kicsinyítve */
.dash-expand-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
}

.dash-expand-checklist .ro-check {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 12px;
}

.dash-expand-reply {
  margin: 0 0 10px;
}

.dash-expand-reply .muted {
  font-size: 0.8rem;
  margin: 0 0 2px;
}

.dash-expand-timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: 0.82rem;
}

.dash-expand-timeline time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.dash-expand-open {
  margin: 0;
}

/* ---- Accordion-kör 2 (2026-08-23): leírás a lenyitott sorban, plafonnal ---- */

.dash-expand-desc {
  max-height: 10rem;
  overflow: hidden;
  position: relative;
  font-size: 0.88rem;
  margin: 0 0 10px;
}

.dash-expand-desc.is-truncated::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
}

.dash-expand-fulldesc {
  margin: -4px 0 12px;
  font-size: 0.85rem;
}

/* ---- Szerkesztő-kör (2026-08-23): opcionális-jelölés + hiba-horgonyzás ---- */

.optional-tag {
  font-weight: 400;
  font-size: 0.78em;
  color: var(--muted);
}

.input-error {
  border-color: #8a6d2c;
}

.input-error:focus {
  outline-color: #8a6d2c;
}

.field-error {
  color: #8a6d2c;
  font-size: 0.85rem;
  margin: 4px 0 0;
}

/* ---- Csapat-tér (SPEC §13.7): megjelölt projekt-csoport ---- */

.dash-team {
  margin-top: 26px;
  border-top: 2px dashed var(--stamp-soft);
  padding-top: 14px;
}

.dash-team-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.dash-team-head h2 {
  margin: 0;
}

.dash-team-badge {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  border: 1px solid var(--stamp);
  color: var(--stamp-deep);
  border-radius: 4px;
  padding: 1px 6px;
}

.dash-team-count {
  font-size: 0.8rem;
}

.dash-team-toggle {
  font-size: 0.8rem;
  margin-left: auto;
}

.dash-team-toggle .link-button.is-active {
  font-weight: 700;
  text-decoration: none;
  color: var(--stamp-deep);
}

.dash-addedby {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 0.5rem;
}

.dash-assignee {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--stamp);
  color: var(--stamp-deep);
  background: var(--stamp-soft);
}

.dash-menu-team-target {
  color: var(--stamp-deep);
}

.dash-members {
  max-width: 22rem;
}

.dash-member-row {
  margin: 0 0 6px;
}

.dash-member-row .mono {
  font-size: 0.68rem;
  display: block;
  color: var(--muted);
}

.dash-invite-banner .button {
  padding: 2px 10px;
}

/* ---- Előfizetés-blokk (SPEC §14) ---- */

.billing-block {
  margin: 18px 0;
  border-top: 1px dashed var(--stamp-soft);
  padding-top: 12px;
}

.founder-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--stamp-deep);
}

.invoice-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 0.85rem;
}

.invoice-list li {
  margin: 0 0 4px;
}

.waiver-accept {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.85rem;
  margin: 10px 0 4px;
  cursor: pointer;
}

/* ---- Küldői lezárás (2026-08-23): őszinte pill — NEM a címzetti Kész ---- */

.dash-closed-pill {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px dashed var(--muted);
  color: var(--muted);
  background: transparent;
}

.closure-row {
  margin-top: 0.4rem;
}

/* ---- Mellékletek (SPEC §15) ---- */

.attach-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.attach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--dash);
  font-size: 0.92rem;
}

.attach-row .attach-name {
  min-width: 0;
}

.attach-row .attach-flash,
.attach-row .attach-preview {
  flex-basis: 100%;
}

.attach-row:last-child {
  border-bottom: none;
}

.attach-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.attach-size {
  font-size: 0.85rem;
}

.attach-progress {
  font-variant-numeric: tabular-nums;
}

.attach-failed {
  color: #8a6d2c;
  font-size: 0.85rem;
}

.attach-remove {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.85rem;
}

/* Rendszer-hű form-vezérlők (design-revízió B5): a natív input rejtve, de
   élőben marad — fókuszálható/kitölthető, csak nem látszik (nem display:none,
   hogy a picker és a tesztek is elérjék) */
.sr-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.attach-trigger {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9rem;
}

.sr-input:focus-visible + .attach-trigger {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

.date-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.date-trigger {
  font-weight: 400;
}

.date-control .sr-input:focus-visible ~ .date-trigger {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

.attach-block {
  margin: 14px 0;
}

.attach-block .field-label {
  margin-bottom: 0;
}

.attach-flash {
  margin: 4px 0 0;
}

.attach-preview {
  margin-top: 8px;
}

.attach-preview img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--dash);
  border-radius: 4px;
}

.dash-expand-attach {
  overflow-wrap: anywhere;
}

/* ---- Sablongaléria (fazis2-brief §7) ---- */

.template-gallery {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  /* 1180-as kártyán 3 hasáb, 620-on 1 — a sorrend sor-folytonos marad
     (grid alap-folyás), a beachhead-sablon elöl (design-revízió D3) */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.template-card a {
  display: block;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--dash);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

.template-card a:hover {
  background: var(--paper-warm, rgba(0, 0, 0, 0.03));
}

.template-card h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.template-card .muted {
  font-size: 0.88rem;
  margin: 0 0 8px;
}

.template-count {
  font-size: 0.82rem;
  color: var(--stamp);
  margin: 0;
}

.template-page .template-back {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.template-intro {
  font-size: 1.02rem;
}

.template-checklist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.template-checklist li {
  padding: 5px 0;
  border-bottom: 1px dashed var(--dash);
}

.template-checklist li:last-child {
  border-bottom: none;
}

.template-cta-row {
  margin: 20px 0 4px;
}

.template-how {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px dashed var(--dash);
}

.template-how h2 {
  font-size: 1rem;
}

.template-how ol {
  margin: 8px 0 0;
  padding-left: 20px;
}

.template-how li {
  margin: 4px 0;
}

.template-home-link {
  text-align: center;
  font-size: 0.9rem;
  margin: 14px 0 0;
}

/* ---- Státusz-oldal: teljes feladat-nézet, read-only (18. kör) ---- */

.status-checklist {
  list-style: none;
  margin: 10px 0 4px;
  padding: 0;
}

/* Design-revízió D3: vizuális paritás a /t/ checklisttel — read-only doboz,
   input elem nélkül (a capability-határ a DOM-ban is látszik) */
.status-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 10px 6px;
  border-top: 1px solid var(--line);
}

.status-checklist li:last-child {
  border-bottom: 1px solid var(--line);
}

.ro-check {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: #fff;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
}

.ro-check.is-on {
  background: var(--stamp);
  border-color: var(--stamp);
}

.status-checklist li.is-checked .ro-check-text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--dash);
}

/* ---- Link-panel + megjegyzés a dashboard-soron (2026-08-24) ---- */

.dash-link-panel {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px dashed var(--dash);
  border-radius: 6px;
}

.dash-link-panel .link-box {
  margin: 8px 0;
}

.dash-note {
  margin: 4px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  overflow-wrap: anywhere;
}

.dash-note-editor {
  margin: 8px 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dash-note-editor .input {
  flex: 1 1 220px;
}

.dash-note-editor .field-hint {
  flex-basis: 100%;
  margin: 0;
}

/* ---- Saját-feladat őr (17. kör) ---- */

.own-guard .guard-status-row {
  margin: 18px 0 6px;
}

.own-guard .guard-status-row .button {
  display: inline-block;
  text-decoration: none;
}

.own-guard .guard-proceed {
  font-size: 0.88rem;
}

.guard-copy {
  margin-top: 2px;
}

.dash-link-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.dash-panel-close {
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ---- Eszköz-váltó QR a /t/ és /s/ oldalon (19. kör) ---- */

.qr-row {
  margin-top: 10px;
  text-align: center;
  font-size: 0.88rem;
}

.qr-box {
  margin-top: 8px;
}

.qr-box svg {
  width: 160px;
  height: 160px;
}

/* ---- Fejléc ⓘ-popover (22. kör) ---- */

.dash-info {
  position: relative;
  display: inline-block;
  font-weight: 400;
}

.dash-info-button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--stamp);
  padding: 2px 4px;
  vertical-align: middle;
}

.dash-info-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: block;
  width: min(320px, 78vw);
  padding: 10px 12px;
  background: var(--card, #fff);
  border: 1px solid var(--dash);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  font-size: 0.85rem;
  font-weight: 400;
  text-align: left;
  white-space: normal;
}

/* ---- Jogi EN-jelzések (24. kör) ---- */

.legal-governing {
  font-style: italic;
  font-size: 0.9rem;
  border-left: 3px solid var(--dash);
  padding-left: 10px;
}

.contract-language-note {
  font-style: italic;
}