/*
 * One page, one stylesheet, with the tokens and scales of the benches beside it.
 * A machine-produced fact -- an address, an identity, a value -- is set in the
 * mono face.
 *
 * This file is downloaded by whoever opens the page, comments included.
 */

:root {
  --ink: #17191c;
  --ink-quiet: #4a4f57;
  --ink-faint: #767c86;
  --page: #f7f8fa;
  --card: #ffffff;
  --edge: #dfe3e8;
  --accent: #1a5fb4;
  --bad: #b3261e;
  --good: #1c7c48;
  --waiting: #8a5a00;
  /* The warning colour: a value that went down since the first reading, and a
     meter whose last reading failed. Orange, as asked, and dark enough to read
     on white. */
  --falls: #c05600;

  --text-caption: 0.75rem;
  --text-small: 0.85rem;
  --text-body: 0.95rem;
  --text-lead: 1.1rem;
  --text-title: 1.5rem;

  --control: 34px;

  --gap-xs: 4px;
  --gap-s: 8px;
  --gap-m: 12px;
  --gap-l: 20px;
  --gap-xl: 32px;

  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: var(--gap-xl) var(--gap-l);
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.5;
}

main, .masthead { max-width: 1200px; margin: 0 auto; }
.masthead h1 { font-size: var(--text-title); margin: 0 0 var(--gap-xs); font-weight: 600; }

/* The link to the manual, in the title's row. Hidden until the manual
   answers, so the rule that shows it must not undo `hidden`.

   It shares a box with the account, and the box centres them. As a sibling of
   the account it sat at the top of the row, a few pixels above the name and
   the buttons beside it. The size is the account's own. */
.corner { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--gap-s) var(--gap-m); }
.manual { white-space: nowrap; font-size: var(--text-small); }
.manual[hidden] { display: none; }
.manual { color: var(--accent); text-decoration: none; }
.manual:hover { text-decoration: underline; }
.lede { margin: 0 0 var(--gap-l); color: var(--ink-quiet); max-width: 70ch; }
.row.top { align-items: flex-start; }

.who { display: flex; gap: var(--gap-m); align-items: center; font-size: var(--text-small); }
.badge {
  font-size: var(--text-caption);
  color: var(--ink-quiet);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 0 var(--gap-s);
}

.panel {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: var(--gap-l);
  margin-bottom: var(--gap-l);
}
.narrow-card { max-width: 24rem; margin-left: auto; margin-right: auto; }
body:not(.signed-in) .masthead { max-width: 24rem; }

.heading { font-size: var(--text-lead); font-weight: 600; margin: var(--gap-xl) 0 var(--gap-m); }
.panel .heading { margin-top: 0; }
.note { color: var(--ink-quiet); margin: 0 0 var(--gap-m); }

.field { display: block; margin-bottom: var(--gap-m); }
.label { display: block; font-size: var(--text-small); color: var(--ink-quiet); margin-bottom: var(--gap-xs); }
.hint { color: var(--ink-faint); font-weight: 400; }

input[type=text], input[type=password], input[type=email], input[type=number], select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: var(--gap-s) var(--gap-m);
  height: var(--control);
}
select { font-family: var(--font); cursor: pointer; }
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* A field the form fills itself and nobody may type in, such as the address of
   a converter chosen from the list. It stays where it is, so the row around it
   does not move, and it is grey so that it is plainly not for typing. */
input:disabled {
  background: var(--page);
  color: var(--ink-faint);
  cursor: default;
  -webkit-text-fill-color: var(--ink-faint);
  opacity: 1;
}

.row { display: flex; gap: var(--gap-m); align-items: flex-end; flex-wrap: wrap; }
.row .field { margin-bottom: 0; }
/* Two fields that belong together, such as an address and its port: they take
   one line between them, and they wrap to the next line together. */
.row .pair { flex: 1 1 22rem; flex-wrap: nowrap; }
.narrow { width: 11rem; }
.minutes { width: 15rem; }
.grow { flex: 1 1 240px; }

button {
  font: inherit;
  font-size: var(--text-small);
  padding: 0 var(--gap-l);
  height: var(--control);
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button[disabled] { opacity: 0.6; cursor: default; }
button.quiet { background: var(--card); color: var(--accent); border-color: var(--edge); }
button.quiet:hover { filter: none; border-color: var(--accent); }
/* A header toggle that is on, such as Notify me. */
button.quiet.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
button.danger { background: var(--bad); }
button.small { height: 28px; padding: 0 var(--gap-m); }
/* A button whose whole label is a drawing, such as the trash can. Square, and
   the drawing takes the button's own colour, so it works on any of them. */
/* The one listed meter to read, beside its label rather than across the form. */
.choices.narrow-select { display: inline-block; width: auto; min-width: 16rem; max-width: 100%; }

/* The converters somebody was given, and which meters of each, under its row. */
td.give {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  align-items: flex-start;
}

/* The converter's name, and its meters on the line under it, so the two levels
   read as two levels rather than as one row of boxes. */
.give-converter {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

/* The meters of one converter, indented under its name so the two levels read
   as two levels. */
.give-converter .meters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m);
  padding-left: var(--gap-l);
}

.small-choice { font-size: var(--text-small); }

button.icon { padding: 0 var(--gap-m); }
button.icon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button.wide { width: 100%; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A button that opens a short list of links under it, such as Export. */
.menu { position: relative; }
.menu summary {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-s);
  font-size: var(--text-small);
  padding: 0 var(--gap-l);
  height: var(--control);
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--card);
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { border-color: var(--accent); }
.menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu .caret { font-size: var(--text-caption); }
.menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + var(--gap-xs));
  z-index: 10;
  min-width: 18rem;
  display: flex;
  flex-direction: column;
  padding: var(--gap-xs) 0;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.menu-items a {
  display: flex;
  flex-direction: column;
  padding: var(--gap-s) var(--gap-m);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-small);
}
.menu-items a .hint { font-size: var(--text-caption); }
.menu-items a:hover, .menu-items a:focus-visible { background: var(--page); outline: none; }

textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: var(--gap-s) var(--gap-m);
}

/* Where the meters come from: three choices in a line, under the form. */
.source { margin: var(--gap-m) 0; align-items: center; gap: var(--gap-l); }
.source .label { margin: 0; }
.choice { font-size: var(--text-small); display: inline-flex; gap: var(--gap-xs); align-items: center; cursor: pointer; }

.privacy { margin: var(--gap-m) 0 0; font-size: var(--text-caption); color: var(--ink-faint); max-width: 80ch; }

/* A window: a form somebody opens, fills and closes, over the page it belongs
   to. The gateway bench's windows are the same shape.

   A row carries no margin of its own, so in a window whose fields sit in rows
   the rows would touch and the buttons would stand against the last field. The
   buttons stand further away than a row does, because they are not one more
   field. */
.window {
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: var(--gap-l);
  width: min(36rem, calc(100vw - 2 * var(--gap-l)));
  color: var(--ink);
  background: var(--card);
}
.window::backdrop { background: rgba(23, 25, 28, 0.35); }
.window h2 { font-size: var(--text-lead); margin: 0 0 var(--gap-s); }
.window .row { margin-top: var(--gap-m); }
.window .row.actions { margin-top: var(--gap-l); }
.window .refusal { margin-bottom: 0; }

/* The button over a table that opens the window to add a row to it. It needs
   the space below, or it touches the table it is about. */
.adds { margin-bottom: var(--gap-m); }
/* The row holding a panel's one action, under everything it acts on. */
.row.start { margin-top: var(--gap-l); }
.empty { color: var(--ink-faint); font-size: var(--text-small); margin: var(--gap-m) 0 0; }

.refusal, .notice {
  background: var(--card);
  border: 1px solid var(--bad);
  border-left-width: 4px;
  border-radius: 6px;
  padding: var(--gap-m) var(--gap-l);
  margin: var(--gap-m) 0 var(--gap-l);
  color: var(--bad);
}
.notice { border-color: var(--edge); border-left-color: var(--accent); color: var(--ink-quiet); }

.tabs { display: flex; gap: var(--gap-xs); margin-bottom: var(--gap-l); border-bottom: 1px solid var(--edge); }
.tab {
  background: none;
  color: var(--ink-quiet);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0 var(--gap-m);
}
.tab:hover { filter: none; color: var(--accent); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.invited { margin-top: var(--gap-l); }
/* The reason somebody gave for asking for an account: their own lines, kept,
   and a long word that cannot push the table wider than the page. */
.rows td.reason { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 12rem; max-width: 32em; }
/* The role a request is approved as, chosen in its own row: wide enough to
   read the longest of them. */
.rows td.choice { min-width: 10rem; }
/* The requests are followed by a panel, which would otherwise touch them. */
.requests { margin-bottom: var(--gap-l); }

/* ------------------------------------------------------------------ tables */

.sheet {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 8px;
  overflow-x: auto;
}
.rows { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.rows th, .rows td {
  text-align: left;
  padding: var(--gap-s) var(--gap-m);
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}
.rows th {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 600;
}
.rows tbody tr:last-child td { border-bottom: none; }
.rows .mono { font-family: var(--font-mono); }
.rows .num { text-align: right; }
.rows .action { text-align: right; width: 1%; white-space: nowrap; }
/* The buttons of one row stand apart. They are appended by the script, so
   there is no whitespace between them to do it, and Change and Delete touched
   (reported 2026-09-20). */
.rows .action button + button { margin-left: var(--gap-s); }
.rows tr.is-disabled td { color: var(--ink-faint); }
#sessions tbody tr { cursor: pointer; }
#sessions tbody tr:hover { background: var(--page); }

.state-word.is-searching, .state-word.is-connecting { color: var(--waiting); }
.state-word.is-reading { color: var(--good); }
.state-word.is-ended { color: var(--ink-faint); }

/* ------------------------------------------------------------- one session */

.detail-head { align-items: center; margin-bottom: var(--gap-l); }
.detail-head h2 { font-family: var(--font-mono); font-size: var(--text-lead); margin: 0; }

.summary {
  display: flex;
  gap: var(--gap-xl);
  flex-wrap: wrap;
  margin-bottom: var(--gap-l);
  padding: var(--gap-m) var(--gap-l);
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 8px;
}
.fact { display: flex; flex-direction: column; }
.fact .name { font-size: var(--text-caption); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.fact .value { font-family: var(--font-mono); font-size: var(--text-lead); }

/* A meter's own row: its identity, then what is known about it, across the
   whole table. */
.readings tr.device td {
  background: var(--page);
  white-space: normal;
  padding-top: var(--gap-m);
}
.readings .identity { font-weight: 600; margin-right: var(--gap-m); }
.readings .facts { color: var(--ink-quiet); }
/* A meter whose last reading failed, before it has failed three in a row. The
   page's orange is its warning colour, as it is for a counter that went down. */
.readings .flag.is-warn { color: var(--falls); border-color: var(--falls); }
/* At the far end of the meter's own row, away from what is read. */
.readings tr.device td { position: relative; }
.readings .actions { float: right; display: inline-flex; gap: var(--gap-xs); margin: calc(-1 * var(--gap-xs)) 0; }

/* Mute and Solo: a toggle that is on is filled, as a pressed key. */
.readings .toggle.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* A meter the rounds do not read, and its values: kept, and faded. */
.readings tr.is-skipped td { color: var(--ink-faint); }
.readings tr.is-skipped .rises, .readings tr.is-skipped .falls { opacity: 0.5; }
.readings .flag.is-bad { color: var(--bad); border-color: var(--bad); }
.readings .flag {
  margin-right: var(--gap-m);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 0 var(--gap-s);
}

/* The meter being asked right now: an accent bar on the left of its own row,
   and a label beside its identity. The dot pulses, so the row is found at a
   glance in a long table. */
.readings tr.device.is-reading td { box-shadow: inset 4px 0 0 var(--accent); }
.readings .now {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  margin-right: var(--gap-m);
  color: var(--accent);
  font-weight: 600;
}
.readings .now::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse { from { opacity: 1; } to { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .readings .now::before { animation: none; } }

/* A quantity's row opens its chart. */
.readings tr.quantity { cursor: pointer; }
.readings tr.quantity:hover td { background: var(--page); }
.readings tr.quantity.is-open td { border-bottom-color: transparent; }
.readings td.chart { white-space: normal; padding-top: 0; }
.readings td.chart svg { display: block; width: 100%; height: 7.5rem; }
.readings td.chart polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.readings .chart-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-caption);
  color: var(--ink-faint);
}

/* A value that has moved since the first reading: the arrow and the colour say
   which way, and the number says how far. */
.readings .change { min-width: 8rem; }
.readings .rises { color: var(--good); font-family: var(--font-mono); font-weight: 600; }
.readings .falls { color: var(--falls); font-family: var(--font-mono); font-weight: 600; }
.readings .meter-mark { margin-right: var(--gap-m); cursor: default; }
/* A gauge's mark is a tilde, drawn larger than the table's text. At the
   table's size it is a faint stroke near the top of the line, where a
   counter's triangle is solid and easy to see. `line-height: 0` stops the
   larger glyph from making its row taller than a row carrying no mark:
   measured, a row grows from 29.4px to 37.6px without it, so only the rows
   that say something would have grown. */
.readings .moves {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.5em;
  line-height: 0;
}
.readings .change span { cursor: default; }

#unresolved ul { margin: 0; padding-left: var(--gap-l); font-size: var(--text-small); }

/* How far the search is. The notice's own paragraphs keep no margin of their
   own, so the bar sits close under the sentence it belongs to. */
.notice p { margin: 0; }
.progress { margin-top: var(--gap-s); }
.progress .bar {
  height: 6px;
  background: var(--edge);
  border-radius: 999px;
  overflow: hidden;
}
.progress .done { height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }
.progress .hint { margin-top: var(--gap-xs); font-size: var(--text-small); }

.wire { margin-top: var(--gap-l); }
.wire summary { cursor: pointer; color: var(--ink-quiet); font-size: var(--text-small); }
.wire pre {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: var(--gap-m);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  max-height: 20rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

@media screen and (max-width: 640px) {
  body { padding: var(--gap-l) var(--gap-m); }
  .narrow, .minutes { width: 100%; }
  /* A phone has no room for two fields side by side, so the pair breaks and
     each of the two takes the width every other field has. */
  .row .pair { flex-wrap: wrap; }
  .row .pair > .field { flex: 1 1 100%; }
  .summary { gap: var(--gap-l); }
  /* **The masthead wraps.** A name, a role and two buttons do not fit 375px on
     one line, and a button whose label wraps inside a box of one height spills
     out of it -- which is the fault this bench's phone scan was written for.
     Found by that scan when Change my password was added beside Sign out
     (2026-09-20). */
  .who { flex-wrap: wrap; }
}

/* **The account as one button and a menu, on a phone** (2026-10-04, as on the
   gateway bench). Somebody signed in had the name, the role, two buttons and
   Help above the page, on three or four lines. Now the title and one button
   with their name share a line, and the rest opens under the button.

   `.corner-items` wraps Help and the account, and `.who-line` the name and
   the role. On a wide screen neither has a box of its own, so the row is
   laid out as it was. */
.corner-items { display: contents; }
.who-line { display: contents; }
.account-open { display: none; }
@media screen and (max-width: 640px) {
  /* The title lines up with the words of the tabs under it. */
  body.signed-in .masthead { padding: 0 var(--gap-m); }
  body.signed-in .masthead .row.top { flex-wrap: nowrap; align-items: center; margin-bottom: var(--gap-m); }
  body.signed-in .masthead .grow { flex: 1 1 0; min-width: 0; }
  body.signed-in .masthead h1 { margin: 0; }
  /* The sentence under the title is for somebody who has not seen the page. */
  body.signed-in .masthead .lede { display: none; }
  body.signed-in .corner { position: relative; flex-wrap: nowrap; }
  body.signed-in .account-open { display: inline-flex; align-items: center; gap: var(--gap-s); white-space: nowrap; }
  body.signed-in .corner-items {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + var(--gap-xs));
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    min-width: 13rem;
    padding: var(--gap-xs);
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(23, 25, 28, 0.14);
  }
  body.signed-in .corner.is-open .corner-items { display: flex; }
  /* The account's own box goes, so its parts and Help are ordered as one list. */
  body.signed-in .corner .who { display: contents; }
  body.signed-in .corner .who-line {
    order: 1;
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    margin: 0 0 var(--gap-xs);
    padding: var(--gap-s) var(--gap-m);
    border-bottom: 1px solid var(--edge);
    font-size: var(--text-small);
    color: var(--ink-quiet);
  }
  body.signed-in .corner #my-password { order: 2; }
  body.signed-in .corner .manual { order: 3; }
  body.signed-in .corner #signout { order: 4; }
  body.signed-in .corner-items button,
  body.signed-in .corner-items .manual {
    display: block;
    width: 100%;
    height: auto;
    padding: var(--gap-s) var(--gap-m);
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--accent);
    font-size: var(--text-body);
    text-align: left;
  }
  body.signed-in .corner-items [hidden] { display: none; }
}

/* ==== own lists: begin ==== */
/* Every select is drawn by the page: a button that looks like a field, and a
   list that opens from it. Safari on a phone or a tablet draws a select's
   options in a narrow popover of its own, which no rule here can reach. The
   select itself stays in the page, hidden, and holds the value.

   This block is the same, byte for byte, in every bench. `--field` and
   `--field-pad` are what a bench sets where its own fields differ. */
select[data-own-list] { display: none !important; }
.choices { position: relative; display: block; width: 100%; }
button.choices-button {
  width: 100%;
  height: var(--control);
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: 0 var(--field-pad, var(--gap-m));
  font-family: var(--font);
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--ink);
  background: var(--field, var(--card));
  border: 1px solid var(--edge);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}
button.choices-button:hover { filter: none; border-color: var(--accent); }
button.choices-button[aria-expanded=true] { border-color: var(--accent); }
button.choices-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button.choices-button[disabled] { cursor: default; border-color: var(--edge); }
/* `width: 0` and then grown: a long line must not make its field wider. With
   `min-width: 0` alone, a row of fields took the width of the chosen words
   and a phone scrolled sideways. */
.choices-now { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choices-caret { flex: none; color: var(--ink-quiet); }
.choices-list {
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gap-xs) 0;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.choices-group {
  padding: var(--gap-s) var(--gap-m) var(--gap-xs);
  font-size: var(--text-caption);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* A line wraps and is never cut: its end is often what tells two lines apart. */
.choices-list button {
  display: block;
  width: 100%;
  height: auto;
  min-height: var(--control);
  padding: var(--gap-s) var(--gap-m);
  font-family: var(--font);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.choices-list button:hover, .choices-list button:focus-visible { filter: none; background: var(--page); outline: none; }
.choices-list button[aria-selected=true] { color: var(--accent); font-weight: 600; }
.choices-list button[disabled] { color: var(--ink-faint); cursor: default; background: none; }
/* ==== own lists: end ==== */

/* ==== own tooltips: begin ==== */
/* The page's own tooltip, the same text in three benches (see app.js). Fixed
   to the window, because a table that scrolls would cut it. It takes no
   pointer, so it is never in the way of what is under it. */
.own-tip {
  position: fixed;
  z-index: 1100;
  max-width: min(26rem, calc(100vw - 16px));
  padding: var(--gap-s) var(--gap-m);
  border-radius: 6px;
  background: var(--ink);
  color: var(--page);
  font-family: var(--font);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}
.own-tip[hidden] { display: none; }
/* In the top layer a browser centres a box and gives it a border and a
   scrollbar. This one is placed by the page and has neither. */
.own-tip[popover] { inset: auto; margin: 0; border: 0; overflow: visible; }
/* ==== own tooltips: end ==== */