/* ==========================================================================
   Nápověda Newlogic — rozcestník
   Vizuál 1:1 podle Outline (outline.newlogic.cz). Stejně jako Outline sleduje
   systémové schéma: light i dark tokeny jsou změřené z běžící instance.
   ========================================================================== */

/* Písmo — stejný @font-face i stack jako Outline ---------------------------- */
@font-face {
    font-family: "Inter";
    font-display: swap;
    font-feature-settings: "ss03", "cv05";
    src: url("../fonts/Inter.var.woff2") format("woff2");
}

/* Tokeny — Outline light ----------------------------------------------------- */
:root {
    color-scheme: light dark;

    --background: #ffffff;
    --header-background: #eef2f6;       /* Outline sidebar (light) */
    --header-hover: #dee5ed;            /* Outline workspace button :hover */
    --header-text: #111319;
    --text: #111319;
    --text-secondary: #394351;
    --text-tertiary: #4e5c6e;
    --divider: #dae1e9;
    --surface: #eef2f6;
    --hover: #f4f7fa;
    --hover-border: #cdd8e5;
    --link: #0366d6;
    --link-soft: rgba(3, 102, 214, .1);
    --button: #0366d6;
    --button-hover: #035abd;
    --white: #fff;

    --font: -apple-system, "system-ui", Inter, "Segoe UI", Roboto, Oxygen, sans-serif;

    --header-height: 64px;
    --doc-width: 896px;   /* 832 px textu + 2× 32 px padding = Outline .ProseMirror */
    --doc-padding: 32px;
}

/* Tokeny — Outline dark ------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #111319;
        --header-background: #08090c;   /* Outline sidebar (dark) */
        --header-hover: #12141b;        /* Outline workspace button :hover */
        --header-text: #e6e6e6;
        --text: #e6e6e6;
        --text-secondary: #8291a6;
        --text-tertiary: #66778f;
        --divider: #262a37;
        --surface: #1f2128;
        --hover: #1a1e28;
        --hover-border: rgba(255, 255, 255, .1);
        --link: #137ffb;
        --link-soft: rgba(19, 127, 251, .1);
    }
}

/* Reset ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, p { margin: 0; }
svg, img { display: block; }
a { color: inherit; }

::selection {
    background: var(--link);
    color: var(--white);
}

:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 8px;
    z-index: 100;
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--button);
    color: var(--white);
    font-size: 14px;
    text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* Horní lišta — geometrie 1:1 s Outline workspace tlačítkem v sidebaru ------- */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--header-height);      /* 64 px jako Outline */
    padding-right: 16px;
    background: var(--header-background);
    color: var(--header-text);
}

/* Outline: margin 8, padding 8, radius 4 → logo 32×32 skončí na x=16 / y=16 */
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px;
    padding: 8px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 17.25px;
    color: var(--header-text);
    text-decoration: none;
    transition: background .1s ease;
}
.brand:hover { background: var(--header-hover); }

.brand__logo {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

/* Tlačítko (Outline primary button) ------------------------------------------ */
.button {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    background: var(--button);
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .1s ease;
}
.button:hover { background: var(--button-hover); }

/* Dokument — shodné s Outline .ProseMirror (832 px textu, padding 0 32px) --- */
.doc {
    width: 100%;
    max-width: var(--doc-width);
    margin: 0 auto;
    padding: 24px var(--doc-padding) 48px;
}

.doc__title {
    margin-top: 28px;
    margin-bottom: .5em;
    font-size: 2.25em;
    font-weight: 600;
    line-height: 1.25;
}

.doc__lead {
    margin-bottom: 8px;
}

.doc__heading {
    margin-top: 28px;
    margin-bottom: .25em;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
}

/* Karty ---------------------------------------------------------------------- */
/* první mřížka nemá nad sebou nadpis, drží tedy stejný odstup jako sekce */
.doc__lead + .cards { margin-top: 28px; }

.cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 14px;
    border: 1px solid var(--divider);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.card:hover {
    background: var(--hover);
    border-color: var(--hover-border);
}
.card:active { transform: scale(.995); }

.card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-secondary);
    transition: background-color .12s ease, color .12s ease;
}
.card__icon svg { width: 20px; height: 20px; }
.card:hover .card__icon {
    background: var(--link-soft);
    color: var(--link);
}

.card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.card__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}

.card__desc {
    font-size: 14px;
    line-height: 21px;
    color: var(--text-secondary);
}

.card__arrow {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    opacity: 0;
    transform: translate(-3px, 3px);
    transition: opacity .12s ease, transform .12s ease;
}
.card:hover .card__arrow {
    opacity: 1;
    transform: none;
}

/* Notice (Outline .notice-block) --------------------------------------------- */
.notice {
    display: flex;
    gap: 8px;
    margin-top: 28px;
    padding: 8px 10px 8px 8px;
    border-left: 4px solid var(--link);
    border-radius: 4px;
    background: var(--link-soft);
}
.notice__icon {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--link);
}
.notice a {
    color: var(--link);
    text-decoration: none;
}
.notice a:hover { text-decoration: underline; }

/* Pomoc s AI — stejný informační blok jako kontakt na podporu -------------- */
.agent-help { margin-top: 16px; }
.agent-help__body { min-width: 0; }
.agent-help h2 { margin-bottom: 4px; font-size: 16px; line-height: 24px; font-weight: 600; }
.agent-help a { overflow-wrap: anywhere; }
.agent-help__example {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 22px;
}

/* Responzivita --------------------------------------------------------------- */
@media (max-width: 640px) {
    .doc { padding: 8px 16px 40px; }
    .doc__title { margin-top: 16px; }
    .cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}