/* =========================================================================================
   m90Confluence theme
   =========================================================================================

   Five given colours, used as surfaces:

     #FFFFFF  white     content
     #FDF4D2  cream     titles
     #B0CDE6  blue      navigation and secondary surfaces
     #A290B7  purple    primary actions and the current selection
     #946D6D  rose      destructive and cautionary things

   Two things were derived rather than invented:

   * Washes. The full colours are too strong across a whole sidebar or page background, so
     large areas use them diluted with white. The named colours stay for bands and accents,
     where they read as deliberate rather than as a tint.

   * Darker variants for anything carrying WHITE text. Measured against WCAG AA (4.5:1):
     white on #A290B7 is only 2.91:1 and on #946D6D 4.50:1 -- right on the boundary. Buttons
     therefore use #746783 (5.24:1) and #765757 (6.42:1). The original colours are unchanged
     wherever dark text sits on them, which is everywhere else.

   Ink is #26232B rather than pure black: a near-black carrying a trace of the purple, which
   sits better on the cream than #000 does. 15.5:1 on white.
   ========================================================================================= */

:root {
    /* the palette, as given */
    --c-white: #FFFFFF;
    --c-cream: #FDF4D2;
    --c-blue: #B0CDE6;
    --c-purple: #A290B7;
    --c-rose: #946D6D;

    /* darkened, for white text only -- see the note above */
    --c-purple-deep: #746783;
    --c-rose-deep: #765757;
    --c-blue-deep: #667685;

    /* washes for large areas */
    --c-cream-wash: #FFFDF5;
    --c-blue-wash: #EEF4FA;
    --c-purple-wash: #EBE7EF;
    --c-rose-wash: #E7DFDF;

    /* lines, a step stronger than the wash they sit against */
    --c-cream-line: #F2E8C4;
    --c-blue-line: #D4E4F1;
    --c-purple-line: #CCC2D7;
    --c-rose-line: #C4AFAF;

    --c-ink: #26232B;
    --c-ink-muted: #6B6577;
    --c-line: #E4DFD6;
}

body {
    background: var(--c-cream-wash);
    color: var(--c-ink);
}

/* --- navigation ------------------------------------------------------------------------ */

.navbar {
    background: var(--c-white) !important;
    border-bottom: 1px solid var(--c-blue-line) !important;

    /* A thin blue rule under the bar, rather than a drop shadow: it separates the chrome
       from the page without adding depth the rest of the design does not use. */
    box-shadow: inset 0 -3px 0 var(--c-blue-wash) !important;
}

.navbar-brand {
    color: var(--c-purple-deep) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.navbar .nav-link {
    color: var(--c-ink) !important;
    border-radius: 4px;
    padding-inline: .6rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background: var(--c-blue-wash);
    color: var(--c-purple-deep) !important;
}

/* --- page titles ----------------------------------------------------------------------- */
/* The cream band is what the palette calls "title", so page headings get it. Applied to the
   h1 only, so a page with several headings does not turn into stripes. */

main > h1,
main > .row h1,
main h1.page-title {
    background: var(--c-cream);
    border-left: 4px solid var(--c-purple);
    border-radius: 0 6px 6px 0;
    padding: .6rem .9rem;
    margin-bottom: 1rem;
}

/* --- surfaces --------------------------------------------------------------------------- */

.card {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 8px;
}

.card-header {
    background: var(--c-cream-wash);
    border-bottom: 1px solid var(--c-cream-line);
}

.list-group-item {
    background: var(--c-white);
    border-color: var(--c-line);
}

.list-group-item-action:hover {
    background: var(--c-blue-wash);
}

.breadcrumb {
    background: transparent;
    padding: .4rem 0;
}

.breadcrumb a {
    color: var(--c-purple-deep);
}

/* --- the space sidebar ------------------------------------------------------------------ */

.space-sidebar {
    background: var(--c-blue-wash);
    border: 1px solid var(--c-blue-line);
}

.tree-link {
    color: var(--c-ink);
}

.tree-link:hover {
    background: var(--c-white);
    color: var(--c-purple-deep);
}

.tree-link.active {
    background: var(--c-purple-wash);
    color: var(--c-purple-deep);
    box-shadow: inset 2px 0 0 var(--c-purple);
}

.space-sidebar-toggle:hover {
    color: var(--c-purple-deep);
}

/* --- buttons ----------------------------------------------------------------------------- */

.btn-primary {
    background: var(--c-purple-deep);
    border-color: var(--c-purple-deep);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #63576F;
    border-color: #63576F;
}

.btn-outline-primary {
    color: var(--c-purple-deep);
    border-color: var(--c-purple);
}

.btn-outline-primary:hover {
    background: var(--c-purple-deep);
    border-color: var(--c-purple-deep);
    color: var(--c-white);
}

.btn-outline-secondary {
    color: var(--c-ink);
    border-color: var(--c-blue-line);
}

.btn-outline-secondary:hover {
    background: var(--c-blue-wash);
    border-color: var(--c-blue);
    color: var(--c-ink);
}

/* Destructive actions take the rose, which is the only colour here that reads as a caution
   without shouting. Bootstrap's own red is left alone for genuine errors. */
.btn-danger {
    background: var(--c-rose-deep);
    border-color: var(--c-rose-deep);
}

.btn-danger:hover,
.btn-danger:focus {
    background: #5F4646;
    border-color: #5F4646;
}

.btn-outline-danger {
    color: var(--c-rose-deep);
    border-color: var(--c-rose);
}

.btn-outline-danger:hover {
    background: var(--c-rose-deep);
    border-color: var(--c-rose-deep);
    color: var(--c-white);
}

.btn-link {
    color: var(--c-purple-deep);
}

a {
    color: var(--c-purple-deep);
}

a:hover {
    color: #63576F;
}

/* --- badges -------------------------------------------------------------------------------- */
/* Tinted fills with dark text, rather than saturated fills with white. At badge size the
   text is small, and small light-on-dark text is the first thing to become unreadable. */

.badge.text-bg-primary {
    background: var(--c-purple) !important;
    color: var(--c-ink) !important;
}

.badge.text-bg-secondary {
    background: var(--c-blue) !important;
    color: var(--c-ink) !important;
}

.badge.text-bg-light {
    background: var(--c-cream) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-cream-line) !important;
}

/* Success, warning and danger keep their meaning -- a "live version" badge has to read as
   affirmative, and no colour in this palette does that. They are muted to sit alongside it. */
.badge.text-bg-success {
    background: #CFE3D4 !important;
    color: #1F3D28 !important;
}

.badge.text-bg-warning {
    background: var(--c-cream) !important;
    color: #6B5518 !important;
}

.badge.text-bg-danger {
    background: var(--c-rose-deep) !important;
    color: var(--c-white) !important;
}

/* --- alerts ---------------------------------------------------------------------------------- */

.alert-info {
    background: var(--c-blue-wash);
    border-color: var(--c-blue-line);
    color: var(--c-ink);
}

.alert-secondary {
    background: var(--c-purple-wash);
    border-color: var(--c-purple-line);
    color: var(--c-ink);
}

.alert-warning {
    background: var(--c-cream);
    border-color: var(--c-cream-line);
    color: var(--c-ink);
}

.alert-success {
    background: #E4F0E7;
    border-color: #C3DCCA;
    color: #1F3D28;
}

.alert-danger {
    background: var(--c-rose-wash);
    border-color: var(--c-rose-line);
    color: #4A3636;
}

/* --- tables ------------------------------------------------------------------------------------ */

.table > thead {
    background: var(--c-blue-wash);
}

.table > thead th {
    border-bottom-color: var(--c-blue-line);
    font-weight: 600;
}

.table-hover > tbody > tr:hover > * {
    background: var(--c-cream-wash);
}

.table-active > * {
    background: var(--c-purple-wash) !important;
}

/* --- forms -------------------------------------------------------------------------------------- */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--c-purple);
    box-shadow: 0 0 0 .2rem var(--c-purple-wash);
}

.form-check-input:checked {
    background-color: var(--c-purple-deep);
    border-color: var(--c-purple-deep);
}

/* Overrides the white-then-blue focus ring inherited from the project template, which does
   not belong against these softer surfaces. */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--c-purple-wash);
}

/* --- page content ---------------------------------------------------------------------------------- */

.page-content blockquote {
    border-left-color: var(--c-purple);
    background: var(--c-purple-wash);
    padding: .5rem .9rem;
    border-radius: 0 4px 4px 0;
    color: var(--c-ink);
}

.page-content pre,
.page-content .ql-syntax,
.page-content .ql-code-block-container {
    background: var(--c-blue-wash);
    border: 1px solid var(--c-blue-line);
}

.page-content th {
    background: var(--c-blue-wash);
}

.page-content th,
.page-content td {
    border-color: var(--c-blue-line);
}

.comment {
    border-left-color: var(--c-blue);
}

.comment-body {
    color: var(--c-ink);
}

/* --- the editor -------------------------------------------------------------------------------------- */

.ql-toolbar.ql-snow {
    background: var(--c-cream-wash);
    border-color: var(--c-line) !important;
    border-radius: 6px 6px 0 0;
}

.ql-container.ql-snow {
    border-color: var(--c-line) !important;
    border-radius: 0 0 6px 6px;
}

#editor {
    background: var(--c-white);
}

/* --- version comparison ---------------------------------------------------------------------------------- */
/* Insert and delete stay green and red. They carry meaning that no palette colour conveys,
   and a diff whose colours are merely decorative is worse than no colour at all. Softened
   to sit alongside the rest. */

.diff-inserted { background: #DFEEE4; }
.diff-deleted  { background: var(--c-rose-wash); }
.diff-modified { background: var(--c-cream); }
.diff-blank    { background: var(--c-blue-wash); }

/* --- footer ------------------------------------------------------------------------------------------------- */

.footer {
    border-top-color: var(--c-blue-line) !important;
    color: var(--c-ink-muted) !important;
}

/* --- the sign-in page ----------------------------------------------------------------------------------------- */

.login-card {
    border-color: var(--c-blue-line) !important;
    box-shadow: 0 1px 3px rgba(38, 35, 43, .08) !important;
}

.login-card h1 {
    color: var(--c-purple-deep);
}

/* =========================================================================================
   Macros
   ========================================================================================= */

.macro-toc {
    background: var(--c-blue-wash);
    border: 1px solid var(--c-blue-line);
    border-radius: 6px;
    padding: .75rem 1rem;
    margin: 1rem 0;
    max-width: 26rem;
}

.macro-toc-title {
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-ink-muted);
    margin-bottom: .35rem;
}

.macro-toc ul { list-style: none; margin: 0; padding: 0; }
.macro-toc li { line-height: 1.5; }
.macro-toc a { text-decoration: none; }
.macro-toc a:hover { text-decoration: underline; }

.toc-level-1 { padding-left: 1rem; }
.toc-level-2 { padding-left: 2rem; }
.toc-level-3 { padding-left: 3rem; }

.macro-children {
    background: var(--c-cream-wash);
    border: 1px solid var(--c-cream-line);
    border-radius: 6px;
    padding: .75rem 1rem .75rem 2rem;
    margin: 1rem 0;
    max-width: 32rem;
}

.macro-empty {
    color: var(--c-ink-muted);
    font-style: italic;
    padding: .5rem .75rem;
}

.macro-panel {
    border-radius: 6px;
    padding: .75rem 1rem;
    margin: 1rem 0;
    border-left: 4px solid;
}

.macro-panel-label {
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .25rem;
}

.macro-panel-body > :last-child { margin-bottom: 0; }

.macro-panel-info {
    background: var(--c-blue-wash);
    border-left-color: var(--c-blue);
}

.macro-panel-info .macro-panel-label { color: var(--c-blue-deep); }

.macro-panel-warning {
    background: var(--c-rose-wash);
    border-left-color: var(--c-rose);
}

.macro-panel-warning .macro-panel-label { color: var(--c-rose-deep); }

/* Status badges. The tone is derived from the word itself, so DONE reads as settled without
   the author having to choose a colour. */
.macro-status {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: baseline;
}

.macro-status-draft   { background: var(--c-cream);      color: #6B5518; border: 1px solid var(--c-cream-line); }
.macro-status-review  { background: var(--c-purple-wash); color: var(--c-purple-deep); border: 1px solid var(--c-purple-line); }
.macro-status-done    { background: #DFEEE4;             color: #1F3D28; border: 1px solid #C3DCCA; }
.macro-status-blocked { background: var(--c-rose-deep);  color: #fff; }

.macro-expand {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 6px;
    padding: .5rem .9rem;
    margin: 1rem 0;
}

.macro-expand > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--c-purple-deep);
}

.macro-expand-body {
    padding-top: .5rem;
    margin-top: .5rem;
    border-top: 1px solid var(--c-line);
}

.macro-expand-body > :last-child { margin-bottom: 0; }

/* The editor's own macro buttons: text labels, since Quill's icon set has nothing for these. */
.macro-buttons .macro-insert {
    width: auto !important;
    padding: 0 .4rem !important;
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-purple-deep);
    background: var(--c-purple-wash);
    border: 1px solid var(--c-purple-line) !important;
    border-radius: 3px;
    margin-right: .15rem;
}

.macro-buttons .macro-insert:hover {
    background: var(--c-purple);
    color: var(--c-ink);
}

/* A placeholder inside the editor, so the author can see that something is there. */
.ql-editor [data-macro] {
    background: var(--c-purple-wash);
    border: 1px dashed var(--c-purple);
    border-radius: 4px;
    padding: .4rem .6rem;
    margin: .5rem 0;
    position: relative;
}

.ql-editor [data-macro]::before {
    content: "macro: " attr(data-macro);
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-purple-deep);
    margin-bottom: .2rem;
}


/* =========================================================================================
   Print
   =========================================================================================
   The browser's own Print -> Save as PDF is the export route for PDF: headless Chrome will
   not run on shared IIS hosting, so a print stylesheet is what makes that produce something
   worth keeping rather than a screenshot of the application.
   ========================================================================================= */

@media print {
    /* Everything that is navigation or an action rather than content. */
    .navbar,
    .footer,
    .space-sidebar,
    .breadcrumb,
    .btn,
    .btn-group,
    form,
    .alert,
    .d-print-none,
    .comment-thread,
    .macro-buttons {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000;
        font-size: 11pt;
    }

    /* The content column takes the full width once the sidebar is gone. */
    .col-lg-9,
    .col-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .container { max-width: none !important; width: 100% !important; padding: 0 !important; }

    main > h1,
    main h1.page-title {
        background: none !important;
        border-left: none !important;
        padding: 0 !important;
        font-size: 20pt;
    }

    /* Links are useless on paper unless the address is visible. Skipped for in-page anchors,
       which would otherwise litter a table of contents with "(#heading)". */
    .page-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    /* Keep a heading with the text beneath it, and never break a panel across a page. */
    h1, h2, h3, h4 { break-after: avoid-page; page-break-after: avoid; }
    .macro-panel, .macro-toc, table, pre, blockquote { break-inside: avoid; page-break-inside: avoid; }

    .macro-expand > summary { font-weight: 700; }
    .macro-expand-body { display: block !important; }   /* print collapsed detail too */

    .page-content pre,
    .page-content blockquote,
    .macro-panel,
    .macro-toc {
        border: 1px solid #ccc !important;
        background: #fafafa !important;
    }

    a { color: #000; text-decoration: underline; }
}

/* =========================================================================================
   Welcome banner and the page reading surface
   ========================================================================================= */

.welcome-banner {
    background: var(--c-blue);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    color: var(--c-ink);
}

.welcome-banner h1 {
    color: var(--c-ink);
}

/* The reading area, set apart from the metadata above and the comments below. White on the
   cream page background, so the eye lands on the content rather than hunting for where it
   starts. */
.page-body {
    display: block;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 575.98px) {
    .page-body { padding: 1rem; }
}

.page-body > .page-content > :last-child { margin-bottom: 0; }

/* Checklists, rendered with box glyphs. Not interactive: a checkbox whose state nobody
   stores is a promise the application cannot keep. */
.page-content ul.m90-checklist {
    list-style: none;
    padding-left: 1.2rem;
}

.page-content ul.m90-checklist li::before {
    content: "\2610\00a0\00a0";
    color: var(--c-purple-deep);
}

.page-content ul.m90-checklist li.done::before {
    content: "\2611\00a0\00a0";
}

.page-content ul.m90-checklist li.done {
    color: var(--c-ink-muted);
    text-decoration: line-through;
}

@media print {
    .welcome-banner { background: none !important; }
    .page-body { border: none !important; padding: 0 !important; }
}

/* On a phone the sidebar starts collapsed, so its header carries the whole space identity:
   name, key and the actions menu all stay reachable without expanding the tree. */
@media (max-width: 991.98px) {
    .space-sidebar {
        position: static;
        max-height: none;
        padding: .6rem .75rem;
    }

    .space-sidebar-body[hidden] {
        display: none !important;
    }
}


/* =========================================================================================
   Space sidebar: let its menu escape the box
   =========================================================================================
   site.css gives the sidebar `max-height` and `overflow-y: auto` on wide screens, which makes
   it a scroll container -- and an absolutely positioned dropdown inside a scroll container is
   clipped by it. The menu was being cut off, and reaching the last item meant scrolling the
   sidebar rather than the menu.

   The fix is to move the scrolling one level in. The sidebar itself no longer clips anything;
   the page TREE scrolls instead, which is the part that actually grows without limit. The
   header and its menu sit outside that, so the menu opens over the page content at full
   height. This also keeps working on a phone, where the tree is collapsed and the header --
   menu included -- is all that remains.
   ========================================================================================= */

.space-sidebar {
    overflow: visible;
    max-height: none;
}

@media (min-width: 992px) {
    .space-sidebar {
        position: sticky;
        top: 1rem;
        max-height: none;
        overflow: visible;
    }

    /* The tree is the part that can grow to hundreds of entries, so it takes the scrollbar. */
    .space-sidebar-body {
        max-height: calc(100vh - 10rem);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* Above the sticky sidebar and the page content it now opens over. */
.space-sidebar .dropdown-menu {
    z-index: 1035;

    /* A floor under the menu on a short window: it scrolls itself rather than being cut off
       by the viewport, which is ordinary dropdown behaviour and not the bug being fixed. */
    max-height: min(75vh, 28rem);
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    /* Collapsed by default here, so the header carries everything. Nothing clips the menu. */
    .space-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding: .6rem .75rem;
    }

    .space-sidebar-body {
        max-height: none;
        overflow: visible;
    }

    /* Full width on a phone, so the longest label is not squeezed. */
    .space-sidebar .dropdown-menu {
        min-width: 14rem;
    }
}

/* =========================================================================================
   Image thumbnails
   =========================================================================================
   Images get a visual preview; every other attachment stays a filename in a list, because a
   thumbnail of a spreadsheet tells the reader nothing.

   The preview is the full image scaled by the browser rather than a separately generated
   thumbnail. That keeps the feature free of an image-processing dependency, and `loading`
   is set to lazy so pictures below the fold are not fetched until they are scrolled to. The
   trade-off is bandwidth on a page carrying many large photographs -- see the note in the
   handover if that becomes the common case.
   ========================================================================================= */

.thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
    max-width: 40rem;
}

.thumb {
    margin: 0;
    position: relative;
}

.thumb > a {
    display: block;
    border: 1px solid var(--c-blue-line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--c-blue-wash);

    /* A fixed shape so a row of mixed portrait and landscape photographs still lines up. */
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
}

.thumb > a:hover {
    border-color: var(--c-purple);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb figcaption {
    font-size: .75rem;
    color: var(--c-ink-muted);
    margin-top: .25rem;
    line-height: 1.3;
}

.thumb-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thumb-size {
    display: block;
    opacity: .8;
}

/* The remove control sits over the corner of the image, and stays out of the way until the
   pointer is on the thumbnail. */
.thumb-remove {
    position: absolute;
    top: .25rem;
    right: .25rem;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.thumb:hover .thumb-remove,
.thumb-remove:focus-within {
    opacity: 1;
}

.thumb-remove button {
    background: rgba(38, 35, 43, .75);
    color: #fff;
    border: 0;
    border-radius: 4px;
    line-height: 1;
    padding: .1rem .35rem;
}

.thumb-remove button:hover {
    background: var(--c-rose-deep);
    color: #fff;
}

/* The full-size view, opened by clicking a thumbnail. */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(38, 35, 43, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2000;
    padding: 2rem;
    cursor: zoom-out;
}

.lightbox img {
    max-width: 100%;
    max-height: calc(100% - 3rem);
    object-fit: contain;
    border-radius: 4px;
}

.lightbox figcaption {
    color: #fff;
    font-size: .85rem;
    margin-top: .75rem;
    text-align: center;
}

.lightbox .lightbox-hint {
    color: rgba(255, 255, 255, .6);
    font-size: .75rem;
    margin-top: .25rem;
}

@media print {
    .thumb-remove { display: none !important; }
    .thumb-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================================
   Square edges
   =========================================================================================
   Everything loses its corner radius: cards, buttons, inputs, badges, alerts, panels,
   thumbnails, the sidebar, the page body, macro blocks and the editor.

   Done as one sweeping rule rather than by hunting down every declaration. There are twenty
   radii in our own stylesheets and a great many more inherited from Bootstrap, and the
   sweeping version cannot miss one -- nor can a component added next month quietly arrive
   with rounded corners.

   The `rounded` and `rounded-pill` utility classes are covered by the same rule, so markup
   using them needs no change.
   ========================================================================================= */

*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* One exception, and it is not decorative. A radio button is round because that is what
   distinguishes it from a checkbox -- squaring it would make "pick exactly one" look like
   "tick any that apply". The shape is carrying meaning, so it stays. */
input[type="radio"],
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}