/* ===========================================================================
   Yumee hub — long-form pages: support, privacy, terms, and the 404.

   The only pages on the site that are mostly words. Everything here exists to
   make a column of text readable in the house style: the shared page head
   (uppercase label, bold title with a purple underline, in the gradient band),
   a drawn contents card, tinted notes, and Unageo at a comfortable measure.
   Every value is a token from site.css.
   =========================================================================== */

.doc__lede { max-width: 52ch; }

/* The Slovak site's note that terms and privacy are English only. */
.doc__lang { max-width: 52ch; margin: 0 0 18px; }

.doc__meta {
    margin: 18px 0 0;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ------------------------------------------------------------- the grid --- */
/* Contents on the right, text on the left. The contents come FIRST in the
   markup: navigation a screen reader meets before the document, and a jump
   list at the top of a phone screen. */

.doc__grid { display: grid; gap: clamp(20px, 4vw, 48px); }
.doc__grid > * { min-width: 0; }

@media (min-width: 900px) {
    .doc__grid {
        grid-template-columns: minmax(0, 1fr) 248px;
        align-items: start;
    }
    .doc__toc  { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-total) + 12px); }
    .doc__body { grid-column: 1; grid-row: 1; }
}

/* ---------------------------------------------------------- contents ------ */

.doc__toc { padding: 18px 20px; }

.doc__toc h2 {
    margin: 0 0 6px;
    font-family: var(--font);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--ink-faint);
}

.doc__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }

.doc__toc a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;      /* grows if a link wraps, rather than overflowing */
    padding-block: 6px;
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
    border-bottom: var(--outline-soft);
}
.doc__toc li:last-child a { border-bottom: 0; }
.doc__toc a:hover { color: var(--purple-ink); }

.doc__toc a::before {
    counter-increment: toc;
    content: counter(toc);
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-round);
    background: var(--mist);
    font-weight: 600;
    font-size: .75rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------- prose ------ */

.prose { max-width: var(--measure); }

.prose h2 {
    margin: clamp(36px, 5vw, 52px) 0 12px;
    font-weight: 600;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    line-height: 1.2;
    scroll-margin-top: calc(var(--header-total) + 12px);
}
.prose > h2:first-child { margin-top: 0; }

.prose h3 {
    margin: 28px 0 8px;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    scroll-margin-top: calc(var(--header-total) + 12px);
}

.prose p { margin: 0 0 1em; line-height: 1.7; }

.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prose li { margin-bottom: .5em; line-height: 1.65; }
.prose li::marker { color: var(--purple); }

.prose strong { font-weight: 600; color: var(--ink); }

.prose code {
    font-family: var(--mono);
    font-size: .88em;
    padding: .12em .38em;
    border-radius: var(--r-xs);
    background: var(--mist);
    color: var(--purple-ink);
    overflow-wrap: anywhere;
}

.prose hr {
    margin: clamp(32px, 5vw, 48px) 0;
    border: 0;
    border-top: var(--outline-soft);
}

/* An aside that must not be missed — "this cannot be undone". It carries a
   written label, because a tint on its own is not a signal anyone is obliged
   to be able to see. */
.note { margin: 24px 0; padding: 18px 20px; }
.note__label { margin-bottom: 6px; color: var(--ink-soft); }
.note p:last-child { margin-bottom: 0; }

/* The controller card on the privacy page: label and value side by side,
   stacked on a phone. Long e-mail addresses wrap instead of widening the page.
   The name and address arrive in .legal-op__more only after "Show" (legal.js). */
.legal-op__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.legal-op__list dt { color: var(--ink-soft); font-size: .875rem; }
.legal-op__list dd { margin: 0; overflow-wrap: anywhere; }
.legal-op__more { margin-top: 6px; }
.legal-op__hint { margin: 12px 0 0; font-size: .875rem; color: var(--ink-soft); }
.legal-op__hint:empty { display: none; }
.legal-op [data-legal-show] { margin-top: 12px; }
@media (max-width: 480px) {
    .legal-op__list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .legal-op__list dd { margin-bottom: 8px; }
}

/* Numbered steps, each number in a small drawn circle. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.4em; }
.steps li { position: relative; padding-left: 46px; margin-bottom: 14px; line-height: 1.7; }
.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-round);
    border: var(--hairline);
    background: var(--lav);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
}

/* A table on a phone scrolls inside its own card; the page itself never does. */
.table-scroll {
    overflow-x: auto;
    margin: 0 0 1.4em;
    border: var(--outline-soft);
    border-radius: var(--r-md);
    background: var(--card);
}
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: var(--outline-soft);
}
.prose th {
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}
/* On the narrowest phones a column label may wrap: "What reaches them" held
   the privacy page's second table 2px wider than its card at 360 px. */
@media (max-width: 400px) {
    .prose thead th { white-space: normal; }
}
/* A row header reads as the row's title, not a label. */
.prose tbody th {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    white-space: normal;
    min-width: 9rem;
}
.prose tbody tr:last-child th,
.prose tbody tr:last-child td { border-bottom: 0; }

/* A three-column table would pan inside its card on a phone. Below 640 px each
   row becomes a small block instead: the title, the reason, then the last
   column under its own label (the privacy page's legal basis). */
@media (max-width: 640px) {
    .prose .table-stack thead { display: none; }
    .prose .table-stack tr { display: block; padding: 12px 14px; border-bottom: var(--outline-soft); }
    .prose .table-stack tbody tr:last-child { border-bottom: 0; }
    .prose .table-stack th,
    .prose .table-stack td { display: block; padding: 0; border: 0; min-width: 0; }
    .prose .table-stack td { margin-top: 4px; }
    .prose .table-stack td:last-child { color: var(--ink-soft); font-size: .875rem; }
    .prose .table-stack td:last-child::before { content: 'Legal basis: '; font-weight: 600; }
}

/* /licenses: one line per component, its licence and source under it. */
.lic-list { list-style: none; margin: 0 0 1.6em; padding: 0; border-top: var(--outline-soft); }
.lic-list__item { padding: 10px 0; border-bottom: var(--outline-soft); }
.lic-list__name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lic-list__version { font-weight: 400; color: var(--ink-soft); }
.lic-list__meta { margin: 2px 0 0; font-size: .875rem; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ------------------------------------------------- the other documents ---- */

.doc__foot {
    max-width: var(--measure);
    margin-top: clamp(40px, 6vw, 56px);
    padding-top: clamp(24px, 4vw, 32px);
    border-top: var(--outline-soft);
}
.doc__foot p { margin: 0 0 14px; color: var(--ink-soft); }
.doc__links { display: flex; flex-wrap: wrap; gap: 10px; }
/* The quiet link to the other language of a legal page (privacy, terms). */
.doc__foot .doc__lang-link { margin: 18px 0 0; font-size: .875rem; }

/* --------------------------------------------------------------- 404 ------ */
/* The character peeking, because nothing is wrong — the visitor is simply
   somewhere that does not exist. */

.lost yumee-mascot { --yu-mascot-size: clamp(150px, 24vw, 200px); }
.lost__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ------------------------------------------------------------ support ---- */
/* The questions as closed panels on the left, the "Write to us" card on the
   right (sticky on a wide screen, after the questions on a phone). */

.sup__grid { display: grid; gap: clamp(20px, 4vw, 40px); }
.sup__grid > * { min-width: 0; }

@media (min-width: 960px) {
    .sup__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: start; }
    .sup-contact { position: sticky; top: calc(var(--header-total) + 12px); }
}

.sup__h2 {
    margin: 0 0 16px;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

.sup-q { padding: 0; margin: 0 0 12px; overflow: hidden; }
.sup-q__q {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    padding: 18px 22px;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    color: var(--ink);
    transition: background var(--fast) var(--ease);
}
.sup-q__q::-webkit-details-marker { display: none; }
.sup-q__q:hover { background: var(--lav-50); }
.sup-q__q:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.sup-q__q svg { width: 20px; height: 20px; color: var(--purple-deep); transition: transform var(--fast) var(--ease); }
.sup-q[open] .sup-q__q svg { transform: rotate(180deg); }
.sup-q__a { padding: 0 22px 8px; max-width: none; }
.sup-q[open] .sup-q__a { animation: sup-open 260ms var(--ease) both; }
.sup-q__a h3 { margin-top: 8px; }
@keyframes sup-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.sup .doc__foot { margin-top: 28px; }

.sup-contact { padding: clamp(20px, 3vw, 28px); }
.sup-contact__icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-card); }
.sup-contact__icon svg { width: 24px; height: 24px; }
.sup-contact__title {
    margin: 14px 0 6px;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
.sup-contact__lead { margin: 0 0 16px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; }
.sup-contact__actions { display: grid; gap: 10px; margin: 0 0 16px; }
.sup-contact__mail { margin: 16px 0 0; font-size: .8125rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.sup-contact__mail a { color: var(--purple-ink); }

/* /blocked: why, and the appeal form, side by side on a wide screen. */
.blocked { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 900px) { .blocked { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }
.blocked .yu-card { min-width: 0; }
.blocked__why p { color: var(--ink-soft); line-height: 1.6; overflow-wrap: anywhere; }
.blocked__until { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: var(--ink) !important; font-weight: 600; }
.blocked__until svg { width: 18px; height: 18px; margin-top: 3px; color: var(--mint-ink); }

.sup-form .yu-field { margin-bottom: 14px; }
.sup-form .yu-select, .sup-form .yu-input, .sup-form .yu-textarea { width: 100%; font-size: 1rem; }
.sup-form__to { margin: 0 0 14px; font-size: .8125rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.sup-form__error { margin: 0 0 12px; font-size: .875rem; font-weight: 500; color: var(--danger); }
.sup-form__done { outline: none; animation: sup-open 320ms var(--ease) both; }
.sup-form__done p { margin: 0 0 8px; color: var(--ink-soft); }
.sup-form__done-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--mint-ink) !important;
}
.sup-form__done-title svg { width: 20px; height: 20px; flex: none; }

@media (prefers-reduced-motion: reduce) {
    .sup-q[open] .sup-q__a, .sup-form__done { animation: none; }
    .sup-q__q svg { transition: none; }
}