/**
 * SeekQuarry/Yioop --
 * Open Source Pure PHP Search Engine, Crawler, and Indexer
 *
 * Copyright (C) 2009 - 2026  Chris Pollett chris@pollett.org
 *
 * LICENSE:
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * END LICENSE
 *
 * @author Chris Pollett chris@pollett.org
 * @license https://www.gnu.org/licenses/ GPL3
 * @link https://www.seekquarry.com/
 * @copyright 2009 - 2026
 * @filesource
 */
/*
    search.css
    Main stylesheet for Yioop search engine
 */
/*
   The colors the interface is drawn in, named once here so that a rule
   below asks for the color it wants rather than repeating what that
   color happens to be.

   The greys are a ladder from black to white numbered by how light each
   rung is, so --gray-0 is black, --gray-100 is white, and --gray-33 sits
   a third of the way up. Where two rungs are close together the
   stylesheet was already using both.

   The four beneath them are what a site sets for itself on the Appearance
   screen. Those used to be written into the head of every page along with
   every selector that used them; a page now sends just these four values
   and the rules that read them stay here, where a browser can keep them.

   --control-height is how tall a thing you can press or type into stands:
   an icon button, a select, a search field. It was written out seven times
   over, which is why a row of controls that ought to line up does not.

   --toolbar-control-height is a touch taller, the height the resource
   toolbar's row settles at: a dropdown there carries an inner list item
   whose own height comes out near 2.17rem, so the row is set to 2.2rem to
   hold the tallest control without cutting any off.

   Two tokens above the type sizes make things fluid: --fluid-onset is the
   viewport width (68.75rem) at and below which type and the page-content
   widths sit at their base size, and above which they grow; --fluid-rate
   is how fast they grow per unit of viewport past that onset. Each fluid
   size is a clamp of a floor at its base, a middle that grows with the
   viewport once past the onset, and a ceiling a few points above.

   The type sizes are the seven the stylesheets lean on, smallest first.
   --font-size-base is the size body text is set in, and it is the one a
   browser would have chosen anyway: 12pt is 16px, the default. Naming
   them gathers what was 142 declarations into seven values, so that
   saying type in a unit a screen understands rather than a printer
   becomes a change to seven lines here.
 */
:root
{
    /* The site is light by default, so light-dark() below resolves to its
       first value and the page looks exactly as it did. When a site turns
       on light/dark in Appearance, the layout adds color-scheme-auto to the
       root, color-scheme becomes "light dark", and every light-dark() pair
       follows the visitor's prefers-color-scheme. The dark values invert
       the ladder end for end, so a gray used as text (near 0) becomes light
       on dark and a gray used as a panel (near 100) becomes dark, and the
       whole interface turns over from this one place. */
    color-scheme: light;
    --gray-0: light-dark(#000000, #ffffff);
    --gray-13: light-dark(#222222, #e8e8e8);
    --gray-20: light-dark(#333333, #dddddd);
    --gray-27: light-dark(#444444, #cccccc);
    --gray-33: light-dark(#555555, #bbbbbb);
    --gray-40: light-dark(#666666, #aaaaaa);
    --gray-47: light-dark(#777777, #9a9a9a);
    --gray-50: light-dark(#808080, #909090);
    --gray-53: light-dark(#888888, #888888);
    --gray-60: light-dark(#999999, #777777);
    --gray-67: light-dark(#aaaaaa, #666666);
    --gray-73: light-dark(#bbbbbb, #555555);
    --gray-80: light-dark(#cccccc, #444444);
    --gray-82: light-dark(#d0d0d0, #3a3a3a);
    /* How much narrower than the browser window the content column
       stands, so a page is not flush against both edges of the screen. */
    --page-side-gap: 1.2rem;
    /* The color a stretch of the preview takes when it answers what is
       picked out in the source: light enough to read through, and dark
       enough to find when the two panes are being compared. */
    --color-mark: light-dark(#ffe9a8, #5a4a17);
    /* How tall the shared editing and preview window stands: most of the
       browser window, with a ceiling so a very tall screen does not give
       the writer a box a whole page long to scroll. */
    --wiki-edit-window-height: min(70vh, 44rem);
    --gray-87: light-dark(#dddddd, #333333);
    --gray-88: light-dark(#e0e0e0, #2c2c2c);
    --gray-93: light-dark(#eeeeee, #262626);
    --gray-94: light-dark(#f0f0f0, #222222);
    --gray-100: light-dark(#ffffff, #1a1a1a);
    /* How wide the reading column runs. The advertisement block was the
       only thing measured to it; the search bar and the count of results
       are held to the same measure so their right edges line up with it
       rather than running to the window's edge. */
    --reading-width: 53.4rem;
    /* How wide a single-line field is let grow. A title or an author is
       a short thing to type, so a box the width of the window gives a
       writer no sense of how much is wanted and leaves the eye traveling
       to reach the end of what it typed. */
    --field-width: 30rem;
    --color-background: var(--gray-100);
    --color-foreground: var(--gray-100);
    --color-sidebar: var(--gray-94);
    --color-topbar: light-dark(#eeeeff, #23233a);
    --fluid-onset: 68.75rem;
    --fluid-rate: 0.005;
    --font-size-1: clamp(10pt,
        calc(10pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 12pt);
    --font-size-2: clamp(11pt,
        calc(11pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 13pt);
    --font-size-3: clamp(12pt,
        calc(12pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 15pt);
    --font-size-4: clamp(13pt,
        calc(13pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 16pt);
    --font-size-5: clamp(14pt,
        calc(14pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 18pt);
    --font-size-6: clamp(16pt,
        calc(16pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 20pt);
    --font-size-7: clamp(18pt,
        calc(18pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 22pt);
    --font-size-base: var(--font-size-3);
    /* How wide and tall a picture stands beside an item in a category's
       list: about two centimeters, in the same units as the text so it
       keeps its place beside it. */
    --list-picture-side: 4.75rem;
    /* How rounded the corners of such a picture are: enough to soften
       them against the words beside them without making a badge of the
       picture. */
    --list-picture-corner: 0.5rem;
    /* How much room stands between two places on a front page, whether
       side by side or one above the other. */
    --place-gap: 1rem;
    --control-height: 2rem;
    --toolbar-control-height: 2.2rem;
    /* The least width a page-resource folder gives one card in its grid
       layout. The folder divides the width it is handed by this figure to
       decide how many columns fit, so it is what a thumbnail and the name
       under it need to stay readable rather than a column count. */
    --resource-card-min: 16.5rem;
    /* The least width the name column of the folder's list layout keeps.
       Below this the name stops giving room back to the columns beside
       it, which is the point at which those columns are dropped. */
    --resource-name-min: 8rem;
}
/* The layout adds this class to the root only when the site has turned on
   light/dark in Appearance. It widens color-scheme so the light-dark()
   pairs above follow the visitor's prefers-color-scheme; without it the
   root stays "light" and the site keeps its single built-in appearance. */
:root.color-scheme-auto
{
    color-scheme: light dark;
}
/*
   What those four settable colors are painted onto.
 */
body
{
    background-color: var(--color-background);
}
.frame,
.icon-upload,
.current-activity,
.light-content,
.small-margin-current-activity,
.suggest-list li span.unselected
{
    background-color: var(--color-foreground);
}
.foreground-color,
.icon-upload
{
    color: var(--color-foreground);
}
.seen-resource,
.cookie-consent,
#nav-container
{
    background-color: var(--color-sidebar);
}
.light-content
{
    border: 3px solid var(--color-sidebar);
}
.sidebar-color
{
    color: var(--color-sidebar);
}
.top-color,
.suggest-list li span.selected,
.search-button:hover,
.search-box-inner:focus-within .search-reset-button:hover,
.search-box
{
    background-color: var(--color-topbar);
}
.top-container,
.top-container .inner-bar
{
    background: var(--color-topbar);
}
.display-ad p,
p.start-ad
{
    background-color: #DFD;
}
html, body, .subsearch ul
{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
/*
   We begin with some generic global styles
   and classes
 */
h1.slim,
h2,
h3,
h4
{
    margin-bottom: 0;
    margin-top: 0;
}
h1.slim
{
    font-size: 24pt;
}
p
{
    margin: 0;
    padding: 0;
    width: auto;
}
input:disabled
{
    color:var(--gray-33);
}
ol li li
{
    list-style-type: lower-alpha;
}
ol li li li
{
    list-style-type: lower-roman;
}

.echo-link
{
    color: var(--gray-50);
    font-size: var(--font-size-2);
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.hidden
{
    visibility: hidden;
}
.no-bullet
{
    list-style-type: none;
}
.disabled {
    pointer-events: none;
    text-decoration: none;
}
.left
{
    float: left;
}
.right
{
    float: right;
}
.clear
{
    clear:both;
}
.none
{
    display:none;
}
.no-bold
{
    font-weight:normal;
}
.nowrap
{
    white-space: nowrap;
}
.no-margin
{
    margin: 0;
}
.no-min-height
{
    min-height: unset !important;
}
.inline div,
.inline form,
.inline p
{
    display: inline-block;
}
.inline ul,
.inline li
{
    display: inline;
    list-style-type: none;
}
.inline li
{
    border-right: 2px solid var(--gray-0);
    padding:0.3rem;
}
.inline li:first-child
{
    border-left: 2px solid var(--gray-0);
    padding:0.18rem;
}
.indent
{
    text-indent: 1.5rem;
}
span.indent1
{
    margin-left: 1.5rem;
}
span.indent2
{
    margin-left: 3rem;
}
span.indent3
{
    margin-left: 4.5rem;
}
span.indent4
{
    margin-left: 6rem;
}
span.indent5
{
    margin-left: 7.5rem;
}

.html-ltr .float-opposite,
.html-rtl .float-opposite
{
    float: inline-end;
}.html-ltr .float-same,
.html-rtl .float-same
{
    float: inline-start;
}.align-right
{
    text-align: right;
}
.align-left
{
    text-align: left;
}
.align-center
{
    text-align: center;
}.html-ltr .align-opposite,
.html-rtl .align-opposite
{
    text-align: end !important;
}.html-ltr .align-same,
.html-rtl .align-same
{
    text-align: start !important;
}.top-space
{
    position:relative;
    top: 0.5rem;
}
.no-padding
{
    padding: 0px !important;
}
.small-padding
{
    padding: 2px;
}
.medium-padding
{
    padding: 0.25rem;
}
.large-padding
{
    padding: 0.5rem;
}
.top-space-medium
{
    position:relative;
    top: 0.25rem;
}
.top-space-px
{
    position:relative;
    top: 1px;
}
.blockquote
{
    margin-left: 1.8rem;
    margin-right: 1.8rem;
}

.no-decoration
{
    text-decoration: none;
}
.underline-hover
{
    text-decoration: none;
}
.underline-hover:hover
{
    text-decoration: underline;
}
.tiny-font
{
    font-size:9.5pt !important;
}
.medium-large
{
    font-size:20pt !important;
}
.small-font
{
    font-size: var(--font-size-3) !important;
}
.smaller-font
{
    font-size:smaller !important;
}
.medium-font
{
    font-size: var(--font-size-6) !important;
}
.big-font
{
    font-size:20pt !important;
}
.bigger-font
{
    font-size: larger !important;
}
.huge-font
{
    font-size:26pt !important;
}

.underline
{
    text-decoration: underline;
}
.dotted-underline
{
    border-bottom: 2px dotted;
}
.black,
.black-inside *
{
    color: var(--gray-0);
}
.red,
.red-inside *
{
    color: #D00;
}
.field-error
{
    border: 1px solid #D00;
    box-shadow: 0px 0px 3px 2px #D00;
}
.field-ok
{
    border: 1px solid green;
    box-shadow: 0px 0px 3px 2px green;
}
.required-star
{
    color: #D00;
    font-size: 1.4em;
    font-weight: bold;
    vertical-align: middle;
    margin-left: 0.25em;
}
.password-requirements-text
{
    display: block;
    max-width: 11.4rem;
}
.purple,
.purple-inside *
{
    color: purple;
}
.green,
.green-inside *
{
    color: green;
}
.podcast-spin
{
    display: inline-block;
    vertical-align: middle;
    transform-origin: center center;
    animation: podcast-spin-rotate 1.2s linear infinite;
}
/* On a page that lists files, the row of wiki controls is drawn inside
   the file list controls so the two share one line. It carries a top
   margin for the case where it stands on its own, which inside this row
   would set it below its neighbors. */
.podcast-controls-row > .wiki-edit-controls
{
    margin-bottom: 0;
    margin-top: 0;
}
.podcast-controls-row:has(> .wiki-edit-controls)
{
    flex-wrap: wrap;
}
.podcast-controls-row
{
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.podcast-controls-row .media-controls
{
    flex: 1 1 auto;
    margin-bottom: 0;
}
.podcast-controls-row #podcast-status-body
{
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1;
    position: relative;
    top: 0.1875rem;
}
@keyframes podcast-spin-rotate
{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.white,
.white-inside *
{
    color: var(--gray-100);
}
.highlight,
.back-red
{
    background-color: red;
}
.back-aliceblue
{
    background-color: aliceblue;
}
.back-gold
{
    background-color: #fafad2;
}
.back-ghostwhite
{
    background-color: ghostwhite;
}
.back-ivory
{
    background-color: ivory;
}
.back-honeydew
{
    background-color: honeydew;
}
.back-floralwhite
{
    background-color: floralwhite;
}
.back-lavender
{
    background-color: lavender;
}
.back-green
{
    background-color: green;
}
.back-light-coral
{
    background-color: lightcoral;
}
.back-light-blue
{
    background-color: lightblue;
}
.back-blue
{
    background-color: blue;
}
.back-light-green
{
    background-color: lightgreen;
}
.back-green
{
    background-color: green;
}
.back-light-gray
{
    background-color: var(--gray-93);
}
.back-gray
{
    background-color: var(--gray-82);
}
.back-ghost
{
    background-color: ghostwhite;
}
.gray
{
    color: var(--gray-33);
}
.light-gray
{
    color: var(--gray-73);
}
.back-dark-gray
{
    background-color: var(--gray-80);
}
.gray-link,
.gray-link a
{
    color: var(--gray-33);
    text-decoration: none;
}
.gray-link:hover,
.gray-link a:hover
{
    text-decoration: underline;
}
.gray-text
{
    color: var(--gray-33);
}
.white
{
    color: var(--gray-100);
}
a.echo-link,
a.hover-link,
.echo-link a,
.hover-link a
{
    text-decoration: none;
}
a.echo-link:hover,
a.hover-link:hover,
.echo-link a:hover,
.hover-link a:hover
{
    text-decoration: underline;
}
.hover-lightgray:hover
{
    background-color: var(--gray-82);
    border-radius:5px;
}
.back-yellow
{
    background-color: yellow;
}
.center-page
{
    left: 0;
    margin: auto;
    max-width: 90%;
    overflow-wrap: break-word;
    position: fixed;
    right: 0;
    text-align: center;
    top: 30%;
}
.warning
{
    color:red;
}
.clear
{
    clear: both;
}
.rounded *
{
    border-radius: 8px;
}
.width-half
{
    width:50%;
}
.width-three-quarter
{
    width:75%;
}
.width-half img,
.width-three-quarter img
{
    width:100%;
}
.frame
{
    border: 1px solid var(--gray-80);
    position: relative;
}
.solid-border {
    border: 1px solid var(--gray-80);
    border-radius: 8px;
}
.dashed-border {
    border: 1px dashed var(--gray-80);
    border-radius: 8px;
}

.very-narrow-field
{
    width: 6rem;
    font-size: var(--font-size-1);
    height:1.5625rem;
}

.narrow-field
{
    width: 11.4rem;
}

.wide-field
{
    width: 18rem;
}

.extra-wide-field
{
    width: 30rem;
}

.range-field
{
    border: 1px solid var(--gray-50);
    display:inline-block;
    margin: 0.1875rem;
    padding: 0.1875rem;
}
.range-field hr
{
    width: 7%;
}
.tall-text-area
{
    height: 24rem;
    width: 100%;
}

.no-resize
{
    resize: none;
}
.formatted-share-wall
{
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    margin: 0.1875rem;
    max-height: 24rem;
    overflow-y: scroll;
    padding: 0;
    resize: none;
}
.formatted-share-wall > div
{
    counter-reset: line;
    display: table;
    font: 0.8125rem monospace;
    line-height: 1.2rem;
    white-space: pre;
    width: 100%;
}
.formatted-share-wall > div > div
{
    display: table-row;
}
.formatted-share-wall > div > div:before
{
    background-color: var(--gray-94);
    counter-increment: line;
    content: counter(line) ".";
    display: table-cell;
    overflow-x: scroll;
    text-align: right;
    width:3em;
}
.share-wall
{
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    height: 24rem;
    margin: 0.1875rem;
    padding: 0;
    resize: none;
    width: 99%;
}
.small-text-area
{
    height: 15rem;
    width: 100%;
}

/* auto-fill fits as many card columns as the folder's own width allows and
   shares any width left over between them, so the folder answers the room
   it is given rather than a column count picked per screen size. */
.grid-container
{
    display: grid;
    gap: 0.6rem;
    grid-template-columns:
        repeat(auto-fill, minmax(var(--resource-card-min), 1fr));
}

.dragging-resource,
.dragging-resource td
{
    opacity: 0.5;
}
.resource-drag-count
{
    background-color: var(--gray-93);
    border-radius: 4px;
    border: solid 1px var(--gray-50);
    color: var(--gray-0);
    left: -1000px;
    padding: 4px 8px;
    position: absolute;
    top: -1000px;
}
.selected-resource,
.selected-resource td
{
    /* the same fill the mail list marks a chosen row with, so choosing
       several resources looks the same as choosing several messages */
    background-color: #e0d8f5;
}
.selected-resource:hover,
.selected-resource:hover td
{
    background-color: #d6cce8;
}
.grid-resource
{
    border: 1px solid var(--gray-0);
    border-radius: 5px;
    overflow-x: auto;
    padding: 0.3rem;
    text-align: center;
}
tr.parent-folder-row
{
    background-color: #eef2fb;
    border-bottom: 1px solid #b9c4dd;
}
tr.parent-folder-row td
{
    border-bottom: 1px solid #b9c4dd;
}
.parent-folder-link
{
    color: blue;
    text-decoration: underline;
    font-weight: bold;
}
.grid-resource.parent-folder-row
{
    border: 2px solid blue;
    background-color: #eef2fb;
}
.parent-folder-detail
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.375rem;
    border: 2px solid blue;
    border-radius: 5px;
    background-color: #eef2fb;
}

.grid-resource input
{
    text-align:center;
    max-width:100%;
}
.seen-resource input
{
    background-color: inherit;
}
.seen-resource input:focus-within
{
    background-color: var(--gray-100);
}

.list-resource button,
.list-resource .media-anchor-button,
.grid-resource .media-anchor-button,
.grid-resource button,
h2.resource-field .media-anchor-button,
h2.resource-field button,
.media-detail-description button
{
    display: none;
}
#info-item
{
    background-color: var(--gray-100);
    border: 2px solid var(--gray-50);
    border-radius: 15px;
    display: none;
    height: calc(100% - 12rem);
    left:3rem;
    opacity: 1.0;
    padding: 0.3125rem;
    position: fixed;
    top: 7.5rem;
    width: calc(100% - 12rem);
    z-index: 100;
}

#detail-item
{
    border: 1px solid var(--gray-0);
    display: block;
    height: 26.4rem;
}

#info-item iframe
{
    border-radius: 15px;
    height: calc(100% - 3rem);
    margin-left:1.2rem;
    width: calc(100% - 2.4rem);
}
#detail-item iframe
{
    height: 100%;
    width: 100%;
}
.detail-container
{
    display: flex;
    flex-direction: row;
    height: 9.6rem;
    overflow-x: auto;
    vertical-align: bottom;
}
.detail-resource
{
    border: 1px solid var(--gray-0);
    border-radius: 5px;
    display: inline-block;
    margin: 0.3rem;
    overflow-x: hidden;
    padding: 0.3rem;
    text-align: center;
    min-width: 12rem;
    max-width: 12rem;
}
.detail-resource img
{
    height: 6rem;
}

.resource-thumb
{
    position: relative;
}
.resource-edit-pen
{
    bottom: 0.15rem;
    filter: drop-shadow(0 0 2px var(--gray-100));
    height: 1.1rem;
    position: absolute;
    right: 0.15rem;
    width: 1.1rem;
}
.resource-edit-pen-large
{
    bottom: 0.4rem;
    height: 2.4rem;
    right: 0.4rem;
    width: 2.4rem;
}
.grid-resource img
{
    height:7.8rem;
}

.resource-description
{
    overflow-wrap: break-word;
    white-space: pre;
}

div[data-badge]::after,
.badge
{
    border: 1px solid var(--gray-0);
    border-radius: 10px;
    display: inline-block;
    font-size: var(--font-size-1);
    left: 1.25rem;
    padding: 2px;
    position: absolute;
    top: 0;
}

div[data-badge]::after
{
    background-color: green;
    color: var(--gray-100);
    content: attr(data-badge);
    top: -0.9375rem;
    left: -0.625rem;
}

.detail-container div[data-badge]::after,
grid-container div[data-badge]::after,
.detail-container .badge,
.grid-container .badge
{
    font-size: var(--font-size-6);
    left:0px;
}

.resizable
{
    resize: horizontal;
    overflow: auto;
}
h2.resource-field input
{
    font-size: 24pt;
    font-weight: bold;
    text-align: center;
}
/* The width left after the row's action buttons, which stay in the flow
   whether or not they are showing so the field does not change width when
   the row is focused. There is no floor under it: the column the field
   sits in already keeps a minimum, and a floor here was what stopped the
   folder narrowing past about five hundred pixels. */
.resource-field input
{
    border:0;
    color:var(--gray-0);
    min-width: 0;
    padding:2px;
    width:calc(100% - 3.125rem);
}
/* The name is the column a reader reads and renames in, so it is the
   column given any width left over; the columns beside it take what
   their content needs. Their widths are set by the folder's grid
   template rather than here. */
.resource-modified-column
{
    white-space: nowrap;
}

.resource-field .user-accounts-edit-toolbar
{
    vertical-align: middle;
    display: none;
}
.list-resource:focus-within .resource-field .user-accounts-edit-toolbar,
.grid-resource:focus-within .resource-field .user-accounts-edit-toolbar,
.resource-field:focus-within .user-accounts-edit-toolbar,
.media-detail-description:focus-within .user-accounts-edit-toolbar
{
    display: inline-flex;
}
.user-accounts-edit-btn
{
    vertical-align: middle;
}
.resource-field input:hover
{
    border:1px var(--gray-50) solid;
    border-radius:5px;
    text-decoration:underline;
}
.info-link
{
    padding: 0.3125rem;
    text-decoration:none;
}
.info-link:hover
{
    border: 1px solid blue;
    background-color:var(--gray-93);
    border-radius: 5px;
    color:blue;
}
.resource-field:focus-within input
{
    border:1px var(--gray-50) solid;
    border-radius:5px;
    color:var(--gray-0);
    text-decoration:none;
}
.list-resource .resource-field:focus-within input,
.grid-resource .resource-field:focus-within input
{
    width: calc(100% - 10.3125rem);
}
.user-accounts-edit-btn
{
    line-height: 1;
    justify-content: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.resource-field .user-accounts-edit-btn
{
    min-height: 1.6em;
}
.resource-more-glyph
{
    display: block;
    line-height: 1;
    margin-top: -0.5em;
}
.grid-resource:focus-within button:not(.user-accounts-edit-btn),
h2.resource-field:focus-within button:not(.user-accounts-edit-btn),
.list-resource:focus-within button:not(.user-accounts-edit-btn),
.media-detail-description:focus-within button:not(.user-accounts-edit-btn)
{
    background-color: #F0F0F6;
    border: 1px solid var(--gray-50);
    border-radius: 5px;
    color: var(--gray-0);
    display: inline;
    font-size: var(--font-size-2);
    font-weight: bold;
}
.grid-resource:focus-within .user-accounts-edit-btn,
h2.resource-field:focus-within .user-accounts-edit-btn,
.list-resource:focus-within .user-accounts-edit-btn,
.media-detail-description:focus-within .user-accounts-edit-btn
{
    display: inline-flex;
}
.grid-resource:focus-within .resource-more-menu,
h2.resource-field:focus-within .resource-more-menu,
.list-resource:focus-within .resource-more-menu,
.media-detail-description:focus-within .resource-more-menu
{
    display: inline-block;
}
.media-detail-description:focus-within div
{
    margin: 0.3125rem;
    text-align:center;
}
.grid-resource:focus-within .media-anchor-button,
h2.resource-field:focus-within .media-anchor-button,
.list-resource:focus-within .media-anchor-button
{
    background-color: #F0F0F6;
    border:1px solid var(--gray-50);
    border-radius:5px;
    color:var(--gray-0);
    display:inline-block;
    font-size: var(--font-size-2);
    font-weight:bold;
}
.list-resource:focus-within button svg,
.grid-resource:focus-within button svg,
.resource-field:focus-within button svg
{
    width: 1.375rem;
    height: 1.375rem;
}
.seen-resource:focus-within button,
.seen-resource:focus-within button,
.seen-resource:focus-within .media-anchor-button,
.seen-resource:focus-within .media-anchor-button
{
    background-color: var(--gray-100);
}
.grid-resource:focus-within button:hover,
.list-resource:focus-within button:hover
{
    background-color: var(--gray-82);
}
.media-detail-description
{
    margin:auto;
    width:60%;
}

.media-detail-description textarea
{
    border:0;
    color:var(--gray-0);
    padding:2px;
    width:100%;
    height: 9rem;
}
.media-detail-description textarea:hover
{
    border:1px var(--gray-50) solid;
    border-radius:5px;
    text-decoration:underline;
}
.media-detail-description:focus-within textarea
{
    border:1px var(--gray-50) solid;
    border-radius:5px;
    color:var(--gray-0);
    text-decoration:none;
}
.medium-text-area
{
    height: 15rem;
    width: 100%;
}

.short-text-area
{
    width: 98%;
    height: 6rem;
}

.short-text-area-two
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--font-size-6);
    height: 6rem;
}
.short-text-area-three
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--font-size-6);
    height: 4.2rem;
}
.center,
.center-inside *
{
    margin: 0 auto 0 auto;
    text-align: center;
}
.bold
{
    font-weight: bold;
}
.sides-margin
{
    margin-left:3.6rem;
    margin-right:3.6rem;
}
.reduce-top
{
    position: relative;
    top: -0.6rem;
}
.top-margin
{
    margin-top: 1.2rem;
}
.top-bottom-margin
{
    margin: 1.2rem 0 1.2rem 0;
}
.small-top-bottom-margin
{
    margin: 0.6rem 0 0.6rem 0;
}

.bottom-margin
{
    margin-bottom: 1.2rem;
}
.no-margin
{
    margin: 0 !important;
}
.tiny-margin
{
    margin: 1px !important;
}
.small-margin
{
    margin: 2px !important;
}
.medium-margin
{
    margin: 0.25rem !important;
}
.large-margin
{
    margin: 0.5rem !important;
}
.box
{
    border: 1px ridge var(--gray-80);
    padding: 0.1875rem;
}
.black-box
{
    border:2px ridge var(--gray-0);
    padding:0.3125rem;
}
.light-gray-box
{
    border:2px ridge var(--gray-73);
    padding:0.3125rem;
}
.slight-pad
{
    padding: 0.6rem;
}

.border-top
{
    border-top:2px solid var(--gray-0);
    padding-top:0.3125rem;
}
.align-top
{
    vertical-align: top;
}
fieldset
{
    border-color:var(--gray-0);
}
/* The name of a group of settings reads as a heading for what follows it,
   so it is set in bold beside the mark that opens its help. */
fieldset > legend
{
    font-weight: bold;
}
/* The row holding the save button stands on its own beneath the groups of
   settings, so its table runs their full width; centering within a table
   only as wide as the button leaves the button where it started. */
.save-row
{
    width: 100%;
}
/* set up prefixes for left-to-right, right-to-left and vertical text support*/
.html-tb
{
    -ms-block-progression: tb;
}
.html-rl
{
    -ms-block-progression: rl;
}
.html-lr
{
    -ms-block-progression: lr;
}
.html-rtl
{
    direction: rtl;
    text-align: right;
}
.html-ltr
{
    direction: ltr;
    text-align: left;
}
body.html-rl-tb
{
}
body.html-lr-tb
{
    writing-mode: horizontal-tb;
}
body.html-tb-rl
{
    writing-mode: vertical-rl;
}
body.html-tb-lr
{
    writing-mode: vertical-lr;
}
/* set up global font preferences */
body
{
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    margin:  0;
    padding: 0;
    width: auto;
}
/* Narrow phones are handled by the @media (max-width: 600px) block at
   the end of this file -- an attempt has been made to make the default
   wide version of the page work with tablets
*/

.body-container
{
    border: 0;
    margin: auto;
    /* the content column holds its designed width on a normal window and
       is allowed to grow toward the viewport on a wide one, up to a
       ceiling; below the onset the middle term is at or under the floor,
       so nothing changes from how it was. making the floor larger will
       affect help visibility. both the width and the floor beneath it are
       held to the window as well, because a floor the window cannot meet
       is what made every page wider than its own window between the phone
       layout's cutoff and the width the floor asks for. */
    width: calc(100% - var(--page-side-gap));
    min-width: min(66rem, 100%);
    padding: 0;
}
.search-body
{
    width: min(100%, clamp(75rem,
        calc(75rem + (100vw - var(--fluid-onset)) * 0.5), 90rem));
    min-width: min(75rem, 100%);
}
.html-ltr .body-container,
.html-ltr .top-container,
.html-rtl .body-container,
.html-rtl .top-container
{
    transition: margin-left .25s ease-in;
}/* bar on which web, images, video subsearches and sign-in stuff live
   for many of the below things we need to handle them different on the landing
   page from pages where search results appear
 */
.top-container
{
    height: 4.0625rem;
    left: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 100%;
    z-index: 10;
}
.top-container.landing
{
    background-color: var(--gray-100);
}
.top-container .inner-bar
{
    height: 3.75rem;
    margin: 0;
}
.top-container.landing .inner-bar
{
    background-color: var(--gray-100);
}

/* The way out of a page's history stands on the same line as the button
   that asks for a difference, rather than dropping beneath it. */
.wiki-history-close
{
    display: inline-block;
    float: none;
    margin-inline-start: 0.5rem;
    vertical-align: middle;
}
/* The control for a page keeping itself is a button with a border, so
   it reads as something to press. Its arrows are drawn in the same ink
   as the words around them, over a light green field while the page is
   being kept and a light red one while it is not, with a line across
   them when off. */
/* The button stands a little larger than the toolbar's other buttons,
   since what it does is a choice rather than a stroke of markup. */
/* The keeping control and the save beside it share this box, so it is
   given room for both rather than the width of one, which had put the
   second underneath the first. */
.wiki-buttons .wikibtn-autosave.icon-button-container
{
    height: 2.07rem;
    width: auto;
    white-space: nowrap;
}
/* The two controls are given their size outright rather than taking the
   whole of the box they sit in, since that box now holds both of them and
   a share of it is not the size either should be. */
.autosave-on,
.autosave-off,
#wiki-save-button,
#wiki-save-as-button
{
    border: 1px solid var(--gray-50);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--gray-0);
    display: inline-block;
    height: 2.07rem;
    line-height: 0;
    padding: 2px;
    vertical-align: middle;
    width: 1.725rem;
}
#resource-save-controls
{
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    line-height: 0;
    vertical-align: middle;
}
#wiki-save-button,
#wiki-save-as-button
{
    background-color: var(--gray-94);
    margin-inline-start: 0.25rem;
}
/* The Save As mark is the floppy the plain save wears with a small
   yellow pencil laid over its lower corner. The span holds the floppy
   and gives the pencil a box to be placed against; the pencil is drawn
   over the glyph's lower right, small enough that the floppy still
   reads as the disk beside it. */
#wiki-save-as-button .save-as-glyph
{
    display: inline-block;
    position: relative;
}
#wiki-save-as-button .save-as-pen
{
    bottom: -0.1rem;
    height: 0.9rem;
    position: absolute;
    right: -0.2rem;
    width: 0.9rem;
}
.autosave-on
{
    background-color: var(--green-90, #d7f5dd);
}
.autosave-off
{
    background-color: var(--red-90, #f9d9d9);
}
.autosave-on .autosave-bar
{
    display: none;
}
/* The word saying a save is happening stands beside the button rather
   than in place of its arrows, in the size the toolbar uses. */
.autosave-saying
{
    color: var(--green-40, #157a3a);
    font-size: var(--font-size-5);
    font-weight: bold;
    margin-inline-start: 0.25rem;
    vertical-align: middle;
}
/* The markup that has no mark of its own is offered as a list. There is
   more of it than fits above a page being written, so the list scrolls
   rather than pushing the writing area off the screen. */
/* What an article is filed under stands under its last words, set apart
   from them so it reads as a way onward rather than as part of the
   article. */
.article-categories
{
    border-top: 1px solid var(--gray-87);
    font-size: var(--font-size-2);
    margin-top: 1rem;
    padding-top: 0.5rem;
}
.article-categories-label
{
    font-weight: bold;
    margin-inline-end: 0.25rem;
}
.article-category
{
    display: inline-block;
    margin-inline-end: 0.5rem;
}
.wikibtn-more-syntax
{
    position: relative;
}
.wiki-syntax-menu
{
    background-color: var(--color-background);
    border: 1px solid var(--gray-70);
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    inset-inline-start: 0;
    min-width: 14rem;
    padding: 0.25rem;
    position: absolute;
    top: 100%;
    z-index: 20;
}
.wiki-syntax-menu-list
{
    list-style: none;
    margin: 0;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0;
}
.wiki-syntax-menu-choice
{
    background: none;
    border: 0;
    cursor: pointer;
    display: block;
    padding: 0.3rem 0.5rem;
    text-align: start;
    width: 100%;
}
.wiki-syntax-menu-choice:hover,
.wiki-syntax-menu-choice:focus
{
    background-color: var(--gray-94);
}
/* A list of what is filed under a category, and the pieces of each item
   in it. These are elements of the site's own making, so each is told how
   to lay itself out; without that a browser lays an unknown element along
   the line like a word. */
/* A category drawn into a page is an ordinary list of links, so that a
   reader's browser and anything reading the page for them can tell what
   it is. It had been a tag of our own invention, which carried a name
   but no meaning. */
.category-list-items
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.category-list-item
{
    display: block;
    margin-bottom: 0.75rem;
}
.category-list-icon
{
    display: block;
}
.category-list-icon img
{
    height: auto;
    max-width: 100%;
}
.category-list-title
{
    display: block;
    font-size: var(--font-size-5);
    font-weight: bold;
    line-height: 1.2;
}
.category-list-description
{
    display: block;
    font-size: var(--font-size-2);
    margin: 0;
}
.category-list-more
{
    font-size: var(--font-size-2);
    margin-top: 0.5rem;
}
/* A place on a front page that has been left empty, and a category that
   holds nothing yet. Both stand where the missing thing would, quiet
   enough to read as a note to whoever is building the page rather than
   as part of it. */
.category-list-empty
{
    display: block;
    color: var(--gray-40);
    font-size: var(--font-size-2);
    font-style: italic;
    padding: 0.5rem 0;
}
.front-page-undefined
{
    color: var(--gray-40);
    font-style: italic;
}
/* An article is written from one block above the writing area. The title,
   the author and the abstract share two columns, so every label ends at
   one place and every field ends at another, and the thumbnail stands a
   little clear of them, level with the title. */
#article-header-top
{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}
/* Each field sits on a line of its own with its name in front of it, the
   names lining up with everything else on the screen. They had been set
   in two columns with the names pushed against the fields, which left
   Title and Author standing well to the right of the Locale and Page
   lines above them. */
#article-header-fields
{
    display: block;
    flex: 0 1 auto;
    max-width: 100%;
}
#article-header-fields > div
{
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
#article-header-fields label
{
    text-align: start;
    white-space: nowrap;
}
#article-header-fields input,
#article-header-fields textarea
{
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
/* The abstract takes both columns, so it ends where the fields above it
   end rather than at a measure of its own. */
#article-header-fields #meta-description-setting label
{
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 0.5rem;
}
#article-header-fields #meta-description-setting textarea
{
    grid-column: 1 / -1;
    width: 100%;
    min-height: 5rem;
}
#article-header-thumb
{
    flex: 0 1 auto;
    max-width: 100%;
}
/* The names an article is filed under run along the line and wrap, since
   a name is short and a page may carry several. */
#article-category-list
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
#article-category-list .tag-item
{
    max-width: none;
    margin-bottom: 0;
}
/* A lead story stands large above the headlines that follow it, and
   those headlines are a plain run of names without pictures. */
.front-page-lead
{
    font-size: var(--font-size-6);
    margin-bottom: 1rem;
}
.front-page-below .category-list-item
{
    border-top: 1px solid var(--gray-87);
    margin-bottom: 0;
    padding: 0.4rem 0;
}
/* What a place shows of each item is said by the list's own style now --
   standard, compact or minimal -- so the place no longer decides it. This
   rule hid the picture and the abstract wherever the list stood below a
   lead story, which left a standard list looking like a minimal one. */
/* How large a title is set is the list's business, not the place's, so
   only the weight is set here. Setting a size as well held every title
   down to the size of running text wherever a list stood below a lead
   story. */
.front-page-below .category-list-title
{
    font-weight: normal;
}
/* A row of cards, each holding its picture above its name, wrapping to
   the next line where a window is too narrow to hold them side by side. */
/* Each card is a place of its own and they are written one after
   another, so there is no one box holding the three to lay out as a row.
   Each therefore stands as a column of its own, as many to a line as the
   window has room for and one to a line where it has not. */
.front-page-cards
{
    display: inline-block;
    margin-inline-end: 1rem;
    min-width: 14rem;
    vertical-align: top;
    width: calc(100% / 3 - 1.5rem);
}
.front-page-cards .category-list-item
{
    border: 1px solid var(--gray-87);
    border-radius: 5px;
    flex: 1 1 14rem;
    margin-bottom: 0;
    padding: 0.6rem;
}
/* A grid of four, two across on a wide window and one across on a
   narrow one. */
/* Each place of a grid is written on its own, so there is no one box
   holding the four to lay out. Each stands as a column half the width,
   two to a line where there is room and one where there is not. Laying
   out inside a place instead put every place on a line of its own. */
.front-page-grid
{
    display: inline-block;
    margin-inline-end: 1rem;
    min-width: 16rem;
    vertical-align: top;
    width: calc(100% / 2 - 1.5rem);
}
.front-page-grid .category-list-item
{
    margin-bottom: 0;
}
/* Sections stacked down the page, each set off from the one above it. */
/* Sections down the page: each place is a band the full width of the
   page, headed by what it holds, one below the next, the way a section
   front sets Sports under National. A rule and a gap set each off from
   the one above so two never touch. */
.front-page-sections
{
    border-top: 2px solid var(--gray-60);
    clear: both;
    display: block;
    margin-bottom: var(--place-gap);
    margin-top: var(--place-gap);
    padding-top: 0.75rem;
    width: 100%;
}
/* Whatever two places stand one above the other, a gap stands between
   them, so nothing reads as running into what follows it. */
.front-page-lead-and-list,
.front-page-cards,
.front-page-grid
{
    margin-bottom: var(--place-gap);
}
.front-page-sections .category-list-item
{
    display: flex;
    gap: 0.75rem;
}
.front-page-sections .category-list-icon
{
    flex: 0 0 6rem;
}
/* The shapes a front page can take, drawn small so a writer picks one by
   its look without the choices filling the settings. */
.front-page-layouts
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.front-page-layout
{
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 5rem;
}
/* The button stands in its own line above the picture rather than over
   a corner of it. */
.front-page-layout input
{
    margin: 0;
}
.front-page-drawing
{
    border: 1px solid var(--gray-60);
    fill: var(--gray-60);
    height: 2.4rem;
    width: 3.2rem;
}
.front-page-layout input:checked + .front-page-drawing
{
    border-color: var(--gray-0);
    fill: var(--gray-0);
}
.front-page-layout-name
{
    font-size: var(--font-size-1);
    text-align: center;
}
.top-landing-spacer
{
    clear:both;
    height:12rem;
}

/* this is for informational messages when settings are changed or admin stuff
   done
 */
#message
{
    left: 12rem;
    position: fixed;
    right: 12rem;
    text-align: center;
    top: 0.6rem;
    width:auto;
    z-index: 13;
}

.display-message
{
    color:#D00;
}
/*
   top nav bar and settings toggle
 */
/* less the padding either side, which sits outside the width being
   floored, so the bar gives way to a window narrower than its design */
.nav-bar
{
    min-width: min(57rem, calc(100% - 0.625rem));
    padding: 0.3125rem;
}
.landing .nav-bar
{
    min-width: unset;
    width: 4.0625rem;
}
.nav-bar .title-block
{
    margin:0;
    min-width: min(54rem, 100%);
    max-width:60rem;
    padding:0;
    text-align: center;
}
.nav-bar h1
{
    display: inline;
}
.nav-bar h1 img
{
    position:relative;
    top: 2px;
}
.nav-bar .nav-span
{
    display: inline-block;
    font-family: Arial;
    font-size: 2rem;
    font-weight: 700;
    height: 32pt;
    margin: 2px;
    max-width: 42rem;
    padding: 0;
    position: relative;
    top:-1.25rem;
    white-space: nowrap;
}
/* The account bar holds one activity name beside the home button and
   nothing else, so it is laid out as a centered row and the little house
   sits level with the word. The group bar keeps the inline-block above,
   because it carries a group-name link, colons, and several icon buttons
   whose own alignment the row layout would disturb. */
.nav-bar .nav-span.activity-nav
{
    align-items: center;
    display: inline-flex;
}.html-ltr .nav-bar .nav-span,
.html-rtl .nav-bar .nav-span
{
    text-align: start;
}.wide-bar-item,
.group-title-item,
.bar-item
{
    display: inline-block;
    margin: 0;
    max-width: 12rem;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-overflow: ellipsis "[..]";
    top: 0.625rem;
}
/* The group's name is an inline-block in a row of plain text and icon
   buttons. Left on the baseline it rides high, because an inline-block
   aligns by the baseline of its last line rather than by its middle;
   asked to align by its middle it sits level with the counts beside it,
   where the name of the row's subject belongs. */
.group-title-item
{
    top: 0;
    vertical-align: middle;
}
.wide-bar-item
{
    max-width: 24rem;
}

.html-ltr #nav-container,
.html-rtl #nav-container
{
    height: 100%;
    inset-inline-start: -18.75rem;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    transition: inset-inline-start .25s ease-in;
    width: 18.75rem;
    z-index:100;
}.html-ltr .menu-options,
.html-rtl .menu-options
{
    position: relative;
    z-index: 100;
}#admin-menu-options
{
    display: none;
}
.menu-options h2
{
    font-size: var(--font-size-4);
    padding: 0;
    margin: 0 0.1875rem 0 0.1875rem;
}
.menu-option-heading,
.option-heading
{
    margin: 0 2px 0 2px;
    padding: 0;
}.html-ltr .menu-option-heading,
.html-rtl .menu-option-heading
{
    position:relative;
    inset-inline-start:-2.22rem;
}.menu-toggle
{
    font-size: var(--font-size-4);
    margin: 0;
    padding: 0 0.6rem 0 0.6rem;
}
.menu-options ul
{
    font-size: var(--font-size-3);
    margin-bottom: 0.3125rem;
    margin-top: 1px;
}
.menu-options li
{
    padding: 1px;
}

.menu-options select
{
    font-size: var(--font-size-4);
}

#menu-options-background {
    background-color: var(--gray-0);
    display: none;
    min-height: 100%;
    left: 0px;
    opacity: 0.15;
    position: fixed;
    top: 0px;
    transition: all 2s ease-in;
    width: 100%;
    z-index:50;
}
/* controls */
.anchor-button,
.anchor-button-consent,
.vote-button
{
    background-color: var(--gray-94);
    border: ridge 1px var(--gray-87);
    color: var(--gray-0);
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin: 2px;
    padding: 0.25rem;
    text-align: center;
    text-decoration: none;
}
.source-anchor-button
{
    background-color: #E9E9ED;
    border: ridge 1px var(--gray-0);
    border-radius: 5px;
    color: var(--gray-0);
    cursor: pointer;
    display: inline-block;
    font-size: var(--font-size-6);
    margin: 0.1875rem;
    padding: 0.375rem 0.3125rem 0.3125rem 0.3125rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 1px;
}

.vote-button
{
    background-color: var(--gray-87);
    border-radius: 5px;
    color: var(--gray-33);
    margin: 1px;
    min-width:0.9rem;
    padding: 1px;
}
.anchor-button-consent
{
    background-color: var(--gray-40);
    border-radius: 5px;
    color: var(--gray-100);
}
.anchor-button:hover
{
    text-decoration: underline;
}
.anchor-button-consent:hover,
.vote-button:hover
{
    background-color: var(--gray-20);
    color: var(--gray-100);
}
.button-anchor
{
    background:inherit;
    border: 0;
    color: blue;
    font-size: 1rem;
    padding: 0;
    text-decoration:underline;
}
.user-accounts-edit-toolbar
{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 0.25rem;
    vertical-align: middle;
}
.user-accounts-edit-btn
{
    padding: 0 0.3125rem;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    cursor: pointer;
    color: var(--gray-33);
    font-size: var(--font-size-2);
    line-height: 1.4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.user-accounts-edit-btn:hover
{
    background-color: var(--gray-94);
    color: var(--gray-20);
}
.user-accounts-rename-input
{
    display: inline-block;
    width: 100%;
    max-width: 100%;
    padding: 2px 0.375rem;
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
    vertical-align: middle;
}
.resource-more-menu
{
    display: inline-block;
}
.resource-more-options
{
    position: absolute;
    z-index: 10;
    margin-top: 2px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
.resource-more-options a
{
    display: block;
    padding: 0.25rem 0.625rem;
    color: var(--gray-33);
    text-decoration: none;
    font-size: var(--font-size-2);
}
.resource-more-options a:hover
{
    background-color: var(--gray-94);
    color: var(--gray-20);
}

.media-anchor-button
{
    background:inherit;
    color: var(--gray-0);
    font-size: var(--font-size-5);
    display: inline-block;
    margin: 2px;
    padding: 2px;
    position:relative;
    text-decoration:none;
}
.media-anchor-button:hover
{
    background-color:var(--gray-82) !important;
    border-radius:5px;
}

.button-container
{
    display:inline-block;
    position:relative;
}
div[aria-label]:focus-visible:after,
div[aria-label]:hover:after,
span[aria-label]:focus-visible:after,
span[aria-label]:hover:after
{
    background: var(--gray-0);
    border-radius: 3px;
    content: attr(aria-label);
    color: var(--gray-100);
    display: block;
    font-size: var(--font-size-1);
    padding: 0.1875rem;
    position: absolute;
    word-break: normal;
    z-index: 1000;
}
#discuss-button
{
    display:inline-block;
}.html-ltr #discuss-button span[aria-label]:focus-visible:after,
.html-ltr #discuss-button span[aria-label]:hover:after,
.html-rtl #discuss-button span[aria-label]:focus-visible:after,
.html-rtl #discuss-button span[aria-label]:hover:after
{
    inset-inline-end:0px;
}/*
  ComponentView styles
 */
.same-container,
.opposite-container
{
    margin-left: 1%;
    margin-right: 1%;
    max-width: 20%;
    min-width: 14%;
}.html-ltr .same-container,
.html-rtl .same-container
{
    float: inline-start;
}.html-ltr .opposite-container,
.html-rtl .opposite-container
{
    float: inline-end;
}.sub-top-container
{
    margin: 0;
    margin-top: 4.0625rem;
}
.center-container
{
    margin-inline: 1.5rem;
    margin-top: 0;
}
/* the margins either side are what the window has to cover beyond this
   floor, so the floor gives way to them rather than to the window itself */
.search-body .center-container
{
    min-width: min(69rem, calc(100% - 6rem));
}

.center-container .landing
{
    margin: auto;
}
.footer
{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: red;
    color: var(--gray-100);
    text-align: center;
}
.cookie-consent
{
    bottom: 0;
    left: 0;
    padding: 0.4375rem;
    position: fixed;
    text-align: center;
    width: 100%;

}
/*
   Landing page (www.yioop.com) specific css
 */
.small-top
{
    position: relative;
    top:-4.8rem;
}
.medium-top
{
    margin-left:1.8rem;
    margin-right:1.8rem;
    position: relative;
    top:-4.8rem;
}
.square-list
{
    list-style-type: square;
}

/*
   Style tweaks for blog, privacy, bot, settings, and admin pages
 */

/*
   Styles to control logo (image + adjacent text) on various pages
 */
.logo
{
    margin: 0 auto 0 auto;
    left: 0.6rem;
    position: relative;
    right: 0.6rem;
    top: -0.3rem;
}

.request-add
{
    font-size: var(--font-size-3);
    height:0;
    position:relative;
    top:-1.5625rem;
}
.group-request-add
{
    font-size: var(--font-size-3);
    height:0;
}

.feed-back-link
{
    font-size: var(--font-size-3);
}
.group-feed-back-link
{
    font-size: var(--font-size-3);
    margin-left:10.5rem;
    margin-right:10.5rem;
}

.group-wiki-title select,
.group-feed-title select
{
    border-radius:6px;
    font-size: var(--font-size-6);
    font-weight:bold;
    padding:0.25rem;
}
.admin-heading
{
    margin-left: 0.36rem;
    margin-right: 0.36rem;
}
.group-heading
{
    margin: 0.6rem auto 2.4rem auto;
    text-align:center;
}
.group-heading span
{
    position: relative;
    top: -1.875rem;
}
.group-heading span select
{
    border-radius:6px;
    font-size: var(--font-size-3);
    font-weight:bold;
    padding:0.25rem;
    position: relative;
    top:-2px;
}

.landing .logo
{
    min-width: min(36rem, 100%);
    position: relative;
    text-align: center;
    top: 0;
}

.landing.non-search
{
    clear: both;
    margin-top: 9rem;
}
.logo img
{
    border: 0;
    width:12rem;
}
.group-heading img.logo
{
    width: 9rem;
}
.group-comment
{
    margin: 0.625rem 0.5rem 0.625rem 0.5rem !important;
}

.landing .logo img
{
    border: 0;
    width: 18rem;
}

.logo span
{
    position: relative;
    top: -1.8rem;
}

.html-ltr b.logo-subsearch,
.html-rtl b.logo-subsearch
{
    font-size: var(--font-size-3);
    inset-inline-start: 4.375rem;
    position: fixed;
    top: 2.8125rem;
    transition: inset-inline-start .25s ease-in;
}
.logo-subsearch
{
    font-size: 30pt;
    position: relative;
    text-align: center;
    top: -3.125rem;
}

/*
   Styles for footers on various pages
 */
.footer-element
{
    clear:both;
    margin:auto;
    margin-top: 1.5625rem;
    text-align:center;
}

.signin-exit
{
    clear: both;
    margin: 1.5rem auto 1.5rem auto;
    width: 42rem;
    text-align: center;
}

.html-ltr .signin-exit li,
.html-rtl .signin-exit li
{
    text-align: start;
    list-style-type: square;
    margin-inline-start:13.8rem;
}
/*
   If query information is available then web_layout will
   render statistics about all the SQL and search engine
   queries that were executed for a page. These styles
   control how this diagnostic info renders
 */
.query-statistics
{
    border-top: 2px solid var(--gray-50);
    color: var(--gray-40);
    margin-top: 2.4rem;
}

.query
{
    border: 1px solid var(--gray-50);
    margin: 0.6rem;
    padding: 0.3rem;
}
/*
   Styles for the login, settings, and register pages
 */
.html-ltr .cancel,
.html-rtl .cancel
{
    text-align: end;
}

.login
{
    font-size: var(--font-size-6);
    width: 30rem;
    margin: 0 auto 0 auto;
}
#settings-toggle-icon,
#settings-toggle-icon-b
{
    position:relative;
    top:0.3125rem;
}
#settings-toggle-icon-b:hover,
#settings-toggle-icon:hover
{
    background-color: var(--gray-100);
    border: 1px solid var(--gray-0);
    border-radius: 10px;
    height:3.6rem;
    width:2.52rem;
    z-index:1001;
}
.settings .top
{
    font-size:0.875rem;
    margin:0;
    padding:0;
    position:relative;
    top:0.3125rem;
}
.settings .bottom
{
    margin:0;
    padding:0;
    position:relative;
    top:-0.625rem;
}.html-ltr .top-container .settings,
.html-rtl .top-container .settings
{
    color: var(--gray-33);
    float: inline-start;
    font-size: 3.125rem;
    height: 4.8rem;
    position: relative;
    text-align: center;
    top: -0.3125rem;
    width: 2.5rem;
    z-index: 10;
}.register
{
    font-size: var(--font-size-5);
    width: 36rem;
    margin: auto;
}
.login input
{
    font-size: var(--font-size-6);
    margin: 0.3125rem;
}
.register input
{
    font-size: var(--font-size-6);
    margin: 0.3125rem;
    width: 80%;
}

.login button,
.register button
{
    font-size: var(--font-size-6);
}
.register select
{
    font-size: var(--font-size-1);
    width:90%;
}

.user-icon-td
{
    vertical-align: top;
    width: 8.4rem;
}
.user-icon
{
    margin: auto;
    width: 7.8rem;
}

.upload-file
{
    background-color: var(--gray-80);
    border: 3pt var(--gray-60) solid;
    border-radius:13px;
    height: 3rem;
    margin: 1.2rem;
    overflow-wrap: break-word;
    padding: 2px;
    width: 12rem;
    word-wrap: break-word;
}

.full-width
{
    width: 100%;
}
.small-icon
{
    height: 3rem;
    position:relative;
    top:0.625rem;
    width: 3rem;
}

.icon-upload
{
    left:1rem;
    padding-right:2px;
    position:relative;
    width: 9.6rem;
}

/*
   Styles for the statistics for a crawl page
 */
.stats  {
    position: relative;
    top: 0.6rem;
}
.statistics
{
    left: 0.6rem;
    position: relative;
    right: 0.6rem;
}

/*
  Styles for search and search result pages
 */
.search-results
{
    width:inherit;
}
.edit-search-result
{
    position: relative;
    top: 0.4375rem;
}
.edit-search-result ul > li:first-child
{
    border-color: var(--gray-82) !important;
    color: var(--gray-50) !important;
    height: 1.25rem;
    padding: 0 0.3125rem 0.25rem 0.3125rem;
}/* The count of results is placed against this column, so it needs to be
   the frame of reference that placement is measured from. */
#center-container
{
    position: relative;
}
.html-ltr .search-stats,
.html-rtl .search-stats
{
    color: var(--gray-40);
    font-size: var(--font-size-5);
    /* Held to the reading column's own edge rather than floated. As a
       float it shared a line with the panel beside the results, which
       pushed it left of that edge by the panel's whole width. Out of the
       flow it keeps its place whatever else is floating. */
    inset-inline-end: max(0.375rem,
        calc(100% - var(--reading-width) + 0.375rem));
    padding: 0.3125rem;
    position: absolute;
    z-index:-1;
}.search-callout
{
    border-radius: 10px;
    border: 3px solid var(--gray-87);
    padding: 0.3125rem;
    margin-top: 4.0625rem;
    min-height: 2.8125rem;
    width:15rem;
}

.news-result
{
    min-height:7.2rem;
}
.news-result img
{
    border-radius: 10px;
    clear: inline-start;
    height:8.125rem;
    margin-right: 0.3125rem;
    width:15rem;
}

.news-result,
.result
{
    border: 1px solid transparent;
    clear: inline-start;
    line-height: 1.4;
    margin-bottom:0.75rem;
    margin-top:0.75rem;
    padding: 2px;
    width:54rem;
}
.news-result h2 a,
.result h2 a
{
    text-decoration: none;
}
.result h2 a:hover,
.news-result h2 a:hover
{
    text-decoration: underline;
}
.result table tr td
{
    padding: 0 0.3125rem 0 0.3125rem;
}
.result-extras
{
    padding: 0.625rem;
    display: none;
}

.word-cloud-spacer
{
    font-weight: bold;
    color : var(--gray-50);
}
.word-cloud-1
{
    font-size: var(--font-size-6);
    color: #080;
    text-decoration: none;
}
.word-cloud-2
{
    font-size: 15pt;
    color: #090;
    text-decoration: none;
}
.word-cloud-3
{
    font-size: var(--font-size-5);
    color: #0A0;
    text-decoration: none;
}
.word-cloud-4
{
    font-size: var(--font-size-4);
    color: #0B0;
    text-decoration: none;
}
.word-cloud-5
{
    font-size: var(--font-size-3);
    color: #0C0;
    text-decoration: none;
}
.word-cloud:hover
{
    text-decoration: underline;
}
.no-search-results
{
    color: var(--gray-60);
    font-size: var(--font-size-7);
    padding-bottom:3%;
    padding-top:5%;
}
.continuous-result-separator
{
    line-height: 1;
    position:relative;
    top:-0.625rem;
    padding-right: 0.25rem;
}.html-ltr .continuous-result-separator,
.html-rtl .continuous-result-separator
{
    float: inline-start;
}.access-result
{
    box-shadow: 0px 0px 3px 3px var(--gray-80);
    font-size: var(--font-size-3);
    padding: 0.3125rem;
    margin:0.625rem;
    word-break: break-all;
}
.more-groups
{
    margin:0.75rem;
}
#results-container
{
    padding-top: 0.3125rem;
    max-height: 36rem;
    overflow-y: scroll;
}
#feed-clipboard
{
    border: 2px solid var(--gray-50);
    border-radius: 5px;
    background-color:var(--gray-100);
    padding: 2px;
    margin: 2px;
}
#clips-container
{
    padding-top: 0.3125rem;
    max-height: 18rem;
    overflow-y: scroll;
}
.feed-heading
{
    margin:0 auto 0 auto;
    padding: 0;
    width: 42rem;
}
.page-list-header-footer
{
    padding: 0;
    margin: 0 auto 0 auto;
    width: 42rem;
}

.wiki-page-list-result
{
    border-radius:5px;
    box-shadow: 0px 0px 3px 3px var(--gray-80);
    font-size: var(--font-size-3);
    padding: 0.3rem 0.6rem 1.5rem 0.6rem;
    margin: 0.875rem auto 0.875rem auto;
    width:42rem;
}

.group-result
{
    border-radius:5px;
    box-shadow: 0px 0px 3px 3px var(--gray-80);
    padding: 0.3rem 0.6rem 1.5rem 0.6rem;
    margin: 0.5rem auto 0.5rem auto;
}
.small-group-result
{
    border-radius:5px;
    box-shadow: 0px 0px 2px 2px var(--gray-80);
    padding: 0.12rem 0.6rem 0.12rem 0.6rem;
    margin: 0.4375rem auto 0.4375rem auto;
    min-height:3.12rem;
}
.button-group-result
{
    padding: 0.6rem 0.6rem 0.3rem 0.6rem;
    margin:auto;
}
.button-group-result h2,
.news-result h2,
.result h2,
.small-group-result h2,
.group-result h2
{
    font-size: var(--font-size-6);
    font-weight: normal;
}
.result-more
{
    border-radius: 5px;
    border: 1px solid var(--gray-82);
    color: var(--gray-50);
    font-size: var(--font-size-5);
    padding: 1px;
    margin: 0.1875rem;
}
.result-more:hover
{
    background-color: var(--gray-82);
    color: var(--gray-100);
}
.result-fav
{
    width: 1rem;
    height: 1rem;
}
div.button-group-result,
div.small-group-result,
div.group-result
{
    font-size: var(--font-size-3);
    width:42rem;
}

.spell
{
    color: var(--gray-40);
    display:none;
    font-size: var(--font-size-5);
    padding-bottom:0.625rem;
    padding-top:0.625rem;
    z-index: 20;
}
/*
   The next styles are for the built-in search box that comes with
   Yioop rather than the search boxes which can be inserted on wiki pages.
 */
*:focus
{
    outline: none;
}
::-webkit-search-cancel-button
{
    -webkit-appearance: none;
}
.subsearch.footer-element,
.subsearch.copyright
{
    position:relative;
    top: -0.625rem;
}
.copyright
{
    margin-top: 1.5625rem;
}
/* less the padding and border either side, which sit outside the width */
.search-box
{
    border-color: var(--gray-67);
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    padding: 0.25rem;
    margin:auto;
    width: min(48rem, calc(100% - 0.75rem));
}
.search-box-inner
{
    background-color: var(--gray-100);
    border-radius: 5px;
    padding: 2px;
}
.search-box-inner input
{
    appearance: none;
    background-color: var(--gray-100);
    border: 0;
    font-size: var(--font-size-7);
    margin: 0;
    padding: 0.3125rem;
    width: min(42.9rem, calc(100% - 0.625rem));
}
.inner-bar .search-box
{
    width: min(45rem, calc(100% - 0.75rem));
}
.inner-bar .search-box-inner
{
    border: 1px solid var(--gray-67);
    z-index:20;
}
/* The logo and the bar sit side by side on one row. They had been laid
   out one under the other and the bar lifted by a fixed amount to appear
   beside the logo, which stopped landing once the heights around it
   changed, leaving the bar below the logo. */
.inner-bar #search-form
{
    align-items: center;
    display: flex;
    gap: 0.5rem;
    max-width: var(--reading-width);
}
.inner-bar #search-form > a
{
    flex: 0 0 auto;
}
.inner-bar .search-box,
.inner-bar #search-form > .search-box-inner
{
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
/* The bar beside the logo holds its field and its two buttons on one
   line. The field had been given a width of its own, which on a wide
   window left too little room beside it and sent the buttons onto a
   second line, making the bar twice as tall as it should be. Letting the
   field take whatever room is left keeps the bar one line at any
   width. */
.inner-bar .search-box-inner
{
    align-items: center;
    display: flex;
}
.inner-bar .search-box-inner > span
{
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}
.inner-bar .search-box-inner input[type="search"]
{
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.search-box-inner:focus-within .search-reset-button:hover
{
    color: blue;
}
.search-reset-button,
.search-button
{
    background-color: var(--gray-100);
    border: 0 var(--gray-100);
    padding: 0.1875rem 0.3125rem 0.1875rem 0.3125rem;
    font-size: var(--font-size-7);
}
.search-reset-button
{
    font-size: var(--font-size-5);
    visibility: hidden;
}
.search-box-inner:focus-within .search-reset-button
{
    border-radius: 15px;
    background-color: var(--gray-93);
    color: var(--gray-0);
    visibility: visible;
}
.search-button:hover
{
    border-radius: 3px;
    border:1px solid var(--gray-0);
}

.button-box img
{
    left:-1px;
    position:relative;
    top:0.1875rem;
}

.search-field
{
    position: relative;
    min-width:15rem;
    top: -1.5625rem;
}

.search-field input[type="search"]
{
    appearance: none;
    border: 0;
    font-size: var(--font-size-6);
    height: 2.3125rem;
    margin: 0;
    padding: 0.1875rem;
    appearance: none;
    width:53%;
}

.serp-links-score
{
    color: var(--gray-40);
}
/*
    The next styles are for the search boxes which can be inserted
    into wiki pages
 */

.small-search-box
{
    margin: 0.25rem;
    position: static;
    width: 15.6rem;
}
.small-search-box .search-input
{
    position: static;
    width: 10.8rem;
}
.medium-search-box
{
    margin: 0.25rem;
    position: static;
    width: 24.6rem;
}
.medium-search-box .search-input
{
    position: static;
    width: 19.8rem;
}
.large-search-box
{
    margin: 0.25rem;
    position: static;
    width: 33.6rem;
}
.large-search-box .search-input
{
    position: static;
    width: 28.8rem;
}
.search-input
{
    font-size: 1.32rem!important;
    padding: 2px!important;
    position: relative!important;
    margin: 0!important;
    top: -0.1875rem!important;
}
/*
   Styles for the word suggest drop down on search pages
 */
.dropdown
{
    border-bottom-left-radius: 0.3125rem;
    border-bottom-right-radius: 0.3125rem;
    border-bottom-style: solid;
    border-color: var(--gray-67);
    border-left-style: solid;
    border-right-style: solid;
    border-top-style: none;
    border-width: 1px;
    left: 11.25rem;
    margin: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 0;
    position: fixed;
    top: 3.125rem;
    width: 33.72rem;
    z-index:13;
}
.landing .dropdown
{
    border-width: 2px;
    left: -1.8rem;
    position: relative;
    top:0;
    width: 44.28rem;
}

.suggest-list
{
    background-color: var(--gray-100);
    border: 0;
    font-size: var(--font-size-6);
    margin: 0;
    padding: 0;
    visibility: hidden;
    width: min(30.9rem, 100%);
}
.landing .suggest-list
{
    width: min(44.4rem, 100%);
}
.suggest-list li
{
    cursor: pointer;
    font-size: var(--font-size-6);
    list-style:none;
    margin-left: 0;
    margin-right: 0;
    padding:0px;
    padding-left:2px;
    padding-right:2px;
    width: 36.48rem;
}
.landing .suggest-list li
{
    width: 46.8rem;
}
.suggest-list li span
{
    color: var(--gray-0);
    display: block;
    height: 18pt;
    margin: 0;
    padding: 0;
    text-decoration: none;
    z-index: 15;
}

/*
   Styles for the bottom of search results links to additional
   pages of search results
 */
.pagination
{
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.html-ltr .pagination ul,
.html-ltr .pagination ul li,
.html-rtl .pagination ul,
.html-rtl .pagination ul li
{
    display: inline;
    font-size: var(--font-size-5);
    padding-inline-start: 0;
    padding-inline-end: 0.5rem;
}
.html-ltr .pagination ul li a.item,
.html-rtl .pagination ul li a.item
{
    border-color: blue;
    border-style: solid;
    border-width: 2px;
    display: block;
    float: inline-start;
    height: 1.5625rem;
    margin-inline-end: 0.5rem;
    padding-bottom: 0px;
    padding-top: 1px;
    text-align: center;
    text-decoration: none;
    width: 1.5625rem;
}.micro-pagination ul li a.item:hover,
.pagination ul li a.item:hover
{
    background-color: #88F;
    color: var(--gray-100);
}
.html-ltr .pagination ul li span.item
{
    border-color: var(--gray-0);
    border-style: solid;
    border-width: 3px;
    display: block;
    float: inline-start;
    height: 1.5625rem;
    margin-inline-end: 0.5rem;
    padding-top: 1px;
    position: relative;
    text-align: center;
    top: -1px;
    width: 1.5625rem;
}
.html-rtl .pagination ul li span.item
{
    border-color: var(--gray-0);
    border-style: solid;
    border-width: 5px;
    display: block;
    float: inline-end;
    height: 1.5625rem;
    margin-inline-start: 0.5rem;
    position: relative;
    text-align: center;
    top: -1px;
    width: 1.5625rem;
}
.html-ltr .pagination ul li span.end,
.html-rtl .pagination ul li span.end
{
    display:block;
    float: inline-start;
    margin-inline-end: 0.5rem;
    padding-top: 1px;
}

.micro-pagination
{
    display:inline;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.micro-pagination ul,
.micro-pagination ul li
{
    display: inline;
    font-size: 8pt;
    margin:0;
    padding:0;
    position:relative;
    top:-1px;
}
.micro-pagination ul li a.item
{
    border-color: var(--gray-50);
    border-style: solid;
    border-width: 2px;
    padding: 2px;
    margin: 2px;
    height: 0.75rem;
    text-align: center;
    text-decoration: none;
    width: 0.75rem;
}
/*
   Styles for video subsearch page
 */
.html-ltr .video-link,
.html-rtl .video-link
{
    float: inline-start;
    margin: 0;
    height: 5.625rem;
    padding-top: 0.3rem;
    width: 8rem;
}
.video-link .thumb
{
    height: 5rem;
    width: 7.5rem;
}
.html-ltr .video-play,
.html-rtl .video-play
{
    height: 1.875rem;
    inset-inline-start: 2.5rem;
    position: relative;
    top: -3.75rem;
    width:2.5rem;
}

/*
   Styles for image subsearch page
 */
.video-list,
.image-list
{
    margin-top: 0.625rem;
    width: 54rem;
}

.sub-video-list,
.sub-image-list
{
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.image-list .image-detail
{
    display: inline-block;
    margin: 0.3125rem;
    padding: 0.3125rem;
    position:relative;
    max-width: 15rem;
}
.image-list .image-detail figcaption div
{
    font-size: var(--font-size-1);
    height: 12pt;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image-list .image-detail figcaption a
{
    color: var(--gray-0);
    text-decoration: none;
}
.image-list .image-detail figcaption:hover
{
    text-decoration: underline;
}
.image-dim
{
    background-color: var(--gray-0);
    bottom: 2.625rem;
    color: var(--gray-100);
    opacity: 0.7;
    padding: 2px;
    position:absolute;
}.html-ltr .image-dim,
.html-rtl .image-dim
{
    inset-inline-end: 0.375rem;
}.image-list img
{
    border: 1px solid var(--gray-50);
    height:9rem;
}

.video-list .video-detail
{
    border: 1px solid var(--gray-0);
    border-radius: 10px;
    display: inline-block;
    margin: 0.3125rem;
    position:relative;
    width: 15rem;
}
.video-list .video-detail figcaption
{
    height: 4.5rem;
    line-height: 1.5;
    padding:0.1875rem;
}
.video-list .video-detail figcaption div
{
    font-size: var(--font-size-1);
    margin: 0.1875rem;
}
.video-list .video-detail figcaption a
{
    color: var(--gray-0);
    text-decoration: none;
}
.video-list .video-detail figcaption a:hover
{
    text-decoration: underline;
}
.video-detail .result-fav
{
    margin-left: 2px;
    margin-right: 2px;
}
.video-quality
{
    background-color: #fcc200;
    border-radius: 3px;
    top: 0px;
    color: var(--gray-100);
    margin: 2px;
    padding: 0.25rem;
    position:absolute;
}.html-ltr .video-quality,
.html-rtl .video-quality
{
    inset-inline-end: 0.1875rem;
}.video-duration
{
    background-color: var(--gray-0);
    bottom: 5.3125rem;
    color: var(--gray-100);
    opacity: 0.8;
    padding: 2px;
    position:absolute;
}.html-ltr .video-duration,
.html-rtl .video-duration
{
    inset-inline-end: 0.1875rem;
}.video-list .video-thumb
{
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
    max-height: 10.5rem;
    width: 100%;
}
.video-play-button
{
    position:absolute;
    font-size: 4.2rem;
    top:2.7rem;
    left:5.4rem;
}
.video-play-button a
{
    text-decoration: none;
}

/*
   Styles for tables on login and admin pages
 */

.html-ltr .table-label,
.html-rtl .table-label
{
    text-align: end;
}.html-ltr .table-input,
.html-rtl .table-input
{
    text-align: start;
}/*
    Styles for different admin page elements
 */
.content
{
    background-color: var(--gray-100);
    font-size: var(--font-size-3);
    margin-left: 3rem;
    margin-right: 3rem;
    min-height: 18rem;
    padding: 0.5rem;
    position: relative;
    width: 48rem;
}

.content p,
.content div
{
    padding-bottom: 0.5rem;
}
.round-padded-button-box,
.round-button-box
{
    border-radius: 5px;
    font-size: var(--font-size-5);
    text-align: center;
    text-decoration: none;
}
.round-padded-button-box
{
    padding: 0.375rem;
}.html-ltr .button-box,
.html-rtl .button-box
{
    background-color: #E9E9ED;
    border-radius: 5px;
    border: 1px ridge var(--gray-0);
    color: var(--gray-0);
    font-size: var(--font-size-6);
    height:2.34rem;
    margin-inline-start: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0.09rem;
}
.tiny-button-box
{
    font-size: var(--font-size-3);
    margin:1px;
    padding:1px;
}
.presentation-activity
{
    clear:both;
}
.current-activity
{
    border: 1px solid var(--gray-80);
    border-radius: 8px;
    font-size: var(--font-size-6);
    margin-bottom: 4.0625rem;
    margin-left:10%;
    margin-right:10%;
    min-height: 39rem;
    min-width: 48rem;
    width: clamp(48rem,
        calc(48rem + (100vw - var(--fluid-onset)) * 0.5), 60rem);
    max-width: 48rem;
    padding-bottom: 0.6rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    position:relative;
    top: 0.9375rem;
}
.current-activity-header
{
    margin: auto;
    min-width: 54rem;
    position:relative;
    top: 0.9rem;
}

.current-activity-footer
{
    min-width: 54rem;
    position: relative;
    top:1.8rem;
}

/* The panel holds its designed width whenever the column around it can
   give it that much and otherwise gives way to the column, less the
   padding either side, which sits outside the width being floored. A
   floor that could not give way is what pushed this panel past the
   window between the phone layout's cutoff and its own designed width. */
.small-margin-current-activity
{
    font-size: var(--font-size-6);
    margin: auto;
    max-width: 54rem;
    min-height: 39rem;
    min-width: min(54rem, calc(100% - 1.2rem));
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    padding-bottom: 0.6rem;
    position: relative;
    top: 0.9375rem;
}

.static
{
    position:relative;
    top: 0px;
}

.current-activity h2,
.small-margin-current-activity h2
{
    margin-top: 0.3rem;
    padding-top: 0.3rem;
}
.current-activity input,
.small-margin-current-activity input
{
    font-size: var(--font-size-6);
    position: relative;
    top: 2px;
}
.adjacent-button-field
{
    border: 1px solid var(--gray-50);
    border-radius: 3px;
    height: 1.92rem;
    margin: 0.06rem;
}

.current-activity object,
.small-margin-current-activity object
{
    height: 12rem;
    min-width: 36rem;
    width: 48rem;
}
.current-activity select,
.small-margin-current-activity select
{
    font-size: var(--font-size-6);
}

.current-activity pre,
.small-margin-current-activity pre
{
    font-size: var(--font-size-1);
}

.small-photo img
{
    image-orientation: from-image;
    min-width:16.875rem;
    margin: 0.5rem;
    max-height: 85%;
    max-width: 85%;
    width:16.875rem;
}
.medium-photo img
{
    image-orientation: from-image;
    min-width:33.75rem;
    margin: 0.5rem;
    max-height: 85%;
    max-width: 85%;
    width:33.75rem;
}
.large-photo img
{
    image-orientation: from-image;
    min-width:67.5rem;
    margin: 0.5rem;
    max-height: 85%;
    max-width: 85%;
    width:67.5rem;
}
.media-detail-body
{
    min-width: 100%;
    width: 100%;
}
.media-container .photo,
.media-container .video
{
    border: solid var(--gray-0) 0.12rem;
    height:70%;
    image-orientation: from-image;
    margin: 0.54rem;
    max-height: 90%;
    max-width: 90%;
    min-width:40%;
    padding: 0.54rem;
}
/* The picture and the controls drawn over it share one box, which is
   only as wide as the picture, so a control placed against a corner
   lands on the picture rather than at the edge of the page. */
.thumb-holder
{
    display: inline-block;
    line-height: 0;
    position: relative;
}
/* The control that asks for a thumbnail to be made again sits in the
   top right corner of the picture it would replace, inside its edges,
   so that it is clear which picture it belongs to and it covers as
   little of it as it can. */
.remake-thumb
{
    background-color: var(--gray-100);
    border: 1px solid var(--gray-50);
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1.5rem;
    position: absolute;
    right: 0.9rem;
    text-align: center;
    text-decoration: none;
    top: 0.9rem;
    width: 1.5rem;
    z-index: 1;
}
.remake-thumb:hover
{
    background-color: var(--gray-94);
}
/* While the work is being done the control is dimmed, so a second
   click does not ask for the same work twice. */
.remake-thumb-working
{
    opacity: 0.5;
    pointer-events: none;
}
.media-detail-body .media-container .photo,
.media-detail-body .media-container .video
{
    min-width:17.5rem;
    width:17.5rem;
    max-height: 85%;
    max-width: 85%;
}

.photo-container,
.video-container
{
    border: solid var(--gray-0) 0.12rem;
    height: 42rem;
    margin: 0.54rem;
    max-height: 90%;
    max-width: 90%;
    padding: 0.54rem;
    position: relative;
}

.photo-container .photo-360
{
    height: 25%;
    image-orientation: from-image;
    left: 0;
    position: absolute;
    top: 0;
    width: 25%;
    z-index: 12;
}
.photo-container .canvas-360
{
    background-color: var(--gray-50);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.media-container .audio
{
    padding:1.2rem;
    width:70%;
}
.table-margin
{
    font-size: var(--font-size-5);
}
.table-center
{
    margin:auto;
}
.tiny-field
{
    font-size: var(--font-size-3);
    height: 13pt;
    width: 3.6rem;
}
.stat-table,
.stat-table th,
.stat-table td
{
    border: 1px solid var(--gray-0);
    font-size: var(--font-size-4);
    padding: 1px;
}
.table-margin
{
    position: relative;
    top: 1.08rem;
}
.table-margin img
{
    position: relative;
    top: 0.3rem;
}
.admin-table
{
    border:0;
    border-collapse: collapse;
    font-size: var(--font-size-3);
    min-width: 80%;
    max-width: 100%;
}
.classifiers-table
{
    border:0;
    border-collapse: collapse;
}
.classifiers-table td,
.classifiers-table th,
.admin-table td,
.admin-table th
{
    border: 1px ridge var(--gray-0);
    padding: 0.1875rem;
    overflow-wrap: anywhere;
}
.admin-table select,
.admin-table option
{
    font-size: var(--font-size-4);
    padding:0;
    margin:0;
}
.admin-form-row
{
    border: 1px ridge var(--gray-0);
    padding: 0.1875rem;
}

#browse-state,
#browse-state option
{
    font-size: var(--font-size-7);
    font-weight: bold;
    margin: 0.1875rem;
    appearance: menulist-button;
}

.name-table,
.name-table th,
.name-table td
{
    border:0;
    border-collapse: collapse;
    padding: 0.3125rem;
}
.role-list
{
    max-width: 11.4rem;
    overflow-wrap: break-word;
}
.role-activity-table
{
    border:0;
    border-collapse: collapse;
    margin:0.1875rem;
}
.role-activity-table td,
.role-activity-table th
{
    border: 1px ridge var(--gray-0);
    padding: 0.1875rem;
    word-wrap: break-word;
}
.delete-modifier
{
    background-color: #DFDFFF;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    margin: 0.1875rem;
    padding: 0.25rem;
}
/* The name of a modifier is text, not a control: what removes it is
   the mark beside it, which is what a reader reaches for. The mark used
   to be drawn by the stylesheet alone and so could not be pressed,
   while the name carried the link, which is the other way around from
   what the screen looked like. */
.delete-modifier .modifier-name
{
    color: var(--gray-0);
}

/* A small round button carrying a cross, the shape a reader reaches
   for to take something away. It has its own face rather than sitting
   flat against the bubble, so it reads as a thing to press rather than
   as a letter after the name. */
.delete-modifier .modifier-remove
{
    align-items: center;
    background-color: var(--gray-73);
    border: 0;
    border-radius: 50%;
    color: var(--gray-100);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-1);
    height: 1rem;
    justify-content: center;
    line-height: 1;
    margin-left: 0.375rem;
    padding: 0;
    text-decoration: none;
    vertical-align: middle;
    width: 1rem;
}
.delete-modifier .modifier-remove:hover,
.delete-modifier .modifier-remove:focus
{
    background-color: #D00;
    color: var(--gray-100);
}
.delete-modifier .modifier-remove:focus-visible
{
    outline: 2px solid var(--gray-0);
    outline-offset: 1px;
}
th.no-border,
td.no-border
{
    border:0;
    border-collapse: collapse;
    font-size: var(--font-size-4);
    padding:0;
}
.tab-menu-list
{
    border-bottom: 2px solid var(--gray-0);
    margin-bottom: 0px;
    padding: 0px;
    z-index: 10;
}
.tab-menu-list li
{
    display: inline;
    list-style-type: none;
}
.tab-menu-list a
{
    background-color:var(--gray-93);
    border: 1px solid var(--gray-0);
    border-bottom: 0px;
    margin: 0;
    overflow: hidden;
    padding: 0.3125rem 0.3125rem 0px 0.3125rem;
    text-decoration: none;
}
.tab-menu-list a.active
{
    background-color: var(--gray-100);
    border-bottom: 3px solid var(--gray-100);
}
.tab-menu-content
{
    border: 1px solid var(--gray-0);
    border-top: none;
    padding: 0.625rem;
    z-index: 12;
}

.file-types-table,
.file-types-table td,
.search-page-table,
.search-page-table td
{
    border: 1px ridge var(--gray-0);
    border-collapse: collapse;
    padding: 2px;
}
.search-sources-table td,
.search-sources-table th
{
    padding: 1px;
}
.search-sources-table pre
{
    margin: 2px;
    max-width: 30rem;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    white-space: pre-wrap;
}

td.instruct
{
    max-width: 30rem;
}
.source-test
{
    overflow-wrap: break-word;
    white-space: pre-wrap;
}
.source-test textarea
{
    width:95%;
    height:30rem;
    color:var(--gray-0);
}
.scrapers-table
{
    max-width: 39rem;
}
.scrapers-table td,
.scrapers-table th
{
    max-width:30rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.html-ltr .file-types-table,
.html-ltr .file-types-all td,
.html-ltr .search-page-table,
.html-ltr .search-page-all td,
.html-rtl .file-types-table,
.html-rtl .file-types-all td,
.html-rtl .search-page-table,
.html-rtl .search-page-all td
{
   margin-inline-start: 1.8rem;
   vertical-align: top;
}.html-ltr .bonus-table th,
.html-rtl .bonus-table th
{
    text-align: end;
}.machine-table,
.machine-table td,
.machine-table th
{
    border: 1px ridge var(--gray-0);
    margin: 1px;
    padding: 0.1875rem;
}
.machine-table-hr,
.machine-table-hr td
{
    border: none;
    margin: 0;
    padding: 0;
}
.toggle-table,
.toggle-table td
{
    border: 1px ridge var(--gray-0);
}
.file-types-table td,
.translate-table,
.translate-table td,
.translate-table th
{
    border: 1px ridge var(--gray-0);
}
.classifiers-table td.check
{
    padding: 0;
    text-align: center;
}
.classifiers-table,
.indexing-plugin-table
{
    border-collapse: collapse;
    margin-top:0.1875rem;
    margin-left: 1.8rem;
    margin-right: 1.8rem;
    padding: 0.1875rem;
}
.indexing-plugin-table,
.indexing-plugin-table td,
.indexing-plugin-table th
{
    border: 1px ridge var(--gray-0);
    text-align: center;
}
.indexing-plugin-table th
{
    padding: 0.24rem;
}
.html-ltr .indexing-plugin-table td.check,
.html-rtl .indexing-plugin-table td.check
{
    padding: 0.6rem;
    text-align: start;
}

.indexing-plugin-lightbox
{
    background-color:var(--gray-50);
    display: none;
    height:100%;
    left: 0;
    right:0;
    opacity:0.95;
    position:fixed;
    top: 0;
    width:100%;
    z-index:100;
}

.light-content
{
    border-radius: 10px;
    height: 65%;
    left:15%;
    margin:auto;
    overflow: auto;
    padding: 1rem;
    position: fixed;
    right:15%;
    top:15%;
    width: 60%;
    z-index:101;
}

.restrict-sites-by-url
{
    height:1.5rem;
    width: 1.5rem;
}
.overlay
{
    margin:6.25rem auto;
}
/** Feed styles*/
.feed-user-link
{
    position:relative;
    top:-0.375rem;
}
.feed-icon-container
{
    height: 1.25rem;
    position: relative;
    top:-0.625rem;
}
.feed-icon-container .user-spacer
{
    padding: 0 1.25rem 0 1.25rem;
}
.feed-user-icon
{
    padding-top: 0.9rem;
    width: 4.375rem;
}
.small-feed-user-icon
{
    padding-top: 0.6rem;
    width: 1.5625rem;
}
.html-ltr .feed-item-body,
.html-rtl .feed-item-body
{
    margin-inline-start:4.8rem;
    overflow: scroll;
    padding-top: 0.6rem;
}
/* The small variant is not a mirror of the wide one: reading left to
   right it is inset by a trailing margin of a smaller size, right to left
   by a leading margin the wide size, so each direction keeps its own rule
   with the side named logically. */
.html-ltr .small-feed-item-body
{
    margin-block: 0;
    margin-inline: 0 1.8rem;
    overflow: scroll;
    padding: 0.6rem;
}
.html-rtl .small-feed-item-body
{
    margin-inline-start:4.8rem;
    overflow: scroll;
    padding-top: 0.6rem;
}
.feed-item-body
{
    min-height:4.2rem;
}
.small-feed-item-body img,
.small-feed-item-body video,
.feed-item-body img,
.feed-item-body video
{
    max-width:100%;
}
.feed-item-body pre
{
    white-space: pre-wrap;
}
/* The folder is the query container both its layouts measure themselves
   against, so each answers the width of this box rather than the width of
   the window. The two differ: the page's middle column keeps a set width
   on a desktop, so a window narrowed to eight hundred pixels leaves the
   folder exactly as wide as it was, and a folder shown inside anything
   narrower than the page would have been told the window's width and
   reflowed for a room it does not have. */
/* One waiting report: who sent it on the left, what they wrote in the
   middle, and the editor's two decisions on the right. */
.git-issue-held-row td
{
    border-bottom: 1px solid var(--gray-50);
    padding: 0.4rem;
    vertical-align: top;
}
.git-issue-held-who
{
    white-space: nowrap;
}
/* The short stand-in for where a report came from, set apart from the
   handle beside it because it is not a name the reporter chose. */
.git-issue-held-token
{
    color: var(--gray-33);
    display: block;
    font-family: monospace;
    font-size: var(--font-size-6);
}
.git-issue-held-title
{
    font-weight: bold;
}
.git-issue-held-body
{
    white-space: pre-wrap;
}
.git-issue-anon-setting
{
    padding: 0.4rem;
}
.wiki-resources
{
    border: 1px solid var(--gray-50);
    container-name: wiki-resources;
    container-type: inline-size;
    height: 36rem;
    overflow: auto;
}
/* The list layout is a grid rather than a table so its columns can be
   sized by the folder's width. The rows take the table's own tracks
   through subgrid, which is what keeps a column lined up down the whole
   list; the table markup is kept because the list is a table of resources
   and a browser still reports its rows and cells as such. */
.wiki-resources > table
{
    display: grid;
    grid-template-columns:
        auto auto minmax(var(--resource-name-min), 1fr) auto auto;
    width: 100%;
}
.wiki-resources > table > thead,
.wiki-resources > table > tbody
{
    display: contents;
}
.wiki-resources > table > thead > tr,
.wiki-resources > table > tbody > tr
{
    align-items: stretch;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}
/* A cell is as tall as its row, and what is in it is centered within
   the cell rather than the cell being shrunk to fit. Letting each cell
   shrink left the heading's empty first cell three pixels tall while
   its neighbors were twenty-one, so the line under the heading was
   drawn at two different heights across the row; and it left the name
   and the information mark sitting lower than the rest of a row. */
.wiki-resources > table th,
.wiki-resources > table td
{
    align-content: center;
}
/* The count of what is in a folder keeps the shape, the size and the
   place it has always had. The one thing wrong with it was that the
   picture is written after the count, so without a place of its own the
   count was painted over by the folder and could not be read. */
.wiki-resources .resource-thumb > .badge
{
    z-index: 1;
}
/* The row groups no longer form boxes of their own, so the heading row is
   what stays put against the top of the folder as the list scrolls, and
   it carries the fill that keeps the rows beneath from showing through. */
.wiki-resources > table > thead > tr
{
    background-color: var(--gray-100);
    position: sticky;
    top: 0;
    z-index: 2;
}
/* A cell is a grid item, and a grid item is by default kept at least as
   wide as its content, which would let a long resource name widen the
   name column past the share of the folder it was given. */
.wiki-resources > table th,
.wiki-resources > table td
{
    min-width: 0;
}
/* The heading above the marker and thumbnail covers both of their columns.
   A column count is how a table says that and a span is how a grid says
   it, so the one the markup carries is read as the other. */
.wiki-resources > table th[colspan="2"]
{
    grid-column: span 2;
}
.wiki-resources th
{
    border-bottom: 1px solid var(--gray-50);
}
/* Narrow enough that the size and modified columns cost the name more room
   than they are worth, so the list keeps the marker, the thumbnail and the
   name and drops the other two. This asks the folder's width, so a folder
   in a narrow column on a wide screen is treated as narrow. */
/* Between a phone and the width the page's middle column has on a desktop
   the folder is real estate the desktop card minimum cannot divide: at
   around five hundred pixels it leaves room for one card and stretches it
   across the whole row. A smaller minimum there fills the row instead.
   The figure sits clear of the width the folder has on a desktop, which a
   container query reports as the content box inside the folder's border,
   so the desktop keeps the wider card it was given. */
@container wiki-resources (width < 50rem)
{
    .grid-container
    {
        --resource-card-min: 11.5rem;
    }
}
@container wiki-resources (width < 30rem)
{
    /* A row still carries four cells once the modified column is
       hidden: the marker, the thumbnail, the name and the size. Giving
       the narrow list three columns left the fourth with nowhere to go,
       so every row wrapped onto a second line the row's own track did
       not cover, and the heading row's second line was drawn over the
       first resource. */
    .wiki-resources > table
    {
        grid-template-columns:
            auto auto minmax(var(--resource-name-min), 1fr) auto;
    }
    .wiki-resources > table .hide-narrow
    {
        display: none;
    }
    .grid-container
    {
        --resource-card-min: 9.5rem;
    }
}

.wiki-resource-noresource
{
    color: green;
    margin: auto;
    left: 1.8rem;
    position: relative;
    top: -24rem;
    width: 90%;
}
.wiki-resource-image
{
    max-width:100%;
}.html-ltr .wiki-resource-download,
.html-rtl .wiki-resource-download
{
    height: 0;
    float: inline-end;
    position:relative;
    inset-inline-end: 1.875rem;
    top: -3.125rem;
}.ebook,
.wiki-resource-object
{
    border: 1px solid var(--gray-0);
    height:100%;
    margin:1%;
    min-height:36rem;
    padding:0.5%;
    width:99%;
}
.ebook-range
{
    width:70%;
}

.wiki-history-discuss
{
    position:relative;
    top:1.5625rem;
}
.theme-dropdown
{
    background-color: var(--gray-94);
    border: solid 1px var(--gray-50);
    border-radius: 5px;
    box-sizing: border-box;
    height: auto;
    padding: 0.1875rem;
    position: relative;
    top:1px;
    vertical-align: middle;
    appearance: none;
}
/* The theme dropdown and the buttons beside it are boxes of unrelated
   sizes: the buttons take their height from the glyph they show, which
   differs from platform to platform, while the dropdown took its height
   from a figure written here that could only match them by luck. Laying
   the row out as a row lets the dropdown take whatever height the
   buttons come out as, so they line up wherever the page is read. The
   label is centered against them rather than stretched. */
.theme-row
{
    align-items: stretch;
    display: flex;
}
.theme-row label
{
    align-self: center;
}
.media-controls
{
    margin-bottom: 0.5rem;
}
/* The toolbar stays end-aligned inline-blocks (text-align: end on
   .align-opposite), but its controls came out at different heights and on
   different lines: the Go button and filter box set their own taller
   heights, the sort and overflow dropdowns were pushed down by a fixed
   top nudge, and the icon groups sat on the text baseline. Giving every
   direct control the one named control height and centering them all on
   the middle line makes the row one height without disturbing the
   end alignment. */
.media-controls > a,
.media-controls > div,
.media-controls > button,
.media-controls > .dropdown-container
{
    box-sizing: border-box;
    height: var(--toolbar-control-height);
    vertical-align: middle;
}
/* The sort and overflow dropdowns are a <ul><li> whose li set its own
   taller min-height and added padding and a border, so the dropdown boxes
   stood taller than the icon groups, the Go button and the clipboard. Held
   to the control height as border-boxes, and with the li filling that
   height rather than setting a larger one, every control in the row shows
   the same box. */
.media-controls .dropdown-container
{
    position: static;
    top: auto;
}
.media-controls #page-sort-fields,
.media-controls #group-sort
{
    top: 0;
}
.media-controls ul.link-dropdown,
.media-controls ul.popup-dropdown
{
    height: 100%;
}
.media-controls ul.link-dropdown > li,
.media-controls ul.popup-dropdown > li
{
    box-sizing: border-box;
    height: var(--toolbar-control-height);
    min-height: 0;
}
.media-controls .button-box,
.media-controls .filter-container
{
    height: var(--toolbar-control-height);
    min-height: 0;
    top: 0;
}
/* The filter box holds a search input that carries a large font and a
   negative top offset of its own, which rode it up out of the box so its
   text clipped at the bottom. Inside the toolbar the offset is cleared and
   the input is held a few pixels short of the box and centered, so the
   text sits clear of both edges. */
.media-controls .filter-container
{
    align-items: center;
    display: inline-flex;
}
.media-controls .filter-container input
{
    box-sizing: border-box;
    height: calc(var(--toolbar-control-height) - 0.25rem);
    top: 0 !important;
}
/* A little breathing room between the Go button and the clipboard that
   follows it, so the two do not read as one control. */
.media-controls #clipboard-toggle
{
    margin-inline-start: 0.1875rem;
}
.media-controls ul.link-dropdown li,
.media-controls ul.popup-dropdown li
{
    min-height:1.92rem;
}
.media-controls ul.popup-dropdown li
{
    min-height:1.44rem;
}

.icon-button-container,
.media-buttons-container
{
    align-items: center;
    border: 1px solid var(--gray-50);
    border-radius: 5px;
    box-sizing: border-box;
    display: inline-flex;
    height: var(--control-height);
    justify-content: center;
    margin: 1.5px;
    padding: 0;
    width: var(--control-height);
}
.icon-button-container.small-icon,
.media-buttons-container.small-icon,
.git-icon-control.small-icon
{
    height: 1.75rem;
    width: 1.75rem;
}
.wiki-buttons .icon-button-container
{
    box-sizing: content-box;
    display: inline-block;
    font-size: var(--font-size-7);
    height: 1.8rem;
    margin: 1px;
    padding: 0.3125rem;
    text-align: center;
    vertical-align: middle;
    width: 1.5rem;
}
.icon-button-group
{
    align-items: center;
    border: 1px solid var(--gray-50);
    border-radius: 5px;
    box-sizing: border-box;
    display: inline-flex;
    height: var(--control-height);
    margin: 1.5px;
    padding: 0 2px;
    vertical-align: middle;
}
.icon-button-container .icon-anchor-button,
.media-buttons-container .icon-anchor-button,
.icon-button-container .media-anchor-button,
.media-buttons-container .media-anchor-button
{
    margin: 0;
    padding: 0;
}
.icon-glyph
{
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
}
.social-icon-row
{
    /* inline-flex keeps the row inline with the floated filter
       group on the Join Groups / My Groups pages. In the Mail
       and Messages side columns the column has a min-width wide
       enough to hold every icon on one row, so this does not
       normally wrap; if a viewport is narrow enough to force a
       wrap it stays a tidy centered block rather than clipping
       or scrolling. overflow is left visible so the data-badge
       overhang and hover tooltips are not clipped. */
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.25rem;
    align-items: center;
    vertical-align: top;
}
.icon-button-container
{
    text-align: center;
    vertical-align: middle;
}
.position-context
{
    display: inline-block;
    position: relative;
}

.icon-button-container a,
.media-buttons-container a
{
    color: var(--gray-0);
    text-decoration: none;
}

.icon-button-container a:hover,
.media-buttons-container a:hover
{
    text-decoration: underline solid var(--gray-0);
}
.media-buttons-container.white
{
    border:1px solid var(--gray-100);
}
.media-buttons-container.white a
{
    color: var(--gray-100);
}
.media-buttons-container.white a:hover
{
    text-decoration: underline solid var(--gray-100);
}
.media-buttons-container .selected
{
    background-color: var(--gray-67);
    border-radius: 5px;
    padding:0.1875rem;
}

#syntax-link
{
    margin: 0;
}
.search-filter-container,
.filter-container
{
    border: 1px solid var(--gray-50);
    border-radius: 5px;
    display: inline-block;
    margin:0;
    min-height: 2.22rem;
    padding:0;
    vertical-align: middle;
}

.search-filter-container input,
.filter-container input
{
    border: 0 none;
    border-radius: 3px;
}

.unread-messages
{
    background-color: var(--gray-67);
    border-radius: 6px;
    border: solid 1px var(--gray-0);
    color: var(--gray-100);
    display:inline-block;
    padding:0.1875rem;
    margin:1.125rem 0.9375rem 1.125rem 0.9375rem;
}.html-ltr .unread-messages,
.html-rtl .unread-messages
{
    float: inline-end;
}.message-filter
{
    position: relative;
    margin: 0 2px 0 2px;
    top: -2px;
}
.message-filter input
{
    font-size: var(--font-size-5);
    padding-top:0.3125rem;
}

#clipboard
{
    border: 0.3rem solid var(--gray-94);
    border-radius: 5px;
    background-color:var(--gray-100);
    height: 9rem;
    padding: 2px;
    margin: 2px;
    width:98%;
}
.dropdown-container
{
    display: inline-block;
    padding: 0;
    margin: 0;
}
#page-sort-fields,
#group-sort
{
    position: relative;
    top: 0.8125rem;
}
ul.link-dropdown,
ul.popup-dropdown
{
    display: inline-block;
    font-family: Arial, Verdana;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}

ul.link-dropdown li,
ul.popup-dropdown li
{
    background: var(--gray-100);
    display: block;
    margin: 0;
    padding: 2px 0.3125rem 2px 0.3125rem;
    white-space: nowrap;
}
.html-ltr ul.link-dropdown li,
.html-rtl ul.link-dropdown li
{
    float: inline-start;
    text-align: start;
    position: relative;
}

ul.link-dropdown li ul
{
    display: none;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul.link-dropdown > li,
ul.link-dropdown ul li,
ul.popup-dropdown ul li
{
    border-left: 1px solid var(--gray-60);
    border-right: 1px solid var(--gray-60);
}
ul.link-dropdown > li,
ul.link-dropdown ul li:first-child,
ul.popup-dropdown ul li:first-child
{
    border-top: 1px solid var(--gray-60);
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
}
ul.link-dropdown > li,
ul.link-dropdown ul li:last-child,
ul.popup-dropdown ul li:last-child
{
    border-bottom: 1px solid var(--gray-60);
    border-bottom-left-radius: 0.3125rem;
    border-bottom-right-radius: 0.3125rem;
}
.dropdown-selector
{
    background: var(--gray-100);
    border: 0;
    font-size: unset;
    font-weight: bold;
    position: unset;
    top: unset;
    vertical-align: middle;
    width: unset;
}
.dropdown-selector:hover
{
    border: 0;
    text-decoration: underline;
}
.hover-selector .dropdown-selector:hover
{
    background: var(--gray-82);
    border-radius: 5px;
    padding: 2px;
}
ul.link-dropdown li a,
ul.popup-dropdown li a
{
    text-decoration: none;
    color: var(--gray-0);
}
ul.link-dropdown > li:focus,
ul.popup-dropdown > li
{
    padding: 0;
}
ul.link-dropdown li:focus a.opt-group
{
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
ul.link-dropdown:focus-within li li,
ul.popup-dropdown:focus-within li li
{
    float: none;
    z-index: 5;
}
ul.link-dropdown:focus-within li:hover,
ul.link-dropdown:focus-within li a:hover,
ul.popup-dropdown li a:hover
{
    background: var(--gray-93);
}
ul.link-dropdown:focus-within li a:hover,
ul.popup-dropdown li a:hover
{
    text-decoration: underline;
    z-index: 4;
}
ul.link-dropdown:focus-within li ul,
ul.popup-dropdown li ul
{
    position: absolute;
    display: block;
}.html-ltr .inward-align ul.link-dropdown:focus-within li ul,
.html-ltr .inward-align ul.popup-dropdown li ul,
.html-rtl .inward-align ul.link-dropdown:focus-within li ul,
.html-rtl .inward-align ul.popup-dropdown li ul
{
    inset-inline-end: 0;
}
.account-info > h2
{
    display: inline-block;
}
.account-info > h2 > span
{
    display: inline-block;
}
.account-info > div
{
    position: relative;
    top: -0.1875rem;
}
.inline-block
{
    display: inline-block;
}
.home-icon
{
    border: 2px solid lightblue;
    border-radius: 17px;
    position: relative;
    top: 0.5625rem;
    width:2.1875rem;
}
.feed-icon-container ul.link-dropdown li
{
    padding-top: 0;
    padding-bottom: 0;
}

.upload-box
{
    background-color: var(--gray-82);
    color: var(--gray-0);
    font-size: var(--font-size-1);
    padding: 2px;
    margin: 0.25rem 0;
    text-align: center;
    width: 100%;
}

.media-upload-box
{
    background-color: var(--gray-80);
    border:1px solid var(--gray-0);
    border-radius: 5px;
    font-size: var(--font-size-1);
    margin-bottom: 0.25rem;
    min-height: 2.1rem;
    width: 100%;
}

/* Captcha settings styles */
.captcha {
    padding: 0.3125rem;
    width: 12.6rem;
}
/**
 * Styles for wiki pages
 */
table.wikitable
{
    background:var(--gray-100);
    border:1px var(--gray-67) solid;
    border-collapse: collapse;
    margin:1em 0;
}
table.histotable
{
    background:var(--gray-100);
    border:1px var(--gray-67) solid;
    border-collapse: collapse;
    margin:1.25rem auto 1.25rem auto;
    width:80%;
}
table.histotable tr th:first-child
{
    text-align:right;
}
table.histotable tr td:last-child
{
    width: 85%;
}
table.histotable tr td:last-child div
{
    border: 1px solid var(--gray-0);
    background-color: blue;
}
table.wikitable > tr > th,
table.wikitable > tr > td,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td
{
    border:1px var(--gray-67) solid;
    padding:0.2em;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th
{
    text-align:center;
    background:var(--gray-100);
    font-weight:bold
}
table.wikitable > caption,
table.histotable > caption
{
    font-weight:bold;
}
table.histotable > caption
{
    margin:0.4375rem;
}

ul.wiki-sorter
{
    display:flex;
    flex-direction:column;
    gap:0.375rem;
    list-style:none;
    margin:0;
    padding:0;
}
li.wiki-sorter-holder
{
    display:block;
    list-style:none;
    margin:0;
    padding:0;
}
li.wiki-sorter-holder ul.wiki-sorter-pane
{
    box-sizing:border-box;
    display:flex;
    width:100%;
    flex-direction:column;
    gap:0.375rem;
    list-style:none;
    margin:0;
    padding:0;
}
ul.wiki-sorter-scroll-above li.wiki-sorter-holder:first-of-type
    ul.wiki-sorter-pane,
ul.wiki-sorter-scroll-below li.wiki-sorter-holder:last-of-type
    ul.wiki-sorter-pane
{
    max-height:24rem;
    overflow-y:auto;
    padding-right:0.25rem;
}
ul.wiki-sorter li[data-cutoff]
{
    align-items:center;
    display:flex;
    gap:0.5rem;
    margin:2px 0;
    pointer-events:none;
}
ul.wiki-sorter li[data-cutoff] span
{
    border-top:1.5px dashed #4f8ef7;
    flex:1;
}
ul.wiki-sorter li:not([data-cutoff]):not(.wiki-sorter-holder),
li.wiki-sorter-dragging
{
    align-items: center;
    background:var(--gray-100);
    border:1px solid var(--gray-73);
    border-radius:6px;
    cursor:grab;
    display:flex;
    gap:0.625rem;
    min-height: 2.75rem;
    padding:0.625rem 0.75rem;
    touch-action: none;
    user-select:none;
}
ul.wiki-sorter li:not([data-cutoff]):not(.wiki-sorter-holder) *.rank,
li.wiki-sorter-dragging *.rank
{
    color:var(--gray-60);
    font-size: var(--font-size-2);
    min-width:1rem;
    text-align:center;
}
ul.wiki-sorter li:not([data-cutoff]):not(.wiki-sorter-holder)
    *.rank-label,
li.wiki-sorter-dragging *.rank-label
{
    flex:1;
    font-size:15pt;
}
.wiki-sorter-dragging
{
    opacity: 0.4;
}
.wiki-sorter-over
{
    background: #eef4ff;
    border-color: #1a5fcc;
}
.wiki-sorter-grabbed
{
    background: #e8f0fe;
    border-color: #1a5fcc;
    outline: 3px solid #1a5fcc;
    outline-offset: 2px;
}
.csv-form-field
{
    margin-bottom: 0.625rem;
    margin-top: 0.625rem;
}
.csv-form-field input[type=checkbox]
{
    margin: 0.3125rem;
    position: relative;
    top: -2px;
}.html-ltr .csv-form-field label,
.html-rtl .csv-form-field label
{
    padding-inline-end: 0.3125rem;
}.csv-star
{
    color: var(--gray-50);
    font-size: 20pt;
    padding: 0.1875rem;
    position: relative;
    top: 0.3125rem;
}
.rel-type-current
{
    border:2px solid var(--gray-0);
    border-radius:8px;
    text-align:center;
    background:var(--gray-100);
    padding:0.25rem;
}
.rel-type-bottom
{
    border-bottom:thick double var(--gray-0);
}
.rel-type-top
{
    border-top:thick double var(--gray-0);
}
.rel-type-td
{
    width:0.625rem;
}
.rel-type-hr
{
    border:1px solid var(--gray-0);
}
.resource-actions
{
    min-width:12rem;
}

.list-resource th
{
    vertical-align: middle;
    text-align: center;
    width: 12rem;
}

.view-indicator
{
    color:green;
}

.list-resource img
{
    border-radius: 5px;
    margin-right: 0.3125rem;
    height: 3.75rem;
    width: 6rem;
}

.list-resource img.default-thumb
{
    margin-left:1.25rem;
    margin-right:1.25rem;
    width: auto;
}

/*
Styles for the classifiers settings pages
*/
#update-accuracy.disabled
{
    color: var(--gray-33);
}
#label-docs-form th,
#label-docs-queue .actions
{
    font-weight:normal;
    padding:0.6rem 1.2rem 0.6rem 0;
    width:6rem;
}
#label-docs-queue .actions
{
    padding: 0.6rem;
}
#label-docs-queue
{
    font-size: var(--font-size-2);
}
#label-docs-queue td
{
    vertical-align: top;
    padding-top: 0.625rem;
}
#label-docs-queue .labelled td
{
    background-color: var(--gray-94);
}
#label-docs-queue .notinclass td
{
    background-color: #FFE0E0;
}
#label-docs-queue .inclass td
{
    background-color: #F0FFF0;
}
#label-docs-queue tr.inclass a.inclass,
#label-docs-queue tr.notinclass a.notinclass,
#label-docs-queue tr.skip a.skip
{
    color: var(--gray-0);
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}
#label-docs-queue p
{
    width: auto;
    margin: 0.1875rem 0px;
}
#label-docs-queue .info
{
    padding-left: 0.4375rem;
}
#label-docs-queue .description
{
    color: var(--gray-40);
}
#label-docs-queue .description b
{
    color: var(--gray-0);
}
#transfer
{
    background-color: var(--gray-0);
    color: var(--gray-100);
    height: 100%;
    left: 0px;
    opacity: 0.7;
    position: fixed;
    text-align:center;
    top: 0px;
    vertical-align: middle;
    visibility: hidden;
    width: 100%;
    z-index: 200;
}
#help
{
    margin-top:0.9375rem;
}
.html-ltr #small-margin-help,
.html-rtl #small-margin-help
{
    position: absolute;
    inset-inline-end:2%;
    width: 24rem;
    z-index:20;
}

#mobile-help
{
    clear:both;
    float:none;
    margin: 1.5%;
    position: absolute;
    top: 3.625rem;
    width: 22.5rem;
}
.help-pane
{
    display : none;
    width: 100%;
    border: 2px solid #06f;
}
.small-margin-help-pane
{
    border: 2px solid #06f;
    border-radius:8px;
    display: none;
    top: 1rem;
    width: 23.75rem;

}
.help-title
{
    background: #06f;
    color:var(--gray-100);
    font-size: var(--font-size-6);
    margin: 0;
    padding: 0.3rem;
}
#help-frame
{
    resize: both;
    overflow: auto;
    min-width: 15rem;
    min-height: 7.5rem;
    max-width: 96vw;
    max-height: 90vh;
}
#help-frame-head
{
    cursor: move;
    position: sticky;
    top: 0;
    z-index: 1;
}
#help-frame-body
{
    padding:0.25rem;
}
.help-pane p
{
    color:var(--gray-20);
    padding:0.625rem;
}
.help-pane pre
{
    overflow:scroll;
}
.help-button
{
    bottom: 3.125rem;
    cursor: pointer;
    border: 1px solid #2d2bdb;
    font-size: 1.25rem;
    line-height: 0.5px;
    padding: 0.625rem 0.1875rem;
}
button.default
{
    background: var(--gray-82);
    color: var(--gray-0);
}
.close
{
    cursor: pointer;
    font-weight: bold;
    line-height: 0.5px;
    padding: 0.3125rem 0px 0.25rem 0.25rem;
}
#help-close {
    color: var(--gray-100);
    position: relative;
    z-index: 2;
}
.sidebar
{
    top : 11.25rem;
}
.new-thread-icon
{
    margin-bottom : -0.3125rem;
}

.top-adscript
{
    padding: 0.3rem;
    max-width:48rem;
}
.top-ad-static,
.group-ad-static
{
    position: relative;
    top:0.9375rem;
}

/* The two directions inset this to different top offsets, so they stay as
   a pair; only the side it floats to is named logically. */
.html-ltr .side-adscript
{
    float: inline-end;
    height:0;
    position:relative;
    top: 1.75rem;
}

.html-rtl .side-adscript
{
    float: inline-end;
    height: 0;
    position:relative;
    top: 0px;
}

.display-ad
{
    margin-left:0.1875rem;
    margin-right:0.1875rem;
    margin-top:5rem;
}
.display-ad p
{
    border-radius: 10px;
    /* A narrow window has less room than the reading measure, and a
       fixed width there ran the block under the panel beside the
       results. */
    max-width: var(--reading-width);
    width: 100%;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem;
}
.ad-preview img,
.display-ad img
{
    height:2.5625rem;
    width:3.125rem;
    float:left;
}
.display-ad img
{
    margin-left: 1.25rem;
}
.ad-preview span,
.display-ad span
{
    display: block;
}
.html-ltr .ad-preview,
.html-rtl .ad-preview
{
    inset-inline-start: 27rem;
    min-width: 21rem;
    position: relative;
    top: -24.6rem;
}p.start-ad
{
    font-family: Arial, Helvetica, sans-serif;
    min-height: 3rem;
    width: 18rem;
}
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0.4375rem;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.trending-container
{
    display: flex;
    /* A column is as tall as what it holds rather than as tall as the
       row, and the row is no taller than its tallest column. */
    align-items: flex-start;
    overflow-x: auto;
    max-width: 57rem;
}

.serp .trending
{
    text-align:center;
}

h2.trending
{
    margin-top: 0.3125rem;
}
h2.trending select,
h2.trending option
{
    font-size: var(--font-size-6);
    font-weight:bold;
}
.trending-float
{
    /* The row this sits in lays its columns out, so this no longer
       floats: a float left the row as tall as the tallest column had
       asked for even where the columns held nothing, which put a
       screenful between one kind of figures and the next. */
    padding: 0.375rem;
}

.trending-table
{
    border: 1px solid var(--gray-0);
    border-collapse: collapse;
    table-layout: fixed;
    width: 15rem;
}

.trending-tr
{
    border: 1px solid var(--gray-0);
}
.trending-th,
.trending-td
{
    margin: 0;
    padding: 0.3125rem;
    overflow: hidden;
    width: 70%;
    word-wrap: break-word;
}
.trend-score
{
    width: 30%;
}
.trending-td a
{
    text-decoration: none;
}
.trending-td a:hover
{
    text-decoration: underline;
}
.trending-footer
{
    padding: 0.6rem;
    text-align:center;
}

.trending-highlight
{
    margin:auto;
    margin-top: 0.625rem;
    left:1.875rem;
    position: relative;
    right:1.875rem;
    width:34.5rem;
}

.trending-highlight li
{
    display:inline;
}
.trending-highlight li a
{
    white-space:nowrap;
}
.feed-highlight li:before,
.trending-highlight li:before {
    content: '-';
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.trending-highlight li:last-child:after
{
    content: '-';
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.feed-highlight
{
    margin:auto;
    margin-top: 0.625rem;
    left:1.875rem;
    overflow:hidden;
    position: relative;
    right:1.875rem;
    width:34.5rem;
}

.feed-highlight li
{
    list-style-type: none;
    margin-top:0.625rem;
}
#contact-actions
{
    font-size: var(--font-size-6);
    left: -0.375rem;
    position: relative;
    top: 0.8125rem;
}
#contact-actions .link-dropdown li,
#contact-actions .link-dropdown li a
{
    background-color: var(--gray-93);
}
#test-results
{
    width:min-content;
}

/* === Mail activity (item 52) === */
.user-accounts-group
{
    margin-top: 0.75rem;
    padding: 0.25rem;
    border-top: 1px solid #CDE;
}
.user-accounts-group:first-of-type
{
    border-top: 0;
}
.user-accounts-group:last-of-type
{
    border-bottom: 1px solid #CDE;
}
.user-accounts-active .user-accounts-name
{
    color: #0050a0;
}
.user-accounts-cloning
{
    background-color: #e6f4ea;
}
.user-accounts-cloning .user-accounts-name
{
    /* The badge sits as a flex sibling of .user-accounts-toggle;
       space-between would push them to opposite edges of the
       row. Switch this row's flex to start-aligned and let a
       small gap separate them. */
    justify-content: flex-start;
    gap: 0.4em;
}
.user-accounts-cloning-badge
{
    /* Single inline whole for the parens + link so the flex
       container treats it as one item. */
    white-space: nowrap;
    font-size: var(--font-size-1);
}
.user-accounts-cloning-link
{
    margin: 0;
}
/* Defense-in-depth: even if a stale cached mailmessages.js
   manages to inject the rename input or the toolbar onto a
   cloning row, hide them via CSS so the user can't actually
   complete a rename / add-folder action against an account
   whose IMAP credentials are mid-use. The JS gates in
   enterAccountEditMode / enterFolderEditMode block this at
   the source; the rules below are the safety net. */
[data-cloning="1"] .user-accounts-rename-input,
[data-cloning="1"] .user-accounts-edit-toolbar,
[data-cloning="1"] .user-accounts-new-folder-box
{
    display: none;
}
.mail-clone-failed-link
{
    /* The Failed count itself is the toggle: render it as a
       clickable link when there are errors to show. */
    cursor: pointer;
    text-decoration: underline;
}
.mail-clone-errors-row
{
    /* Full panel width (outside the narrow status table) so a
       long error message is readable rather than wrapping inside
       a tight column. */
    margin-top: 0.5em;
}
.mail-clone-errors
{
    /* Scrollable so a long run of transient failures does not
       push the rest of the status panel off-screen. */
    max-height: 12em;
    overflow-y: auto;
    font-size: 9pt;
}
.mail-clone-error
{
    color: #a00;
    padding: 2px 0;
    border-bottom: 1px solid var(--gray-93);
}
.mail-clone-error.resolved
{
    /* A failure that later succeeded a different way is kept
       visible but de-emphasized so the user can see it was
       recovered rather than silently dropped. */
    color: var(--gray-47);
    text-decoration: line-through;
}
.mail-clone-error-resolved
{
    text-decoration: none;
    font-style: italic;
}
.user-accounts-name
{
    font-size: var(--font-size-2);
    margin: 0 0 0.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.user-accounts-controls a
{
    margin-left: 0.25rem;
    font-size: 9pt;
    text-decoration: none;
}
.user-accounts-folders
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.user-accounts-toggle
{
    cursor: pointer;
    user-select: none;
}
.user-accounts-triangle
{
    font-size: 8pt;
    color: var(--gray-40);
}
.user-accounts-folders-collapsed
{
    display: none;
}
.user-accounts-folders li
{
    margin: 2px 0;
}
.user-accounts-folders a
{
    display: block;
    padding: 0.25rem 0.375rem;
    border-radius: 3px;
    text-decoration: none;
    color: var(--gray-20);
}
.user-accounts-folders a:hover
{
    background-color: #e8e8ee;
}
.user-accounts-folder-active
{
    background-color: #d8d8e8;
    font-weight: bold;
}
.user-accounts-folder-noselect
{
    padding: 0.25rem 0.375rem;
    color: var(--gray-60);
}
.mail-domain-list,
.tag-list
{
    list-style: none;
    margin: 0.25rem 0 0.5rem 0;
    padding: 0;
}
.mail-domain-item,
.tag-item
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--gray-87);
    border-radius: 3px;
    margin-bottom: 0.25rem;
    max-width: 30em;
}
.mail-domain-text,
.tag-text
{
    flex: 1 1 auto;
    font-weight: normal;
}
.mail-domain-text
{
    font-family: monospace;
}
.mail-domain-remove,
.tag-remove,
.secure-domain-edit,
.domain-route-apply
{
    background: transparent;
    border: 1px solid var(--gray-80);
    border-radius: 5px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: normal;
    height: 1.9em;
    line-height: 1;
    min-width: 1.9em;
    padding: 2px 0.5rem;
    vertical-align: middle;
}
.mail-domain-remove:hover,
.tag-remove:hover,
.secure-domain-edit:hover,
.domain-route-apply:hover
{
    background-color: var(--gray-93);
}
.domain-route-panel
{
    display: flex;
    align-items: center;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-weight: normal;
    padding: 0.25rem 0 2px 0;
}
.domain-route-panel .domain-route-group
{
    font-weight: normal;
}
.domain-route-panel .robots-config-link
{
    flex-basis: 100%;
}
.mail-domain-add-row,
.tag-add-row
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 30em;
}
.mail-domain-add-row input,
.tag-add-row input
{
    border-radius: 5px;
    font-weight: normal;
    height: 2.34rem;
    box-sizing: border-box;
}
.mail-port-links
{
    list-style-type: none;
    margin: 0.5rem 0;
    padding: 0;
}
.mail-port-links li
{
    display: inline;
    margin-right: 1rem;
}
.mail-dns-records
{
    display: none;
    font-family: monospace;
    font-weight: normal;
    white-space: pre;
    overflow: auto;
    max-height: 16em;
    max-width: 40em;
    margin: 0.25rem 0 0.5rem 0;
    padding: 0.5rem;
    border: 1px solid var(--gray-87);
    border-radius: 3px;
    background: var(--gray-94);
}
.machine-services-table
{
    border-collapse: collapse;
    margin: 0.25rem 0 0.5rem 0;
    max-width: 100%;
    width: auto;
}
.machine-services-table th,
.machine-services-table td
{
    border: 1px ridge var(--gray-0);
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
}
.machine-services-table td.machine-services-name
{
    text-align: start;
    font-weight: normal;
}
.machine-services-log
{
    text-align: center;
    white-space: nowrap;
}
.machine-services-toggle
{
    width: 1%;
    white-space: nowrap;
}
.icon-inline
{
    margin-inline-start: 0.375rem;
    text-decoration: none;
}
.machine-box
{
    clear: both;
    margin-bottom: 0.5rem;
}
.paging-clearfix
{
    margin-bottom: 0.25rem;
    overflow: hidden;
}
.machine-details > .machine-summary
{
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: bold;
    gap: 0.5rem;
    list-style: none;
    padding: 0.25rem 0;
}
.machine-details > .machine-summary > .icon-inline
{
    margin-inline-start: auto;
}
.machine-details > .machine-summary::-webkit-details-marker
{
    display: none;
}
.machine-details > .machine-summary::before
{
    content: "\25B6";
    display: inline-block;
    font-size: 0.7em;
    margin-inline-end: 0.375rem;
    transition: transform 0.15s;
}
.machine-details[open] > .machine-summary::before
{
    transform: rotate(90deg);
}
.html-rtl .machine-details > .machine-summary::before
{
    content: "\25C0";
}
.html-rtl .machine-details[open] > .machine-summary::before
{
    transform: rotate(-90deg);
}
.machine-details-body
{
    padding: 0.25rem 0 0.25rem 1.125rem;
}
.machine-detail-tag
{
    background-color: var(--gray-93);
    border-radius: 3px;
    color: var(--gray-20);
    display: inline-block;
    font-family: monospace;
    font-size: 0.85em;
    margin-inline-end: 0.375rem;
    padding: 2px 0.375rem;
}
.dim
{
    color: var(--gray-53);
}
.impersonation-banner
{
    background-color: #FDE68A;
    color: #663C00;
    text-align: center;
    padding: 0.375rem 0.625rem;
    font-weight: bold;
    border-bottom: 1px solid #C9A227;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 2.5rem;
    box-sizing: border-box;
    z-index: 2000;
    white-space: nowrap;
    opacity: 0.8;
}
.impersonation-banner a
{
    color: #663C00;
    text-decoration: underline;
    margin-left: 0.5rem;
}
.impersonation-stop:not(.none)
{
    display: inline-block;
    margin-left: 0.5rem;
}
.impersonation-banner input[type="password"]
{
    height: 1.75rem;
    box-sizing: border-box;
    vertical-align: middle;
    margin: 0 0.375rem;
    font-size: var(--font-size-3);
}
.html-ltr .impersonation-banner .button-box.impersonation-go,
.html-rtl .impersonation-banner .button-box.impersonation-go
{
    height: 1.75rem;
    box-sizing: border-box;
    padding: 0 0.625rem;
    margin: 0 2px;
    font-size: var(--font-size-4);
    line-height: 1.5rem;
    top: 0;
    vertical-align: middle;
}
/*
    Styles for a Git repository wiki page shown in read mode as a file
    browser: the clone address, the branch and path bar, the file and
    folder listing, a single file's contents, and a rendered README.
*/
.git-repository
{
    margin: 0.1875rem;
}
.git-panel
{
    display: none;
}
.git-panel.git-open
{
    display: block;
}
.git-clone-line
{
    align-items: center;
    display: flex;
    gap: 0.3125rem;
    margin-bottom: 0.5rem;
}
.git-clone-cmd
{
    align-items: center;
    background-color: var(--gray-94);
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    box-sizing: border-box;
    display: inline-flex;
    flex: 1;
    font: 1rem monospace;
    min-height: 1.75rem;
    min-width: 0;
    overflow-x: auto;
    padding: 0.25rem 0.375rem;
    white-space: nowrap;
}
.git-icon-control
{
    align-items: center;
    background: transparent;
    border: 1px solid var(--gray-50);
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 1.75rem;
    justify-content: center;
    padding: 0;
    width: 1.75rem;
}
.git-app-message
{
    margin-bottom: 0.5rem;
}
.git-app-row
{
    align-items: center;
    display: flex;
    gap: 0.25rem;
}
.git-app-row input,
.git-app-row select
{
    box-sizing: border-box;
    font-size: 1rem;
    height: 1.75rem;
    margin: 0;
    padding: 0 0.375rem;
}
.git-stats
{
    margin-top: 1rem;
}
.git-stats-rows
{
    overflow-y: auto;
}
.git-stats-authors
{
    max-height: 15rem;
}
.git-stats-months
{
    max-height: 30rem;
}
.git-stats-types
{
    max-height: 15rem;
}
.git-stats-group
{
    margin-bottom: 0.75rem;
}
.git-stat-row
{
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2px;
}
.git-stat-label
{
    flex: 0 0 auto;
    overflow: hidden;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30%;
}
.git-stat-track
{
    background-color: var(--gray-94);
    border-radius: 3px;
    flex: 1 1 auto;
    height: 0.875rem;
    overflow: hidden;
}
.git-stat-bar
{
    background-color: #6699CC;
    display: block;
    height: 100%;
}
.git-stat-count
{
    flex: 0 0 auto;
    width: 3em;
}
.git-search-line
{
    margin-bottom: 0.5rem;
    text-align: end;
}
.git-search-field
{
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    font: 0.8125rem sans-serif;
    padding: 0.25rem 0.375rem;
    width: 18rem;
}

.git-action
{
    margin-inline-end: 0.375rem;
    text-decoration: none;
}
.git-path-download
{
    float: inline-end;
    font-size: inherit;
    text-decoration: none;
}
.git-sort
{
    text-decoration: none;
}
.git-diff-file
{
    margin-bottom: 0.75rem;
}
.git-diff-body
{
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    font: 0.75rem monospace;
    overflow-x: auto;
    padding: 0.375rem 0.5rem;
    white-space: pre-wrap;
}
.git-diff-head
{
    font-weight: bold;
}
.git-diff-author
{
    color: var(--gray-50);
    font-weight: normal;
}
.git-diff-added
{
    color: green;
}
.git-diff-removed
{
    color: darkred;
}
.git-diff-modified
{
    color: darkslateblue;
}
.git-bar
{
    align-items: center;
    background-color: var(--gray-94);
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.625rem;
}
.git-branch
{
    align-items: center;
    display: inline-flex;
}
.git-branch-select,
.git-ref-button
{
    border: 1px solid var(--gray-50);
    border-radius: 3px;
    box-sizing: border-box;
    font: 0.8125rem monospace;
    height: 1.75rem;
    padding: 0 0.375rem;
}
.current-activity .git-branch-select
{
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gray-50) 50%),
        linear-gradient(135deg, var(--gray-50) 50%, transparent 50%);
    background-position: right 0.75rem center, right 0.4375rem center;
    background-repeat: no-repeat;
    background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
    font-size: 0.8125rem;
    padding-right: 1.375rem;
}
.git-ref,
.git-download
{
    display: inline-flex;
    position: relative;
}
.git-ref-button
{
    align-items: center;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    gap: 0.25rem;
}
.git-bar-actions
{
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    margin-left: auto;
}
.git-caret
{
    font-size: 0.625rem;
}
.git-ref-menu,
.git-download-menu
{
    background-color: var(--gray-100);
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    max-height: 24rem;
    min-width: 12rem;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    z-index: 5;
}
.git-download-menu
{
    right: 0;
}
.git-ref-menu a,
.git-download-menu a
{
    display: block;
    padding: 0.25rem 0.625rem;
    text-decoration: none;
    white-space: nowrap;
}
.git-ref-menu a:hover,
.git-download-menu a:hover
{
    background-color: aliceblue;
}
.git-ref-head
{
    border-top: 1px solid var(--gray-88);
    font-weight: bold;
}
.git-ref-menu a:first-child
{
    border-top: 0;
}
.git-icon-button
{
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 2px;
}
.git-icon
{
    font-size: 1rem;
}
.git-path
{
    font-family: monospace;
    margin-bottom: 0.5rem;
    padding: 0 2px;
}
.git-path a,
.git-listing a
{
    text-decoration: none;
}
.git-path a:hover,
.git-listing a:hover
{
    text-decoration: underline;
}
.git-listing-box
{
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    max-height: 30rem;
    overflow-y: auto;
}

.resource-path-warning
{
    background-color: #FDECEA;
    border: 1px solid #E0B4B0;
    border-radius: 4px;
    color: #922;
    margin: 0.6rem 0;
    padding: 0.6rem 0.9rem;
}
.git-listing
{
    border-collapse: collapse;
    width: 100%;
}
.git-listing td
{
    border-top: 1px solid var(--gray-88);
    padding: 0.375rem 0.625rem;
}
.git-listing tr:first-child td
{
    border-top: 0;
}
.git-listing th .resizable,
.git-issue-list th .resizable
{
    box-sizing: border-box;
    display: block;
    min-width: 100%;
    width: 100%;
}
.git-listing th
{
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--gray-82);
    border-right: 1px solid var(--gray-88);
    cursor: pointer;
    padding: 0.375rem 0.625rem;
    position: sticky;
    text-align: left;
    top: 0;
    user-select: none;
    z-index: 1;
}
.git-listing th:last-child
{
    border-right: 0;
    text-align: right;
}
.git-listing th:hover
{
    text-decoration: underline;
}
.git-listing tr:hover td
{
    background-color: aliceblue;
}
.git-name-col
{
    white-space: nowrap;
}
.git-commit-col
{
    color: var(--gray-50);
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.git-author-col
{
    color: var(--gray-50);
    white-space: nowrap;
}
.git-age-col
{
    color: var(--gray-50);
    text-align: right;
    white-space: nowrap;
}
.git-history thead th
{
    border-bottom: 1px solid var(--gray-88);
    color: var(--gray-50);
    font-weight: bold;
    padding: 0.375rem 0.625rem;
    text-align: left;
}
.git-date-col,
.git-author-col,
.git-actions-col
{
    white-space: nowrap;
}
.git-date-col,
.git-author-col
{
    color: var(--gray-50);
}
.git-msg-col
{
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.git-actions-col a
{
    margin-right: 0.5rem;
}

.wiki-read h1,
.wiki-read h2,
.wiki-read h3,
.wiki-read h4,
.wiki-read h5,
.wiki-read h6
{
    scroll-margin-top: 4.5rem;
}

.git-readme-icon
{
    font-size: 0.9375rem;
}
.git-file h3
{
    font: 0.8125rem monospace;
    margin: 0 0 0.375rem 0;
}
.git-blob
{
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    font: 0.8125rem monospace;
    max-height: 36rem;
    overflow: auto;
    padding: 0.625rem;
    white-space: pre;
}
.git-readme-box
{
    border: 1px var(--gray-67) solid;
    border-radius: 3px;
    margin-top: 0.75rem;
    overflow: hidden;
}
.git-readme-bar
{
    align-items: center;
    background-color: var(--gray-94);
    border-bottom: 1px var(--gray-67) solid;
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0.625rem;
}
.git-readme-title
{
    align-items: center;
    display: flex;
    font-weight: bold;
    gap: 0.375rem;
}
.git-readme-toc-toggle
{
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 2px;
}
.git-readme-toc
{
    border-bottom: 1px var(--gray-67) solid;
    list-style: none;
    margin: 0;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.375rem 0;
}
.git-readme-toc a
{
    color: var(--gray-33);
    display: block;
    padding: 0.1875rem 0.75rem;
    text-decoration: none;
}
.git-readme-toc a:hover
{
    background-color: var(--gray-94);
    color: var(--gray-20);
}
.git-toc-level2 a
{
    padding-left: 1.75rem;
}
.git-toc-level3 a
{
    padding-left: 2.75rem;
}
.git-toc-level4 a
{
    padding-left: 3.75rem;
}
.git-readme
{
    overflow-wrap: break-word;
    overflow-x: auto;
    padding: 0.75rem 1rem;
}
.git-readme pre
{
    overflow-x: auto;
}
.git-readme img
{
    max-width: 100%;
}
.git-note,
.git-empty
{
    color: var(--gray-50);
    font-style: italic;
}
.git-issue-bar
{
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.git-issue-search-box
{
    align-items: center;
    display: flex;
    flex: 1;
    gap: 0.25rem;
}
.git-issue-search
{
    box-sizing: border-box;
    flex: 1;
    height: var(--control-height);
    padding: 0.3125rem 0.5rem;
}
.current-activity .git-issue-search
{
    top: 0;
}
.git-issue-filter-wrap
{
    position: relative;
}
.git-issue-filter-menu
{
    background-color: var(--gray-100);
    border: 1px solid var(--gray-50);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    position: absolute;
    right: 0;
    top: 2.25rem;
    z-index: 5;
}
.git-issue-filter-menu a
{
    color: var(--gray-33);
    display: block;
    font-size: var(--font-size-2);
    padding: 0.25rem 0.625rem;
    text-decoration: none;
    white-space: nowrap;
}
.git-issue-filter-menu a:hover
{
    background-color: var(--gray-94);
    color: var(--gray-20);
}
.git-issue-filter-button.git-issue-filter-active
{
    background-color: #e6f0ff;
    border-color: #4a80c0;
}
.git-issue-filter-check
{
    color: #2a7a2a;
    font-weight: bold;
}
.git-issue-search-hint
{
    color: var(--gray-53);
    font-size: var(--font-size-1);
    margin: 0.125rem 0 0.375rem;
}
.git-issue-new-button
{
    margin-inline-start: auto;
}
.git-issue-form
{
    background-color: var(--gray-100);
    border: 1px solid var(--gray-82);
    border-radius: 6px;
    margin-bottom: 0.875rem;
    padding: 0.875rem;
}
.git-issue-title,
.git-issue-body
{
    box-sizing: border-box;
    margin-bottom: 0.75rem;
    padding: 0.4375rem 0.5625rem;
    width: 100%;
}
.git-issue-body
{
    min-height: 7.5rem;
    resize: vertical;
}
.git-issue-form-foot
{
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.git-issue-select
{
    height: var(--control-height);
    padding: 0 0.375rem;
}
.current-activity .git-issue-select
{
    font-family: monospace;
    font-size: 0.8125rem;
}
.git-issue-submit
{
    margin-inline-start: auto;
    padding: 0.4375rem 1rem;
}
.current-activity .git-issue-submit
{
    font-size: 0.8125rem;
}
/* The box a list sits in stands the same height whatever it holds, so the
   space below does not jump as more rows arrive, and the rows scroll
   within it. Reaching the end brings the next page in, so the list is read
   by scrolling rather than turned a page at a time. */
/* An activity that is mostly one wide working area &mdash; writing a wiki
   page, reading mail, holding a conversation &mdash; is given the whole of
   the content column rather than a reading width, since its width is
   working room rather than a line of prose to be kept short. It comes
   after the widths it replaces, so it is the rule that takes effect. */
.wide-activity
{
    margin-inline: 0;
    max-width: none;
    min-width: 0;
    width: auto;
}
.git-issue-list-box
{
    height: 24em;
    overflow-y: auto;
}
.git-issue-list
{
    border-collapse: collapse;
    width: 100%;
}
.git-issue-list th,
.git-issue-list td
{
    border: 1px solid var(--gray-82);
    padding: 0.5rem 0.625rem;
    text-align: left;
}
.git-issue-list th
{
    background-color: var(--gray-100);
    box-shadow: inset 0 -1px 0 var(--gray-82);
    cursor: pointer;
    position: sticky;
    top: 0;
    user-select: none;
    z-index: 1;
}
.git-issue-list th:hover
{
    text-decoration: underline;
}
.git-issue-list td a
{
    color: inherit;
    display: block;
    text-decoration: none;
}
.git-issue-back
{
    color: var(--gray-33);
    text-decoration: none;
}
.git-issue-back:hover
{
    text-decoration: underline;
}
.git-issue-detail-head
{
    align-items: baseline;
    display: flex;
    gap: 0.625rem;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}
.git-issue-detail-number
{
    font-weight: bold;
}
.git-issue-detail-info
{
    border: 1px solid var(--gray-82);
    border-radius: 6px;
    padding: 0.75rem 0.875rem;
}
.git-issue-history
{
    border: 1px solid var(--gray-88);
    list-style: none;
    margin: 0 0 0.75rem 0;
    max-height: 10em;
    overflow-y: auto;
    padding: 0.375rem 0.625rem;
}
.git-issue-history li
{
    padding: 0.125rem 0;
}
.git-issue-history-when
{
    color: var(--gray-47);
    font-family: monospace;
    margin-inline-end: 0.5rem;
}
.git-issue-change,
.git-issue-priority-form
{
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}
/* In a list whose rows are picked, a link that filled its whole cell would
   leave nowhere in that column to press without following it. Here the
   words of the summary are the link and the rest of the cell is free to
   pick the row with. */
.git-held-list td a
{
    display: inline;
}
/* Discard and its heavier forms are one control: the plain one, then a
   catch that drops the rest below it. The whole control is laid out as
   one piece so the two halves meet with no seam between them. */
.git-discard-split
{
    display: inline-flex;
    position: relative;
}
.git-discard-main
{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.git-discard-catch
{
    border-bottom-left-radius: 0;
    border-inline-start: 0;
    border-top-left-radius: 0;
    padding-inline: 0.5rem;
}
/* Kept out of the way until the catch is pressed, and hung under the
   right-hand end of the control so it does not cover the button that
   opened it. */
/* Placed against the window rather than against the control it hangs from,
   so that a list which scrolls within its own box does not cut it off at
   the box's edge. Where it goes is worked out when it is opened. */
.git-discard-menu
{
    background-color: var(--gray-100);
    border: 1px solid var(--gray-50);
    border-radius: 5px;
    display: none;
    flex-direction: column;
    position: fixed;
    z-index: 3;
}
.git-discard-open .git-discard-menu
{
    display: flex;
}
.git-discard-choice
{
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.4375rem 1rem;
    text-align: left;
    white-space: nowrap;
}
.git-discard-choice:hover
{
    background-color: var(--gray-87);
}
/* The whole row of decisions reads at one size, so a choice does not look
   like a different kind of thing from the button beside it. */
.git-issue-held-decide,
.git-issue-held-decide button,
.git-discard-choice
{
    font-size: var(--font-size-7);
}
/* Source and preview share one window and stand the same height, split by
   a bar that can be dragged to give either more room. The query asks about
   the editor's own width rather than the window's, since the editor does
   not fill the window, and the container is the box around the pair rather
   than the pair itself: an element cannot be given a different display by
   a query that asks about its own size. */
#page-container
{
    container-type: inline-size;
}
.wiki-preview
{
    border: 1px solid var(--gray-50);
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    min-height: 0;
}
/* Takes whatever the pane has left over and scrolls on its own, so the
   source beside it keeps its own height. */
.wiki-preview-body
{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.6rem;
}
/* The stretch of the preview that answers what is picked out in the
   source, colored the way a selection is so the two panes read alike. */
/* A picture asked for small: drawn at a size a reader can take in at a
   glance, keeping its shape. */
.wiki-resource-thumb
{
    height: auto;
    max-height: 12rem;
    max-width: 12rem;
}
/* A table drawn from comma separated values written into a page. */
.wiki-preview-table
{
    border-collapse: collapse;
}
.wiki-preview-table td,
.wiki-preview-table th
{
    border: 1px solid var(--gray-82);
    padding: 0.2rem 0.4rem;
}
/* The stamps the parser leaves saying which line of the source a block
   came from. They are read for their position and never seen. */
/* A marker naming which line of the source a piece of the preview came
   from. It takes no room and must not break the line it sits on, or two
   places written to stand side by side are parted by it. */
.wiki-line
{
    display: inline;
    height: 0;
}
.wiki-preview-mark
{
    background-color: var(--color-mark);
}
/* The preview starts closed: the bar and the pane are out of the way and
   the source has the whole window. */
.wiki-preview-closed .wiki-preview,
.wiki-preview-closed .wiki-preview-bar
{
    display: none;
}
.wiki-preview-bar
{
    display: none;
}
@container (min-width: 52rem)
{
    /* With the preview open the pair is one window of a settled height, so
       both panes end level and each scrolls inside it rather than the page
       growing under them. It takes most of the window's height, with a
       ceiling so a very tall screen does not leave the writer scrolling a
       page-length box. */
    .wiki-edit-split:not(.wiki-preview-closed)
    {
        display: flex;
        gap: 0;
        height: var(--wiki-edit-window-height);
    }
    /* With the preview open the source keeps half the window and gives
       way as the bar is dragged; with it closed the source has the whole
       width, since there is nothing beside it to share with. */
    .wiki-edit-split:not(.wiki-preview-closed) .wiki-edit-source
    {
        display: flex;
        flex-direction: column;
        min-width: 0;
        width: 50%;
    }
    .wiki-edit-split.wiki-preview-closed .wiki-edit-source
    {
        width: 100%;
    }
    .wiki-edit-split .wiki-preview
    {
        flex: 1 1 0;
        margin-top: 0;
        min-width: 0;
    }
    /* The bar between the two panes, wide enough to take hold of and
       marked with the cursor that says it can be dragged. */
    .wiki-edit-split .wiki-preview-bar
    {
        background-color: var(--gray-82);
        cursor: col-resize;
        display: block;
        flex: none;
        margin: 0 0.25rem;
        width: 0.25rem;
    }
    /* Held to the column it sits in and given the whole of its height, so
       the two panes end level however long the page is. */
    .wiki-edit-split:not(.wiki-preview-closed) .tall-text-area
    {
        box-sizing: border-box;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        width: 100%;
    }
    .wiki-edit-split.wiki-preview-closed .tall-text-area
    {
        box-sizing: border-box;
        width: 100%;
    }
}
/* On a screen too narrow for two columns the preview goes above the source,
   so what the page will look like is the first thing read and the writing
   happens under it. */
@container (max-width: 51.9375rem)
{
    .wiki-edit-split
    {
        display: flex;
        flex-direction: column-reverse;
    }
    .wiki-edit-split .wiki-preview
    {
        margin-bottom: 0.5rem;
        margin-top: 0;
    }
    .wiki-edit-split .wiki-preview-body
    {
        max-height: 14rem;
    }
}
/* The way through to who is shut out sits under the queue, centered, and
   reads as a line of text because it leads somewhere. */
.git-issue-banned-link
{
    padding: 0.6rem;
    text-align: center;
}
.git-ban-search
{
    padding: 0.4rem;
}
.git-ban-search input
{
    box-sizing: border-box;
    width: 100%;
}
/* The way back and forward through a long list, under the list it moves
   through, with which rows are being shown between the two directions. */
.git-issue-paging
{
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding: 0.4rem;
}
.git-issue-paging-count
{
    color: var(--gray-33);
}
/* The two decisions about a waiting report are the only thing on this
   line and carry equal weight, so they sit together in the middle rather
   than ranged left the way a row of controls beside a label does. */
.git-issue-held-decide
{
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.625rem;
    margin-top: 0.625rem;
}
/* Shaped like the submit button that sends a form, but without the margin
   that pushes that one to the end of its line: these two are a pair and
   are placed by the line they sit on, not by themselves. The gap between
   them is wide enough that neither is hit by mistake. */
.git-issue-decide-button
{
    padding: 0.4375rem 1rem;
}
.git-issue-change-field
{
    align-items: center;
    display: none;
    gap: 0.375rem;
}
.git-issue-change-field input
{
    box-sizing: border-box;
    height: var(--control-height);
}
.git-issue-arrow
{
    box-sizing: border-box;
    cursor: pointer;
    height: var(--control-height);
    padding: 0 0.625rem;
}
.git-issue-detail-label
{
    color: var(--gray-33);
}
.git-issue-detail-line
{
    color: var(--gray-33);
    margin-bottom: 0.5rem;
}
.git-issue-detail-title-row
{
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin: 0.625rem 0 0.375rem 0;
}
.git-issue-detail-title
{
    margin: 0;
}
.git-issue-comment-controls
{
    align-items: center;
    display: flex;
    gap: 0.375rem;
}
.git-issue-comment-add,
.git-issue-comment-latest
{
    background: none;
    border: 1px solid var(--gray-82);
    border-radius: 4px;
    cursor: pointer;
    padding: 0.125rem 0.5rem;
}
.git-issue-comments
{
    border: 1px solid var(--gray-88);
    max-height: 16em;
    overflow-y: auto;
    padding: 0.375rem 0.625rem;
}
.git-issue-comment
{
    border-bottom: 1px solid var(--gray-94);
    padding: 0.375rem 0;
}
.git-issue-comment-head
{
    color: var(--gray-47);
    font-size: 0.75rem;
    margin-bottom: 0.125rem;
}
.git-issue-comment-who
{
    color: var(--gray-33);
    font-weight: bold;
}
.git-issue-comment-body img
{
    height: auto;
    max-width: 100%;
}
.git-issue-comment-form
{
    margin-top: 0.5rem;
}
.git-issue-list tr:hover td
{
    background-color: aliceblue;
}
.git-issue-num-col
{
    white-space: nowrap;
    width: 1%;
}
.git-issue-summary-col
{
    width: 60%;
}
.git-issue-priority-col
{
    text-align: center;
    white-space: nowrap;
    width: 1%;
}
.git-priority
{
    align-items: center;
    color: var(--gray-100);
    display: inline-flex;
    font-size: 0.6875rem;
    font-weight: bold;
    height: 1.375rem;
    justify-content: center;
    line-height: 1;
    width: 1.375rem;
}
.git-priority-low
{
    background-color: #3AA655;
    border-radius: 50%;
}
.git-priority-medium
{
    align-items: flex-end;
    background-color: #D08A1E;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    padding-bottom: 0.1875rem;
}
.git-priority-high
{
    background-color: #CC3333;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%,
        30% 100%, 0 70%, 0 30%);
}
.show-narrow
{
    display: none;
}
.center-wide
{
    margin: 0 auto 0 auto;
    text-align: center;
}
.configure-lang-shift
{
    position: relative;
    top: -3.2em;
}
/* A visitor who has asked the system to reduce motion should not be
   given the sliding panels, the spin, or the other easing this file
   sets. The animation is cut to a single held frame rather than removed
   so anything that waits on its end still advances, and the transitions
   are made instant so a state still changes but without the travel. */
@media (prefers-reduced-motion: reduce)
{
    *,
    *::before,
    *::after
    {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
/* The compact layout is wanted on a phone in either orientation, but a
   width-only test misses a phone held sideways: it is wide (around 850px)
   yet short. Adding a short-height test brings the compact rules in when
   the viewport is either narrow (portrait phones, narrow windows) or short
   (landscape phones, whose height is at or under 480px, while a tablet
   held sideways stays well above that). */
@media (max-width: 600px), (max-height: 480px)
{
    .git-hide-narrow
    {
        display: none;
    }
    .hide-narrow
    {
        display: none;
    }
    .show-narrow
    {
        display: revert;
    }
    .center-wide
    {
        margin: 0;
        text-align: start;
    }
    .configure-lang-shift
    {
        position: static;
        top: 0;
    }
    .stack-narrow > td
    {
        display: block;
        width: auto;
    }
    p
    {
        min-width:18.75rem;
        width:auto;
    }
    pre
    {
        white-space:pre-wrap;
    }
    .indent
    {
        text-indent: 0.625rem;
    }
    span.indent1
    {
        margin-left: 0.625rem;
    }
    span.indent2
    {
        margin-left: 1.25rem;
    }
    span.indent3
    {
        margin-left: 1.875rem;
    }
    span.indent4
    {
        margin-left: 2.5rem;
    }
    span.indent5
    {
        margin-left: 3.125rem;
    }
    .blockquote
    {
        margin-left: 1.5625rem;
        margin-right: 1.5625rem;
    }
    .small-font
    {
        font-size: var(--font-size-1) !important;
    }
    .medium-font
    {
        font-size: var(--font-size-3) !important;
    }
    .big-font
    {
        font-size: var(--font-size-5) !important;
    }
    .huge-font
    {
        font-size:20pt !important;
    }
    .very-narrow-field
    {
        width: 5rem;
    }
    .narrow-field
    {
        width: 6.25rem;
    }
    .wide-field
    {
        width: 9.375rem;
    }
    .extra-wide-field
    {
        width: 12.5rem;
    }
    .tall-text-area
    {
        width: 90%;
    }
    #info-item
    {
        height: calc(100% - 1.875rem);
        left: 0.625rem;
        width: calc(100% - 1.875rem);
    }
    #detail-item
    {
        border: 1px solid var(--gray-0);
        display: block;
        height: 22.8rem;
    }
    .detail-resource
    {
        max-width: 9.6875rem;
    }
    .resource-edit-pen-large
{
    bottom: 0.4rem;
    height: 2.4rem;
    right: 0.4rem;
    width: 2.4rem;
}
.grid-resource img
    {
        margin-left: 1.125rem;
    }
    .detail-resource img
    {
        height:6.6rem;
        margin-left: 2.1875rem;
    }
    div[data-badge]::after
    {
        left:-0.4375rem;
    }
    .badge
    {
        left: 0;
    }
    .media-detail-description
    {
        margin:auto;
        width:90%;
    }
    .medium-text-area
    {
        width: 90%;
    }
    .short-text-area
    {
        width: 90%;
    }
    .top-margin
    {
        margin-top: 0.375rem;
    }
    .top-bottom-margin
    {
        margin: 0.375rem 0 0.375rem 0;
    }
    .small-top-bottom-margin
    {
        margin: 0.1875rem 0 0.1875rem 0;
    }
    .slight-pad
    {
        padding: 0.1875rem;
    }
    body
    {
        left: 0;
        margin: 0;
        min-height: 0;
        width: auto;
    }
    .search-body, .body-container
    {
        width: unset;
        min-width: auto;
    }
    .top-container
    {
        top: -0.3125rem;
        min-width: 0;
    }
    .top-landing-spacer
    {
        clear:both;
        height:4.375rem;
    }
    #message
    {
        left: 1.25rem;
        right: 1.25rem;
        width: 100%;
    }
    .bar-item
    {
        font-size: var(--font-size-2);
        max-height: 14pt;
        max-width: 3.9375rem;
        top: 0.1875rem;
    }
    .wide-bar-item
    {
        font-size: var(--font-size-2);
        max-height: 14pt;
        max-width: 9.375rem;
        top: 0.1875rem;
    }
    .group-title-item
    {
        max-width: 11.25rem;
        vertical-align: top;
    }
    .nav-bar
    {
        min-width: unset;
        width: 100%;
    }
    .nav-bar .title-block
    {
        min-width: unset;
        width: 100%;
    }
    .nav-bar h1
    {
        font-size: var(--font-size-5);
        min-width: unset;
        max-width: unset;
    }
    .nav-bar .nav-span
    {
        font-size: var(--font-size-5);
        max-width:15.625rem;
    }
    .nav-bar img
    {
        max-width:3.75rem;
    }
    .menu-options li
    {
        padding: 1px;
    }
    .menu-options h2 img
    {
        max-height: 4.6875rem;
        max-width: 9.375rem;
    }
    .source-anchor-button
    {
        font-size: var(--font-size-5);
    }
    :not() .resource-more-btn
    {
        margin-top: -0.25rem;
    }
    #clipboard-toggle
    {
        height: 1.5625rem;
        position:relative;
        top:2px;
    }
    /* The narrow-screen rule above shrinks the clipboard toggle wherever it
       appears, but inside the resource toolbar it is one of the row's
       controls and must stay the row's height; the id in the selector beats
       the bare id rule so the toolbar clipboard lines up with its
       neighbors on a phone too. */
    .media-controls #clipboard-toggle
    {
        height: var(--toolbar-control-height);
        top: 0;
    }
    .center-container
    {
        margin-left: 0px;
        margin-right: 0px;
        min-width: unset;
        max-width: unset;
    }
    .small-top
    {
        position: relative;
        top:0;
    }
    .non-search
    {
        left: 0.625rem;
        position: relative;
        right: 0.625rem;
        top: 0.625rem;
    }
    .non-search .logo
    {
        margin: 0 auto 0 auto;
        position: relative;
        text-align: inherit;
        top: 1.25rem;
    }
    .test
    {
        position: relative;
        top: -1.08rem;
    }
    .request-add, .group-request-add
    {
        position:relative;
        top:-0.625rem;
    }
    .admin-heading
    {
        position: absolute;
        top: 0.3125rem;
        width:22.5rem;
    }
    .group-heading
    {
        position: absolute;
        top: 0.3125rem;
    }
    .group-heading span
    {
        position: relative;
        top: 0px;
    }
    .landing .logo
    {
        min-width: 0px;
    }
    .group-comment
    {
        margin: 0.625rem 0.875rem 0.625rem 0.875rem !important;
    }
    .logo img
    {
        left: -0.5rem;
        position: relative;
        top: 0.875rem;
        width: 3.125rem;
        z-index: 5;
    }
    .admin-heading img
    {
        position: relative;
        top: 0px;
    }
    .group-heading img.logo
    {
        left: 0.25rem;
        position: relative;
        top: 1.0625rem;
        width: 3.125rem;
    }
    .landing .logo img
    {
        position: relative;
        left: 0px;
        top: 0.875rem;
        width: 12.5rem;
    }
    .admin-heading img
    {
        left: 5rem;
        position: relative;
        right: 5rem;
        top: 1.875rem;
        width: 3.125rem;
    }
    .logo span
    {
        position: relative;
        top: 0;
    }
    .html-ltr b.logo-subsearch,
    .html-rtl b.logo-subsearch
    {
        inset-inline-start: 3.125rem;
        position: fixed;
        top: 2.5rem;
    }
    .logo-subsearch
    {
        font-size: 20pt;
        margin: 0;
        padding: 0;
        position: relative;
        text-align: center;
        top: -1.5625rem;
        z-index: 15;
    }
    .admin-heading
    {
        left: 4.375rem;
        position: relative;
        right: 4.375rem;
        top: 1.25rem;
    }
    .non-search .logo span
    {
        left: 1.25rem;
        position: relative;
        right: 1.25rem;
        top: -1.8rem;
        width: 12.5rem;
    }
    .non-search .logo img
    {
        left: 1.25rem;
        position: relative;
        right: 1.25rem;
        top: -1.25rem;
        width: 3.125rem;
    }
    .footer-element
    {
        margin-top: 3.75rem;
    }
    .signin-exit
    {
        min-width:0;
    }
    .signin-exit
    {
        margin-top: 2.4rem;
        position: relative;
        text-align: inherit;
        min-width:0;
        top: -1.25rem;
        width: 90%;
    }
    .html-ltr .signin-exit li,
    .html-rtl .signin-exit li
    {
        margin-inline-start: 0;
        margin-left: 20%;
        margin-right: 20%;
    }
    .query-statistics
    {
        position: relative;
        overflow-wrap: break-word;
        top: 12.5rem;
        word-wrap: break-word;
    }
    .login, .register
    {
        font-size: var(--font-size-5);
        left: 0.3125rem;
        position: relative;
        right: 0.3125rem;
        width: 100%;
    }
    .register .table-label
    {
        max-width: 9rem;
        overflow-wrap: break-word;
        white-space: normal;
    }
    .login button, .register button
    {
        font-size: var(--font-size-5);
    }
    .register select
    {
        font-size: var(--font-size-3);
    }
    .user-icon-td
    {
        width:5.625rem;
    }
    .user-icon
    {
        width:5rem;
    }
    .upload-file
    {
        width: 9.375rem;
        height: 1.875rem;
    }
    .small-icon
    {
        height: 1.875rem;
        width: 1.875rem;
    }
    .icon-upload
    {
        left:-0.3125rem;
        position:relative;
        font-size: var(--font-size-2);
        width:5.375rem;
    }
    .statistics
    {
        font-size: var(--font-size-5);
        left: 0.3125rem;
        position: relative;
        right: 0.3125rem;
        width: 100%;
    }
    .stats span
    {
        left: -0.625rem;
        position: relative;
        top: -0.625rem;
        width: 12.5rem;
    }
    .stats img
    {
        left: 0px;
        position: relative;
        top: 0px;
        width: 3.125rem;
    }
    .search-callout
    {
        border: 3px solid var(--gray-87);
        padding: 0.3125rem;
        margin: 0.5rem 0.1875rem 0.1875rem 0.1875rem;
        width: 20rem;
    }
    .news-result img
    {
        margin-top:0.3125rem;
        max-height:4.375rem;
        top:0.4375rem;
        width:7.5rem;
    }
    .news-result, .result
    {
        width:inherit;
    }
    .page-list-header-footer
    {
        padding: 0;
        margin: 0 auto 0 auto;
        width: 21.25rem;
    }
    .wiki-page-list-result
    {
        width:21.25rem;
    }
    div.small-group-result, div.group-result
    {
        margin: 0.5rem 1px 0.5rem 1px;
        width: auto;
    }
    div.button-group-result
    {
        margin: 0.5rem 1px 1px 1px;
        padding: 2px 2px 1px 2px;
        width: auto;
    }
    .search-box
    {
        width: calc(100% - 3.125rem);
        margin-top: 0.5rem;
    }
    .search-box-inner input
    {
        font-size: var(--font-size-5);
        width: calc(100% - 5rem);
    }
    .inner-bar .search-box
    {
        width: calc(100% - 8.75rem);
    }
    .inner-bar .search-box-inner
    {
        width: calc(100% - 7.5rem);
    }
    .inner-bar .search-box-inner input
    {
        width: calc(100% - 5rem);
    }
    .search-button
    {
        font-size: var(--font-size-5);
    }
    .search-reset-button
    {
        font-size: var(--font-size-3);
    }
    .button-box img
    {
        left:-2px;
        position:relative;
        top:1px;
    }
    .search-field
    {
        position: relative;
        width:85%;
        top: -1.5625rem;
    }
    .search-field input[type="search"]
    {
        border-radius:1px;
        width:58%;
    }
    .search-field .button-box
    {
        background-color:var(--gray-93);
        border-radius:1px;
        height:2.3125rem;
        left:0;
        position: relative;
        top: 0.1875rem;
        width:2.5rem;
    }
    .search-field .button-box img
    {
        left:-0.625rem;
        position:relative;
        top:1px;
    }
    .small-search-box
    {
        position:static;
        width: 11.25rem;
    }
    .medium-search-box
    {
        position: static;
        width: 13.75rem;
    }
    .large-search-box
    {
        position: static;
        width: 16.25rem;
    }
    .small-search-box .search-input
    {
        position: static;
        width: 6.75rem;
    }
    .medium-search-box .search-input
    {
        position: static;
        width: 9.25rem;
    }
    .large-search-box .search-input
    {
        position: static;
        width: 11.75rem;
    }
    .dropdown
    {
        display: none;
    }
    .suggest-list
    {
        display: none;
    }
    .video-list, .image-list
    {
        margin-left: 2px;
        margin-right: 2px;
        padding: 2px;
        position: relative;
        top: 0.3125rem;
        width: 100%;
    }
    .image-detail
    {
        max-width: 7.4375rem;
    }
    .image-list img
    {
        height: 4.375rem;
        padding: 2px;
    }
    .video-detail
    {
        width: 10.8rem;
    }
    .video-list .video-thumb
    {
        max-height: 7.5rem;
    }
    .video-play-button
    {
        font-size: 4.2rem;
        top:1.2rem;
        left:3.3rem;
    }
    .table-input select
    {
        width: 11.875rem;
    }
    .table-input input
    {
        width: 9.375rem;
    }
    .content
    {
        clear: both;
        position: relative;
        left: 0;
        margin: 0.1875rem;
        right: 0;
        top: 0;
        width: 100%;
    }
    .button-box
    {
        background-color: #E9E9ED;
        border-radius: 5px;
        border: 1px ridge var(--gray-0);
        font-size: var(--font-size-5);
        height: 2.125rem;
        margin: 0 0.25rem 1px 0.25rem;
        top: unset;
    }
    .current-activity-header
    {
        min-width: 20rem;
        width:100%;
    }
    .wiki
    {
        position:relative;
        top: -2.1875rem;
    }
    .current-activity-footer
    {
        min-width: 20rem;
        width:100%;
    }
    #feedstatus
    {
        position: relative;
        top: 3.4375rem;
    }
    .current-activity, .small-margin-current-activity
    {
        clear:both;
        font-size: var(--font-size-3);
        margin:auto;
        min-height: 12.5rem;
        min-width: 0;
        padding: 0 0.1875rem 0.1875rem 0.1875rem;
        position: relative;
        top: 0.3125rem;
        width: 96%;
    }
    textarea
    {
        font-size: var(--font-size-5);
    }
    .adjacent-button-field
    {
        height: 1.75rem;
        margin: 2px;
    }
    .current-activity select, .small-margin-current-activity select
    {
        font-size: var(--font-size-3);
    }
    .current-activity img, .small-margin-current-activity img
    {
        max-width:95%;
    }
    .media-container .photo
    {
        max-width: 18.75rem;
    }
    .media-container .photo-container
    {
        height: 28.75rem;
        max-width: 18.75rem;
    }
    .admin-form-row
    {
        min-width: 21.25rem;
    }
    #browse-state, #browse-state option
    {
        font-size: var(--font-size-5);
    }
    .search-sources-table pre
    {
        max-width: 14.375rem;
    }
    .scrapers-table
    {
        max-width: 21.25rem;
    }
    .scrapers-table td, .scrapers-table th
    {
        font-size: 0.6875rem;
        max-width:15.625rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .file-types-table,
    .file-types-all td,
    .search-page-table,
    .search-page-all td
    {
        margin-left: 2px;
        margin-right: 2px;
        vertical-align: top;
    }
    .indexing-plugin-lightbox
    {
        left: 0px;
        right: 0px;
    }
    .light-content h2
    {
        font-size: var(--font-size-3);
        padding:1.25rem;
    }
    .light-content
    {
        left:0.625rem;
        padding: 0.9375rem;
        right:0.625rem;
        width:16.25rem;
    }
    .wiki-resources table
    {
        width: 100%;
    }
    .wiki-resources th:first-child
    {
        width: 3.5rem;
    }
    .wiki-resources th:last-child
    {
        width:17.5rem;
    }
    .ebook-range
    {
        width:10.3125rem;
    }
    .ebook, .wiki-resource-object
    {
        min-height:18.75rem;
        width:22.5rem;
    }
    .icon-button-container
    {
        /* shrunk so the full 4-6 icon socialcontrols row fits one
        line on a narrow phone viewport without wrapping */
        font-size: var(--font-size-3);
        padding: 2px;
        width: 1.2rem;
        margin: 1px;
    }
    .media-buttons-container
    {
        font-size: var(--font-size-2);
        height: min-content;
        margin:0px;
        padding: 2px;
        position:relative;
        top:1px;
    }
    .access-result .media-buttons-container
    {
        top: 2px;
    }
    .media-buttons-container a
    {
        height: min-content;
        margin: 0;
        padding: 1px;
    }
    .media-buttons-container .selected
    {
        padding: 1px;
    }
    .search-filter-container, .filter-container
    {
        min-height: 1.875rem;
        margin: 0px;
        position:relative;
        top:-1px;
    }
    .search-filter-container input
    {
        font-size: var(--font-size-4);
    }
    .filter-container
    {
        max-width: 4.5rem;
    }
    .search-filter-container input, .filter-container input
    {
        min-height: 1.75rem;
    }
    .filter-container input:focus-within
    {
        min-height: var(--control-height);
        position:relative;
        top:-1px;
        width: 12.5rem;
        z-index:100;
    }
    .html-ltr .filter-container input:focus-within,
    .html-rtl .filter-container input:focus-within
    {
        inset-inline-end:7.8125rem;
    }
    .media-filter-button
    {
        font-size: var(--font-size-1);
        height: 1.875rem;
        padding: 1px;
        position:relative;
        margin-left: 2px;
        margin-right: 2px;
        top: 0px;
    }
    .filter-container input
    {
        height: 1.5625rem;
        width: 100%;
    }
    ul.link-dropdown, ul.popup-dropdown
    {
        margin: 0 0 2px 0;
    }
    .link-dropdown, .popup-dropdown
    {
        max-width: 15rem;
    }
    .wiki-history-discuss
    {
        position:relative;
        top:1.25rem;
    }
    .upload-box
    {
        margin: 0 0.3125rem 0 0.3125rem;
        text-align: center;
        width:88%;
    }
    .media-upload-box
    {
        width: 88%;
    }
    .resource-actions
    {
        min-width:6.25rem;
    }
    .list-resource
    {
        width:100%;
    }
    .list-resource th
    {
        width: unset;
    }
    .resource-thumb
    {
        width: 2.1875rem;
    }
    .view-indicator
    {
        width: 1.5625rem;
    }
    .list-resource img
    {
        margin: 0;
        height: 1.875rem;
        width: 3rem;
    }
    .list-resource img.default-thumb
    {
        margin: 0;
    }
    .list-resource input
    {
        width: calc(min(100% - 3.125rem, 18.75rem));
    }
    .top-adscript
    {
        padding: 1px;
        width:90%;
    }
    .top-ad-static
    {
        position: relative;
        top: 0px;
    }
    .group-ad-static
    {
        position: relative;
        top: 6.25rem;
    }
    .top-adscript iframe
    {
        transform: scale(0.63);
        transform-origin: 0 0;
    }
    .display-ad p
    {
        max-width: 92%;
        padding-bottom: 0.625rem;
        padding-top: 0.625rem;
        margin: inherit;
        width : auto;
    }
    .trending-container
    {
        display:block;
        overflow-x: scroll;
        max-width:20rem;
    }
    .trending
    {
        position:static;
        margin-top:1.5625rem;
    }
    .trending-float
    {
        float: none;
        position:static;
    }
    .trending-table
    {
        border: 1px solid var(--gray-0);
        border-collapse: collapse;
        table-layout: fixed;
        width: 17.5rem;
    }
    .trending-footer
    {
        margin-bottom: 5rem;
    }
    .trending-highlight
    {
        left:0.625rem;
        right:0.625rem;
        width:20.625rem;
    }
    .feed-highlight
    {
        left:0.625rem;
        right:0.625rem;
        width:20.625rem;
    }
    .git-search-field
    {
        width: 55vw;
    }
    .git-listing-box
    {
        max-height: 60vh;
    }
    .git-author-col
    {
        display: none;
    }
    .wiki-read h1, .wiki-read h2, .wiki-read h3,
    .wiki-read h4, .wiki-read h5, .wiki-read h6
    {
        scroll-margin-top: 13.2rem;
    }

    .search-body .center-container
    {
        min-width: unset;
    }
    .inner-bar .search-box
    {
        width: calc(100% - 3.125rem);
    }
    .detail-container .badge
    {
        left: 0;
    }
    .detail-container div[data-badge]::after
    {
        left: -0.4375rem;
    }
    .image-list .image-detail
    {
        max-width: 9.6875rem;
    }
    .video-list .video-detail
    {
        width: 90%;
    }
    .html-ltr .button-box,
    .html-rtl .button-box
    {
        top: 0;
    }
    .nav-bar h1 img
    {
        position: relative;
        top: 0.3125rem;
    }
    .list-resource .resource-field:focus-within input
    {
        width: 90%;
    }
    h2.resource-field input
    {
        font-size: var(--font-size-3);
    }
    .micro-pagination ul li
    {
        padding: 0.1875rem;
    }
    .group-heading span select
    {
        font-size: var(--font-size-3);
    }
    .search-sources-table pre
    {
        white-space: pre-wrap;
    }
}
.git-file-audio
{
    width: 100%;
}
.git-file-video
{
    max-height: 40rem;
    max-width: 100%;
}
.git-file-image
{
    max-height: 40rem;
    max-width: 100%;
}
.git-file-pdf
{
    height: 40rem;
    width: 100%;
}
.toc
{
    border: 1px ridge var(--gray-0);
    width: 70%;
    padding: 0.1875rem;
    margin: 0.375rem;
}
/* Below this width the reading column and the panel beside it cannot both
   have the room they want. The panel is carried into the reading column,
   after the advertisements, where a phone has always shown it; the column
   it came from is then empty and left out. Kept beside the results it lay
   over the advertisement, the count and the results themselves. */
@media (max-width: 1150px)
{
    .opposite-container
    {
        display: none;
    }
    .center-container .search-callout
    {
        margin-top: 0.5rem;
        width: auto;
    }
}

/* A place naming a page that has not been written yet says so beside the
   name, so a writer can tell a plan from a mistake. */
.front-page-missing
{
    color: var(--gray-40);
    font-size: var(--font-size-1);
    font-style: italic;
    margin-inline-start: 0.5rem;
}

/* A place holding one story shows its beginning, so a reader can tell
   from the front page whether the story is for them. */
/* A story says nothing about how it is laid out. It had been set to
   stand on a line of its own, which overrode the place holding it and put
   every card of a row beneath the last. */
.lead-story
{
    overflow: hidden;
}
.lead-story-title
{
    display: block;
    font-size: var(--font-size-5);
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.lead-story-icon
{
    float: inline-start;
    margin-block-end: 0.5rem;
    margin-inline-end: 0.75rem;
    max-width: 8rem;
}
/* The way through to a story lines up with the story's own text rather
   than sitting apart from it, so a reader's eye follows the column down
   to it. */
.lead-story-more
{
    clear: both;
    font-weight: bold;
    text-align: inherit;
}
/* A category's list may be headed by its own name where a page of
   several sections wants each said. */
.category-list-name
{
    margin: 0 0 0.5rem 0;
}
/* What a place holds reads on one line; how much of it to show sits
   indented beneath, one setting to a line, so the row read first says
   only what is there. */
.front-page-slot-holds
{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.front-page-slot-how-much
{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-inline-start: 2rem;
    margin-top: 0.35rem;
}
/* Each setting reads as its name and its control side by side on one
   line: "Show: [3 items]". A label puts its own contents on separate
   lines unless told otherwise, which broke each of these in two. */
.front-page-how-much
{
    align-items: center;
    display: inline-flex;
    flex-direction: row;
    gap: 0.5rem;
    white-space: nowrap;
}
.front-page-slot-how-much select
{
    width: auto;
}
/* A dropdown and the button beside it stand the same height, rather than
   the dropdown sitting short against it. */
#article-date-setting
{
    align-items: stretch;
    display: flex;
    gap: 0.5rem;
}
/* Both stand the full height of the row, so the dropdown does not sit
   short against the button beside it. Their own paddings differ, so the
   height is taken from the row rather than set on each. */
#article-date-setting select,
#article-date-setting button
{
    align-self: stretch;
    font-size: var(--font-size-3);
}
.lead-story-missing
{
    color: var(--gray-40);
    font-style: italic;
}
/* A category's list runs on as a reader reaches its end, so its own room
   is what limits it rather than a count. */
.category-list-items
{
    max-height: 30rem;
    overflow-y: auto;
}

/* A story or a category shown in one of the smaller arrangements has
   less room than the lead of a page, so what it shows is trimmed to fit
   rather than crowding out its neighbors. */
.front-page-cards .lead-story-title,
.front-page-grid .lead-story-title,
.front-page-sections .lead-story-title
{
    font-size: var(--font-size-3);
}
.front-page-cards .lead-story-icon,
.front-page-grid .lead-story-icon,
.front-page-sections .lead-story-icon
{
    max-width: 4rem;
}
.front-page-cards .lead-story p,
.front-page-grid .lead-story p
{
    font-size: var(--font-size-2);
}
.front-page-grid .category-list-items,
.front-page-cards .category-list-items
{
    max-height: 18rem;
}

/* The categories a page is filed under are chosen from a control that
   doubles as the heading over them, so it is set in the weight a heading
   is read at. */
.article-category-heading
{
    font-size: var(--font-size-4);
    font-weight: bold;
}

/* The banner's picture stands above what it shows and who holds it. The
   picture is moved into this box by script and so arrives after the two
   lines, which is why the order is set here rather than left to the
   markup. */
#article-header-thumb
{
    display: flex;
    flex-direction: column;
}
#article-header-thumb > #page-icon-setting
{
    order: 1;
}
#banner-lines
{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    order: 2;
}
.banner-line
{
    box-sizing: border-box;
    font-size: var(--font-size-2);
    width: 100%;
}
/* What a banner shows and who holds it are set small beneath it, since
   they explain the picture rather than compete with it. */
.article-banner-caption,
.article-banner-rights
{
    color: var(--gray-40);
    display: block;
    font-size: var(--font-size-2);
}

/* A news article opens with its title, then the picture that stands for
   it, then who wrote it, so a reader meets them in that order. */
.article-title
{
    margin-bottom: 0.5rem;
    text-align: center;
}
/* The picture that opens an article stands centered under its title,
   with what it shows and who holds it centered beneath. */
.article-banner
{
    text-align: center;
}
.article-banner-image
{
    margin-inline: auto;
}
.article-date
{
    color: var(--gray-40);
    font-size: var(--font-size-2);
    margin: 0.25rem 0;
}
.article-banner-image
{
    display: block;
    height: auto;
    max-width: 100%;
}
.article-author
{
    margin: 0.5rem 0;
}
/* The usual list stands each picture beside the words that go with it,
   the words wrapping around and beneath. A picture is held to about two
   centimeters square, which is large enough to tell one story from
   another and small enough that the words beside it stay the point. */
.category-list-standard .category-list-icon
{
    float: inline-start;
    margin-block-end: 0.35rem;
    margin-inline-end: 0.5rem;
}
.category-list-standard .category-list-icon img
{
    border-radius: var(--list-picture-corner);
    height: auto;
    max-height: var(--list-picture-side);
    max-width: var(--list-picture-side);
    width: auto;
}
.category-list-standard .category-list-item
{
    overflow: hidden;
}
/* A list is read for its titles, so a title is set at the size a link in
   running text is set at and its abstract a step below. Both were taking
   the size the surrounding page happened to give them, which came out far
   too small beside the picture. */
.category-list-title
{
    font-size: var(--font-size-6);
}
.category-list-description
{
    font-size: var(--font-size-5);
}
.category-list-name
{
    font-size: var(--font-size-7);
}
/* A compact list drops the picture and a minimal one keeps only the
   titles, for a place with less room or a page wanting a bare index. */
.category-list-compact .category-list-item,
.category-list-minimal .category-list-item
{
    margin-bottom: 0.4rem;
}
.category-list-minimal .category-list-title
{
    display: block;
}

/* Each place on a front page begins below whatever the place above it
   drew. A story may float a picture to one side, and without this the
   list beneath wrapped around that picture instead of starting under
   it. */
.lead-story,
.category-list,
.category-list-name
{
    clear: both;
}
/* A place on a front page is drawn by the site and put here once it
   arrives, so while it is being asked for the box stands empty rather
   than showing the mark that names it. */
.front-page-waiting
{
    min-height: 1rem;
}

/* A story may float a picture beside its words. What follows the story on
   a front page begins below it rather than wrapping around what the story
   floated, since the next place is not part of the story. */
.lead-story::after
{
    clear: both;
    content: "";
    display: block;
}
/* Only a place standing beneath a story begins below what that story
   floated. Clearing every list put each card of a row on a line of its
   own, since a card holds a list too. */
.front-page-below
{
    clear: both;
}

/* The names of a group's categories, each a way into the pages filed
   under it. */
.category-names-items
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.category-names-item
{
    margin-bottom: 0.35rem;
}
.category-names-item a
{
    font-size: var(--font-size-6);
}
.category-names-empty
{
    color: var(--gray-40);
    font-style: italic;
}

/* The messages activity in the menu pulses while somebody's call is
   waiting and the reader is looking at another screen. This lives here
   rather than beside the other message styles because the menu stands
   on every screen, and those styles are loaded only by the messages
   screen itself. */
.activity-ringing
{
    animation: activity-ringing-pulse 1.2s ease-in-out infinite;
    font-weight: bold;
}
@keyframes activity-ringing-pulse
{
    0%, 100%
    {
        opacity: 1;
    }
    50%
    {
        opacity: 0.35;
    }
}
/* Where someone has asked for less movement the pulse is not run; the
   bold weight still says a call waits. */
@media (prefers-reduced-motion: reduce)
{
    .activity-ringing
    {
        animation: none;
    }
}

/* The one row of controls at the top of a wiki edit screen: the ways
   into the settings and resources views, the language chooser, the
   preview, the history, the syntax page and the help for all of it.
   Laid out in a line that wraps as a whole, so a narrow screen drops
   the tail of the row rather than leaving a control stranded. */
.wiki-edit-controls
{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.wiki-edit-controls label
{
    margin-inline-end: 0.25rem;
}
/* The picture editor and its controls. The controls sit in a row that
   wraps on a narrow screen, and the canvas below shows a light and dark
   check so a see-through part of the picture reads as see-through. The
   canvas is held to the width of its box and never drawn wider than the
   picture it holds. */
.image-editor-controls
{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.image-editor-field
{
    align-items: center;
    display: inline-flex;
    gap: 0.15rem;
}
.image-editor-size
{
    width: 4rem;
}
.image-editor-panel
{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.image-editor-icon
{
    display: block;
    height: 1.2rem;
    width: 1.2rem;
}
.image-editor-mark
{
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 0.2rem;
}
.image-editor-by
{
    padding: 0 0.15rem;
}
.image-editor-controls select
{
    font-family: monospace;
    text-align: center;
}
.image-editor-canvas
{
    background-color: var(--gray-88);
    background-image:
        linear-gradient(45deg, var(--gray-82) 25%, transparent 25%),
        linear-gradient(-45deg, var(--gray-82) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--gray-82) 75%),
        linear-gradient(-45deg, transparent 75%, var(--gray-82) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    border: 2px solid var(--gray-0);
    box-shadow: 0 0 0 1px var(--gray-100);
    max-width: 100%;
}

/* The way into editing a presentation and the way to its discussion,
   for a reader who may edit it. A deck being read fills the screen and
   shows no bar, so these are held in the corner opposite the side the
   language is read from, above the slides and out of the way of the
   engine's own controls along the bottom. */
.presentation-corner
{
    display: flex;
    gap: 0.25rem;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    opacity: 0.55;
    position: fixed;
    z-index: 10;
}
.presentation-corner:hover,
.presentation-corner:focus-within
{
    opacity: 1;
}

/* The names offered while somebody types into a field that asks for a
   person, a group or a role. Drawn here rather than left to the browser,
   since browsers differ over whether they draw a list of choices at all.
   The list stands over what follows it so the screen does not jump as
   names arrive. */
.suggestions
{
    background-color: var(--color-background);
    border: 1px solid var(--gray-73);
    border-radius: 4px;
    inset-block-start: 100%;
    inset-inline-start: 0;
    list-style: none;
    margin: 0;
    max-width: 20rem;
    padding: 0;
    position: absolute;
    /* The contact box's form has class center, which the names would
       otherwise inherit. */
    text-align: start;
    z-index: 30;
}
.suggestions-anchor
{
    position: relative;
}
.suggestions .suggestion
{
    cursor: pointer;
    padding: 0.35rem 0.6rem;
}
.suggestions .suggestion:hover
{
    background-color: var(--gray-87);
}
.suggestions .suggestion
{
    font-weight: bold;
}
.suggestions .suggestion + .suggestion
{
    border-block-start: 1px solid var(--gray-73);
}
.suggestions .suggestion-note
{
    color: var(--gray-50);
    display: block;
    font-size: 0.85em;
    font-weight: normal;
}

/* The two marks beside the chooser of which file is being read: one to
   fetch the file down, one to swap a table of figures between its rows
   and bars. Each is bordered so it reads as something to press rather
   than as a word in the row it stands in. */
.wiki-resource-marks
{
    display: inline-flex;
    gap: 0.25rem;
    margin-inline-start: 0.4rem;
    vertical-align: middle;
}
.wiki-resource-marks .icon-anchor-button
{
    align-items: center;
    background-color: var(--gray-94);
    border: 1px solid var(--gray-73);
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    min-height: 1.9rem;
    min-width: 1.9rem;
    text-decoration: none;
}
.wiki-resource-marks .icon-anchor-button:hover
{
    background-color: var(--gray-87);
}
