/*
  One stylesheet for both writing directions.

  Every edge-sensitive rule uses a logical property - margin-inline-start rather than
  margin-left, border-inline-end rather than border-right - so the Persian layout is the
  same stylesheet read right-to-left rather than a mirrored copy that drifts out of sync
  with the English one the first time somebody edits only one of them.
*/

:root {
    --bg: #0b0e14;
    --bg-raised: #131822;
    --bg-sunken: #080a10;
    --border: #232a38;
    --border-strong: #333d50;

    --text: #e6e9ef;
    --text-muted: #8b95a8;
    --text-faint: #5d6779;

    --accent: #4f9dff;
    --accent-soft: rgba(79, 157, 255, 0.14);
    --accent-text: #9dc8ff;

    --good: #3fcf8e;
    --good-soft: rgba(63, 207, 142, 0.14);
    --bad: #ff6b6b;
    --bad-soft: rgba(255, 107, 107, 0.14);
    --warn: #f5c451;
    --warn-soft: rgba(245, 196, 81, 0.14);

    --radius: 10px;
    --radius-sm: 6px;

    --font: system-ui, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.24);
}

/* Persian and Arabic read better with a taller line box than Latin at the same size,
   because the descenders and diacritics need the room. */
html[dir="rtl"] {
    --font: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
    line-height: 1.85;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6f8fb;
        --bg-raised: #ffffff;
        --bg-sunken: #eef1f6;
        --border: #dde3ec;
        --border-strong: #c3ccdb;

        --text: #131722;
        --text-muted: #5b6678;
        --text-faint: #8b95a8;

        --accent: #1668d6;
        --accent-soft: rgba(22, 104, 214, 0.1);
        --accent-text: #1257b4;

        --good: #15803d;
        --good-soft: rgba(21, 128, 61, 0.12);
        --bad: #b91c1c;
        --bad-soft: rgba(185, 28, 28, 0.12);
        --warn: #a16207;
        --warn-soft: rgba(161, 98, 7, 0.12);

        --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
}

a {
    color: var(--accent-text);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    line-height: 1.3;
    margin: 0 0 0.5rem;
    font-weight: 650;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 1rem; }

/* Screen-reader escape hatch to the content, visible only when focused. */
.skip {
    position: absolute;
    inset-inline-start: -9999px;
}

.skip:focus {
    inset-inline-start: 1rem;
    top: 0.5rem;
    z-index: 50;
    background: var(--accent);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
}

/* ---- header ------------------------------------------------------------------------ */

.site-header {
    background: var(--bg-raised);
    border-block-end: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

.brand:hover { text-decoration: none; }

.brand-mark {
    color: var(--accent);
    font-size: 1.3rem;
}

.search {
    display: flex;
    flex: 1 1 320px;
    min-width: 0;
    gap: 0.5rem;
}

.search input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.85rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}

.search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- language picker --------------------------------------------------------------- */

.language-picker {
    position: relative;
}

.language-picker summary {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.language-picker summary::-webkit-details-marker { display: none; }

.language-picker[open] summary {
    border-color: var(--accent);
}

.language-picker ul {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.35rem);
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    min-width: 190px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 30;
}

.language-picker li a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text);
}

.language-picker li a:hover {
    background: var(--accent-soft);
    text-decoration: none;
}

.language-picker li a.current {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 600;
}

.language-picker small {
    color: var(--text-faint);
    font-size: 0.72rem;
}

/* ---- navigation -------------------------------------------------------------------- */

.site-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
    padding: 0.6rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    border-block-end: 2px solid transparent;
}

.site-nav a:hover {
    color: var(--text);
    text-decoration: none;
}

.site-nav a.active {
    color: var(--accent-text);
    border-block-end-color: var(--accent);
}

/* ---- layout ------------------------------------------------------------------------ */

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
}

.page-head {
    margin-block-end: 1.5rem;
}

.page-head .subtitle {
    color: var(--text-muted);
    margin: 0;
}

.site-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    border-block-start: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 0.82rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* ---- panels ------------------------------------------------------------------------ */

.panel {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-block-end: 1.5rem;
}

.panel > header {
    padding: 0.85rem 1.1rem;
    border-block-end: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.panel > header h2 {
    margin: 0;
    font-size: 0.95rem;
}

.panel-body {
    padding: 1.1rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
}

/* ---- stat tiles -------------------------------------------------------------------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 0.85rem;
    margin-block-end: 1.5rem;
}

.tile {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
}

.tile .label {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: 0.35rem;
}

.tile .value {
    font-size: 1.35rem;
    font-weight: 650;
    line-height: 1.2;
    word-break: break-word;
}

.tile .value.small { font-size: 1rem; }
.tile .note { color: var(--text-faint); font-size: 0.76rem; margin: 0.2rem 0 0; }

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

/*
  Wide tables scroll inside their own box. Without this the whole page scrolls sideways
  on a phone, which on an RTL layout also drags the reader away from the start of every
  other line on the page.
*/
.scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

th, td {
    padding: 0.62rem 0.9rem;
    text-align: start;
    border-block-end: 1px solid var(--border);
    white-space: nowrap;
}

th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-sunken);
}

tbody tr:last-child td { border-block-end: none; }

tbody tr:hover { background: var(--accent-soft); }

td.wrap, th.wrap { white-space: normal; }
td.numeric, th.numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* ---- definition lists -------------------------------------------------------------- */

.detail {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0;
    margin: 0;
}

.detail dt {
    padding: 0.62rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-block-end: 1px solid var(--border);
}

.detail dd {
    padding: 0.62rem 0;
    margin: 0;
    border-block-end: 1px solid var(--border);
    min-width: 0;
    overflow-wrap: anywhere;
}

.detail dt:last-of-type, .detail dd:last-of-type { border-block-end: none; }

@media (max-width: 640px) {
    .detail {
        grid-template-columns: 1fr;
    }

    .detail dt {
        border-block-end: none;
        padding-block-end: 0;
    }
}

/* ---- text helpers ------------------------------------------------------------------ */

/*
  Hashes and addresses stay left-to-right even on an RTL page: they are not text in the
  reader's language, and letting them reorder makes them wrong on screen and wrong when
  copied out of it.
*/
.mono {
    font-family: var(--font-mono);
    font-size: 0.86em;
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 0.82rem; }
.large { font-size: 1.1rem; }
.numeric { font-variant-numeric: tabular-nums; }

.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }

.empty {
    color: var(--text-muted);
    padding: 2rem 1rem;
    text-align: center;
}

.note {
    background: var(--bg-sunken);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    margin-block-end: 1rem;
    font-size: 0.88rem;
}

.note.warn-note { border-inline-start-color: var(--warn); }
.note.bad-note { border-inline-start-color: var(--bad); }
.note.good-note { border-inline-start-color: var(--good); }

.note p:last-child { margin-block-end: 0; }

/* ---- badges ------------------------------------------------------------------------ */

.badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--bg-sunken);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.badge.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.accent { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }

/* ---- code -------------------------------------------------------------------------- */

pre, code {
    font-family: var(--font-mono);
    font-size: 0.84rem;
    direction: ltr;
}

pre {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    overflow-x: auto;
    margin: 0 0 1rem;
    text-align: start;
}

code { background: var(--bg-sunken); padding: 0.1rem 0.35rem; border-radius: 4px; }
pre code { background: none; padding: 0; }

.bytes {
    max-height: 320px;
    overflow: auto;
    word-break: break-all;
    white-space: pre-wrap;
}

/*
  A code block with its own copy button. The button sits over the block's top corner rather than
  above it so that a page made of eight of these does not turn into eight rows of buttons; it is
  pinned to the logical end, which puts it on the left of a Persian page and out of the way of
  the command's first characters either way.
*/
.snippet {
    position: relative;
}

.snippet > .copy {
    position: absolute;
    top: 0.4rem;
    inset-inline-end: 0.4rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.5rem;
    z-index: 1;
}

.snippet > pre {
    /* Room for the button, so a long first line does not run underneath it. */
    padding-inline-end: 4.5rem;
}

/* ---- forms ------------------------------------------------------------------------- */

.field {
    margin-block-end: 1rem;
}

.field > label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-block-end: 0.35rem;
}

.field .hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0.3rem 0 0;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}

textarea {
    resize: vertical;
    min-height: 90px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* An address, key or amount field stays LTR whatever the page direction. */
input.mono-input, textarea.mono-input {
    font-family: var(--font-mono);
    direction: ltr;
    text-align: start;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-block-end: 0.75rem;
    font-size: 0.9rem;
}

.checkbox input { width: auto; margin-top: 0.3rem; }

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

button:hover, .button:hover { filter: brightness(1.1); text-decoration: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

button.secondary, .button.secondary {
    background: var(--bg-sunken);
    color: var(--text);
    border-color: var(--border-strong);
}

button.danger, .button.danger { background: var(--bad); }

button.link {
    background: none;
    border: none;
    color: var(--accent-text);
    padding: 0;
    font-weight: 500;
}

.actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-block-start: 1.25rem;
}

.field-error, .validation {
    color: var(--bad);
    font-size: 0.82rem;
    margin-block-start: 0.3rem;
}

/* ---- sparklines -------------------------------------------------------------------- */

/*
  One series per chart, so there is no legend to draw and no second hue to tell apart: the
  heading above each one names what is plotted, and the figure beside it carries the value the
  shape deliberately does not.

  Both colour schemes get their own steps from the variables at the top of this file rather than
  an opacity flip, so the accent stays the accent each mode actually chose.
*/
.charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    padding: 1.1rem;
}

.chart .label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.chart .value {
    display: block;
    font-size: 1.35rem;
    font-weight: 600;
    margin-block: 0.15rem 0.6rem;
}

/* Plain caption text, not the callout box .note carries elsewhere - the same override the
   stat tiles make for the same reason. */
.chart .note {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-faint);
    font-size: 0.75rem;
    margin: 0.4rem 0 0;
}

.spark {
    display: block;
    width: 100%;
    height: auto;

    /* Room under the baseline for the stroke itself, which straddles the coordinate. */
    overflow: visible;
}

/* The baseline is the only rule the chart needs; a grid behind fifteen bars is more ink than the
   data. Hairline, solid, and one step off the surface, so it stays under the reading. */
.spark .axis {
    stroke: var(--border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.spark-columns path {
    fill: var(--accent);
}

.spark-line .wash {
    /* A wash under the line, never a saturated block. */
    fill: var(--accent);
    opacity: 0.12;
}

.spark-line .line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;

    /* So the line stays 2px however wide the container makes the chart. */
    vector-effect: non-scaling-stroke;
}

.spark-line .end {
    fill: var(--accent);

    /* The ring in the surface colour keeps the marker legible where it sits on the line. */
    stroke: var(--bg-raised);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* ---- rent top-up ------------------------------------------------------------------- */

/* Separated from the figures above it by a rule rather than a heading alone: the panel states
   what is owed, and this is the part that does something about it. */
.rent-topup {
    margin-block-start: 1.1rem;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--border);
}

.rent-topup h3 {
    margin: 0 0 0.35rem;
}

.rent-topup .actions {
    margin-block-start: 0.75rem;
}

/* ---- pagination -------------------------------------------------------------------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-block-start: 1px solid var(--border);
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.pager .links { display: flex; gap: 0.4rem; }

/* ---- admin ------------------------------------------------------------------------- */

.admin-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 1.75rem;
    align-items: start;
}

@media (max-width: 800px) {
    .admin-layout { grid-template-columns: 1fr; }
}

.admin-nav {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-nav a {
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.88rem;
}

.admin-nav a:hover { background: var(--bg-sunken); color: var(--text); text-decoration: none; }
.admin-nav a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

.sign-in {
    max-width: 380px;
    margin: 4rem auto;
}

.translation-row textarea {
    min-height: 42px;
    font-family: var(--font);
    font-size: 0.88rem;
}

.translation-row .english {
    color: var(--text-muted);
    font-size: 0.85rem;
    direction: ltr;
    text-align: start;
}

.translation-row .key {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-faint);
    direction: ltr;
    text-align: start;
}

.progress {
    height: 6px;
    background: var(--bg-sunken);
    border-radius: 999px;
    overflow: hidden;
    min-width: 90px;
}

.progress > span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.progress.full > span { background: var(--good); }

/* ---- prose --------------------------------------------------------------------------- */

/*
  Running text wants a narrower column than a table does. Around 70 characters is the span the
  eye tracks without losing its place, and it matters more in Persian, where the line is taller
  and a full-width paragraph is genuinely hard to follow back to the start.
*/
.prose {
    max-width: 68ch;
}

.about-section {
    margin-block-end: 2rem;
}

.about-section:last-child {
    margin-block-end: 0;
}

.about-section h2 {
    margin-block-end: 0.6rem;
}

.about-section p {
    margin: 0;
    color: var(--text);
}

th.highlight, td.highlight {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 600;
}

a.start-tile {
    color: inherit;
    display: block;
}

a.start-tile:hover {
    border-color: var(--accent);
    text-decoration: none;
}

a.start-tile .label {
    color: var(--accent-text);
}

/* ---- the guide --------------------------------------------------------------------- */

/*
  A numbered list whose numbers come from CSS rather than from the text. Nine translated headings
  that each began with their own digit would all have to be renumbered the first time a step moved,
  in every language; a counter moves with the step.
*/
.guide {
    list-style: none;
    counter-reset: step;
    margin: 1rem 0 0;
    padding: 0;
}

.guide > li {
    counter-increment: step;
    position: relative;

    /* Logical, so the numbers sit on the right-hand side of a Persian page without a second rule. */
    padding-inline-start: 2.9rem;
    padding-block-end: 1.6rem;
}

.guide > li:last-child {
    padding-block-end: 0;
}

.guide > li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    top: 0.1rem;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The rule joining one number to the next, so the steps read as a sequence rather than as nine
   unrelated paragraphs. The last step has nothing to join to. */
.guide > li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.95rem;
    top: 2.3rem;
    bottom: 0.5rem;
    border-inline-start: 1px solid var(--border);
}

.guide h3 {
    margin-block-end: 0.35rem;
}

.guide p {
    margin-block-end: 0.6rem;
}

.guide p:last-child {
    margin-block-end: 0;
}

.guide-problem {
    border-block-end: 1px solid var(--border);
    padding-block: 0.7rem;
}

.guide-problem:last-child {
    border-block-end: none;
    padding-block-end: 0;
}

.guide-problem > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

.guide-problem[open] > summary {
    color: var(--accent-text);
    margin-block-end: 0.6rem;
}

.guide-problem p {
    margin-block-end: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.guide-problem pre {
    margin-block: 0.6rem 0;
}

/* ---- contract editor ---------------------------------------------------------------- */

.code-editor {
    width: 100%;
    min-height: 380px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    tab-size: 4;

    /* Source is always left-to-right, whatever language the surrounding page is in. */
    direction: ltr;
    text-align: start;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

details.call {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    margin-block-end: 0.6rem;
}

details.call > summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    direction: ltr;
    text-align: start;
}

details.call[open] > summary {
    margin-block-end: 0.75rem;
    color: var(--accent-text);
}

/* ---- recovery phrase --------------------------------------------------------------- */

.phrase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-block-end: 1rem;
}

.phrase-word {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    /* The words are English BIP-39 regardless of the page's language, and their numbering has
       to read in the same order as the paper the reader is copying them onto. */
    direction: ltr;
    text-align: start;
}

.phrase-word .index {
    color: var(--text-faint);
    font-size: 0.72rem;
    min-width: 1.4em;
    font-variant-numeric: tabular-nums;
}

.phrase-word .word {
    font-family: var(--font-mono);
    font-size: 0.9rem;

    /* Selectable, so somebody can copy one word without the numbering coming with it. */
    user-select: all;
}

/* ---- misc -------------------------------------------------------------------------- */

.toolbar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-block-end: 1rem;
}

.toolbar input[type="search"], .toolbar select { width: auto; min-width: 180px; }

.copy {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 0.8rem;
}

.copy:hover { color: var(--accent); filter: none; }

.spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 3s; }
    * { scroll-behavior: auto !important; }
}