:root {
    /* Navigation tab colors - same in all four CSS files */
    --checklist-theme-colour: var(--red);
    --style-theme-colour: var(--darkest-orange);
    --style-theme-main: var(--orange);
    --link-theme-colour: var(--bright-blue);
    --completion-theme-colour: var(--dark-green);

    /* Checkbox colors - themed per view */
    --checklist-checkbox-colour: var(--red);
    --link-checkbox-colour: var(--bright-blue);
    --style-checkbox-colour: var(--orange);
    --completion-checkbox-colour: var(--dark-green);

    --search-box-width: 16em;

    /* Monospace font for all inputs, tag values etc. System fonts only
       (no web fonts); never Courier. Menlo is last of the named fonts:
       its tilde (~) may sit too high. Keep in step with --ce-mono-font
       in css/checklist-styling.css (checked by test_fonts.py). */
    --mono-font-family: ui-monospace, SFMono-Regular, "SF Mono",
        Consolas, "Liberation Mono", "DejaVu Sans Mono", Menlo,
        monospace;

    /* Structural colors */
    --tag-background-colour: var(--lightest-grey);
    /* Value in name=value. For a box, try e.g. the page's tag colour
       mixed with white, plus --tag-value-padding: 1px 1ex:
       color-mix(in srgb, var(--tag-background-colour) 50%, white) */
    --tag-value-background-colour: transparent;
    --tag-value-padding: 1px 0;
    --tag-value-colour: black;
    --tag-value-font-family: var(--mono-font-family);
    --tag-value-font-size: 0.9em;  /* monospace looks larger than sans */
    --tag-equals-spacing: 0.14em;  /* each side of '='; ~half a space */
    --tag-value-after-spacing: 0.56em;  /* after a value; ~two spaces */

    /* An item's URI, shown under its title (when it has one) */
    --item-uri-colour: color-mix(in srgb, var(--theme-link-colour) 70%, white);
    --item-uri-font-family: var(--mono-font-family);
    --item-uri-font-size: 0.9em;  /* medium, less a bit for monospace */

    /* Message colors */
    --message-success-colour: var(--dark-green);
    --message-error-colour: var(--red);

    /* Layout dimensions - responsive design */
    --main-min-width: 720px;
    --main-max-width: 1000px;
    --sidetags-min-width: 150px;
    --sidetags-max-width: 300px;
    --content-gap: 20px;
    --page-padding: 5px;
}

body {
    margin: 0;
    font-family: helvetica, arial, sans;
    display: flex;
    justify-content: center;
}

.outer-container {
    display: flex;
    gap: var(--content-gap);
    width: 100%;
    max-width: calc(
        var(--main-max-width) + var(--content-gap) +
        var(--sidetags-min-width) + 4 * var(--page-padding)
    );
}

.page-wrapper {
    flex: 1 1 var(--main-min-width);
    min-width: var(--main-min-width);
    max-width: var(--main-max-width);
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}

.content-container {
    margin-top: 2px;
}

/* Token management UI */
.token-messages {
    margin: 0;
}

.token-message-success {
    color: var(--message-success-colour);
    font-weight: bold;
}

.token-message-error {
    color: var(--message-error-colour);
    font-weight: bold;
}

.token-hidden {
    /* Bullets shown by default, always on own line */
    display: block;
}

.token-revealed {
    /* Token text hidden by default, shows as block when revealed */
    display: none;
    font-family: var(--mono-font-family);
    font-size: small;
}

.token-name-edit {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    width: 30ch;  /* Fit ~30 characters: "API Token 2025-10-24T15-30-42" */
    min-width: 30ch;
}

.token-name-edit:focus {
    border: 1px solid var(--lighter-grey);
    outline: none;
    padding: 2px;
}

.checklistname .token-name-edit {
    color: var(--theme-link-colour);
    font-size: large;
}

.token-details {
    color: var(--darker-grey);
    font-size: small;
}

.token-limit-warning {
    color: var(--message-error-colour);
    margin-left: 10px;
}

h1, h2, h3, h4, h5, h6, .admin {
    color: var(--theme-heading-colour);
}

.admin {
    font-weight: bold;
}

h1 {
    font-size: x-large;
}

h2 {
    font-size: medium;
}
.c {
    text-align: center;
}

.Giant {
    font-size : 72pt;
    font-family: Times, Garamond, Baskerville, Serif;
}

.hexalex {
    font-family : Garamond, Times, Serif;
    font-style : italic;
    font-size: large;
    padding: 0 0 12pt 0;
    color: darkgreen;

}

.ajaxTarget, .ajaxNonTarget {
    font-size: small;
}

.ajaxNonTarget a, .ajaxNonTarget a:hover{
    color: var(--lighter-grey);
    text-decoration: none;
}

.ajaxTarget {
    cursor: pointer;
    color: var(--theme-link-colour);
}

.ajaxLinkTarget:hover, a.ajaxLinkTarget:hover {
    cursor: pointer;
    color: var(--theme-link-colour);
    text-decoration: underline;
}

.ajaxNonTarget {
    color: var(--lighter-grey);
}

.ajaxLinkNonTarget:hover, a.ajaxLinkNonTarget:hover {
    color: var(--lighter-grey);
    text-decoration: none;
}

.empty {
    background-color: white;
    border: 1px solid white;
    width: 100px;
    padding-left: 4px;
}

a {
    color: var(--theme-link-colour);
    text-decoration: none;
}

a:visited {
    color: var(--theme-link-visited-colour);
    text-decoration: none;
}

a:hover {
    color: var(--theme-link-hover-colour);
    text-decoration: underline;
}

a:visited:hover {
    color: var(--theme-link-hover-colour);
    text-decoration: underline;
}

.checklistname a {
    font-size: large;
}

.checklistname .disabled {
    font-size: large;
    color: var(--darkish-grey);
}

.date {
    font-size: small;
    padding-right: 1ex;
    white-space: nowrap;
}

table.checklists {
    width: 100%;
}

/* Long unbroken text (URLs in notes, etc.) wraps rather than widening
   the table; 'anywhere' (not 'break-word') so table sizing allows it */
table.checklists td {
    vertical-align: bottom;
    overflow-wrap: anywhere;
}

table.checklists td:first-child {
    white-space: nowrap;
}

/* Item's first and last rows: the date, and the arrow and 'shared'
   (left), line up with the text of the first line of the title, and
   of the actions and tags (right), not with the bottom of the cell */
table.checklists tr.titlerow td,
table.checklists tr.actionrow td {
    vertical-align: baseline;
}

/* ...except that the arrow and 'shared' stay with the last line of
   actions and tags when they wrap */
table.checklists tr.actionrow td:first-child {
    vertical-align: bottom;
}

/* 2px less space under the title: no padding between it and the next
   visible row (notes, or actions), skipping hidden edit/frame rows */
table.checklists tr.titlerow td {
    padding-bottom: 0;
}

table.checklists tr.titlerow + tr:not(.hidden) td,
table.checklists tr.titlerow + tr.hidden + tr:not(.hidden) td,
table.checklists tr.titlerow + tr.hidden + tr.hidden + tr:not(.hidden) td {
    padding-top: 0;
}

/* Wrapped lines of actions and tags: a little more space between lines.
   The line height sets the gap; tags keep their normal height (a
   number line-height is inherited and would make them taller too) */
table.checklists tr.actionrow td.main {
    line-height: 1.3125;  /* 21px at 16px text */
}

table.checklists tr.actionrow td.main .tag {
    line-height: normal;
}

/* Notes (or URL) under a link's title: 1px closer still */
table.checklists tr.notesrow .textboxes {
    display: block;
    margin-top: -1px;
    line-height: 1.35;  /* multi-line notes need more than 'normal' */
}

.textboxes {
    font-size: small;
}

/* A link's notes, and an inbox item's message, in list views: one
   size down from the title (large) */
.link-notes,
.inbox-message {
    font-size: medium;
}

/* "Message:" in the link colour */
.inbox-message-label {
    color: var(--theme-link-colour);
}

.checklistname a:hover {
    text-decoration: underline;
}

.tag {
    background-color: var(--tag-background-colour);
    font-size: small;
    color: black;
    padding: 1px 1ex 1px 1ex;
    border-radius: 4px;
    display: inline-block;
}

.tag a {
    color: black;
    text-decoration: none;
    display: block;
    margin: -1px -1ex -1px -1ex;
    padding: 1px 1ex 1px 1ex;
}

.tag a:hover {
    background-color: var(--theme-link-colour);
    color: white;
    border-radius: 4px;
}

/*
  Tags with values: the tag exactly as above, then '=', then the value
  in its own box. The tag, '=' and the start of the value stay
  together; a value too long for the line wraps within itself:
    <span class="tag-with-value"><span class="tag">...</span><span
      class="tag-equals">=</span><span
      class="tag-value tag-value-CODE">value</span></span>
  CODE is the value's type (b bool, i int, f float, s string, d date,
  t datetime, z datetime with offset, a array, o object). Style
  .tag-value-CODE to colour values by type.
*/
.tag-with-value {
    white-space: nowrap;
    font-size: small;
    margin-right: var(--tag-value-after-spacing);
}

.tag-equals {
    margin: 0 var(--tag-equals-spacing);
}

.tag-value {
    background-color: var(--tag-value-background-colour);
    color: var(--tag-value-colour);
    font-family: var(--tag-value-font-family);
    font-size: var(--tag-value-font-size);
    padding: var(--tag-value-padding);
    border-radius: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    /* Each wrapped line of a value gets its own complete box */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/*
  Metadata pages (issue #6): one table.metadata holding the system
  fields (tr.metadata-field; read-only ones also .metadata-read-only),
  a tr.metadata-divider, column headings (tr.metadata-headings), then
  one row per tag (tr.tag-no-value or tr.tag-value-CODE) with cells th
  (name), td.tag-value (value) and td.tag-value-type (type).
*/
:root {
    --metadata-label-colour: var(--darkish-grey);
    --metadata-read-only-colour: var(--mid-grey);
    --metadata-divider-colour: var(--lighter-grey);
    --metadata-cell-padding: 0.25em 1.5em 0.25em 0;
    --metadata-page-bottom-space: 30px;  /* before the footer */
}

.metadata-page {
    padding-bottom: var(--metadata-page-bottom-space);
}

.metadata {
    border-collapse: collapse;
}

.metadata th,
.metadata td {
    text-align: left;
    vertical-align: top;
    padding: var(--metadata-cell-padding);
}

.metadata .metadata-field th {
    color: var(--metadata-label-colour);
    font-weight: normal;
}

/* Links (e.g. the item's URL) keep the page's link colour */
.metadata .metadata-read-only td {
    color: var(--metadata-read-only-colour);
}

.metadata .metadata-divider td {
    border-top: 1px solid var(--metadata-divider-colour);
    padding: 0;
    height: 0.5em;
}

.metadata .metadata-headings th {
    font-weight: bold;
}

/* Values keep their line breaks (indented JSON) and wrap if long */
.metadata td.tag-value {
    display: table-cell;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.metadata td.tag-value-type {
    color: var(--metadata-read-only-colour);
    font-family: var(--tag-value-font-family);
    font-size: var(--tag-value-font-size);
}

/* Filter pills (active tag filters) */
/* Active filters: a row of pills (each removes one filter) and
   "clear all", under the holding cell, above the list */
.filter-pills {
    margin: 0.4em 0 0.15em 0;  /* less below: the list adds its own space */
    padding-top: 0.4em;
    border-top: 1px solid var(--lighter-grey);
}

.filter-pills-header {
    font-size: small;
    margin-bottom: 0.5em;
}

.pill {
    display: inline-block;
    font-family: var(--mono-font-family);  /* query text, as typed */
    padding: 3px 12px;
    margin: 0.2em 0.4em 0.2em 0;
    border-radius: 12px;
    background-color: var(--theme-tab-colour);
    border: 1px solid var(--theme-tab-colour);
    color: white;
    text-decoration: none;
    font-size: small;
    transition: background-color 0.2s;
}

.pill:hover {
    background-color: var(--theme-tab-hover-colour);
    border-color: var(--theme-tab-hover-colour);
    text-decoration: none;
    color: white;
}

.pill:visited {
    color: white;
}

.pill:visited:hover {
    color: white;
}

/* Search-term pills (~duck): outlined, where tag pills are filled */
.search-pill,
.search-pill:visited {
    background-color: var(--page-bg);
    color: var(--theme-tab-colour);
}

.search-pill:hover,
.search-pill:visited:hover {
    background-color: var(--theme-tab-hover-colour);
    color: white;
}

/* Tag tests in the query (+tag, -tag): filled, as tag pills were */
.search-pill.tag-pill,
.search-pill.tag-pill:visited {
    background-color: var(--theme-tab-colour);
    color: white;
}

.search-pill.tag-pill:hover,
.search-pill.tag-pill:visited:hover {
    background-color: var(--theme-tab-hover-colour);
}

/* A search pill is two targets: its text (a button: edit the term in
   the search box) and its x (a link: remove the term) */
.search-pill .pill-edit {
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.search-pill .pill-remove,
.search-pill .pill-remove:visited {
    color: inherit;
    text-decoration: none;
    padding: 0 0 0 0.2em;
}

/* Being edited in the search box: still part of the filter */
.search-pill.editing {
    opacity: 0.45;
}

/* Between a query's pills, as its canonical form writes them:
     <span class="query-op">AND</span> (also OR, NOT)
     <span class="query-paren query-open">(</span>
     <span class="query-paren query-close">)</span>
   A parenthesis is drawn as a crescent a little taller than a pill,
   with wide flat ends, a moderate inner curve and a near-semicircular
   outer one (an SVG path, filled; shape from njr's mock-up), its ends
   just over the pill's corners. Its
   character is there, transparent, for copying (not clipped: that
   would move the box's baseline). No space inside parentheses; a
   closing one takes back most of the pill's right margin. */
/* AND, OR: yellow (as footer links when highlighted) on blue, square,
   a little shorter than a pill */
.query-op {
    display: inline-block;
    font-family: var(--mono-font-family);
    font-size: small;
    color: var(--rich-yellow);
    background-color: var(--theme-tab-colour);
    border: 1px solid var(--theme-tab-colour);
    padding: 2px 6px;  /* 1px less than a pill, top and bottom */
    margin: 0.2em 0.4em 0.2em 0;
}

.query-paren {
    display: inline-block;
    font-family: var(--mono-font-family);  /* sized like a pill */
    font-size: small;
    padding: 4px 0;  /* a pill's 3px, and 1px above and below it */
    margin: 0.2em 0;
    width: 19px;  /* about 0.8 of its height */
    color: transparent;
    border: 1px solid transparent;
    border-left: none;
    border-right: none;
    position: relative;
}

.query-paren svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.query-paren path {
    fill: var(--theme-tab-colour);
}

/* Each crescent's ends are 2px over the pill's */
.query-open {
    margin-right: -2px;
}

.query-close {
    margin-right: 0.2em;
}

/* NOT: a wider opening parenthesis with NOT in it, the text yellow
   (as footer links when highlighted) (2px more room left of the text
   than it needs, 4px more right of it) */
.query-not {
    width: 44px;
    margin-right: -2px;
}

.query-not-text {
    position: relative;  /* over the SVG */
    padding-left: 7px;
    color: var(--rich-yellow);
}

/* The NOT parenthesis's character, for copying */
.query-hidden {
    position: absolute;
    color: transparent;
}

/* A term with the parentheses and NOTs attached to it: never broken
   across lines */
.query-term {
    display: inline-block;
    white-space: nowrap;
}

/* The whole query's up arrow (as on each row): pinned to the right of
   the last line, in space kept clear of the pills */
.filter-pills.with-query {
    position: relative;
    padding-right: 1.4em;  /* the arrow's width, about 1.2em, and a gap */
}

.query-edit-all {
    position: absolute;
    right: 0;
    bottom: 0.3em;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
}

.pill + .query-close {
    margin-left: calc(-0.4em - 2px);  /* and in place of its margin */
}

.filter-clear {
    font-size: small;
    margin-left: 0.4em;
    display: inline-block;
    color: var(--theme-link-colour);
}

.filter-clear:hover {
    text-decoration: underline;
}

.actionlink, .nonactionlink {
    font-size: small;
}

.actionlink, .actionlink a {
    color: var(--darker-grey);
    text-decoration: none;
}

.nonactionlink, .nonactionlink a, .nonactionlink a:hover {
    color: var(--lighter-grey);
    text-decoration: none;
}

.actionlink a:hover {
    color: var(--theme-link-colour);
    text-decoration: underline;
}

.actionlink.disabled, .actionlink.disabled a {
    color: var(--lighter-grey);
    cursor: default;
}

.actionlink.disabled a:hover {
    color: var(--lighter-grey);
    text-decoration: none;
    cursor: default;
}

.kill, .kill a {
    color: var(--bright-red);
}

.kill a:hover {
    color: var(--bright-red);
    text-decoration: underline;
}


.author a {
    color: var(--darker-grey);
    font-size: normal;
    text-decoration: none;
}

.author a:hover {
    color: var(--theme-link-colour);
    text-decoration: underline;
}

/* The URI under an item's title: grey (never link blue), underlined
   only on hover; one line, cut off with an ellipsis at the right if
   too long. width 0 with min-width 100% fills the cell without the
   whole URI counting towards the table's width */
.item-uri {
    font-family: var(--item-uri-font-family);
    font-size: var(--item-uri-font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: '...';  /* wider than … in monospace; Firefox only */
    color: var(--item-uri-colour);  /* for the ellipsis */
    width: 0;
    min-width: 100%;
}

.item-uri a,
.item-uri a:visited,
.item-uri a:hover,
.item-uri a:visited:hover {
    color: var(--item-uri-colour);
    text-decoration: none;
}

.item-uri a:hover,
.item-uri a:visited:hover {
    text-decoration: underline;
}

/* ⓘ at the end of a list row: link to the item's metadata page */
a.info-link,
a.info-link:hover {
    color: var(--theme-link-colour);
    font-family: Times, "Times New Roman", serif;
    font-weight: bold;
    text-decoration: none;
    margin-left: 0.14em;  /* ~half a space, on top of the space before it */
}

.listlinks {
}

.tags {
    padding-left: 1em;
}

td:first-child .tags {
    padding-left: 0.3em;
}

.main {
}

.hline {
    width: 100%;
    font-size: 1px;
    border-top: 1px solid var(--lighter-grey);
    /* Rows have more space above their content than below; nudging
       the rule down (without changing layout) evens it up */
    position: relative;
    top: 2px;
}

.sep {
    font-size: small;
}

.sepline .offtext {
    font-size: var(--tab-separator-font-size);
    color: var(--tab-separator-color);
}

#header {
    margin-top: 6px;
    margin-bottom: 0;
}

.symboltest, .symbol {
    font-family: "Arial Unicode MS", Sans;
    font-size: small;
}

.symbol a {
    text-decoration: none;
}

.symbol a:hover {
    font-weight: bold;
}

.checkeagle {
    font-size: x-large;
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif;
    color: white;
    background-color: var(--header-footer-bg);
    height: 52px;
}

.checkeagle a.ll {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    height: 52px;
    padding-left: 4px;
}

.checkeagle a img {
    display: block;
    flex-shrink: 0;
    margin-top: -4px;
}

.checkeagle a:hover {
    text-decoration: none;
}

.headertable {
    width: 100%;
}


.switch, .checkswitch {
    color: white;
    font-size: small;
    text-align: right;
    padding-right: 1em;
    height: 52px;
}

.ra {
/*    margin-left: auto;
    margin-right: 0; */
    margin: auto 0 0 auto;
}



.checkswitch, .ontext a {
    background-color: var(--header-footer-bg);
    text-decoration: none;
}

.offtext a:hover, .ontext a:hover {
    text-decoration: none;
    color: white;
}

.ontext, .ontext a {
    font-weight: bold;
    font-size: small;
    color: white;
}

.ontext a:visited {
    color: white;
}



.offtext, .offtext a {
    font-weight: normal;
    font-size: small;
    color: var(--unselected-tab-grey);
}

#toplinks {
    margin-top: 2px;
    margin-bottom: 0;
    padding: 0;
    text-align: right;
    font-size: small;
    line-height: 1;
}

.tab, .selectedtab, .createbutton, .greyedtab {
    width: 100px;
    border: 1px solid white;
    margin: 0;
    text-align: center;
    font-size: small;
    color: white;
}

.selectedtab {
   background-color: var(--theme-tab-colour);
}

.greyedtab, .greyedtab a {
   color: var(--unselected-tab-grey);
}

.tab, .createbutton, .greyedtab {
    background-color: var(--mid-grey);
}

td.createbutton a, td.tab a, td.selectedtab a {
    color: white;
}

td.createbutton a:visited, td.tab a:visited, td.selectedtab a:visited {
    color: white;
}

.createbutton a:hover, td.tab a:hover, td.selectedtab a:hover  {
    color: white;
    text-decoration: none;
    background-color: var(--theme-tab-hover-colour);
}

.createbutton a:visited:hover, td.tab a:visited:hover, td.selectedtab a:visited:hover  {
    color: white;
    text-decoration: none;
    background-color: var(--theme-tab-hover-colour);
}

a.ll {
    display: block;
    padding: 2px 0 2px 0;
}

.headertable {
    border-collapse: collapse;
    border-spacing: 0;
}

.headertable td.tab,
.headertable td.selectedtab,
.headertable td.createbutton,
.headertable td.greyedtab {
    padding: 0;
    margin: 0;
}

.headertable td.empty {
    padding: 0 0 0 6px;
    margin: 0;
}

/*
  Search box, at the right of the holding-cell row:
    <form class="search-box"> (hidden fields) <span class="search-icon">
      magnifier</span><input type="search" name="q"><button
      class="search-clear">x</button></form>
  The x shows only when something has been typed (the input has a
  placeholder of one space, so :placeholder-shown means empty).
*/
.search-box {
    float: right;
    display: flex;
    align-items: center;
    width: var(--search-box-width);
    max-width: 100%;
    box-sizing: border-box;
    margin: 3px 6px 0 0;
    padding: 0 0.4em;
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    background-color: var(--page-bg);
}

.search-box:focus-within {
    border-color: var(--theme-tab-colour);
}

.search-icon,
.search-clear {
    display: flex;
    color: var(--mid-grey);
    cursor: pointer;
}

.search-icon .icon-svg,
.search-clear .icon-svg {
    padding: 0;
}

.search-icon svg,
.search-clear svg {
    width: 1.1em;
    height: 1.1em;
}

.search-box input[type="search"] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.3em 0.4em;
    font-family: var(--mono-font-family);
    font-size: small;
    -webkit-appearance: none;
    appearance: none;
}

/* Our own x, not the browser's (Firefox has none; others differ) */
.search-box input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.search-clear {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.search-box input:placeholder-shown + .search-clear {
    display: none;
}

.headertable td.tab:first-child,
.headertable td.selectedtab:first-child,
.headertable td.createbutton:first-child,
.headertable td.greyedtab:first-child {
    border-left: none;
}

.headertable td.tab:last-child,
.headertable td.selectedtab:last-child,
.headertable td.createbutton:last-child,
.headertable td.greyedtab:last-child {
    border-right: none;
}

#main {
    flex: 1 1 var(--main-min-width);
    min-width: var(--main-min-width);
    max-width: var(--main-max-width);
}

.sidetag, .tagcount {
    font-size: small;
    padding-top: 3px;
    padding-bottom: 3px;
}

.tagcount {
    text-align: right;
    padding-left: 1ex;
}

.sidetagtable {
    border-collapse: collapse;
    width: 100%;
}

.foot {
    margin-top: 0;
}

.foottable a {
    color: white;
}

.listurl {
    max-width: var(--main-max-width);
    text-align: center;
    font-size: small;
    padding: 1ex;
}

.listurl a {
    color: black;
    text-decoration: none;
}

.listurl a:hover {
    color: var(--theme-link-hover-colour);
    text-decoration: underline;
}

.para {
    max-width: var(--main-max-width);
}

.para table {
    width: 95%;
}

form table {
    width: 95%;
}

.foottext {
    text-align: center;
    font-size: small;
    padding: 6px;
    max-width: var(--main-max-width);
}

.footer {
    background-color: var(--header-footer-bg);
    padding: 6px 0 6px 0;
}

.footer td {
    color: white;
    padding: 0 .5ex 0 0.8em;
    font-size: small;
}

.footer a:hover {
    color: var(--rich-yellow);
    text-decoration: none;
}

.error {
    font-weight: bold;
    color: var(--red-c00000);
    padding: 10 0 10 0;
}

.warning {
    color: orange;
}

.info {
    color: orange;
}

.pre {
    whitespace: pre;
    font: monospace;
}

.input-label {
    padding: 6px 0 3px 0;;
    font-size: small;
}

.radio, .boxlabel {
    padding-left: 30px;
}

input, textarea {
    font-family: var(--mono-font-family);
    font-size: 0.75rem;  /* 12px at default 16px base */
}

textarea[name="items"], textarea[name="css"], textarea[name="notes"] {
    width: 100%;
    max-width: calc(var(--main-max-width) - 20px);
}

em {
    font-family: Palatino, "Palatino Linotype", Georgia, Times, serif;
    font-style: italic;
}

input[type="submit"], input[type="button"], button {
    font-family: helvetica, arial, sans;
}

input[type="checkbox"] {
    accent-color: var(--theme-checkbox-colour);
}

input:focus, textarea:focus {
    outline: 1px solid var(--theme-checkbox-colour);
    outline-offset: 0;
}

input[readonly] {
    border: none;
}

/* Tags boxes: textareas sized to fit their text when shown
   (checkeagle.js); resizable by hand after that */
textarea.tag-box {
    resize: vertical;
    vertical-align: top;
}

textarea.tag-box[readonly] {
    border: none;
}

input[readonly]:focus {
    outline: none;
}


.listline {
    border-bottom: solid var(--tab-border-thickness) var(--checklist-theme-colour);
}

.completedline {
    border-bottom: solid var(--tab-border-thickness) var(--completion-theme-colour);
}

.styleline {
    border-bottom: solid var(--tab-border-thickness) var(--style-theme-colour);
}

.linkline {
    border-bottom: solid var(--tab-border-thickness) var(--link-theme-colour);
}


.sepline {
    border-bottom: solid 3px black;
}

#heldtype {
    font-size: small;
    padding: 0 .5em 0 .5em;
}

.stylish {
    color: var(--style-theme-colour);
}

.listish {
    color: var(--theme-link-colour);
}

.bookmarkish {
    color: var(--link-theme-colour);
}

.completish {
    color: var(--completion-theme-colour);
}

#held {
    font-size: small;
    font-family: monospace;
    color: var(--darker-grey);
    position: relative;
    top: -1px;
}

#clearsymbol {
    display: inline-block;
    position: relative;
    top: 1px;
    padding-top: 0.2em;
}

#downarrow.empty {
    color: var(--lighter-grey);
}

#downarrow.empty a {
    color: var(--lighter-grey);
}

.pagination-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: var(--main-max-width);
   font-size: small;
   padding: 1em 0;
}

.sizeselector {
   flex: 0 0 auto;
   text-align: left;
}

.sizeselector a,
.sizeselector .current {
    padding: 0 0.25em;
}

.pagelinks, .subpagelinks {
   flex: 1 1 auto;
   text-align: center;
   font-size: medium;
}

.pagelink {
    padding: 0 0.3em;
}

.pagelink a {
    text-decoration: none;
}

.pagelink a:hover {
    text-decoration: underline;
}

.pagelink.arrowhead {
    font-size: 0.825rem;
}

.hidden {
    display: none;
}

.visible {
}

.importlink {
    max-width: var(--main-max-width);
    text-align: center;
    padding: 10px 0 1em 0;
}

.importarea {
    max-width: var(--main-max-width);
    text-align: center;
    padding: 0px 0px 10px 0;
}

.p {
    padding: .5em;
    max-width: var(--main-max-width);
}

#count {
    flex: 0 0 auto;
    text-align: right;
    font-size: small;
    color: var(--mid-grey);
    padding-right: 0.25em;
}

#sidetags {
    flex: 0 1 auto;
    min-width: var(--sidetags-min-width);
    max-width: var(--sidetags-max-width);
    width: fit-content;
    margin-top: 79px;
    padding-right: calc(2 * var(--page-padding));
}

#sidetags .sizeselector {
    text-align: center;
    font-size: small;
    padding: 0.3em 0;
}

.sidetagheader {
    background-color: var(--mid-grey);
    text-align: center;
    padding: 0;
    color: white;
    font-size: small;
}

.sidetagheader a {
    display: block;
    padding: 2px 30px 2px 30px;
    color: white;
    text-decoration: none;
}

.sidetagheader a:hover {
    background-color: var(--theme-link-colour);
}

.sidetag, .tagcount {
    font-size: small;
    padding-top: 3px;
    padding-bottom: 3px;
}

.tagcount {
    text-align: right;
    padding-left: 1ex;
}

.sidetagtable {
    border-collapse: collapse;
    width: 100%;
}

.denselinks td {
    padding: 0 10px 0 10px;
}

/* Language selector dropdown */
.language-selector {
    position: relative;
    display: inline-block;
}

#language-trigger {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: small;
    padding: 2px 6px;
    outline: none;
}

#language-trigger:hover {
    background-color: var(--lightest-grey);
}

.language-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--mid-grey);
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    min-width: 200px;
}

.language-menu a {
    display: block;
    font-size: small;
    padding: 4px 8px;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.2s;
    white-space: nowrap;
    text-align: left;
    color: inherit;
}

.language-menu a.current-custom-pairing {
    font-weight: bold;
    border-bottom: 1px solid var(--mid-grey);
    padding-bottom: 6px;
    margin-bottom: 4px;
    grid-column: 1 / -1;
}

.language-menu a:hover {
    background-color: var(--lightest-grey);
    text-decoration: none;
}

.language-menu.hidden {
    display: none;
}

/* Icon rendering (inline SVG and Unicode symbols) */
.icon-svg {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    padding: var(--icon-padding);
}

.icon-svg svg {
    width: 1.8em;
    vertical-align: middle;
    color: inherit;
}

#toplinks .icon-svg {
    vertical-align: var(--toplinks-icon-valign);
}

#toplinks .icon-svg svg {
    width: 1.2em;
}

.tab .icon-svg svg,
.selectedtab .icon-svg svg {
    width: 1.6em;
}

#toplinks .entity-tab {
    vertical-align: baseline;
}

.icon-missing {
    color: red;
    font-weight: bold;
}

/* Holding cell toggle and active state */
#holdingcell {
    display: inline-block;
    padding-top: 0.2em;
}

#held {
    padding: 0 0.5em;
}

#holdingcell.active #held {
    background-color: var(--pale-yellow);
}

.cell-indicator {
    display: inline-block;
    width: 1em;
    text-align: center;
}

.cell-indicator .icon-svg {
    width: 0.8em;
    height: 0.8em;
    color: var(--page-bg);
}

#holdingcell.active .cell-indicator .icon-svg {
    color: var(--rich-yellow);
}

.cell-toggle {
    font-size: x-small;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: normal;
    cursor: pointer;
}

.cell-toggle.inactive .bulb-fill {
    fill: white;
}

.cell-toggle.active .bulb-fill {
    fill: var(--rich-yellow);
}

.cell-toggle.inactive:hover .bulb-fill {
    fill: var(--brightest-orange);
}

.cell-toggle.active:hover .bulb-fill {
    fill: var(--darkish-grey);
}

.cell-toggle.active {
    background-color: transparent;
    color: black;
}

.cell-toggle.inactive {
    background-color: transparent;
    color: white;
}

/* Item indicator for affected items in lists */
.item-indicator {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    padding-right: 4px;
}

.item-indicator::before {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23FFD603"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Show yellow indicator on up arrows when affected by holding cell */
.ajaxTarget.has-indicator::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23FFD603"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Yellow circle indicator for unseen inbox items */
.unseen-indicator {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 5px;
    position: relative;
    top: -1px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23FFD603"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* URL component prefix styling - matches input field font */
.shortname-prefix {
    font-family: var(--mono-font-family);
    font-size: 0.75rem;  /* Match input fields */
}

/* Perms field toggle button and input */
.perms-toggle-btn {
    display: inline-block;
    padding: 3px 12px;
    margin: 0 0.5em;
    min-width: 2em;
    text-align: center;
    border-radius: 12px;
    background-color: var(--theme-tab-colour);
    border: 1px solid var(--theme-tab-colour);
    color: white;
    text-transform: uppercase;
    font-size: 0.65em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    padding-bottom: 0.3em;
}

.perms-toggle-btn:hover {
    background-color: var(--theme-tab-hover-colour);
    border-color: var(--theme-tab-hover-colour);
    text-decoration: none;
    color: white;
}

.perms-input {
    font-family: var(--mono-font-family);
    font-size: 0.75rem;
    width: 4.5ch;
    margin-left: 0.3em;
    padding: 0.2em;
    text-align: center;
}

.perms-input.invalid {
    color: red;
    border-color: red;
    background-color: var(--light-pink);
}

.perms-input.hidden {
    display: none;
}

/* Submit area - always visible */
.submit-area {
    margin-top: 0.5em;
}

/* Submit buttons at top of area */
.submit-buttons {
    padding: 0;
    margin: 0;
}

/* Button-styled links (for form submit actions) */
a.button-link,
button.button-link {
    display: inline-block;
    padding: 3px 12px;
    margin: 0.1em 1ex;
    min-width: 4em;
    text-align: center;
    border-radius: 12px;
    background-color: var(--theme-tab-colour);
    border: 1px solid var(--theme-tab-colour);
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: small;
    font-family: inherit;
}

a.button-link:hover,
button.button-link:hover {
    background-color: var(--theme-tab-hover-colour);
    border-color: var(--theme-tab-hover-colour);
    text-decoration: none;
    color: white;
}

a.button-link:visited {
    color: white;
}

/* Error messages below the buttons, boxed in red (the buttons are not) */
.error-messages {
    border: 4px solid red;
    padding: 0.5em;
    margin-top: 0.5em;
    color: red;
}

/* Link form: when an existing link was saved (same size as the labels) */
.saved-on {
    font-size: small;
    color: var(--darkish-grey);
}

/* Warnings from the last save, boxed in orange at the top of the page */
.warning-messages {
    border: 4px solid var(--bright-orange);
    padding: 0.5em;
    margin: 0.5em var(--page-padding);
    color: var(--bright-orange);
}

/* Layout toggle mobile row - hidden on desktop, shown on mobile */
.layout-toggle-mobile {
    display: none;
    margin: 0;
    line-height: 1;
}

/* Hide separator after layout toggle on desktop */
.layout-toggle-sep {
    display: table-cell;
}

/* Mobile responsive layout - reduce widths by 50% */
@media (max-width: 730px) {
    :root {
        --main-min-width: 360px;
        --main-max-width: 500px;
        --sidetags-min-width: 75px;
        --sidetags-max-width: 150px;
        --content-gap: 10px;
    }

    /* Hide CheckEagle text, keep logo */
    .checkeagle a.ll {
        font-size: 0;
    }

    /* Search box: smaller; and while the holding cell has something in
       it (#downarrow not .empty), just the magnifier until it's used */
    :root {
        --search-box-width: 11em;
    }

    td.empty:has(#downarrow:not(.empty)) .search-box:not(:focus-within) {
        width: auto;
    }

    td.empty:has(#downarrow:not(.empty))
        .search-box:not(:focus-within) input,
    td.empty:has(#downarrow:not(.empty))
        .search-box:not(:focus-within) .search-clear {
        display: none;
    }

    /* Layout toggle: hide desktop version, show mobile version */
    .layout-toggle-desktop {
        display: none;
    }

    .layout-toggle-sep {
        display: none;
    }

    .layout-toggle-mobile {
        display: block;
    }
}

/* Layout toggle icons (links page) */
.layout-toggle {
    padding: 0 0.5em 0 0;
    vertical-align: middle;
    white-space: nowrap;
}

.layout-icon {
    display: inline-block;
    cursor: pointer;
    padding: 0 0.2em;
    text-decoration: none;
}

.layout-icon svg {
    width: 1.4em;
    height: 1.4em;
    vertical-align: middle;
    color: var(--unselected-tab-grey);
}

.layout-icon.active svg {
    color: white;
}

.layout-icon:hover svg {
    color: white;
}

/* Language-specific styles: UNIX/Lunix (ux_LI) */
body[data-language="ux_LI"] #toplinks,
body[data-language="ux_LI"] .checkeagle,
body[data-language="ux_LI"] .checkswitch,
body[data-language="ux_LI"] .subtab,
body[data-language="ux_LI"] .footer,
body[data-language="ux_LI"] .actionlink {
    font-family: "PT Mono", Menlo, monospace;
}