/* The "Style" badge in the toolbar, see ui/js/ft-style-panel.js. Falls back to
   the .doc .ft-style-panel details below when the page layout has no .toolbar. */
.toolbar .ft-style-badge {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .3rem;
    margin-left: auto;
    padding: .25rem .55rem;
    height: 1.7rem;
    font: inherit;
    font-size: .78rem;
    color: #333;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 1rem;
    cursor: pointer;
}
.toolbar .ft-style-badge:hover { background: #f0f0f0; }
.toolbar .ft-style-badge-label { font-weight: 600; }
.toolbar .ft-style-chip {
    display: inline-block;
    min-width: 1rem;
    padding: 0 .3rem;
    line-height: 1.15rem;
    font-size: .7rem;
    font-weight: 600;
    text-align: center;
    border-radius: .6rem;
}
.toolbar .ft-style-chip-error { background: #c62828; color: #fff; }
.toolbar .ft-style-chip-warning { background: #e0a800; color: #1a1a1a; }
.toolbar .ft-style-badge-mark { color: #777; font-size: .7rem; transition: transform .1s ease; }
.toolbar .ft-style-badge[aria-expanded="true"] .ft-style-badge-mark { transform: rotate(180deg); }

/* The dropdown that opens under the badge. .toolbar is position: sticky, which
   is enough to anchor this absolutely positioned child. */
.toolbar .ft-style-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    box-sizing: border-box;
    width: min(28rem, calc(100vw - 2rem));
    max-height: 60vh;
    overflow-y: auto;
    margin: .25rem .5rem 0 0;
    padding: .6rem .85rem;
    font-size: .85rem;
    color: #333;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-left: 4px solid #e0a800;
    border-radius: .45rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
}
.toolbar .ft-style-dropdown.has-errors { border-left-color: #c62828; }
.toolbar .ft-style-dropdown.is-open { display: block; }
.toolbar .ft-style-dropdown-summary { margin: 0 0 .5rem; font-weight: 600; color: #333; }
.toolbar .ft-style-dropdown ul { margin: 0; padding-left: 1.25rem; }
.toolbar .ft-style-dropdown li.level-error::marker { color: #c62828; }
.toolbar .ft-style-dropdown q { color: #666; }
/* Each item jumps to its text on the page: click, Enter or Space. */
.toolbar .ft-style-dropdown li {
    cursor: pointer;
    border-radius: .3rem;
    padding: .1rem .3rem;
    margin: 0 -.3rem;
}
.toolbar .ft-style-dropdown li:hover { background: #f0f0f0; }
.toolbar .ft-style-dropdown li:focus { outline: 2px solid #4a90d9; outline-offset: -2px; }
.toolbar .ft-style-dropdown .ft-style-hide {
    margin-top: .5rem;
    font-size: .8rem;
    background: none;
    border: 1px solid #e1e1e1;
    border-radius: .3rem;
    padding: .15rem .5rem;
    cursor: pointer;
}
@media print {
    .ft-style-badge, .ft-style-dropdown { display: none; }
}

/* Fallback: the "Style" line above the text, used when the page layout has no .toolbar. */
.doc .ft-style-panel {
    font-size: .85rem;
    border: 1px solid #e1e1e1;
    border-left: 4px solid #e0a800;
    background: #fafafa;
    border-radius: .45rem;
    padding: .35rem .75rem;
    margin: 0 0 1rem;
}
.doc .ft-style-panel.has-errors { border-left-color: #c62828; }
.doc .ft-style-panel > summary { cursor: pointer; color: #333; }
/* The default UI draws the disclosure triangle 1rem left of the summary
   (position: absolute), which is on the coloured border here. A margin, not
   a padding, moves the triangle with the summary into the panel. Its bottom
   margin would leave a gap under the closed line; the list has its own. */
.doc .ft-style-panel > summary { margin: 0 0 0 1rem; }
.doc .ft-style-panel ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.doc .ft-style-panel li.level-error::marker { color: #c62828; }
.doc .ft-style-panel q { color: #666; }
/* Each item jumps to its text on the page: click, Enter or Space. */
.doc .ft-style-panel li {
    cursor: pointer;
    border-radius: .3rem;
    padding: .1rem .3rem;
    margin: 0 -.3rem;
}
.doc .ft-style-panel li:hover { background: #f0f0f0; }
.doc .ft-style-panel li:focus { outline: 2px solid #4a90d9; outline-offset: -2px; }
.doc .ft-style-panel .ft-style-hide {
    margin-top: .5rem;
    font-size: .8rem;
    background: none;
    border: 1px solid #e1e1e1;
    border-radius: .3rem;
    padding: .15rem .5rem;
    cursor: pointer;
}
@media print { .doc .ft-style-panel { display: none; } }

/* One item: the label (bold), the quote (context, else match), the message
   (smaller) and the rule id (small, muted), shared by the dropdown and the
   fallback panel. */
.ft-style-label { font-weight: 600; }
.ft-style-quote { font-style: italic; }
.ft-style-message { font-size: .85em; }
.ft-style-rule { font-size: .75em; font-weight: normal; color: #888; }
.ft-style-not-found { display: block; margin-top: .15rem; font-size: .8em; color: #c62828; }

/* A rule with several occurrences: one row (label, count, message, rule id)
   that discloses the occurrence list under it, shared by the dropdown and
   the fallback panel (see appendGroupRow() in ft-style-panel.js). Its own
   ▸/▾ mark replaces the list bullet. */
.ft-style-group { list-style: none; }
.ft-style-group-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem;
    cursor: pointer;
    border-radius: .3rem;
    padding: .1rem .3rem;
    margin: 0 -.3rem;
}
.ft-style-group-row:hover { background: #f0f0f0; }
.ft-style-group-row:focus { outline: 2px solid #4a90d9; outline-offset: -2px; }
.ft-style-group-mark { display: inline-block; width: .9em; color: #777; font-size: .7em; }
.ft-style-group.level-error .ft-style-group-mark { color: #c62828; }
.ft-style-count {
    display: inline-block;
    min-width: 1rem;
    padding: 0 .35rem;
    line-height: 1.15rem;
    font-size: .75em;
    font-weight: 600;
    text-align: center;
    color: #1a1a1a;
    background: #f0d78c;
    border-radius: .6rem;
}
.ft-style-group.level-error .ft-style-count { color: #fff; background: #c62828; }
.ft-style-occurrences {
    margin: .25rem 0 .25rem 1.5rem;
    padding-left: .75rem;
    border-left: 2px solid #e1e1e1;
}
.ft-style-occurrences li {
    cursor: pointer;
    border-radius: .3rem;
    padding: .1rem .3rem;
    margin: 0 -.3rem;
}
.ft-style-occurrences li:hover { background: #f0f0f0; }
.ft-style-occurrences li:focus { outline: 2px solid #4a90d9; outline-offset: -2px; }
.ft-style-occurrences-more { font-size: .8em; color: #666; cursor: default; }
.ft-style-occurrences-more:hover { background: none; }

/* Jump target: <mark class="ft-style-hit"> for a match inside one text node,
   or .ft-style-hit-block on the nearest block ancestor when it spans more
   than one. Faded out by ft-style-panel.js after a few seconds. */
.ft-style-hit,
.ft-style-hit-block {
    background: #fff59d;
    outline: 2px solid #e0a800;
    outline-offset: 1px;
    transition: background-color .6s ease, outline-color .6s ease;
}
.ft-style-hit-block { border-radius: .2rem; }
.ft-style-hit.ft-style-hit-fade,
.ft-style-hit-block.ft-style-hit-fade {
    background: transparent;
    outline-color: transparent;
}
@media print {
    .ft-style-hit, .ft-style-hit-block { background: none; outline: none; }
}