/*
   Prezentace projektu na www. Samostatný soubor, ne app.css: administrace je
   nástroj do terénu a řídí se hustotou informací, prezentace se řídí tím, aby
   za deset sekund bylo jasné, co stroj dělá. Sdílené tokeny by táhly jedno
   rozhodnutí do druhého.

   Bez build kroku, jako všechno ostatní ve wwwroot.
*/

/* ------------------------------------------------------------- písmo ----- */

/* Variabilní, jeden soubor na podmnožinu. Rozsahy jsou opsané z Google Fonts,
   protože podmnožiny jsou jejich; kdyby se rozsah rozešel se souborem,
   prohlížeč by pro znak sáhl do souboru, který ho nemá, a vykreslil náhradu. */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ------------------------------------------------------------- barvy ----- */

:root {
    color-scheme: light dark;

    /* Papír má fialový podtón, aby se s akcentem držel v jedné rodině.
       Neutrální šedá by z fialové udělala cizí prvek. */
    --paper: #edebf4;
    --panel: #1b1830;
    /* Na světlém papíru je tabule tmavá deska a hranu nepotřebuje. */
    --panel-edge: transparent;
    --ink: #1b1830;
    --dim: #625d7d;
    --rule: #c9c4db;
    --signal: #5b21d6;
    --on-panel: #e6e2f2;
    --on-panel-dim: #9b95b8;
    /* Jen pro řádek o vypršení přístupu. Druhá barva v paletě, která něco
       znamená — ne dekorace. */
    --lapse: #d98a92;

    --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #14121f;
        /* Světlejší než papír, ne stejná: tmavá deska na tmavém pozadí by
           splynula a tabule je jediná nápadná věc na stránce. */
        --panel: #262040;
        --panel-edge: rgba(255, 255, 255, 0.1);
        --ink: #ece9f6;
        --dim: #9b95b8;
        --rule: #322d49;
        --signal: #b79bff;
        --on-panel: #ece9f6;
        --on-panel-dim: #9b95b8;
        --lapse: #e79aa2;
    }
}

/* ------------------------------------------------------------ základ ----- */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1rem/1.65 "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: inherit;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--signal);
}

/* Viditelné zaostření. Bez toho se stránka nedá projít klávesnicí. */
:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

h1, h2, h3, .mark, .board-time, .host {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-optical-sizing: auto;
}

/* ------------------------------------------------------------- hlava ----- */

.top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0 18px;
}

.mark {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.mark:hover { color: inherit; }

.top nav {
    display: flex;
    align-items: baseline;
    gap: 22px;
    font-size: 0.9375rem;
}

/* Na telefonu zůstane jen značka a vstup do administrace. Zbytek jsou kotvy
   na stránce, kterou stejně projde rolováním. */
.top nav .anchor { display: none; }

@media (min-width: 760px) {
    .top nav .anchor { display: inline; }
}

.console {
    color: var(--signal);
    font-weight: 500;
    white-space: nowrap;
}

/* -------------------------------------------------------------- hero ----- */

.hero {
    display: grid;
    gap: 40px;
    padding: 28px 0 64px;
    border-top: 1px solid var(--rule);
}

@media (min-width: 980px) {
    .hero {
        grid-template-columns: 1.02fr 0.98fr;
        gap: 56px;
        padding: 44px 0 88px;
        align-items: start;
    }
}

.hero h1 {
    margin: 0;
    font-size: clamp(2.5rem, 7.2vw, 4.4rem);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.lead {
    max-width: 46ch;
    margin: 22px 0 0;
    font-size: 1.1875rem;
    line-height: 1.5;
}

.hero .sub {
    max-width: var(--measure);
    margin: 14px 0 0;
    color: var(--dim);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 30px;
}

.button {
    display: inline-block;
    padding: 12px 22px;
    border: 1px solid var(--signal);
    border-radius: 2px;
    background: var(--signal);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

@media (prefers-color-scheme: dark) {
    .button { color: #17142a; }
}

.button:hover {
    background: transparent;
    color: var(--signal);
}

.quiet {
    color: var(--dim);
    font-size: 0.9375rem;
}

/* -------------------------------------------------------------- tabl ----- */

/* Tabule. Jediný nápadný prvek na stránce: co stroj za den udělá, řádek po
   řádku, jako odjezdová tabule. Zbytek stránky se drží zpátky. */

.board {
    background: var(--panel);
    color: var(--on-panel);
    border: 1px solid var(--panel-edge);
    border-radius: 3px;
    padding: 6px 0 10px;
}

.board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 12px;
    color: var(--on-panel-dim);
    font-size: 0.8125rem;
}

.board-head strong {
    color: var(--on-panel);
    font-weight: 500;
    font-size: 0.9375rem;
}

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

.board li {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    gap: 2px 16px;
    padding: 11px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9375rem;
    line-height: 1.35;
}

.board-time {
    color: var(--on-panel);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.board-what { font-weight: 400; }

.board-note {
    grid-column: 2;
    color: var(--on-panel-dim);
    font-size: 0.875rem;
}

.board .lapse .board-time,
.board .lapse .board-what { color: var(--lapse); }

/* Jediná pohybová věc na stránce: řádky se po načtení srovnají, jako když
   tabule překlapne. Jednou, ne při každém rolování. */
@media (prefers-reduced-motion: no-preference) {
    .board li {
        opacity: 0;
        animation: settle 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    }

    .board li:nth-child(1) { animation-delay: 0.05s; }
    .board li:nth-child(2) { animation-delay: 0.12s; }
    .board li:nth-child(3) { animation-delay: 0.19s; }
    .board li:nth-child(4) { animation-delay: 0.26s; }
    .board li:nth-child(5) { animation-delay: 0.33s; }
    .board li:nth-child(6) { animation-delay: 0.40s; }
    .board li:nth-child(7) { animation-delay: 0.47s; }
}

@keyframes settle {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- sekce ----- */

.section {
    padding: 56px 0;
    border-top: 1px solid var(--rule);
}

.section > h2 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.section > .intro {
    max-width: var(--measure);
    margin: 0 0 36px;
    color: var(--dim);
}

/* Tři výklady vedle sebe, oddělené linkou. Karty by z nich udělaly tři
   stejně vážné dlaždice; tady jde o výklad, ne o výčet funkcí. */
.trio {
    display: grid;
    gap: 32px;
}

@media (min-width: 860px) {
    .trio {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .trio > div {
        padding: 0 28px;
        border-left: 1px solid var(--rule);
    }

    .trio > div:first-child { padding-left: 0; border-left: 0; }
    .trio > div:last-child { padding-right: 0; }
}

.trio h3 {
    margin: 0 0 10px;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.trio p {
    margin: 0;
    max-width: 40ch;
}

/* ------------------------------------------------------------ figury ----- */

/* Jedna konzole, několik botů. Nakreslené linkou, ne obrázkem: chová se to
   responzivně a nic se nemusí exportovat. */
.rig {
    margin-top: 34px;
}

.rig-console {
    padding: 14px 18px;
    border: 1px solid var(--ink);
    border-radius: 3px;
    font-weight: 500;
}

.rig-stem {
    width: 1px;
    height: 26px;
    margin-left: 28px;
    background: var(--rule);
}

.rig-figures {
    display: grid;
    gap: 12px;
}

@media (min-width: 700px) {
    .rig-figures { grid-template-columns: repeat(3, 1fr); }
}

.rig-figures > div {
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: 3px;
}

.rig-figures strong {
    display: block;
    font-weight: 600;
}

.rig-figures span {
    color: var(--dim);
    font-size: 0.875rem;
}

/* ------------------------------------------------------------- výpis ----- */

/* Technické údaje. Definiční seznam, protože to definiční seznam je. */
.specs {
    display: grid;
    gap: 0;
    margin: 30px 0 0;
}

@media (min-width: 780px) {
    .specs { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

.specs > div {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 4px 16px;
    padding: 13px 0;
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
}

.specs dt {
    color: var(--dim);
}

.specs dd {
    margin: 0;
}

/* ------------------------------------------------------------ adresy ----- */

.hosts {
    display: grid;
    gap: 0;
    margin: 30px 0 0;
    max-width: 720px;
}

.hosts > div {
    display: grid;
    grid-template-columns: minmax(0, 12.5rem) 1fr;
    gap: 2px 20px;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
}

.host {
    font-weight: 600;
    letter-spacing: -0.015em;
    word-break: break-all;
}

.hosts p {
    margin: 0;
    color: var(--dim);
    font-size: 0.9375rem;
}

/* -------------------------------------------------------------- pata ----- */

.foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 26px 0 40px;
    border-top: 1px solid var(--rule);
    color: var(--dim);
    font-size: 0.875rem;
}