/* DocSecBox 3.x look for the manual.
   Source of truth is the application's Aura theme (vaadin-aura-theme 25.1):
   - typeface   Instrument Sans, variable 400–700, self-hosted (no Google Fonts request)
   - accent     BrandAccent.RED, a light/dark pair: #D86A6A on light, #FF9F9F on dark
   - surfaces   light oklch(0.95 0.005 248) · dark oklch(0.2 0.01 260)
   The header is a neutral surface like the app's header bar; the accent is used for links,
   the active tab and interactive states only — the app never paints a full red bar. */

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/InstrumentSans.woff2") format("woff2");
}

:root {
    --md-text-font: "Instrument Sans";
    --dsb-accent-light: #D86A6A;
    --dsb-accent-dark: #FF9F9F;
}

/* ---- light scheme (Aura light) ---------------------------------------------------------- */
[data-md-color-scheme="default"] {
    --md-default-bg-color: oklch(0.97 0.004 248);
    --md-default-fg-color: oklch(0.22 0.01 260 / 0.87);
    --md-default-fg-color--light: oklch(0.22 0.01 260 / 0.54);
    --md-default-fg-color--lighter: oklch(0.22 0.01 260 / 0.32);
    --md-default-fg-color--lightest: oklch(0.22 0.01 260 / 0.07);

    --md-primary-fg-color: oklch(0.95 0.005 248);
    --md-primary-fg-color--light: oklch(0.97 0.004 248);
    --md-primary-fg-color--dark: oklch(0.90 0.006 248);
    --md-primary-bg-color: oklch(0.22 0.01 260);
    --md-primary-bg-color--light: oklch(0.22 0.01 260 / 0.7);

    --md-accent-fg-color: var(--dsb-accent-light);
    --md-accent-fg-color--transparent: color-mix(in srgb, var(--dsb-accent-light) 10%, transparent);
    --md-accent-bg-color: #ffffff;
    --md-accent-bg-color--light: #ffffffb3;

    --md-typeset-a-color: var(--dsb-accent-light);
    --md-code-bg-color: oklch(0.93 0.005 248);
}

/* ---- dark scheme (Aura dark) — the default of this site --------------------------------- */
[data-md-color-scheme="slate"] {
    --md-default-bg-color: oklch(0.2 0.01 260);
    --md-default-bg-color--light: oklch(0.2 0.01 260 / 0.54);
    --md-default-bg-color--lighter: oklch(0.2 0.01 260 / 0.26);
    --md-default-bg-color--lightest: oklch(0.2 0.01 260 / 0.07);
    --md-default-fg-color: oklch(0.95 0.005 248 / 0.87);
    --md-default-fg-color--light: oklch(0.95 0.005 248 / 0.56);
    --md-default-fg-color--lighter: oklch(0.95 0.005 248 / 0.32);
    --md-default-fg-color--lightest: oklch(0.95 0.005 248 / 0.12);

    --md-primary-fg-color: oklch(0.23 0.01 260);
    --md-primary-fg-color--light: oklch(0.27 0.01 260);
    --md-primary-fg-color--dark: oklch(0.18 0.01 260);
    --md-primary-bg-color: oklch(0.95 0.005 248);
    --md-primary-bg-color--light: oklch(0.95 0.005 248 / 0.7);

    --md-accent-fg-color: var(--dsb-accent-dark);
    --md-accent-fg-color--transparent: color-mix(in srgb, var(--dsb-accent-dark) 12%, transparent);
    --md-accent-bg-color: oklch(0.2 0.01 260);
    --md-accent-bg-color--light: oklch(0.2 0.01 260 / 0.7);

    --md-typeset-a-color: var(--dsb-accent-dark);
    --md-code-bg-color: oklch(0.26 0.01 260);
    --md-code-fg-color: oklch(0.92 0.005 248);
    --md-typeset-kbd-color: oklch(0.3 0.01 260);
    --md-typeset-table-color: oklch(0.95 0.005 248 / 0.12);
    --md-admonition-bg-color: oklch(0.23 0.01 260);
    --md-footer-bg-color: oklch(0.17 0.01 260);
    --md-footer-bg-color--dark: oklch(0.15 0.01 260);
}

/* ---- header and tabs: a flat surface with a hairline, like the app's header bar ---------- */
.md-header,
.md-header--shadow {
    box-shadow: none;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    transition: none;
}

.md-tabs {
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-tabs__link {
    opacity: 0.75;
}

.md-tabs__link--active,
.md-tabs__link:hover {
    color: var(--md-accent-fg-color);
    opacity: 1;
}

.md-tabs__link--active {
    box-shadow: inset 0 -2px 0 var(--md-accent-fg-color);
}

.md-search__form {
    background-color: var(--md-default-fg-color--lightest);
}

.md-search__form:hover {
    background-color: var(--md-default-fg-color--lighter);
}

.md-header__button.md-logo img {
    height: 1.6rem;
}

/* ---- version selector (filled by assets/javascripts/version-select.js) ------------------- */
/* Drawn as a control, not as a bare number: a "3.0" beside the site name was not recognisable
   as something to click. */
.md-version__current {
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--md-default-fg-color--lighter);
    border-radius: 0.4rem;
}

.md-version__current:hover {
    border-color: var(--md-accent-fg-color);
}

.md-banner--warning a {
    color: inherit;
    text-decoration: underline;
}

/* ---- content width and screenshots ------------------------------------------------------- */
/* The screenshots show a 1440 px wide application; Material's 61rem grid shrank them to the
   point where labels were unreadable. Clicking still opens them full size (glightbox). */
.md-grid {
    max-width: 68rem;
}

.md-typeset figure img {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.4rem;
}

.md-typeset figcaption {
    font-size: 0.7rem;
    color: var(--md-default-fg-color--light);
}

/* ---- tutorial clips (docs/assets/clips, recorded by docs-plan/clips/*.mjs) --------------- */
/* Played on click, never on their own: a clip that starts moving while somebody reads the steps
   beside it is a distraction, not a help. */
.md-typeset figure.dsb-clip {
    margin: 1.2rem 0 1.6rem;
}

.md-typeset figure.dsb-clip video {
    display: block;
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    border-radius: 0.6rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    background: #000;
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.55);
}

/* The videos page (docs/start/videos.*.md): every clip as a card, two per row, one on phones.
   Same surface and border as the start page's tiles, so both schemes follow the tile tokens. */
.dsb-clip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.2rem 0 1.6rem;
}

@media screen and (max-width: 45em) {
    .dsb-clip-grid {
        grid-template-columns: 1fr;
    }
}

.md-typeset .dsb-clip-grid figure.dsb-clip {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.6rem 0.6rem 0.8rem;
    border-radius: 0.8rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    background: var(--dsb-tile-bg);
}

.md-typeset .dsb-clip-grid figure.dsb-clip video {
    max-width: none;
    border-radius: 0.5rem;
    box-shadow: none;
}

.md-typeset .dsb-clip-grid figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    max-width: none;
    margin: 0.7rem 0.3rem 0;
    text-align: left;
    font-style: normal;
}

.md-typeset .dsb-clip-grid figcaption strong {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--md-default-fg-color);
}

.md-typeset .dsb-clip-grid figcaption a {
    font-weight: 600;
}

.md-typeset .dsb-clip-grid figcaption a::after {
    content: "→";
    margin-left: 0.35em;
}

/* Portrait clips of the phone layout (docs-plan/clips/*-mobile.mjs, 720x1440). The aspect ratio
   is stated, not measured: with preload="none" the browser knows nothing of the video until it
   plays, and a width-only rule would show a 2:1 box at the page's full width -- taller than any
   screen. A phone-sized width keeps the whole clip on screen. */
.md-typeset figure.dsb-clip--portrait video {
    width: min(100%, 20rem);
    aspect-ratio: 1 / 2;
    max-height: 85vh;
    object-fit: contain;
}

/* the smartphone group on the videos page: narrower cards, three or four to a row */
.dsb-clip-grid--portrait {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

@media screen and (max-width: 45em) {
    .dsb-clip-grid--portrait {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.md-typeset .dsb-clip-grid figure.dsb-clip--portrait video {
    width: 100%;
}

/* ---- start page: hero and tiles (docs/index.*.md) ---------------------------------------- */
/* One hue per tile, from the same family Aura uses for status colours. Dark scheme gets the
   light tints, light scheme the deeper ones, so the icon keeps its contrast in both. */
[data-md-color-scheme="slate"] {
    --dsb-red: #FF9F9F;
    --dsb-blue: #7DB7FF;
    --dsb-green: #6FD49A;
    --dsb-orange: #FFB86B;
    --dsb-purple: #C3A0FF;
    --dsb-teal: #5FD3D0;
    --dsb-tile-bg: oklch(0.24 0.012 260);
}

[data-md-color-scheme="default"] {
    --dsb-red: #C94F4F;
    --dsb-blue: #2F6FD0;
    --dsb-green: #23885A;
    --dsb-orange: #B8640F;
    --dsb-purple: #7650C8;
    --dsb-teal: #13817E;
    --dsb-tile-bg: #ffffff;
}

.dsb-hero {
    position: relative;
    margin: 0.5rem 0 1.6rem;
    padding: 1.6rem 1.8rem 1.4rem;
    border-radius: 0.9rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--dsb-red) 22%, transparent) 0%, transparent 55%),
        radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--dsb-blue) 14%, transparent) 0%, transparent 60%),
        var(--dsb-tile-bg);
    overflow: hidden;
}

.md-typeset .dsb-hero h1 {
    margin: 0 0 0.6rem;
    font-weight: 700;
    color: var(--md-default-fg-color);
}

.md-typeset .dsb-lead {
    margin: 0;
    max-width: 40rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--md-default-fg-color--light);
}

/* Six tiles: 3 × 2 on a desktop, 2 × 3 on a tablet, a column on a phone. An auto-fill grid
   produced 4 + 2, which reads as two tiles left over. */
.md-typeset .dsb-hero p:last-child {
    margin: 0.7rem 0 0;
}

.md-typeset a.dsb-hero__more {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dsb-red);
    text-decoration: none;
}

.md-typeset a.dsb-hero__more::after {
    content: "→";
    display: inline-block;
    margin-left: 0.35em;
    transition: transform 0.18s ease;
}

.md-typeset a.dsb-hero__more:hover::after {
    transform: translateX(3px);
}

.dsb-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.4rem;
}

@media screen and (max-width: 60em) {
    .dsb-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 38em) {
    .dsb-tiles {
        grid-template-columns: 1fr;
    }
}

.md-typeset a.dsb-tile {
    --tile: var(--dsb-red);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem 1.2rem 1rem;
    border-radius: 0.8rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--tile) 9%, transparent) 0%, transparent 45%),
        var(--dsb-tile-bg);
    color: var(--md-default-fg-color);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.md-typeset a.dsb-tile:hover,
.md-typeset a.dsb-tile:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tile) 60%, transparent);
    box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--tile) 45%, transparent);
    color: var(--md-default-fg-color);
}

.dsb-tile--red { --tile: var(--dsb-red) !important; }
.dsb-tile--blue { --tile: var(--dsb-blue) !important; }
.dsb-tile--green { --tile: var(--dsb-green) !important; }
.dsb-tile--orange { --tile: var(--dsb-orange) !important; }
.dsb-tile--purple { --tile: var(--dsb-purple) !important; }
.dsb-tile--teal { --tile: var(--dsb-teal) !important; }

.dsb-tile__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* The icon sits in a tinted rounded square; the glyph itself is a mask so it takes the tile's
   colour without one SVG per hue. */
.dsb-tile__icon {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--tile, var(--md-accent-fg-color)) 16%, transparent);
    position: relative;
}

.dsb-tile__icon::before {
    content: "";
    position: absolute;
    inset: 0.55rem;
    background: var(--tile, var(--md-accent-fg-color));
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.dsb-icon--login { --icon: url("../icons/login.svg"); }
.dsb-icon--find { --icon: url("../icons/folder-search-outline.svg"); }
.dsb-icon--upload { --icon: url("../icons/tray-arrow-up.svg"); }
.dsb-icon--folder { --icon: url("../icons/folder-plus-outline.svg"); }
.dsb-icon--profile { --icon: url("../icons/shield-account-outline.svg"); }
.dsb-icon--admin { --icon: url("../icons/cog-outline.svg"); }
.dsb-icon--glossary { --icon: url("../icons/book-open-variant.svg"); }
.dsb-icon--history { --icon: url("../icons/history.svg"); }
.dsb-icon--video { --icon: url("../icons/play-box-outline.svg"); }

.dsb-tile__title {
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.3;
}

.dsb-tile__text {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--md-default-fg-color--light);
    flex: 1 1 auto;
}

.dsb-tile__more {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tile);
}

.dsb-tile__more::after {
    content: "→";
    display: inline-block;
    margin-left: 0.35em;
    transition: transform 0.18s ease;
}

.md-typeset a.dsb-tile:hover .dsb-tile__more::after {
    transform: translateX(3px);
}

.dsb-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin: 0 0 1.4rem;
}

.md-typeset a.dsb-strip__item {
    --tile: var(--md-accent-fg-color);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.1rem;
    border-radius: 0.8rem;
    border: 1px dashed var(--md-default-fg-color--lighter);
    color: var(--md-default-fg-color--light);
    font-size: 0.75rem;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.md-typeset a.dsb-strip__item strong {
    color: var(--md-default-fg-color);
}

.md-typeset a.dsb-strip__item:hover {
    border-style: solid;
    border-color: color-mix(in srgb, var(--tile) 55%, transparent);
    background: color-mix(in srgb, var(--tile) 6%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .md-typeset a.dsb-tile,
    .dsb-tile__more::after {
        transition: none;
    }

    .md-typeset a.dsb-tile:hover {
        transform: none;
    }
}

/* ---- footer (overrides/partials/copyright.html) ------------------------------------------ */
.md-footer-meta__inner {
    display: block;
}

.md-copyright.dsb-footer {
    width: 100%;
    margin: 0;
    padding: 1.4rem 0 1.1rem;
    color: var(--md-footer-fg-color--light);
}

.dsb-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--md-footer-fg-color) 12%, transparent);
}

.dsb-footer__brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.dsb-footer__dsb {
    width: 2.4rem;
    height: 2.4rem;
}

.dsb-footer__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--md-footer-fg-color);
}

.dsb-footer__tag {
    font-size: 0.7rem;
}

.md-copyright a.dsb-footer__vendor {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.7rem;
    color: var(--md-footer-fg-color--light);
    text-decoration: none;
}

/* The 2026 mark is two-tone dark blue and would vanish on the dark footer, so it sits on a light
   plate; inverting it would wreck the two tones. */
.dsb-footer__plate {
    display: inline-flex;
    padding: 0.45rem 0.8rem;
    border-radius: 0.55rem;
    background: #ffffff;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
    transition: transform 0.18s ease;
}

.dsb-footer__plate img {
    display: block;
    height: 1.7rem;
    width: auto;
}

.md-copyright a.dsb-footer__vendor:hover .dsb-footer__plate {
    transform: translateY(-2px);
}

.dsb-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    padding-top: 0.8rem;
    font-size: 0.65rem;
}

.md-copyright .dsb-footer__legal a {
    color: var(--md-footer-fg-color--light);
}

.md-copyright .dsb-footer__legal a:hover {
    color: var(--md-accent-fg-color);
}