:root {

    /* Dark colours */
    --red: hsl(0, 85%, 45%);
    --orange: hsl(30, 100%, 45%);

    /* NOT RECOMMENDED FOR TEXT - just not enough contrast  */
    /* Limit this to borders, icons, etc.  */
    --yellow: hsl(55, 100%, 40%);

    --green: hsl(120, 100%, 30%);
    --blue: hsl(210, 90%, 45%);
    --purple: hsl(280, 100%, 40%);
    --pink: hsl(310, 90%, 45%);
    --brown: hsl(22, 56%, 40%);
    --gray: #666;
    /* just use 'black' for black */

    /* Light colours */
    --light-red: hsl(0, 100%, 70%);
    --light-orange: hsl(30, 100%, 60%);
    --light-yellow: hsl(55, 90%, 55%);
    --light-green: hsl(110, 70%, 60%);
    --light-blue: hsl(210, 100%, 75%);
    --light-purple: hsl(270, 100%, 75%);
    --light-pink: hsl(300, 80%, 70%);
    --light-brown: hsl(22, 70%, 50%);
    --light-gray: #bbb;
    /* just use 'white' for white */

    /* Gray scale */
    --garyscale-normal-text: #000;
    --grayscale-light-text: #666;
    /* Fairly significant separators */
    --grayscale-medium-border: #aaa;
    /* Recommendation - don't use this anywhere other than buttons and inputs */
    /* I think those look best when slightly distinguished from other borders */
    /* This is here mostly to remind you of it's value, if you ever want to  */
    /* change these values */
    --grayscale-input-border: #bbb;
    /* Minimal separators - ie. between table rows */
    --grayscale-light-border: #ccc;
    --grayscale-medium-background: #d8d8d8;
    --grayscale-light-background: #e4e4e4;




    /* Sizing/spacing */
    /* ---------------------------------------------------------------------------- */
    /* These sizes are more of a style guide than anything */
    /* The following sizes have some special properties: */
    /* - all are whole pixel values */
    /* - each step is approximately a constant factor */
    /* - you can divide any size into 2 and still have a standard size (just move 2 steps down) */
    /* - steps are big enough to be noticeable, but still give fine enough control (IMHO) */
    /* - --size1 is a very commonly used size for body font */
    --size-3: 4px;
    --size-1: 8px;
    --size0: 11px;
    --size1: 16px;
    --size2: 22px;
    --size3: 32px;
    --size4: 44px;
    --size5: 64;
    --size6: 88px;
    --size7: 128px;
    --size8: 176px;
    --size9: 256px;
    --size10: 352px;
    --size11: 512px;
    
    /* --s-1 is too small to be easily readable, and this still clearly distinguishes small text */
    --small-font-size: 0.8rem;
}

* {
    margin: 0;
}
html {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: #f4f4f4;
}
a, :visited {
    color: var(--blue);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
blockquote {
    margin-left: 2em;
}
button {
    cursor: pointer;
    /* 
        I'm not opposed to default button styles, but they are hard to override in specific contexts. 
        By using custom styles everywhere, it's much easier to adjust specific properties of individual buttons, while leaving most of their properties the same as our default buttons.
    */
    appearance: none;
    border: 1px solid #666;
    border-radius: 0.15em;
    padding: 1px 6px;
}

p,ul,ol,dl,table,aside,.block,hr {
    margin-top: 1em;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    font-family: inherit;
}
h1 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
h2 {
    font-size: 1.6rem;
    margin-top: 1.6rem;
    border-bottom: 1px dotted;
    margin-bottom: 1rem;
}
h3 {
    font-size: 1.3rem;
    margin-top: 1.3rem;
    margin-bottom: 1rem;
}
h4 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.block {display: block;}

li {margin-top: 0.5em; line-height: 1.2;}

small, aside, .weak-text {
    font-size: var(--small-font-size);
    font-style: italic;
    color: var(--grayscale-light-text);
}
.subtle-link {
    text-decoration: none;
    color: var(--grayscale-light-text);
}
.subtle-link:hover {
    text-decoration: underline;
}

th, [role="columnheader"] {
    font-weight: bold;
}


table {
    --cell-padding: 0.25em 0.5em; 
}
td, th {
    padding: var(--cell-padding);
}

.key-value-table {
    line-height: 1.2;
}
.key-value-table > :where(thead, tbody) {
    border: none;
}
.key-value-table > * > * > th {
    text-align: right;
    font-weight: normal;
    color: var(--grayscale-light-text);
    vertical-align: top;
}
.key-value-table > * > * > :where(td, th) {
    border: none;
    padding: 0.25rem;
    background-color: transparent;
}

.key-value-table.key-value-table-wrapping-headers th {
    white-space: normal;
}
.key-value-table.key-value-table-wrapping-headers td {
    vertical-align: bottom;
}

/* Intended to work with or without .subtle-link; does NOT actually disabled the element (we recommend removing href for that) */
.disabled-link, .disabled-link:hover {
    opacity: 0.7;
    cursor: not-allowed;
}

.ReloadingButtonDialog {
    background: transparent;
    border: none;
}
.ReloadingButtonDialog::backdrop {
    background-color: #8883;
    backdrop-filter: blur(2px);
}

@keyframes flash-in {
    from {
        opacity: 0;
        /* transform: scale(1.2); */
    }
}
.flash-in-target:target {
    animation: flash-in 1s linear;
    animation-delay: 0.3s;
}
.unhovered-opacity:not(:hover) {
    opacity: var(--unhovered-opacity, 0.5);
}

.django-data-table-body > :nth-child(2n+1) > * {
    background-color: var(--grayscale-light-background);
}

message-card {
    display: block;
}
.message-card-hovered {
    outline: 2px solid var(--grayscale-light-border);   
}
.message-card-hovered, .message-card-hovered-ancestor, .message-card-hovered-descendant {
    /* not needed, since we're de-emphasizing unrelated messages */
    /* outline: 1px solid var(--light-blue); */
}
.message-card-hovered-parent {
    outline: 2px solid var(--orange);
}
.message-card-hovered-child {
    outline: 2px solid var(--blue);
}
.message-card-hovered-unrelated {
    opacity: 0.5;
    filter: blur(1px);
}

.only-visible-on-message-hover {
    transition: opacity ease 0.2s;
}
html.qnc-using-hoverable-mouse .only-visible-on-message-hover {
    opacity: 0;
}
message-card:hover .only-visible-on-message-hover {
    opacity: 1;
}


qnc-condenser[data-condensed] > :first-child {display: none}
qnc-condenser:not([data-condensed]) > :nth-child(2) {display: none}

/*
    General purpose version of .only-visible-on-message-hover
    Put .hover-or-mobile-reveal-item somewhere inside a .hover-reveal-container
*/
.hover-or-mobile-reveal-item {
    transition: opacity ease 0.2s;
}
html.qnc-using-hoverable-mouse .hover-or-mobile-reveal-item {
    opacity: 0;
}
.hover-reveal-container:hover .hover-or-mobile-reveal-item {
    opacity: 1;
}

/* Notice: this _only_ hides things when the user is _using_ a mouse. It does nothing on mobile, touch screens, or when the user is using the keyboard. */
/* If you do NOT want it visible in those circumstances, use .reveal-on-hover instead (to always have "opacity: 0"), or add .desktop-and-hover-only (to have "display: none") */
.reveal-on-hover-or-mobile {
    transition: opacity ease 0.2s;
}
html.qnc-using-hoverable-mouse .reveal-on-hover-or-mobile:not(:hover) {
    opacity: 0;
}
.reveal-on-hover {
    transition: opacity ease 0.2s;
}
.reveal-on-hover:not(:hover) {
    opacity: 0;
}

/* Used to force arbitrary html into an "inline preview" */
/* Note that in addition to this class, you'll need some combination of max-width, flex-basis, flex-shrink, etc, to force overflow. */
.inline-wrapper {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.inline-wrapper * {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}


qnc-dialog:not(:defined) {
    display: none;
}


summary {
    cursor: pointer;
}

.user-editable-block-region {
    contain: layout;
    overflow: hidden;
}
.user-editable-block-region img {
    max-width: 100%;
    max-height: min(100vw, 100vh, 700px);
    display: block;
    margin: 0 auto;
    border: 1px dotted black;
    box-sizing: border-box;
    cursor: pointer;
}
.inline-quoted-user-content {
    contain: layout;
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}
/*
    Use line-clamp in browsers that support it. 
    This is better than the "white-space: nowrap" approach.
    In the latter approach "large" elements (eg. img thumbnails, headings) will increase the line height, even if they are overflowing.
*/
@supports (-webkit-line-clamp: 1) {
    .inline-quoted-user-content {
        white-space: normal;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
}
@supports (line-clamp: 1) {
    .inline-quoted-user-content {
        white-space: normal;
        line-clamp: 1;
    }
}
.inline-quoted-user-content * {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}
.inline-quoted-user-content br {
    /* Idealy, we'd replace this with a space or "line break indicator" of some type, but I don't see how we can do that with css */
    /* Perhaps we should preprocess quotes on the backend to remove <br> and replace with something */
    display: none !important;
}
.inline-quoted-user-content img {
    max-height: 40px;
    border: 1px dotted black;
    display: inline-block !important;
    margin: 0 0.5em !important;
}


[click-to-copy-text], [click-to-copy] {
    user-select: all;
    cursor: cell;
}

/* 
    These are code samples created by the codesample tinymce plugin.
    tinymce recommends using prism.js and prism.css on your main site when showing this content, but that approach has some issues.
    Instead, we apply basic styles, and don't worry about syntax highlighting.
*/
.qnc-code-sample {
    white-space: pre;
    overflow-x: auto;
    font-family: monospace;
    border: 1px dotted;
    padding: 0.5em;
    margin-top: 1em;   
}