/* Rich-text editor - see wwwroot/js/app-editor.js and
   TagHelpers/AppEditorTagHelper.cs.

   Every colour here is a Bootstrap CSS variable, never a literal. This app
   defaults to the dark theme and the toggle flips data-bs-theme at runtime with
   no reload, so a hard-coded #fff would survive the flip and become an unreadable
   panel. That is the same trap the sanitiser strips inline styles for. */

.app-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-bottom: 0;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    background-color: var(--bs-tertiary-bg);
}

.app-editor-btn {
    /* Square, so the icon sits centred and the row keeps a rhythm regardless of
       which glyph a tool uses. */
    width: 2rem;
    padding-left: 0;
    padding-right: 0;
    line-height: 1.2;
}

.app-editor-format {
    width: auto;
    min-width: 9rem;
}

.app-editor-sep {
    width: var(--bs-border-width);
    align-self: stretch;
    margin: 0.125rem 0.25rem;
    background-color: var(--bs-border-color);
}

.app-editor-surface {
    /* Overrides .form-control's fixed height: the surface grows with content the
       way a document does, which is the point of not being a textarea. */
    height: auto;
    overflow-y: auto;
    max-height: 40rem;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

/* .form-control drops its focus ring on a contenteditable div, so it is restored
   by hand - a caret with no visible focus is a genuine accessibility failure. */
.app-editor-surface:focus,
.app-editor-surface:focus-visible {
    outline: 0;
    border-color: var(--bs-primary-border-subtle, var(--bs-border-color));
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* The textarea is always in the DOM - it is what posts - and is shown only in
   HTML view. display:none rather than a wrapper swap so the control, its name and
   its validation attributes never move. */
.app-editor-active > .app-editor-source {
    display: none;
}

.app-editor-source-visible > .app-editor-surface {
    display: none;
}

.app-editor-source-visible > .app-editor-source {
    display: block;
    height: auto;
    min-height: 12rem;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
}

.app-editor-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-bottom: 0;
    background-color: var(--bs-secondary-bg);
}

.app-editor-panel-title {
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.app-editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
}

/* Content typography inside the surface. The stored markup carries no class and
   no style - the sanitiser removes both - so everything here and in site.css's
   .user-text rules is a descendant selector, and the editor deliberately shares
   .user-text with the public event page so the two agree. */
.app-editor-surface > :first-child {
    margin-top: 0;
}

.app-editor-surface > :last-child {
    margin-bottom: 0;
}

.app-editor-surface blockquote {
    margin: 0 0 1rem;
    padding-left: 0.75rem;
    border-left: 0.25rem solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.app-editor-surface ul,
.app-editor-surface ol {
    /* Chrome's default indent for a list in a contenteditable div is large enough
       to push a nested list off a half-width column. */
    padding-left: 1.5rem;
}

.app-editor-surface a {
    text-decoration: underline;
}