/* ==========================================================================
   Flowdia Diagrams — design refresh layer
   --------------------------------------------------------------------------
   Loaded last, after Bootstrap and the existing stylesheets. Pure restyle:
   no page markup is changed, so this can be dropped in or removed without
   touching a single HTML element.
   ========================================================================== */

:root {
    --r-bg: #f6f8fa;
    --r-surface: #ffffff;
    --r-border: #e2e8f0;
    --r-text: #1c2530;
    --r-muted: #55636f;
    --r-accent: #2563eb;
    --r-accent-hover: #1d4ed8;
    --r-dark: #262b33;
    --r-panel: rgba(28, 33, 40, .78);
    --r-radius: 14px;
    --r-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --r-shadow-md: 0 6px 18px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
    --r-shadow-lg: 0 20px 44px rgba(15, 23, 42, .14);
}

/* ---------- 1. Base typography and page surface ---------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: var(--r-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: var(--r-bg) !important;
}

h1, h2, h3, h4, h5,
.display-2, .display-3, .display-4 {
    letter-spacing: -0.02em;
    line-height: 1.18;
}

/* Headings deliberately carry no colour of their own — they inherit from
   their container, so they stay legible on both light and dark panels. */

/* Bootstrap's .text-light colours the element it sits on; these panels
   nest headings inside it, so keep the whole subtree light. */
.text-light,
.text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5,
.text-light .display-2, .text-light .display-3, .text-light .display-4,
.text-light small, .text-light span, .text-light div, .text-light p,
.darkBg, .darkBg *,
.infoback, .infoback * {
    color: #f6f8fa;
}

/* ...except the mobile menu, which is a light panel inside the dark header. */
.dropdown-menu,
.dropdown-menu a,
.dropdown-menu div,
.dropdown-menu span {
    color: var(--r-text);
}

p { line-height: 1.7; }

.lead { font-weight: 400; }

a { color: var(--r-accent); }

a:hover { color: var(--r-accent-hover); }

img { max-width: 100%; }

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

/* ---------- 2. Header ---------- */
.headerMenu {
    background: var(--r-dark);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}

.headerMenu a.btn-link {
    font-size: .95rem;
    padding-bottom: 2px !important;
    border-bottom: 2px solid transparent;
    text-decoration: none !important;
    transition: border-color .18s ease, color .18s ease;
}

.headerMenu a.btn-link:hover {
    border-bottom-color: var(--r-accent);
    color: #fff !important;
}

.headerMenu .btn-secondary {
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    font-size: .9rem;
    transition: background-color .18s ease;
}

.headerMenu .btn-secondary:hover { background-color: #565c66 !important; }

.dropdown-menu {
    border: 1px solid var(--r-border);
    border-radius: var(--r-radius);
    box-shadow: var(--r-shadow-md);
    padding: .35rem;
    overflow: hidden;
}

.dropdown-item {
    border-radius: 8px;
    color: var(--r-text);
}

.dropdown-item:hover {
    background: #eff4ff;
    color: var(--r-accent);
}

/* ---------- 3. Hero ---------- */
.bg {
    background-color: #1f242b;
    position: relative;
}

.darkBg,
.infoback {
    background: var(--r-panel) !important;
    backdrop-filter: saturate(140%) blur(3px);
    -webkit-backdrop-filter: saturate(140%) blur(3px);
    border-radius: 12px;
}

/* Title block: logo cell and name cell read as one rounded bar.
   Bootstrap's reboot collapses table borders, which suppresses corner
   radius on cells, so the hero tables opt back into separate borders. */
.bg table {
    border-collapse: separate;
    border-spacing: 0;
}

.bg td.align-top {
    background: var(--r-panel);
    backdrop-filter: saturate(140%) blur(3px);
    -webkit-backdrop-filter: saturate(140%) blur(3px);
    border-radius: 12px 0 0 12px;
    vertical-align: middle;
    padding: 0;
}

/* The logo is an opaque square, so it carries the left rounding itself
   and sits flush against the edge of the bar. */
.bg td.align-top > img {
    float: none !important;
    display: block;
    border-radius: 12px 0 0 12px;
}

.bg td.align-top + td.darkBg {
    border-radius: 0 12px 12px 0;
    vertical-align: middle;
    padding-right: 1rem;
}

/* Strapline strip below the bar: centre the text on both axes and drop
   the utility margins that pushed it off-centre. */
.bg td[colspan] > .darkBg {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: 0 !important;
}

.bg td[colspan] > .darkBg > .text-light {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
}

.infoback { box-shadow: var(--r-shadow-lg); }

.infoback + .infoback { margin-top: .5rem; }

/* ---------- 4. Store badges ---------- */
.infoback img[src*="badge"],
.infoback img[src*="appstore"],
.footerMenu img[src*="badge"],
.footerMenu img[src*="appstore"] {
    transition: transform .18s ease, opacity .18s ease;
}

.infoback img[src*="badge"]:hover,
.infoback img[src*="appstore"]:hover,
.footerMenu img[src*="badge"]:hover,
.footerMenu img[src*="appstore"]:hover {
    transform: translateY(-2px);
    opacity: .92;
}

/* ---------- 5. Homepage feature rows as cards ---------- */
.align-content-center .row.rounded {
    background: var(--r-surface);
    border: 1px solid var(--r-border);
    border-radius: var(--r-radius) !important;
    box-shadow: var(--r-shadow-sm);
    padding: 1.75rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    align-items: center;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.align-content-center .row.rounded:hover {
    box-shadow: var(--r-shadow-md);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.align-content-center .row.rounded .display-4 {
    font-weight: 700;
    margin-bottom: .5rem;
}

.align-content-center .row.rounded p.text-center {
    color: var(--r-muted);
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

.cardimgsize,
.card-img-top {
    border-radius: 10px;
    border: 1px solid var(--r-border);
    background: #fff;
}

/* ---------- 6. Buttons ---------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: .55rem 1.35rem;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s ease;
}

.btn-outline-secondary {
    border-color: #cbd5e1;
    color: var(--r-text);
}

.btn-outline-secondary:hover {
    background: var(--r-accent);
    border-color: var(--r-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- 7. Diagram page callouts ---------- */
.bs-callout {
    background: var(--r-surface);
    border: 1px solid var(--r-border);
    border-left: 3px solid var(--r-border);
    border-radius: 10px;
    padding: .9rem 1.1rem;
    margin-bottom: .6rem;
    box-shadow: var(--r-shadow-sm);
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.bs-callout:hover {
    border-left-color: var(--r-accent);
    background: #f8faff;
    transform: translateX(2px);
}

.bs-callout h4 {
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: .2rem;
}

.bs-callout-default { padding-left: 1.1rem; }

.bs-callout-selected {
    border-left-color: var(--r-accent) !important;
    border-left-width: 3px !important;
    background: #eff4ff;
}

.diagram-bg {
    border-radius: var(--r-radius);
    overflow: hidden;
    opacity: 1;
    box-shadow: var(--r-shadow-sm);
}

.diagram-bg .display-3 span {
    background: rgba(255, 255, 255, .92) !important;
    padding: .2rem .9rem;
    border-radius: 10px;
    font-weight: 700;
}

/* ---------- 8. Content pages ---------- */
.container.p-4 h5 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.container.p-4 dl {
    padding: .75rem 1rem;
    background: #eef2f7;
    border-left: 3px solid #cbd5e1;
    margin-bottom: 1rem;
}

.container.p-4 dt { font-weight: 600; }
.container.p-4 dd { color: var(--r-muted); margin-bottom: .25rem; }

.imageborder {
    border: 1px solid var(--r-border);
    border-radius: 8px;
}

table[cellpadding] { max-width: 100%; }

/* ---------- 9. Footer ---------- */
.footerMenu {
    background: var(--r-dark) !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: .75rem;
}

.footerMenu a.btn-link {
    text-decoration: none !important;
    line-height: 2;
    opacity: .82;
    transition: opacity .18s ease;
}

.footerMenu a.btn-link:hover { opacity: 1; }

/* ---------- 10. Example overlay ---------- */
.overlay {
    background-color: rgba(8, 12, 20, .9) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.overlay-content img {
    border-radius: 10px;
    box-shadow: var(--r-shadow-lg);
    background: #fff;
}

.overlay .closebtn {
    color: #f1f1f1;
    line-height: 1;
    text-decoration: none !important;
}

.overlay .closebtn:hover { color: #fff; }

/* ---------- 11. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   12. Small screens
   --------------------------------------------------------------------------
   Everything below this line is scoped to phones. The desktop layout above
   is untouched.

   The pages were built with fixed pixel widths in inline style attributes
   (350px sidebars, 21.75rem tables, 21.25rem card images) and Bootstrap 4
   .col, which keeps columns side by side at every width. On a phone that
   forces horizontal scrolling. These rules relax the fixed sizes, stack the
   columns and rescale the oversized type.

   Author !important beats a non-important inline style, which is how the
   inline widths are neutralised. Where a page's own <style> block sets a
   size with !important, the selector below adds a `body` prefix so it wins
   on specificity rather than order.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* --- Stack every Bootstrap column --- */
    .row > .col,
    .row > [class^="col-"],
    .row > [class*=" col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* --- Hero --- */
    .bg { background-position: 62% top; }

    .bg > .container-fluid {
        height: auto !important;
        padding-bottom: 2rem !important;
    }

    .bg table {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Promo panel carries its width inline */
    .bg .rounded.text-light {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bg .display-4,
    .bg h1 { font-size: 1.9rem !important; }

    /* --- Store badges side by side ---
       The phone markup puts each badge in its own table row, so they stack.
       Dissolving the rows turns the badge table into a single flex line.
       Scoped to .d-md-none so only the phone variant of the panel is
       affected; the desktop variant already sits on one line. */
    .bg .d-md-none .infoback:not(.lead) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .5rem .25rem;
    }

    .bg .d-md-none .infoback:not(.lead) tbody,
    .bg .d-md-none .infoback:not(.lead) tr {
        display: contents;
    }

    .bg .d-md-none .infoback:not(.lead) td {
        display: block;
        padding: 0;
    }

    /* Empty spacer cell that held the two rows apart */
    .bg .d-md-none .infoback:not(.lead) td[rowspan] { display: none; }

    .bg .d-md-none .infoback:not(.lead) .float-left,
    .bg .d-md-none .infoback:not(.lead) .float-right {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Matching the two badges by canvas height makes the Play button look
       smaller, because its 646x250 asset is a 564x168 button centred in
       41px of transparent padding, while the App Store asset is full
       bleed. So the Play canvas is scaled up to 56px (a 37.6px button, to
       match the App Store's 38px) and the padding is cancelled with a
       negative margin so it does not eat into the layout. */
    .bg .d-md-none .infoback img[src*="google-play"] {
        height: 56px;
        width: auto !important;
        margin: -9px !important;
    }

    .bg .d-md-none .infoback img[src*="appstorelogo"] {
        height: 38px;
        width: auto !important;
    }

    .bg td.align-top > img { height: 52px !important; width: auto; }

    .bg td[colspan] > .darkBg {
        height: auto !important;
        min-height: 35px;
        padding: .35rem .5rem;
    }

    /* --- Homepage feature cards --- */
    .align-content-center .row.rounded { padding: 1.25rem !important; }

    .cardimgsize,
    .card-img-top {
        width: 100% !important;
        max-width: 21.25rem;
        margin-left: auto;
        margin-right: auto;
    }

    body .large_page_header_font { font-size: 1.75rem !important; }
    body .large_page_icon_header_font { font-size: 1.9rem !important; }
    body .medium_page_header_font { font-size: 1.45rem !important; }
    body .medium_small_page_header_font { font-size: 1.25rem !important; }
    body .small_page_header_font { font-size: 1.1rem !important; }

    .display-2 { font-size: 2.1rem !important; }
    .display-3 { font-size: 1.9rem !important; }
    .display-4 { font-size: 1.75rem !important; }

    /* --- Diagram pages --- */
    .diagram_links {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .diagram-bg { margin-top: 1rem; }

    .diagram-bg table {
        height: 190px !important;
        min-height: 190px !important;
    }

    .container .col { min-width: 0 !important; }

    .row[style*="max-width"] { max-width: 100% !important; }

    .bs-callout { margin-bottom: .5rem; }

    /* Shape sample drawings sit above their description */
    .row.align-items-center > .col.text-center { margin-bottom: .5rem; }

    .row.align-items-center svg { max-width: 100%; height: auto; }

    /* --- Tutorial and support tables --- */
    .container.p-4 { padding: 1rem !important; }

    .container.p-4 table { width: 100% !important; }

    .container.p-4 td {
        padding: .4rem !important;
        word-break: break-word;
    }

    .container.p-4 td img { max-width: 100%; height: auto; }

    .ml-4 { margin-left: .75rem !important; }

    /* --- Footer ---
       The footer keeps its two-column shape on phones, with the store
       badges to the right of the links, so it opts out of the stacking
       rule above and buys back the width by trimming gutters and
       scaling the artwork down. */
    .footerMenu {
        height: auto !important;
        padding-bottom: 1.25rem;
    }

    .footerMenu .row > .col {
        flex: 1 1 0 !important;
        max-width: none !important;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    /* The badge column sizes to its artwork; the links column takes the
       rest. Splitting the row 50/50 left the badge column narrower than
       the Play canvas, and the global img { max-width: 100% } then
       scaled that badge down on its own — max-width outranks even an
       !important width — which is what knocked the two out of line. */
    .footerMenu .row > .col + .col { flex: 0 0 auto !important; }

    .footerMenu .float-right img { max-width: none !important; }

    .footerMenu .float-right {
        float: right !important;
        margin-top: 0;
    }

    /* Each badge sits in its own nested row; strip the gutters and the
       negative row margins so they cannot push into the links column. */
    .footerMenu .float-right .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footerMenu .float-right .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The App Store badge carries a 2px inline offset plus ml-2 on its
       anchor, which the Play badge does not, so the two started 10px
       apart. Clearing both lines their left edges up; their visible
       widths match to within 0.2%, so the right edges land together too. */
    .footerMenu .float-right .col[style],
    .footerMenu .float-right a {
        margin-left: 0 !important;
    }

    .footerMenu .float-right a { display: inline-block; }

    .footerMenu .float-right img { display: block; }

    .footerMenu .float-right .row + .row { margin-top: 10px !important; }

    .footerMenu img[src*="bezapps_header"] { width: 88px !important; }

    /* Same optical match as the hero: the Play canvas runs wider than its
       button, so it is scaled up and the padding pulled back in. */
    .footerMenu img[src*="google-play"] {
        width: 132px !important;
        height: auto;
        margin: -8px !important;
    }

    .footerMenu img[src*="appstorelogo"] {
        width: 115px !important;
        height: auto;
        margin-left: 0 !important;
    }

    .footerMenu .container.pb-2 { padding-top: 0 !important; }

    .footerMenu .container { padding-left: 0; padding-right: 0; }
}