:root{
--text: rgba(255,255,255,.92);
--surface-1: #1e2128;
--surface-2: #2a2e36;
--border: rgba(255,255,255,.15);
--radius-sm: 4px;
--shadow-sm: 0 2px 6px rgba(0,0,0,.35);
--accent: lawngreen;
--accent-2: #66ff66;
--bg: #14161a;
}

/* html deliberately carries NO background of its own.
 *
 * It used to be background-color: #000, and that is the whole of the "Cattitude
 * is suddenly dark after a reload" report. A background on body is propagated to
 * the canvas and paints the entire viewport however short the page is, but ONLY
 * while html has no background of its own. Give html one and the propagation
 * stops: body's colour and its texture then paint as an ordinary element
 * background, no further than the body box reaches, and every pixel outside it
 * shows html's black instead.
 *
 * Which is why it came and went. On a reload the grid is still being extracted
 * from the cache, body is short, and the black takes the viewport; once the rows
 * are in, body fills it again and the texture comes back. Measured on the
 * darkened page: no full-viewport layer of any kind, body carrying
 * doraemon.jpg over #14161a, and html reading rgb(0, 0, 0).
 *
 * Leaving it off is also what the two earlier attempts at this were reaching
 * for. Both removed a pseudo element that was painting a film, and the film was
 * real, but this is the mechanism underneath it: the paint-order flip they
 * describe is this propagation rule seen from the other side. Body's background
 * is the page's background, and it should be the canvas's too.
 */

@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
url('fonts/OpenSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Doraefont';
src: url('fonts/Doraefont.woff2') format('woff2'),
url('fonts/Doraefont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'josefin_sansbold';
src: url('fonts/josefinsansbold-ova7o-webfont.woff2') format('woff2'),
url('fonts/josefinsansbold-ova7o-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

body{
font-family: Open Sans, Nimbus Sans L;
font-size: 0.95em;
color: #000000;
background: var(--bg);
background-color: var(--bg);
background-image: url("images/doraemon.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* There used to be a body::after here that painted the SAME backdrop a second
   time, blurred and scaled up, meant to sit behind a dark film. It never showed,
   and the reason as written here was half of one: at the time html carried a
   background of its own, so body's background was not propagated to the canvas
   but painted as a normal element background, which lands on top of both
   negative-z pseudo elements. The sharp copy below was therefore the one you
   saw, and the blurred copy was an extra full-viewport layer, with a blur filter
   over it, composited for nothing.

   That html background is gone now, for reasons set out where it used to be
   defined, so body's background reaches the canvas again and negative-z pseudo
   elements would paint ON TOP of it rather than under. Which changes nothing
   here, because both of them are gone as well: this note only records why, and
   the removal stands on its own -- a second blurred copy of a backdrop nobody
   can see is worth removing under either paint order. */

/* A body::before used to sit here painting rgba(11,13,18,.78) over the whole
   viewport, the dark film the backdrop was meant to be seen through. It never
   did that job reliably. A negative-z pseudo element paints under body's own
   background whenever body paints that background itself, which is the normal
   case, so on a healthy page the film was invisible and contributed nothing --
   the same finding that retired the blurred body::after. But the paint order
   flips when body's background is treated as the canvas background instead,
   and then the film lands ON TOP and dims the entire interface at a stroke.
   It was read as the "Cattitude is suddenly dark after a reload" report, and the
   arithmetic fitted: the backdrop measured 98 on a healthy page and 36-42 on a
   darkened one, against a texture whose own mean is 111, and 111 * 0.22 +
   13 * 0.78 = 34.5, the film exactly. Since it added nothing when the page was
   right, it is gone rather than repositioned, and that stands.

   It was not the cause, though. The report came back on 2026-08-22 with this
   film long gone, and the page was measured from the console while it was dark:
   no full-viewport layer of any kind, no filter, no opacity below 1, and both
   pseudo elements reading content: none. What was left was html carrying its own
   black background, which stops body's background reaching the canvas and leaves
   the viewport black wherever a short body does not reach. Two candidates that
   produce the same arithmetic, and only one of them survived being measured
   while the fault was on screen. */

/* Base button look for 2025 */
.button,
.menubutton,
.bigbutton,
.extendbutton,
.smallbutton,
.smallmenubutton,
.uploadbutton,
.translatebutton,
.filterbutton{
appearance: none;
border: 1px solid var(--border);
background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
color: var(--text);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
text-shadow: none;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Sizes: stop using xx-small; use consistent rem sizing */
.smallbutton, .smallmenubutton, .uploadbutton{
font-size: 12px;
padding: 6px 10px;
}
.menubutton, .bigbutton, .extendbutton{
font-size: 14px;
padding: 8px 12px;
}

.button:hover,
.menubutton:hover,
.bigbutton:hover,
.extendbutton:hover,
.smallbutton:hover,
.smallmenubutton:hover,
.uploadbutton:hover,
.translatebutton:hover{
border-color: color-mix(in oklab, var(--accent), var(--border) 55%);
box-shadow: 0 10px 26px rgba(0,0,0,.45);
transform: translateY(-1px);
}

.button:active,
.menubutton:active,
.bigbutton:active,
.extendbutton:active{
transform: translateY(0px);
}

.button:focus-visible,
.menubutton:focus-visible,
.bigbutton:focus-visible,
.extendbutton:focus-visible,
.smallbutton:focus-visible,
.uploadbutton:focus-visible{
outline: 2px solid color-mix(in oklab, var(--accent-2), white 20%);
outline-offset: 3px;
}

/* Drag-and-drop upload zone */
.dropzone{
display: inline-block;
vertical-align: middle;
border: 2px dashed var(--border);
border-radius: var(--radius-sm);
padding: 24px 32px;
text-align: center;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
margin-right: 12px;
min-width: 280px;
}
.dropzone:hover{
border-color: var(--accent);
}
.dropzone.dragover{
border-color: var(--accent);
background: color-mix(in oklab, var(--accent), transparent 90%);
}
.dropzone-text{
color: var(--text-muted, #999);
font-size: 13px;
pointer-events: none;
}
.dropzone-filelist{
margin-top: 8px;
font-size: 12px;
color: var(--text);
pointer-events: none;
}
.dropzone-filelist span{
display: block;
padding: 2px 0;
}

/* Guest Access translator chips: visible cell-style border so adjacent
   translators don't blur into one another. The default --border /
   --surface-1 combo blended into the panel; bump to a stronger border
   and the lighter --surface-2 so each chip reads as its own cell. */
.guestTranslatorChip{
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid rgba(255,255,255,.45);
background: var(--surface-2);
border-radius: var(--radius-sm);
padding: 3px 7px;
margin: 3px 5px 3px 0;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Granted is not assigned. On a spreadsheet the chip says which of the two a
   guest is: green once their name has been dragged onto a column, red while
   they only hold a key to the project. Other formats have no columns, get no
   class, and keep the neutral chip above. */
.guestTranslatorChip.guestAssigned{
border-color: rgba(120,220,150,.85);
background: rgba(60,160,90,.22);
}
.guestTranslatorChip.guestAssigned .guestName{
color: #8fe3ab;
}
.guestTranslatorChip.guestUnassigned{
border-color: rgba(240,150,150,.85);
background: rgba(190,60,60,.22);
}
.guestTranslatorChip.guestUnassigned .guestName{
color: #f3a3a3;
}

table tr td {
font-family: Open Sans, Nimbus Sans L;
}

hr {
background-color: #f2f2f2;
border-color: #f2f2f2;
border-style: solid;
border-width: 1px;
}

.doraemonblue {
font-family: 'Doraefont';
font-size: xx-large;
font-weight: bold;
color: dodgerblue;
}

.doraemonwhite {
font-family: 'Doraefont';
font-size: xx-large;
font-weight: bold;
color: white;
}

.doraemonyellow {
font-family: 'Doraefont';
font-size: x-large;
font-weight: bold;
color: yellow;
vertical-align: 2px;
}

.cattitudeblue {
font-family: 'josefin_sansbold';
font-size: xx-large;
font-weight: bold;
color: dodgerblue;
}

.cattitudewhite {
font-family: 'josefin_sansbold';
font-size: xx-large;
font-weight: bold;
color: white;
}

.cattitudeyellow {
font-family: 'josefin_sansbold';
font-size: xx-large;
font-weight: bold;
color: yellow;
}

.local {
font-size: small;
color: white;
}

.hidden {
overflow: hidden;
}

/* A one-letter checkbox label and the box it names, kept on the same line.
   A non-breaking space between them is NOT enough: the line-break opportunity
   sits on the boundary of the input element itself, not on the space, so the
   browser is free to leave the letter at the end of one line and its box at the
   start of the next -- a stray capital and an unlabelled checkbox. Measured on
   the terminology pane's I/U/CI/F/H/HA run: with non-breaking spaces alone it
   split at 59 of the widths between 200px and 20px, starting at 184px; wrapped
   like this it splits at none of them. The separator BETWEEN two such groups is
   deliberately an ordinary space, so a narrow pane can still wrap where it does
   no harm. Making every separator non-breaking is what removed the last legal
   break point and pushed the browser into breaking somewhere worse. */
.cbgroup {
white-space: nowrap;
}

.computer {
clear: both;
color: lightgrey;
font-weight: bold;
font-size: small;
font-family: "Courier New";
background: rgb(215,215,215);
background: linear-gradient(90deg, rgba(215,215,215,0.3) 0%, rgba(122,122,122,0.3) 35%, rgba(94,94,94,0.3) 100%);
padding: 5px;
margin: 0px 0px 20px 0px;

-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;

-webkit-box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.75);
}

/* Import screens: status chips and warning panels.
   The import pages print their status straight onto whatever wallpaper the user
   has behind them, and most skins use a pale grey one. Bare coloured text loses
   against that: a green tick, a red error and a grey hint all read as smudges,
   and an unstyled warning inherits the body colour, which on a dark skin means
   black on grey. So a status carries its own dark chip and a warning gets a panel
   with an accent rule down the side, the same look the re-import warning uses.
   Shared by the memory import and the terminology import. */
.impstatus {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
background: rgba(0,0,0,.72);
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.86);
font-weight: 600;
line-height: 1.5;
}

/* An empty chip would show up as a stray black pill, so hide it until it says something. */
.impstatus:empty {
display: none;
}

.impstatus.impok {
color: #4ade80;
border-color: rgba(74,222,128,.45);
}

.impstatus.impbad {
color: #ff9a9a;
border-color: rgba(255,154,154,.45);
}

.impnotice {
display: inline-block;
max-width: 900px;
padding: 10px 14px;
background: rgba(0,0,0,.72);
border: 1px solid rgba(255,255,255,.14);
border-left: 3px solid #ff6b6b;
border-radius: 6px;
color: rgba(255,255,255,.92);
font-weight: 600;
line-height: 1.55;
}

/* Nothing is broken here, the file simply held nothing usable: amber, not red. */
.impnotice.impinfo {
border-left-color: #ffd166;
font-weight: 400;
}

.words {
font-size: xx-small;
}

.addterms input[type="submit"], input[type="button"] {
font-size: xx-small;
}

.ignore {
zoom: 1.2;
position: relative;
bottom: 3px;
}

.messageok {
font-weight: bold;
color: green;
}

.messageerror {
font-weight: bold;
color: #ffffff;
font-size: 20px;
}

.messageerrorred {
font-weight: bold;
color: red;
font-size: 20px;
background-color: black;
padding: 5px;
margin: auto;
text-align: center;
width: 100%;
}

.error {
font-weight: bold;
color: red;
font-size: 20px;
}

.errorsmall {
font-weight: bold;
color: red;
}

.danger {
font-weight: bold;
color: red;
overflow-wrap: anywhere;
font-size: 0.95em;
}

.exa {
font-weight: bold;
color: #ffffff;
}


.mmt {
font-weight: bold;
color: #7cfc00;
}

.mem {
font-weight: bold;
/* color: dodgerblue; */
color: #ffffff;
}

.fuz {
font-weight: bold;
#ffffff;
}

.ful {
font-weight: bold;
color: #ff69b4;
}

.xtr {
font-weight: bold;
color: #ffffff;
}

.gpt {
font-weight: bold;
color: dodgerblue;
}

.searching {
font-weight: bold;
color: red;
}

.saved {
font-weight: bold;
color: orange;
}

.orig {
font-weight: bold;
color: #2c2c30;
}

.ok {
font-weight: bold;
color: #7cfc00;
}

.highlight {
font-weight: bold;
color: #7cfc00;
}

.highlightblue {
font-weight: bold;
color: dodgerblue;
}

.highlightpink {
font-weight: bold;
color: deeppink;
}

.notok {
font-weight: bold;
/* color: red; */
color: white;
}

.tablewrapper {
clear: both;
}

table.termstable tr td {
padding: 5px 16px;
font-family: Open Sans, Nimbus Sans L;
background: #1f1f23;
color: #ffffff;
}

table.termstable td.termpresent {
background: #1f1f23;
color: #ffffff;
font-size: small;
text-overflow: ellipsis;
}

table.termstable td.termnotpresent {
background: orangered;
color: white;
font-size: small;
text-overflow: ellipsis;
}

/* Term synced in from another language pair that has no target here yet.
   Deliberately not orangered: this is an open task, not a translation error. */
table.termstable td.termundefined {
background: darkgoldenrod;
color: white;
font-size: small;
text-overflow: ellipsis;
}

table.termstable td.termundefinedpinyin {
background: darkgoldenrod;
color: white;
font-size: small;
text-overflow: ellipsis;
}

/* FORBIDDEN TERMINOLOGY (F = 1): a wording the platform holder rejects.
   Nintendo publishes these as prohibited terms, Sony as deprecated ones, and a
   build is turned down over exactly these words.

   Deliberately PURPLE and not another red. Orangered already means "the target
   term is missing here", darkred "missing in another language", darkgoldenrod
   "nobody has filled this in yet" and darkgreen "ignored" -- four states that all
   say something about OUR work being incomplete. This one says something else
   entirely: the wording itself is banned by a third party, and no amount of our
   work makes it acceptable. Purple is the one hue in this window that carries no
   meaning yet, so it cannot be misread as a stronger shade of "missing".

   The whole row is coloured rather than the target cell alone, because on this
   line nothing is a suggestion, and the target wording is struck through so the
   message survives even for a reader who cannot separate the colours. A ⛔ glyph
   was tried here and dropped: it renders at a different size on every platform,
   collides with the row number, and says nothing the strikethrough does not. */
table.termstable tr.termforbidden td {
background: #6a1b9a;
color: white;
font-size: small;
text-overflow: ellipsis;
}

table.termstable tr.termforbidden td div[id^="termtarget"] {
text-decoration: line-through;
text-decoration-thickness: 2px;
}


table.termstable td.termothernotpresent {
background: darkred;
color: white;
font-size: small;
text-overflow: ellipsis;
}

table.termstable td.termignored {
background: #006400;
font-size: small;
}

table.termstable td.termnotpresentpinyin {
background: orangered;
color: white;
font-size: small;
text-overflow: ellipsis;
}

table.termstable td.termothernotpresentpinyin {
background: darkred;
color: white;
font-size: small;
text-overflow: ellipsis;
}

table.termstable td.termignoredpinyin {
background: darkgreen;
font-size: small;
text-overflow: ellipsis;
}

table.termstable td.small {
font-size: x-small;
}

table.slick {
font-family: Open Sans, Nimbus Sans L;
border-collapse: collapse;
width: 100%;
text-align: left;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}

table.slick th {
background-color: rgb(51, 51, 51);
color: white;
}

table.slick th, table.slick td {
border: 1px solid black;
padding: 5px;
}

table.slick td {
color: black;
background-color: whitesmoke;
padding: 10px 5px 5px 5px;
}

table.slick td.ruby {
padding: 15px 5px 5px 5px;
}

.helpme {
border-style: solid;
border-color: white;
border-width: 1px;
display: none;
}

table.helptable {
width: 100%;
}

table.helptable tr td {
background: #333333;
color: #ffffff;
border: 0px;
font-size: small;
font-family: Open Sans, Nimbus Sans L;
padding: 5px;
}

table.concordancetable {
table-layout: fixed;
width: 100%;
}

table.concordancetable tr td {
background: #333333;
color: #ffffff;
font-size: small;
font-family: Open Sans, Nimbus Sans L;
border-spacing: 0px;
padding: 5px;

white-space: normal;        /* allow wrapping */
word-break: break-word;     /* safe fallback */
overflow-wrap: anywhere;    /* modern standard */
}

table.concordancetable td.break {
word-break: break-all;
font-size: xx-small;
}

table.maintable tr td {
background: #333;
color: white;
font-family: Open Sans, Nimbus Sans L;
border-style: none;
}

table.submenutable tr td {
background: #555;
color: #ffffff;
font-size: small;
padding: 5px;
}

table.submenutable input[type=text]:read-only {
background-color: deepskyblue;
}

table.prediction tr td {
background: #333;
color: white;
font-family: Open Sans, Nimbus Sans L;
border-style: none;
font-size: small;
}

table.help tr td {
background: #333;
color: #7cfc00;
font-family: Open Sans, Nimbus Sans L;
border-style: none;
font-size: small;
}

#project {
background-color: #2c2c30 !important;
color: white;
padding: 5px 5px 5px 5px;
opacity: 0.9;
clear: both;
}

#header {
font-family: 'Open Sans', 'Nimbus Sans L', sans-serif;
padding: 5px 16px;
background: #333;
color: #ffffff;
display: flex;
justify-content: flex-end;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid var(--border);
backdrop-filter: blur(10px);
}

table.projecttable
{
background-color: #2c2c30 !important;
width: 100%;
font-size: 0.95em;
table-layout: fixed;
}

table.projecttable td
{
font-family: Open Sans, Nimbus Sans L;
border: none !important;
padding: 5px;
padding-right: 10px;
padding-left: 10px;
color: #999999;
}

table.projecttable td.computer {
font-weight: bold;
font-size: small;
font-family: "Courier New";
}

.wrapeng {
width: 100%;
padding: 2px 5px 2px 5px;
border-width: 1;
color: black;
background-color: #ffffff;
font-size: 16px;
}

.wrapjap {
width: 100%;
padding: 2px 5px 2px 5px;
border-width: 1;
background-color: white;
color: black;
font-size: 16px;
}

.wrapjappartiallyedited {
width: 100%;
padding: 2px 5px 2px 5px;
border-width: 1;
background-color: orange;
color: black;
font-size: 16px;
}

.wrapjapproofread1 {
width: 100%;
padding: 2px 5px 2px 5px;
border-width: 1;
background-color: darkolivegreen;
color: black;
font-size: 16px;
}

.wrapjapproofread2 {
width: 100%;
padding: 2px 5px 2px 5px;
border-width: 1;
background-color: lightgreen;
color: black;
font-size: 16px;
}

.wrapjapnotstarted {
width: 100%;
padding: 2px 5px 2px 5px;
border-width: 1;
background-color: white;
color: black;
display: none;
font-size: 16px;
}

.wrapjaprejected {
width: 100%;
padding: 2px 5px 2px 5px;
border-width: 1;
background-color: darkred;
color: black;
font-size: 16px;
}

table.projecttable td.border {
border-bottom: 5px solid white;
}

tr.rowe_1 td
{
background-color: #232327;
}

tr.rowe_2 td {
background-color: #1f1f23;
}

td.col_id
{
text-align: center;
font-weight: bold;
/* color: #646 !important; */
}

table.projecttable tr.header,
table.projecttable tr.header td,
td.button
{
background-color: #3b3b40 !important;
font-weight: bold;
color: #B2B2C7 !important;
}

td.smalltext
{
font-size: small;
line-height: 2px;
}

td.autosourceterm
{
font-size: small;
}

td.pinyin
{
font-size: large;
line-height: 2px;
}

td.white {
color: white;
}

/* Style the header */
/* Add this to disable resize */
/* min-height: 350; */
/* max-height: 350; */

.header {
padding: 10px 16px;
background: #333333;
color: #ffffff;
text-overflow: ellipsis;
overflow:scroll;
height: 350px;
resize: vertical;
font-family: Open Sans, Nimbus Sans L;
}

.matches {
background: #dddddd;
color: #000000;
font-size: 0.95em;
padding: 5px;
margin: 2px;
}

.concordance {
color: #000000;
font-size: 0.95em;
margin: 1px;
width: 100%;
}

.bigbutton {
background-color: #3498DB;
color: white;
padding: 8px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-size: 16px;
border: none;
cursor: pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
text-decoration: none;
line-height: 16px;
float: left;
border-radius: 8px;
vertical-align: middle;
}

#dirinfo {
padding: 0px 5px;
font-size: small;
float: right;
}

. {
padding: 5px 5px;
font-size: small;
float: left;
}

.submenu {
    padding: 6px 16px;
    font-size: small;
    clear: both;
    background: var(--surface-1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.submenu:empty {
    display: none;
}

.submenu-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.submenu select {
    height: 22px;
    max-width: 120px;
}

.submenu label {
    white-space: nowrap;
}

.submenu input[type="text"] {
    padding: 2px 4px;
}

.ownershipmenu {
padding: 3px 5px 3px 5px;
margin-right: 5px;
margin-top: 5px;
font-size: small;
float: left;
border: 1px;
border-style: solid;
border-color: white;
min-height: 25px;
overflow: visible;
}

#grantAccessSelect {
    background: var(--surface-1);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 2px 4px;
    font-size: small;
    border-radius: 3px;
    cursor: pointer;
}

#grantAccessSelect option {
    background: #2a2e36;
    color: #fff;
}

/* Language pair dropdown in button bar */
.langselect {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 28px 8px 12px;
    font-size: 16px;
    cursor: pointer;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
    line-height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.langselect:hover {
    border-color: color-mix(in oklab, var(--accent), var(--border) 55%);
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.langselect:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent-2), white 20%);
    outline-offset: 3px;
}
.langselect option {
    background: #2a2e36;
    color: #fff;
}

/* Toolbar row (flexbox replacement for table.performance) */
.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: #1f1f23;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}
.toolbar-row .smallbutton,
.toolbar-row button,
.toolbar-row select,
.toolbar-row input[type="button"] {
    flex-shrink: 0;
    font-size: small;
}
.toolbar-row select {
    height: 30px;
    padding: 2px 4px;
}
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.toolbar-spacer {
    flex: 1 1 0;
    min-width: 4px;
}
/* Stats bar — consoleinfo style */
.stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(34,211,238,.25);
    color: rgba(34,211,238,.95);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: small;
    font-family: Open Sans, Nimbus Sans L;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    margin-top: 2px;
    margin-bottom: 4px;
}
.stats-metrics {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    opacity: .65;
}
.stats-bar #wordcount {
    flex: 1 1 auto;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 12px;
}
/* Says out loud how many rows Hide Locked Segments is keeping off screen. Amber
   rather than the bar's cyan: this one is a notice, not a metric, and it is
   clickable (it toggles the preference). */
.stats-bar .stats-locked {
    flex-shrink: 0;
    margin-left: 12px;
    color: #f0b429;
    cursor: pointer;
}
.stats-bar .stats-locked:hover {
    text-decoration: underline;
}

/* The same notice, sat directly above the first segment. The stats-bar version
   is a footnote among metrics; this one has to be readable at the moment the
   grid looks broken, so it is a full sentence in its own box. Amber throughout:
   an emptied page is louder than a few hidden rows, but it is still a filter
   doing its job, not an error, and the red this used to go turned muddy against
   a grey skin while promising a problem the sentence then denies. The empty
   case gets weight, a brighter amber and a full outline instead of a new hue. */
.lockedhidden-banner {
    margin: 6px 0;
    padding: 7px 12px;
    border-left: 4px solid #f0b429;
    background: rgba(240, 180, 41, 0.10);
    color: #f0b429;
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}
.lockedhidden-banner:hover {
    background: rgba(240, 180, 41, 0.18);
}
.lockedhidden-banner-empty {
    border: 1px solid rgba(240, 180, 41, 0.45);
    border-left: 4px solid #ffc94d;
    background: rgba(240, 180, 41, 0.16);
    color: #ffd166;
    font-weight: bold;
}
.lockedhidden-banner-empty:hover {
    background: rgba(240, 180, 41, 0.24);
}

/* Terms/Filter container: shared grid so inputs align across rows */
.terms-filter-container {
    display: grid;
    grid-template-columns: 1fr auto auto;
    width: 100%;
}
.terms-filter-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    background: #1f1f23;
    color: #ffffff;
    box-sizing: border-box;
}
.terms-filter-row input[type="text"] {
    min-width: 80px;
    padding: 4px 6px;
}
.terms-filter-inputs {
    display: flex;
    gap: 8px;
}
.terms-filter-inputs input[type="text"] {
    flex: 1 1 0;
    min-width: 0;
}
.terms-filter-row .controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.terms-filter-row .status {
    flex-shrink: 0;
    min-width: 60px;
}

/* Page content */
.content {
padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 102px;
}

del {
text-decoration: line-through;
font-size: small;
}

ins {
font-size: small;
}

h1 {
line-height: 50%;
}

.link {
float: right;
text-decoration: underline;
cursor: pointer;
}

.small {
font-size: small;
}

.blue {
color: dodgerblue;
font-weight: bolder;
border: 1px;
border-style: solid;
}

.used {
color: dimgrey;
font-weight: normal;
text-decoration: line-through double;
border: 1px;
border-style: solid;
}

.red {
color: red;
font-weight: bolder;
border: 1px;
border-style: solid;
}

.box {
border: 1px;
border-style: solid;
}

.boxgreen {
border: 1px;
border-style: solid;
border-color: color: #7cfc00;
padding: 0px 2px 0px 2px;
}

.sourcehighlight {
/*
max-height: 100px;
max-width: 750px;
overflow: scroll;
*/
}

.corrected {
/*
max-height: 100px;
max-width: 750px;
overflow: scroll;
*/
}

/* Holds the localhost-only "Maak natuurlijk" button under a segment. The button is
kept quiet: it sits under every unlocked row, so it must not fight the translation
for attention until it is hovered. The span beside it shows the wording the rewrite
overwrote and is clickable to restore it, so it stays fully legible. */
.natural {
padding: 2px 0px 4px 0px;
}

.natural button {
opacity: 0.55;
}

.natural button:hover {
opacity: 1;
}

.naturalwas {
color: #999999;
font-size: small;
padding-left: 6px;
cursor: pointer;
}

#translation {
overflow: scroll;
}

.analysis {
color: #ffffff;
font-size: small;
text-align: right;
padding: 5px 0px 5px 5px;
}

.log {
background: #000;
color: #ffffff;
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
float: right;
min-width: 300px;
clear: both;
}

.stateparent
{
display: flex;
width: 100%;
}

.state {
background: #000;
color: lawngreen;
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: white;
border-width: 1px;
float: left;

line-height: 20px;
height: 40px;
overflow: hidden;
}

.statereference {
background: #000;
color: lawngreen;
font-size: small;
text-align: left;
padding: 5px 5px 5px 10px;
border-style: solid;
border-color: white;
border-width: 1px;
width: 100%;

line-height: 20px;
height: 60px;
box-sizing: border-box;
}

.statemain {
background: #000;
color: lawngreen;
font-size: small;
text-align: left;
padding: 5px 5px 5px 10px;
border-style: solid;
border-color: white;
border-width: 1px;
width: 100%;

line-height: 20px;
height: 40px;
overflow: hidden;
box-sizing: border-box;
}

.statesmall {
background: #000;
color: lawngreen;
font-size: small;
text-align: left;
padding: 5px 10px 5px 5px;
border-style: solid;
border-color: white;
border-width: 1px;

line-height: 20px;
height: 30px;
overflow: hidden;
box-sizing: border-box;
}

.statebright {
background: #555555;
color: lawngreen;
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: white;
border-width: 1px;

line-height: 20px;
height: 40px;
overflow: hidden;

transition: background 1s, color 1s;
-webkit-transition: background 1s, color 1s;
}

.statemain.login {
height: auto;
}

.dangererrorbox {
background: #000;
color: lawngreen;
font-size: small;
text-align: right;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: white;
border-width: 1px;
float: left;

line-height: 20px;
height: 40px;
overflow: hidden;
}

.logleft {
background: #000;
color: #ffffff;
s
text-align: left;
padding: 5px 5px 5px 5px;
float: left;
min-width: 300px;
clear: both;
}

.logmain {
background: #000;
color: #ffffff;
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
clear: both;
min-height: 100px;
}

.import {
background: #000;
color: #ffffff;
font-family: Open Sans, Nimbus Sans L;
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
min-width: 300px;
clear: both;
}

table.duplicates tr td {
border: 1px solid;
border-color: black;
color: black;
font-weight: bold;
font-size: small;
font-family: "Courier New";
}

table.termstable td.tablevideo {
background: #000;
text-align: center;
}

body.hide-ref-videos .ref-video {
display: none;
}

table.termstable td.tablelog {
font-family: Open Sans, Nimbus Sans L;
background: #000;
}

.clearboth {
clear: both;
}

.sql {
background: #000;
color: #ffffff;
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
float: left;
min-width: 300px;
clear: both;
}

.sourcesegment {
vertical-align: top;
}

.currentsegment {
vertical-align: top;
}

.targetsegment {
vertical-align: top;
}

textarea {
width: 100%;
margin: 0;
padding: 5px;
border-width: 1;
}

.textarea {
font-size: 16px;
}

.contenteditable {
width: 99%;
padding: 2px 5px 2px 5px;
border-width: 1;
background-color: white;
color: black;
font-size: 16px;
text-align: left;
direction: ltr;
}

.contenteditable_source {
width: 99%;
padding: 2px 5px 2px 5px;
border-width: 1;
color: black;
background-color:  #ffffff;
text-align: left;
direction: ltr;
}

.contenteditable_source::selection {
background-color: #1a5fb4;
color: white;
}

.contenteditable_readonly {
width: 100%;
padding: 2px 5px 2px 5px;
border-width: 1;
background-color: deepskyblue;
color: black;
font-size: 16px;
text-align: left;
direction: ltr;
}

.tagtext {
color: #ffffff;
font-size: small;
display: block;
overflow-wrap: anywhere;
}

.context {
color: #ffffff;
font-size: small;
overflow-wrap: anywhere;
}

.feedback {
color: #808080;
font-size: small;
overflow-wrap: anywhere;
}

.ctxreasoning {
border-left: 3px solid #7cb7ff;
padding: 6px 10px;
margin-top: 4px;
background: rgba(124, 183, 255, 0.06);
line-height: 1.4;
}

.ctxreasoning-label {
color: #7cb7ff;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}

#termtranslations {
background-color: darkslategrey;
color: white;
padding: 5px;
}

#wordtotal {
background-color: lightseagreen;
color: white;
font-weight: bold;
text-align: right;
padding: 5px;
}

.smalltext pre {
white-space: pre-wrap !important; /* wrap long lines, keep existing \n */
overflow-wrap: anywhere;          /* break long tokens when needed */
word-break: break-word;           /* fallback */
margin: 0;                        /* optional: tighten spacing */
max-width: 100%;
}

.verysmalltext {
font-size: 10%;
word-wrap: break-word;
}

.menu {
line-height: 30px;
}

a:link, a:visited{ color: color-mix(in oklab, var(--accent), white 20%); }
a:hover{ color: var(--accent-2); text-decoration: underline; }
a:focus-visible{
outline: 2px solid color-mix(in oklab, var(--accent-2), white 20%);
outline-offset: 3px;
border-radius: 6px;
}

.comparison tr td {
font-size: small;
background: #1f1f23;
color: #ffffff;
}

.tooltip {
display: none;

background-color: #2c2c30;
color: white;
padding: 8px, 0px, 8px, 0px;
font-size: 16px;
border: solid 1px;
border-color: white;
cursor: pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
text-decoration: none;
line-height: 16px;

position: absolute;
z-index: 1;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
text-shadow: none;
}

/* Hovering a tag placeholder in the source shows the markup behind it. */
#tagtooltip {
display: none;
position: fixed;
z-index: 10000;
max-width: 520px;
padding: 6px 8px;
font-family: monospace;
font-size: 12px;
line-height: 15px;
white-space: pre-wrap;
overflow-wrap: anywhere;
background-color: #2c2c30;
color: white;
border: solid 1px white;
pointer-events: none;
}

.bannertext {
text-align: center;
margin: 10px -3px 10px -3px;
font-weight: bold;
text-transform: uppercase;
background-color:#d04040;
color: white;
width: 100%;
padding: 0px 0px 0px 0px;
float: right;
clear: both;
}

table.downloadtable input[type="submit"], input[type="button"] {
font-size: xx-small;
vertical-align: middle;
height: 20px;
}

table.downloadtable tr, td {
color: white;
font-family: "Courier New";
border: 1px solid white;
padding: 5px;
}

table.downloadtable td.reference {
background-color: darkgrey;
}

.zoom {
transition: transform .2s; /* Animation */
width: 150px;
margin: 0 auto;
cursor: zoom-in;
}

.zoom:hover {
transform: scale(3);
position: relative;
z-index: 999;
}

/* Click a screenshot to view it full size (capped to the viewport); click
   anywhere or press Esc to dismiss. No navigating away from the grid. */
.imgLightbox {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 100000;
cursor: zoom-out;
}

.imgLightbox img {
max-width: 95vw;
max-height: 95vh;
box-shadow: 0 0 30px #000;
}

table.furigana tr td {
color: black;
}

table.performance {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: collapse;
border-style: none;
}

table.performance tr td {
background: #333;
color: #ffffff;
font-size: small;
text-align: right;
border: 0px;
padding: 5px;
vertical-align: middle;
}

.jumpsegment {
display: flex;
align-items: center;
padding: 0;
}

#jumpsegment {
width: 100px;
padding: 5px;
margin-right: 5px;
}

#jumpbutton, #limitbutton {
padding: 5px 10px;
}

#specialsymbol {
padding: 5px;
}

#speed {
padding: 5px;
}

#wordcount {
width: 100%;
overflow: hidden; /* Hide any content that exceeds the width */
text-overflow: ellipsis; /* Show ellipsis (...) for truncated text if desired */
display: block; /* Ensure it behaves like a block element */
}

#performancemmt, #performancete, #performance, #mtl, #iterations, #sqliterations, #freememory, #freevram {
margin-right: 5px;
white-space: nowrap;
}

.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}

.consoleinfo {
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
}

.foldercontents {
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
margin: 5px 0px 5px 0px;
}

.consoleinfo, .foldercontents{
background: rgba(0,0,0,.35);
border: 1px solid rgba(34,211,238,.25);
color: rgba(34,211,238,.95);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}

.progress-row {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0;
font-size: small;
}
.progress-label {
flex: 0 0 180px;
width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(34,211,238,.95);
}
.progress-row .progress-delivery {
flex: 0 0 auto;
vertical-align: middle;
}
.progress-row .progress-qa {
flex: 0 0 auto;
vertical-align: middle;
margin-left: -4px;
}
.progress-tooltip .tt-delivery {
vertical-align: middle;
margin-right: 2px;
}
.progress-bar-wrap {
position: relative;
flex: 1 1 auto;
}
.progress-bar {
position: relative;
height: 20px;
min-width: 250px;
background: rgba(0,0,0,.55);
border: 1px solid rgba(34,211,238,.3);
border-radius: 3px;
overflow: hidden;
}
.progress-tooltip {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 100;
background: rgba(0,0,0,.95);
border: 1px solid rgba(34,211,238,.5);
color: rgba(255,255,255,.95);
padding: 8px 12px;
border-radius: 3px;
/* Was x-small, which is fine for a two-word label and not for the four lines
   of arithmetic this now carries. Matches the rest of the panel. */
font-size: small;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,.6);
pointer-events: none;
}
.progress-bar-wrap:hover .progress-tooltip {
display: block;
}
.progress-tooltip .tt-row {
line-height: 1.6;
}
.progress-tooltip .tt-name {
font-weight: bold;
}
.progress-tooltip .tt-t .tt-name {
color: #60a5fa;
}
.progress-tooltip .tt-p .tt-name {
color: #4ade80;
}
.progress-bar .layer {
position: absolute;
left: 0;
right: 0;
display: flex;
pointer-events: auto;
}
.progress-bar .layer.translation {
top: 0;
height: 100%;
}
.progress-bar .layer.proofreading {
top: 0;
height: 50%;
}
.progress-bar .seg {
flex: 1;
position: relative;
border-right: 1px solid rgba(255,255,255,.18);
overflow: hidden;
}
.progress-bar .seg:last-child {
border-right: none;
}
.progress-bar .seg-fill {
height: 100%;
transition: width .3s ease;
}
.progress-bar .layer.translation .seg-fill {
background: #3b82f6;
}
.progress-bar .layer.proofreading .seg-fill {
background: rgba(34,197,94,.9);
}
.progress-bar .bar-figures {
position: absolute;
top: 0;
right: 6px;
height: 100%;
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: bold;
letter-spacing: .2px;
pointer-events: none;
text-shadow: 0 0 3px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.9);
}
.progress-bar .bar-figures .fig-t {
color: #93c5fd;
}
.progress-bar .bar-figures .fig-p {
color: #86efac;
}
.progress-bar .bar-figures .fig-sep {
color: rgba(255,255,255,.45);
font-weight: normal;
}
/* While the live figures are being counted, and after they arrive. A number
   nobody has recalculated yet has no business looking identical to one that
   has just been measured. */
.progress-bar .bar-figures .fig-status {
color: rgba(255,255,255,.6);
font-weight: normal;
font-style: italic;
font-size: 10px;
}
.progress-bar .bar-figures .fig-val[data-live] {
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.progress-tooltip .tt-detail {
margin: 2px 0 8px 18px;
color: rgba(255,255,255,.75);
font-weight: normal;
line-height: 1.6;
}
.progress-question {
margin-top: 8px;
font-size: small;
white-space: pre-wrap;
color: rgba(34,211,238,.85);
}

.tagless {
font-weight: bold;
font-size: medium;
font-family: "Courier New";
}

.reference {
background: #333;
color: white;
font-size: small;
text-align: left;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: white;
border-width: 1px;
width: 100%;
}

#userskin {
clear: both;
font-family: 'Open Sans';
font-size: small;
border: solid 1px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}

.userskin input {
margin: .4rem;
}

.userskinisland {
float: left;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
}

.userskinselect {
clear: both;
display: table;
}

.userskinisland label {
padding-left: 5px;
}

::-webkit-file-upload-button {
border-radius: 6px;
}

input.fieldwhite {
background-color: #fff;
}

input.fieldbright {
background-color: deepskyblue;
}

input[type="date"] {
background-color: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 8px;
font-family: inherit;
font-size: inherit;
cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
cursor: pointer;
}

.tables-wrapper {
display: flex;
flex-wrap: nowrap; /* Disable wrap */
justify-content: space-between; /* Space the tables out */
width: 100%; /* Full width */
}

.settings {
width: 49%; /* Less than 50% to account for any padding or margins */
}

table.settings tr td {
background: #333;
color: white;
font-family: Open Sans, Nimbus Sans L;
border-style: none;
font-size: small;
}

.screenshot {
background-color: lightgrey;
}

/* Modal container */
#feedbackModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
}

/* Modal Content */
#modalContent {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
background-image: url("images/doraemon.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

/* Close Button */
#closeModal {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

#closeModal:hover,
#closeModal:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.processing {
background-color: lightblue;
}

#belowLogoleft {
display: flex;
flex-direction: column;
}

.button,
.menubutton,
.bigbutton,
.extendbutton,
.smallbutton,
.smallmenubutton,
.uploadbutton,
.translatebutton,
.filterbutton,
.syncqabutton{
}

/* Uniform button sizing (single-line) */
.button,
.menubutton,
.bigbutton,
.extendbutton,
.smallbutton,
.smallmenubutton,
.uploadbutton,
.translatebutton,
.filterbutton,
.syncqabutton{
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 36px;          /* set your standard */
padding: 0 12px;           /* horizontal padding only */
line-height: 1;            /* prevents font metrics from inflating height */

white-space: nowrap;       /* prevents wrapping */
overflow: hidden;
text-overflow: ellipsis;   /* trims long labels */
}

/* FINAL button text fix – must be last */
.button,
.menubutton,
.bigbutton,
.extendbutton,
.smallbutton,
.smallmenubutton,
.uploadbutton,
.translatebutton,
.filterbutton,
.syncqabutton{
color: var(--text) !important;
}

.button:hover,
.menubutton:hover,
.bigbutton:hover,
.extendbutton:hover,
.smallbutton:hover,
.smallmenubutton:hover,
.uploadbutton:hover,
.translatebutton:hover{
background:
linear-gradient(180deg,
rgba(255,255,255,.16),
rgba(255,255,255,.08));
}

.bodytext{
color: var(--text);
}

.image_tooltip{
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 28px;
min-width: 28px;
padding: 0 8px;

/* More “button” surface */
background:
linear-gradient(180deg,
rgba(255,255,255,.14),
rgba(255,255,255,.06));
color: var(--text);

/* Stronger, visible outline + inner highlight */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 6px 18px rgba(0,0,0,.35);

font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
cursor: help;

transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.image_tooltip:hover{
background:
linear-gradient(180deg,
rgba(255,255,255,.18),
rgba(255,255,255,.08));
border-color: color-mix(in oklab, var(--accent), rgba(255,255,255,.16) 60%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 10px 26px rgba(0,0,0,.45);
transform: translateY(-1px);
}

.image_tooltip .image_tooltiptext {
visibility: hidden;
width: 400px;
height: 100px;
color: #fff;
text-align: center;
background-color: black;

/* Position the tooltip */
position: absolute;
margin-left: -400px;
margin-top: -50px;
z-index: 1;

text-shadow: none;
}

.image_tooltip:hover .image_tooltiptext {
visibility: visible;
}

/* Neutral anchor: internal navigation only */
a[id^="filestart"],
a[id^="filestart"]:hover,
a[id^="filestart"]:focus,
a[id^="filestart"]:active,
a[id^="filestart"]:visited{
color: inherit;
text-decoration: none;
background: none;
outline: none;
}

/* Anchors used as buttons must never look like links */
a.button,
a.button:hover,
a.button:focus,
a.button:active,
a.button:visited,
a.menubutton,
a.menubutton:hover,
a.menubutton:focus,
a.menubutton:active,
a.menubutton:visited,
a.smallbutton,
a.smallbutton:hover,
a.smallbutton:focus,
a.smallbutton:active,
a.smallbutton:visited{
text-decoration: none;
color: var(--text);
}

#copytochatgpt {
background: rgba(0,0,0,0.55);
color: rgba(255,255,255,0.92);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 10px;
padding: 8px 12px;
cursor: pointer;
}

#copytochatgpt:hover {
background: rgba(0,0,0,0.70);
}

.bestmatch-header{
display: flex;
align-items: center;
gap: 10px;
}

.bestmatch-left{
flex: 1 1 auto;
min-width: 0;                 /* allows ellipsis to work */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* Make To AI match your button system */
#copytochatgpt{
flex: 0 0 auto;
min-height: 28px;
padding: 0 10px;
}

.smallblackbutton{
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 13px;
min-width: 13px;
padding: 0 4px;

background:
linear-gradient(180deg,
rgba(255,255,255,.14),
rgba(255,255,255,.06));
color: var(--text);

border: 1px solid rgba(255,255,255,.16);
border-radius: var(--radius-sm);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 6px 18px rgba(0,0,0,.35);

font-size: 12px;
font-weight: 700;
line-height: 1;
text-decoration: none;
cursor: pointer;

transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.smallblackbutton:hover{
background:
linear-gradient(180deg,
rgba(255,255,255,.18),
rgba(255,255,255,.08));
border-color: color-mix(in oklab, var(--accent), rgba(255,255,255,.16) 60%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 10px 26px rgba(0,0,0,.45);
transform: translateY(-1px);
}

.smallblackbutton,
.smallblackbutton:hover,
.smallblackbutton:visited,
.smallblackbutton:active,
.smallblackbutton:focus{
text-decoration: none;
color: var(--text);
}

/* extendbutton must never look like a link */
.extendbutton,
.extendbutton:hover,
.extendbutton:focus,
.extendbutton:active,
.extendbutton:visited{
text-decoration: none;
color: var(--text);
}
/* ── Confirm markers ────────────────────────────────────────────────────────
   A dimmed tick means the text in the box has changed since it was confirmed
   and has not been confirmed again. The tick is dimmed rather than removed on
   purpose: several places in ajax.js read the presence of the tick image as a
   flag (whether to auto-propagate over the segment, whether to let a match
   overwrite it, whether the export preflight counts it as outstanding), and
   they all want the database fact, which has not changed. What has changed is
   only whether the text on screen is the text that was signed.

   Both ticks dim on a proofread row. Neither signature stands over text that
   has been edited since it was given. */
#translation .confirmstale .confirmtick{
opacity: .55;
filter: grayscale(100%);
}

/* The pending dot lives in the same box and is a different fact entirely
   (questions still open), so it never dims with the ticks. */
#translation .confirmstale .pendingdot{
opacity: 1;
filter: none;
}

/* A red cross means the last attempt to confirm this segment was refused: a QA
   halt, a thouShaltPass no, or a save that never reached the server. It stays
   until a confirm is actually accepted. Hover for the reason. */
#translation .confirmfailed{
color: #d32f2f;
font-size: 15px;
font-weight: bold;
line-height: 16px;
vertical-align: top;
cursor: help;
}