body
{
    background-color: #cfcfcf;
}
a
{
    text-decoration: none;
}
img
{
    border: none;
}
input,textarea,select,button,.menuitem,.dropbtn,.langbtn
{
    border: 1px solid #000000;
    background-color: #f0f0f0;
    margin: 1px;
    color: #000000;
}
input:hover,textarea:hover,select:hover,button:hover,.menuitem:hover,.dropbtn:hover,.langbtn:hover
{
    background-color: #e0e0e0;
}
input[type=submit]:active,button:active,.menuitem:active,.dropbtn:active,.langbtn:active
{
    border: 1px solid #7f7f7f;
    color: #ffffff;
    background-color: #000000;
}
hr
{
    border-top: 1px solid #000000;
    border-bottom: 0px;
    height: 1px;
}
.menuitem,.dropbtn,.langbtn
{
    padding-right: 9px;
    padding-left: 9px;
    cursor: pointer;
}
.error,.red
{
    color: #cc0000;
}
.successmsg,.green
{
    color: #009900;
}
.fileinfo
{
    border: 1px solid #000000;
    padding: 3px;
    background-color: #ccffff;
    display: inline-block;
    overflow: hidden;
}
.fileinfo label
{
    font-weight: bold;
}
.slblmore
{
    color: #0000ff;
    cursor: pointer;
}
.hidden
{
    display: none;
}
input#more0:checked ~ div#fileselector0,input#more0:checked ~ label#lblmore1,input#more1:checked ~ div#fileselector1,input#more1:checked ~ label#lblmore2,input#more2:checked ~ div#fileselector2,input#more2:checked ~ label#lblmore3,input#more3:checked ~ div#fileselector3,input#more3:checked ~ label#lblmore4,input#more4:checked ~ div#fileselector4,input#more4:checked ~ label#lblmore5,input#more5:checked ~ div#fileselector5,input#more5:checked ~ label#lblmore6,input#more6:checked ~ div#fileselector6,input#more6:checked ~ label#lblmore7,input#more7:checked ~ div#fileselector7,input#more7:checked ~ label#lblmore8,input#more8:checked ~ div#fileselector8,input#more8:checked ~ label#lblmore9,input#more9:checked ~ div#fileselector9
{
    display: block;
}
input#more0:checked ~ label#lblmore0,input#more1:checked ~ label#lblmore1,input#more2:checked ~ label#lblmore2,input#more3:checked ~ label#lblmore3,input#more4:checked ~ label#lblmore4,input#more5:checked ~ label#lblmore5,input#more6:checked ~ label#lblmore6,input#more7:checked ~ label#lblmore7,input#more8:checked ~ label#lblmore8,input#more9:checked ~ label#lblmore9
{
    display: none;
}
.lang
{
    position: absolute; 
    display: inline-block;
    right: 9px;
}
.lang, x:-moz-any-link, x:default /* any FireFox */
{
    margin-top: -17px;
}
_::-moz-progress-bar, body:last-child .lang /* FireFox>=6 */
{
    margin-top: 0px;
}
.lang:not(*:root)  /* Chrome, Safari, Opera>=14, Adroid */
{
    margin-top: -17px;
}
.dropdown
{
    position: relative;
    display: inline-block;
}
.lang-content
{
    display: none;
    position: absolute;
    background-color: #f0f0f0;
    /* 180px, not 172: "Bahasa Indonesia" is the longest name in the menu and
       wrapped on browsers that round the em-based width down. Sized to the
       longest label rather than to the average one. */
    min-width: 180px;
    z-index: 1;
    border: #000000 solid 1px;
    right: 0;
}
.dropdown-content
{
    display: none;
    position: absolute;
    background-color: #f0f0f0;
    min-width: 148px;
    z-index: 1;
    border: #000000 solid 1px;
}
.dropdown-content a,.lang-content a
{
    color: #000000;
    padding: 3px 10px 3px 10px;
    text-decoration: none;
    display: block;
    border-bottom: #cccccc solid 1px;
}
.dropdown-content a:hover,.lang-content a:hover
{
    background-color: #000000;
    color: #ffffff;
}
.dropdown:hover .dropdown-content,.lang:hover .lang-content
{
    display: block;
}
.dropdown:hover .dropbtn,.lang:hover .langbtn
{
    background-color: #000000;
    color: #ffffff;
    border: #ffffff solid 1px;
}
.wzresponse
{
    word-wrap: break-word;
    background-color: #ffffff;
    border: #000000 solid 1px;
    width: 99%;
    padding: 5px;
    font-family: monospace;
    font-size: 1em;
}
.translateres
{
    word-wrap: normal;
    background-color: #ffffff;
    border: #000000 solid 1px;
    width: 972px;
    padding: 5px;
    font-family: sans-serif;
    font-size: 1.25em;
}
.clocktable
{ 
    background: #e6e6e6; 
    border-color: #767676;
    border-style: solid;
    border-width: 2px;
    empty-cells: show; 
    min-width: 700px;
}
.clockcaption 
{
    background: #767676;
    font-size: 23px;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 0px;
}
.clockthead 
{
    background: #000000;
    color: #ffffff;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 4px 4px;
    text-align: left
}
.clocktfoot
{
    background: #767676;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 2px 4px;
    color: #ffffff;
    text-align: center
}
.clocktbody
{ 
    border: none;
}
.clocktd,.clocktr,.clockth
{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
.clocktf
{
    border: #000000 solid 1px;
}
.qltreven 
{
    background: #a6a6a6;
}
.qltr 
{
    background: #c6c6c6;
}
.ipinfo
{
    border: #000000 solid 1px;
    border-collapse: collapse;
    empty-cells: show; 
    padding: 2px;
}
.ipinfo td
{
    border: #000000 solid 1px;
    font-family: sans-serif;
}
/* --- webfonts ------------------------------------------------------------ */
/* Only referenced by .charglyph-jp and .charsrow-jp below, so the browser
   fetches these on the kana and CJK pages and nowhere else. Together they are
   about 6.4MiB, which is a lot for a quiz: worth subsetting to the ranges
   actually used (kana plus the 214 radicals) with pyftsubset. Serve res/
   with a long Cache-Control, the files are immutable. */
@font-face
{
    font-family: 'Kiwi Maru';
    src: url('/res/KiwiMaru-Regular.woff2') format('woff2'),
         url('/res/KiwiMaru-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face
{
    font-family: 'Zen Kaku Gothic New';
    src: url('/res/ZenKakuGothicNew-Regular.woff2') format('woff2'),
         url('/res/ZenKakuGothicNew-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* --- character trainer --------------------------------------------------- */
.charsmenu
{
    line-height: 1.9em;
}
.charsmenu a,.charsmenuon
{
    border: 1px solid #000000;
    background-color: #f0f0f0;
    color: #000000;
    padding: 2px 6px;
    margin: 1px;
    white-space: nowrap;
}
.charsmenu a:hover
{
    background-color: #e0e0e0;
}
.charsmenuon
{
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #7f7f7f;
}
.charscore
{
    border: 1px solid #000000;
    padding: 3px;
    background-color: #ccffff;
    overflow: hidden;
    /* A table box rather than an inline-block, so `margin: auto` centres it
       the same way .charstable and .charsanswers are centred. Both shrink to
       fit their content; only a table box can then be centred with auto
       margins, which an inline-block cannot.

       Deliberately NOT a row inside .charstable: that table is one column, so
       the column would widen to the feedback text and stretch the 150px grey
       glyph cell with it. Its own box keeps the two independent. */
    display: table;
    margin: 3px auto;
    text-align: center;
}
.score
{
    color: #aa00aa;
    font-weight: bold;
}
.pct
{
    color: #00aaaa;
    font-weight: bold;
}
.charstable
{
    border-collapse: collapse;
    /* auto margins on both tables centre each within the form, and therefore
       against each other -- the glyph sits over the middle of the answer
       grid whatever width that grid happens to be. Sizing one to the other
       is not possible here without a wrapper, and is not needed: they share
       a container, so centring both is enough. */
    margin: 9px auto;
}
.charsglyph
{
    background: #cccccc;
    border: #767676 solid 2px;
    width: 150px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}
.charglyph
{
    position: relative;
    z-index: 0;
    font-size: 5em;
    line-height: 1em;
    font-weight: bold;
    color: #000000;
}
/* --- weight of the Japanese glyph ---------------------------------------- */
/* The two webfonts ship a Regular face only -- the @font-face blocks above
   both declare font-weight: normal, so the family has nothing at 700. Asking
   for bold therefore cannot select a face; the browser fabricates one by
   smearing the outlines, and every engine smears by a different amount. That
   is why the same font looks heavier in some browsers than others, and why
   switching bold off fixes one browser while thinning the rest.

   font-synthesis: none stops the fabrication outright, so all engines draw
   the same Regular outlines. The stroke then adds weight back by a fixed,
   identical amount everywhere -- unlike synthesis, it is a number we control.

   Tune --jp-weight if it reads too light or too heavy; 0 gives plain Regular.
   The real fix is to ship an actual weight, see the note below, at which
   point set font-weight: 500 here and drop the stroke. */
.charglyph-jp
{
    --jp-weight: 0.022em;
    font-family: 'Kiwi Maru','Zen Kaku Gothic New',serif;
    font-weight: normal;
    font-synthesis: none;
    -webkit-text-stroke: var(--jp-weight) currentColor;
}
/* Shipping a real weight removes the need for the stroke entirely. Kiwi Maru
   has 300/400/500 (no 700); Zen Kaku Gothic New has 300/400/500/700/900.
   Fetch the Medium face, subset it the same way as the Regular, drop it in
   res/, then uncomment this and set font-weight: 500 above.

@font-face
{
    font-family: 'Kiwi Maru';
    src: url('/res/KiwiMaru-Medium.woff2') format('woff2'),
         url('/res/KiwiMaru-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
*/
.charsreading
{
    margin: 3px 0px;
    text-align: center;
}
.charsanswers
{
    border-collapse: separate;
    border-spacing: 1px;
    empty-cells: show;
    margin: 0px auto;
}
.charsanswer input,.charsnoidea input
{
    font-family: monospace;
    font-weight: bold;
    min-width: 4em;
    padding-left: 6px;
    padding-right: 6px;
}
.charsnoidea
{
    text-align: center;
    padding-top: 6px;
}
.charsnoidea input
{
    min-width: 12em;
}
.charsrow
{
    word-wrap: break-word;
    background-color: #ffffff;
    border: #000000 solid 1px;
    padding: 5px;
    font-size: 1.5em;
    line-height: 1.6em;
}
.charsrow-jp
{
    font-family: 'Zen Kaku Gothic New','Kiwi Maru',sans-serif;
    font-synthesis: none;
}
/* --- flag codes ---------------------------------------------------------- */
.flagfilter
{
    margin: 6px 0px;
}
.flagfilteron
{
    text-decoration: underline;
}
.flags .clocktd
{
    font-family: monospace;
    padding: 1px 6px;
    white-space: nowrap;
}
/* --- password leak lookup ------------------------------------------------ */
.passform
{
    margin: 6px 0px;
}
.passdigests table
{
    border: #000000 solid 1px;
    border-collapse: collapse;
    empty-cells: show;
    padding: 2px;
}
.passdigests td
{
    border: #000000 solid 1px;
    font-family: sans-serif;
    padding: 1px 6px;
}
.passdigests code
{
    font-family: monospace;
    word-wrap: break-word;
}
/* --- japanese vocabulary trainer ----------------------------------------- */
/* The reading and the answer buttons start blacked out and reveal on hover,
   so a word can be studied before its answer is visible. The checkbox is an
   off-screen toggle that reveals everything at once; it carries no state and
   needs no script. */
.japanglyph
{
    height: 190px;
    min-width: 150px;
    width: auto;
    padding: 6px 12px;
}
/* --- word orientation ---------------------------------------------------- */
/* Short words are set top to bottom, the way Japanese often is. Longer ones
   would need a second column to fit, which reads down-then-back-up-and-across
   and is worse than plain horizontal, so they switch. nowrap on both means a
   word can never break into a second line or column. The handler picks the
   class from the character count. */
.charword-vert
{
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    font-size: 3.4em;
    line-height: 1.05em;
}
.charword-horiz
{
    display: inline-block;
    writing-mode: horizontal-tb;
    white-space: nowrap;
    font-size: 2.6em;
    line-height: 1.1em;
}
.charword-xl
{
    font-size: 5em;
}
.charword-sm
{
    font-size: 1.7em;
}
.reading
{
    /* position and z-index are load-bearing: the glyph below is set at
       several em with a tight line-height, so its line box overlaps upward
       into the reading. Without an explicit stacking order the glyph wins and
       swallows the pointer, leaving only the blank strip above the text
       hoverable. */
    position: relative;
    z-index: 2;
    display: inline-block;
    font-family: 'Zen Kaku Gothic New','Kiwi Maru',monospace;
    font-synthesis: none;
    font-size: 1em;
    background: #000000;
    color: transparent;
    cursor: help;
    user-select: none;
    padding: 0px 16px;
}
/* The transition lives on the revealed state, never on the hidden one.
   With it on the base rule, any restyle that resolves from unstyled to
   hidden ANIMATES THE MASK IN -- 0.25s of delay plus 0.2s of fade, during
   which the text is plainly readable. A spoiler that fades in is not a
   spoiler. Declared here instead, the mask is always applied instantly and
   only the reveal animates; un-hovering snaps back at once, which is the
   right behaviour for hiding something anyway. */
.reading:hover,.reading:focus
{
    background: #e8e8e8;
    color: #000000;
    transition: background 0.3s ease 0.2s, color 0.2s ease 0.25s;
}
.responses
{
    background-color: #000000;
    color: transparent;
    cursor: help;
}
.responses:hover,.responses:focus
{
    background-color: #cacaca;
    color: #000000;
    transition: background-color 0.3s ease 0.2s, color 0.2s ease 0.25s;
}
.checker
{
    display: none;
}
#expand-toggle:checked ~ * .responses,#expand-toggle:checked ~ * .reading
{
    background-color: #cacaca;
    color: #000000;
    cursor: auto;
    transition: background-color 0.3s ease 0.2s, color 0.2s ease 0.25s;
}
.expand-btn
{
    color: #0000ff;
    text-decoration: underline;
    cursor: pointer;
}
#expand-toggle:checked ~ * .expand-btn
{
    background-color: #000000;
    color: #ffffff;
}
/* --- accounts ------------------------------------------------------------ */
.authtable
{
    border-collapse: collapse;
    margin: 6px 0px;
}
.authtable td
{
    padding: 2px 6px;
}
/* A visible enclosure round each form. Only used where a page carries more
   than one -- the members area -- so the forms read as separate things
   rather than one long column of fields. */
.authbox
{
    border: 1px dotted #000;
}
/* Padding goes on the CELLS, not on the table. .authtable sets
   border-collapse: collapse, and in the collapsing border model a table's
   own padding is ignored (CSS 2.1 17.6.2) -- so "padding" on .authbox would
   have done nothing and left the text flush against the dotted line.
   
   Written as .authtable.authbox so it outranks the .authtable td above by
   specificity rather than by being further down the file. Equal specificity
   would mean this rule wins only while it stays below, which is not
   something the next person editing this file should have to know. */
.authtable.authbox td
{
    padding: 4px 8px;
}
.authlabel
{
    text-align: right;
    white-space: nowrap;
}
.authhead
{
    font-weight: bold;
    padding-top: 9px;
}
.authhint
{
    font-size: 0.85em;
    color: #555555;
}
.authsubmit
{
    padding-top: 6px;
}
.authform
{
    display: inline-block;
    vertical-align: top;
}
.wip
{
    border: 1px solid #000000;
    padding: 3px;
    background-color: #ffffcc;
    display: table;
}
.authhint a
{
    text-decoration: underline;
}
.menuform
{
    display: inline-block;
    margin: 0px;
}
.erasebtn
{
    color: #cc0000;
    font-weight: bold;
}
/* --- file listing -------------------------------------------------------- */
.filegrid
{
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.fileitem
{
    border: 1px solid #000000;
    background-color: #e6e6e6;
    padding: 5px;
    width: 210px;
    text-align: center;
    /* Positioning context for .filesel, the selection checkbox, which sits
       over the top-left corner of the thumbnail. */
    position: relative;
}
.filethumb
{
    max-width: 200px;
    max-height: 200px;
}
.filelabel
{
    word-wrap: break-word;
    overflow-wrap: anywhere;
    font-size: 0.85em;
    padding: 2px 0px;
}
/* <details> keeps the info box scriptless: the browser does the toggling. */
.fileinfobox
{
    text-align: center;
    margin: 0px;
}
/* Info, OTL and Delete on one line.
   <details> is ONE item in this row and keeps its own structure: a <summary>
   only acts as the disclosure control when it is a direct child, so it must
   not be wrapped. The panel it opens escapes the row by being positioned
   absolutely, which is what lets it use the full tile width instead of the
   third of it a flex item would get. */
.filebuttons
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px;
}
.filebuttons .authform
{
    display: inline-block;
    margin: 0px;
}
/* Info is a <summary>, OTL and Delete are <input type="submit">. An input
   does not inherit the document font and a summary does, so left alone the
   two have different line heights and Info stands a couple of pixels taller.
   Matching font, line-height, padding and border makes the three boxes
   identical. */
.filebuttons .submit,
.filebuttons .menuitem
{
    font-family: inherit;
    font-size: 1em;
    line-height: 1.2;
    margin: 0px;
    padding: 2px 8px;
    border: 1px solid #000000;
    box-sizing: border-box;
    white-space: nowrap;
}
.fileinfobox summary::-webkit-details-marker
{
    display: none;
}
/* Closed it is one button wide; open it claims the whole row so the panel
   lands beneath the buttons rather than beside them. */
.fileinfobox[open]
{
    flex-basis: 100%;
}
.fileinfobox summary
{
    /* list-style: none removes the disclosure triangle in Firefox; the
       -webkit rule above does it in Blink and WebKit. Without both, Info
       sits a few pixels lower than OTL and Delete. */
    list-style: none;
    cursor: pointer;
    border: 1px solid #000000;
    background-color: #f0f0f0;
}
.fileinfobox summary:hover
{
    background-color: #e0e0e0;
}
/* In the flow, deliberately. Absolute positioning made the open panel float
   over the tiles below it and cover their buttons; keeping it in the flow
   makes the tile grow instead, so several panels can be open at once and
   nothing is hidden behind anything.
   flex-basis: 100% puts it on its own line under the three buttons rather
   than beside them. */
.fileinfobox .fileinfo
{
    flex-basis: 100%;
    text-align: left;
    margin-top: 3px;
    padding: 3px;
    border: 1px solid #000000;
    background-color: #ccffff;
    font-size: 0.85em;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.filespager,.filescount
{
    margin: 9px 0px;
}
.pageon
{
    border: 1px solid #7f7f7f;
    background-color: #000000;
    color: #ffffff;
    padding: 2px 9px;
}

/* --- delete confirmation ------------------------------------------------- */
/* Thumbnail, info box and buttons are three different widths stacked in one
   column. Auto margins centre each within the container and therefore against
   each other, so the buttons sit under the middle of the info box whatever
   width its longest line takes.

   auto margins only move a block-level box, and .fileinfo and .authform are
   both inline-block elsewhere; display: table shrink-wraps like inline-block
   while still accepting them. Scoped to .delconfirm so the same classes keep
   their existing behaviour on the upload page and in the grid.

   The scope is .delconfirm rather than .delfile because both confirmation
   pages use it: the share/paste one was missing the class entirely and so
   rendered left-aligned with its buttons beside the info box. One class for
   one layout beats two copies that can drift apart. */
.delconfirm .fileitem,
.delconfirm .fileinfo,
.delconfirm .authform
{
    display: table;
    margin-left: auto;
    margin-right: auto;
}
/* The thumbnail card sat flush against the info box below it. */
.delconfirm .fileitem
{
    margin-bottom: 12px;
}
/* The form is its own table box, so the buttons already start a new line;
   this is the gap above them. */
.delconfirm .authform p
{
    margin: 12px 0px 0px 0px;
    text-align: center;
}
/* --- link / paste listing ------------------------------------------------ */
.linkpastelist
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.linkpasteitem
{
    border: 1px solid #000000;
    background-color: #e6e6e6;
    padding: 6px 9px;
}
.linkpastelink
{
    font-family: monospace;
    font-weight: bold;
}
.linkpastebadge
{
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.8em;
    border: 1px solid #7f7f7f;
    padding: 0px 4px;
    margin-left: 4px;
}
.linkpastesummary
{
    word-wrap: break-word;
    overflow-wrap: anywhere;
    margin: 2px 0px;
}
.linkpastemeta
{
    font-size: 0.85em;
    color: #555555;
    margin-bottom: 3px;
}

/* --- members: account actions -------------------------------------------- */
/* Logout and Cancel account belong below the password table, not beside it.
   The forms are inline-block so they sit side by side with each other, but
   the wrapper is a block, which puts the pair on its own line. */
.accountactions
{
    margin-top: 18px;
}
/* --- registration captcha ------------------------------------------------ */
.captchaimg
{
    border: 1px solid #000000;
    background-color: #ffffff;
    vertical-align: middle;
    margin-bottom: 3px;
}
/* --- clipboard paste (progressive enhancement) --------------------------- */
/* The hint carries the `hidden` attribute in the markup and is only revealed
   by res/paste.js once it has confirmed the browser can do it. Without
   JavaScript it stays hidden and the page is unchanged. */
.pastehint
{
    font-size: 0.85em;
    color: #555555;
}
.pasteok
{
    color: #009900;
}
.pasteerr
{
    color: #cc0000;
}
/* Drag feedback. The class is added by res/paste.js only while a drag that
   actually carries files is over the form, so without JavaScript it never
   appears and the zone is an ordinary div. */
.upload.dragover
{
    outline: 2px dashed #009900;
    outline-offset: 4px;
    background-color: #f0fff0;
}
.otllink
{
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* Clear button beside a filled file input. Added by res/paste.js only, and
   hidden until the input actually holds a file -- so without JavaScript, or
   with an empty slot, nothing appears. */
.clearfile
{
    border: 1px solid #000000;
    background-color: #f0f0f0;
    color: #cc0000;
    font-weight: bold;
    cursor: pointer;
    margin-left: 3px;
    padding: 0px 6px;
}
.clearfile:hover
{
    background-color: #e0e0e0;
}
.modowner
{
    font-size: 0.8em;
    color: #555555;
    padding-bottom: 2px;
}
.report textarea
{
    font-family: inherit;
    width: 100%;
    max-width: 32em;
}
/* --- moderation report queue --------------------------------------------- */
.reportlist
{
    margin: 9px 0px;
}
.reportitem
{
    border: 1px solid #000000;
    background-color: #e6e6e6;
    padding: 6px;
    margin-bottom: 9px;
}
/* A handled report stays readable but recedes, so the open ones stand out. */
.reporthandled
{
    background-color: #f4f4f4;
    color: #666666;
}
.reportwhy
{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 3px;
    margin: 3px 0px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* The moderation pages all link to each other; the members page links in.
   One line, wrapping rather than overflowing on a narrow window. */
.modnav
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin: 9px 0px;
}
/* --- API documentation ---------------------------------------------------- */
.apiex
{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 6px;
    margin: 3px 0px 9px 0px;
    overflow-x: auto;
    white-space: pre;
}
.apitable
{
    border-collapse: collapse;
    margin-bottom: 9px;
}
.apitable th,
.apitable td
{
    border: 1px solid #cccccc;
    padding: 2px 6px;
    text-align: left;
    vertical-align: top;
}
.apitable th
{
    background-color: #e6e6e6;
}
/* The API key, shown once after generation and never again. */
.apikeyshown
{
    background-color: #ffffcc;
    border: 1px solid #000000;
    padding: 6px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* The report an RSS link pointed at. The fragment scrolls to it; this is
   what makes it visible once you are there. */
.reportpicked
{
    outline: 2px solid #cc0000;
    outline-offset: 2px;
}
/* --- galleries and bulk selection ----------------------------------------- */
/* The action bar sits between the count line and the grid. */
.bulkbar
{
    margin: 6px 0px 9px 0px;
    padding: 6px;
    border: 1px dotted #000000;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
/* Top-left of the tile, over the thumbnail. The tile is the positioning
   context: position: relative is set on the original .fileitem rule above,
   not repeated here -- a second .fileitem block would be a duplicate
   selector, which is the fault t_style.pl exists to catch. */
.filesel
{
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    width: 18px;
    height: 18px;
    margin: 0px;
}
/* A gallery tile is the same size as a file tile so the grid stays regular,
   but carries a name and a count instead of a thumbnail. */
/* .filegrid is a flex row, so align-items defaults to stretch and every tile
   is as tall as the tallest -- a file tile with a thumbnail. The gallery tile
   is therefore much taller than its content.
   
   Made a column flex container itself so the name/count block can take the
   slack and the button row still sits inside, at the bottom, where it does on
   a file tile. */
.galleryitem
{
    background-color: #f0f0f0;
    border: 1px solid #000000;
    display: flex;
    flex-direction: column;
}
/* flex: 1 rather than height: 100%. A percentage height against a stretched
   flex item resolved to the full tile, so the link covered the whole box and
   pushed the buttons out below it -- underneath the next row of tiles. */
.gallerylink
{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 6px;
    text-align: center;
}
/* Sits at the bottom of the tile, inside it, like the file tile's row. */
.galleryitem .filebuttons
{
    margin-top: auto;
}
.galleryname
{
    font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.gallerycount
{
    font-size: 0.85em;
}
/* The note beside the gallery field. Muted so it reads as guidance rather
   than as another control in the bar. */
.bulkhint
{
    font-size: 0.85em;
    color: #444444;
}
/* Publishing state and link, shown inside a gallery the owner is viewing. */
.gallerypub
{
    margin: 6px 0px 9px 0px;
    padding: 6px;
    border: 1px dotted #000000;
}
.gallerylinkbox
{
    word-wrap: break-word;
    overflow-wrap: anywhere;
}