/* landing.css - the documentation and release pages (user guide, Architecture, Docker quickstart,
   privacy, the REST API and QR pages, every release page).
   The same look as the landing page (css/home.css, Docs/mockups/landing-redesign.html): warm ink and
   paper, the dartboard's red, Insignia for headings, Inter for text, Cascadia Code for code. The
   class names are the pages' own, so no page's markup changes with the style. */

@font-face { font-family: 'Insignia'; src: url('../fonts/Insignia-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cascadia Code'; src: url('../fonts/CascadiaCode-VariableFont_wght.ttf') format('truetype'); font-weight: 200 700; font-style: normal; font-display: swap; }

:root {
    --ink: #141210;
    --ink-3: #2b2723;
    --ink-line: #34302b;
    --on-ink: #f3eee6;
    --on-ink-2: #b4aca1;
    --paper: #f7f5f1;
    --paper-2: #eeeae3;
    --line: #ddd7cd;
    --text: #1a1815;
    --text-body: #38332d;
    --text-2: #5e574e;
    --red: #d63b2b;
    --red-dark: #b32f21;
    --mono: 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--paper);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* ── The bar at the top: the way back to the landing page ── */
.docs-back-link {
    position: sticky;
    top: 0;
    z-index: 50;
    display: block;
    background: rgba(20, 18, 16, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ink-line);
    color: var(--on-ink);
    font-family: 'Insignia', Georgia, serif;
    font-size: 18px;
    letter-spacing: 0.3px;
    text-decoration: none;
    padding: 18px max(24px, calc(50% - 380px));
    transition: color 0.15s ease;
}

.docs-back-link:hover { color: #fff; }

/* ── The page ── */
.docs-content {
    max-width: 808px;
    margin: 0 auto;
    padding: 64px 24px 72px;
}

.docs-content h1 {
    font-family: 'Insignia', Georgia, serif;
    font-weight: 400;
    font-size: clamp(36px, 5.4vw, 54px);
    line-height: 1.05;
    letter-spacing: 0.3px;
    color: var(--text);
    margin-bottom: 14px;
}

.docs-subtitle {
    color: var(--text-2);
    font-size: 19px;
    line-height: 1.5;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

/* Contents: a card, its heading as a small red label */
.docs-toc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 26px 18px;
    margin-bottom: 48px;
}

.docs-toc h2,
.docs-content .docs-toc h2 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 10px;
    border: none;
    padding: 0;
}

.docs-toc ol { margin: 0 0 0 20px; color: var(--text-2); }
.docs-toc li { margin-bottom: 4px; font-size: 15px; }
.docs-toc a,
.docs-content .docs-toc a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.docs-toc a:hover,
.docs-content .docs-toc a:hover { color: var(--red); border-color: var(--red); }

.docs-content h2 {
    font-family: 'Insignia', Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 32px);
    line-height: 1.12;
    color: var(--text);
    margin: 56px 0 14px;
    scroll-margin-top: 72px;
}

.docs-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 28px 0 8px;
    scroll-margin-top: 72px;
}

.docs-content p { margin-bottom: 14px; color: var(--text-body); }
.docs-content ul, .docs-content ol { margin: 0 0 16px 24px; color: var(--text-body); }
.docs-content li { margin-bottom: 6px; }
.docs-content li::marker { color: var(--text-2); }
.docs-content strong { color: var(--text); }

.docs-content img.docs-screenshot {
    max-width: 480px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(26, 24, 21, 0.10);
    margin: 1.5em 0;
    display: block;
    cursor: zoom-in;
}

.docs-content hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; }

.docs-content a { color: var(--red); text-decoration: underline; text-decoration-color: rgba(214, 59, 43, 0.35); text-underline-offset: 3px; }
.docs-content a:hover { color: var(--red-dark); text-decoration-color: currentColor; }

.docs-content code {
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 0.86em;
    font-family: var(--mono);
    color: var(--text);
    overflow-wrap: anywhere;
}

.docs-content pre {
    background: var(--ink);
    border: 1px solid var(--ink-line);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 14px 0 22px;
    overflow-x: auto;
}

.docs-content pre code {
    background: none;
    border: 0;
    padding: 0;
    color: #e9dfcf;
    overflow-wrap: normal;
    font-size: 13.5px;
    line-height: 1.7;
    font-family: var(--mono);
}

/* Terminal (bash) blocks: a window bar with the board's red, amber and green */
.terminal-wrap { margin: 14px 0 22px; }

.terminal-bar {
    background: #2a2622;
    border-radius: 12px 12px 0 0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
}

.terminal-bar::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 16px 0 0 #e0a43a, 32px 0 0 #2f8a57;
}

.terminal-wrap pre {
    margin: 0;
    border-radius: 0 0 12px 12px;
    background: var(--ink);
    border: 1px solid #2a2622;
    border-top: none;
    padding: 18px 20px;
    overflow-x: auto;
}

.terminal-wrap pre code {
    background: none;
    border: 0;
    padding: 0;
    color: #b9e3c6;
    overflow-wrap: normal;
    font-size: 13.5px;
    line-height: 1.7;
    font-family: var(--mono);
}

/* Quick Start step list: white cards, the number in an ink circle */
.docs-quickstart { list-style: none; margin: 0 0 16px 0; padding: 0; counter-reset: quickstart-counter; }

.docs-quickstart li {
    counter-increment: quickstart-counter;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-body);
}

.docs-quickstart li > div { flex: 1; }
.docs-quickstart li > div > strong:first-child { color: var(--text); font-size: 1.05rem; }

.docs-quickstart li::before {
    content: counter(quickstart-counter);
    font-family: 'Insignia', Georgia, serif;
    font-size: 1.05rem;
    color: var(--on-ink);
    background: var(--ink);
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Tables: a white card with rules */
.docs-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 14px 0 22px;
    font-size: 14.5px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.docs-content th {
    background: var(--paper-2);
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

.docs-content td {
    padding: 10px 14px;
    color: var(--text-body);
    border-bottom: 1px solid var(--paper-2);
    vertical-align: top;
}

.docs-content tr:last-child td { border-bottom: none; }

/* ── Buttons ── */
.btn-github {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--on-ink);
    font-weight: 650;
    font-size: 15px;
    text-decoration: none;
    border-radius: 10px;
    padding: 12px 20px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-github:hover { background: var(--ink-3); transform: translateY(-1px); }

.docs-content .btn-github { color: var(--on-ink); text-decoration: none; }
.docs-content .btn-github:hover { color: #fff; }

/* Release pages: the download is the page's main action */
.docs-content .btn-download-top,
.docs-content .btn-download-bottom { background: var(--red); color: #fff; }
.docs-content .btn-download-top:hover,
.docs-content .btn-download-bottom:hover { background: var(--red-dark); }
.docs-content .btn-download-top { margin-bottom: 32px; }
.docs-content .btn-download-bottom { margin-top: 32px; }

/* ── Footer: a dark band, as on the landing page ── */
.landing-footer {
    background: var(--ink);
    color: var(--on-ink-2);
    padding: 40px 24px;
    text-align: center;
    font-size: 14px;
    line-height: 1.8;
}

.landing-footer a { color: var(--on-ink); text-decoration: none; border-bottom: 1px solid var(--ink-line); transition: color 0.15s ease, border-color 0.15s ease; }
.landing-footer a:hover { color: #fff; border-color: var(--red); }

.footer-cheeky { margin-top: 8px; font-size: 13px; font-style: italic; color: #8f877c; }

.footer-egg {
    margin-left: 8px;
    font-size: 12px;
    color: #6a635a;
    border: 0 !important;
    font-family: var(--mono);
    opacity: 0.8;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-egg:hover { opacity: 1; color: var(--on-ink-2); }

.docs-footer { margin-top: 0; }

/* ── Lightbox (js/lightbox.js) ── */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 9, 8, 0.88);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.lightbox.is-open {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}

.lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #1a1815;
}

.lightbox-close:hover {
    background: #eeeae3;
}


.lightbox-trigger { cursor: zoom-in; }

/* the magnifier on hover, for images that open in the lightbox */
.has-lightbox { position: relative; display: inline-block; }

.has-lightbox::after {
    content: '';
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15L20 20'/%3E%3Cpath d='M10 7v6M7 10h6'/%3E%3C/svg%3E") center/18px no-repeat;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.has-lightbox:hover::after { opacity: 1; }

@media (max-width: 560px) {
    .docs-back-link { font-size: 16px; padding: 15px 16px; }
    .docs-content { padding: 44px 16px 56px; }
    .docs-toc { padding: 18px 18px 14px; }
    .docs-quickstart li { padding: 14px; gap: 14px; }
    .docs-content table { display: block; overflow-x: auto; }
}

/* ── QR Generator ── */
.qr-page .docs-content {
    max-width: 760px;
}

.qr-container {
    width: 100%;
    padding: 2.5rem 2rem 2rem;
    background: #ffffff;
    border: 2px solid #ddd7cd;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(26, 24, 21, 0.12);
    transition: box-shadow 0.3s ease;
}

.qr-container:hover {
    box-shadow: 0 8px 32px rgba(26, 24, 21, 0.18);
}

.qr-input-row {
    position: relative;
    margin-bottom: 1rem;
}

.qr-container textarea,
.qr-container .label-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #ddd7cd;
    border-radius: 10px;
    background: #f7f5f1;
    color: #1a1815;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.qr-container textarea {
    resize: vertical;
    min-height: 66px;
}

.qr-container textarea:focus,
.qr-container .label-input:focus {
    border-color: #d63b2b;
}

.qr-container textarea::placeholder,
.qr-container .label-input::placeholder {
    color: #8f877c;
}

.qr-char-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.7rem;
    color: #8f877c;
}

.qr-char-count.warn { color: #d63b2b; }

.qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    padding: 16px;
    border-radius: 14px;
    border: 2px solid #ddd7cd;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eeeae3 25%, transparent 25%),
        linear-gradient(-45deg, #eeeae3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eeeae3 75%),
        linear-gradient(-45deg, transparent 75%, #eeeae3 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    min-height: 180px;
}

.qr-wrap canvas {
    display: block;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
}

.qr-container .hidden { display: none; }

.qr-placeholder {
    color: #5e574e;
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-error {
    color: #d63b2b;
    font-size: 0.82rem;
    text-align: center;
    padding: 1rem;
}

.qr-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.qr-ctrl {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.qr-ctrl label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5e574e;
}

.qr-container input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    border: 2px solid #ddd7cd;
    border-radius: 8px;
    background: #f7f5f1;
    cursor: pointer;
    padding: 3px;
}

.qr-container input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.qr-container input[type="color"]::-webkit-color-swatch { border-radius: 4px; border: none; }

.qr-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #ddd7cd;
    outline: none;
    margin-top: 8px;
}

.qr-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d63b2b;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(26, 24, 21, 0.25);
}

.qr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.qr-actions button {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    letter-spacing: 0.3px;
}

.qr-actions .btn-primary {
    background: #d63b2b;
    color: #fff;
    box-shadow: 0 4px 14px rgba(214, 59, 43, 0.25);
}

.qr-actions .btn-primary:hover:not(:disabled) {
    background: #b32f21;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(214, 59, 43, 0.35);
}

.qr-actions .btn-secondary {
    background: #1a1815;
    color: #f7f5f1;
    border: 2px solid #5e574e;
}

.qr-actions .btn-secondary:hover:not(:disabled) {
    background: #1a1815;
    transform: translateY(-2px);
    border-color: #d63b2b;
}

.qr-actions button:disabled { opacity: 0.35; cursor: default; }

.qr-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #d63b2b;
    color: #fff;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 100;
}

.qr-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}