/* The ALPEN chrome: a dense, flat, square-cornered surface. It overrides the
   shared sheet rather than replacing it — the runtime's own elements (inputs,
   buttons, the dialog frame) keep their behaviour and take these colours.

   Three typefaces, each doing one job, all self-hosted: a compliance tool should not
   hand every visitor's address to a font CDN on page load, and a page that
   needs the network to render is a page that renders wrong on a bad one.

     Geist          headings and figures — the things you read first
     Inter          prose and table cells — the things you read most
     JetBrains Mono every label, nav item and button, uppercase and tracked —
                    the things you read *as* labels rather than as sentences

   Nothing is rounded and nothing casts a shadow. Depth is a border and a
   shade of grey, which is what makes a dense screen stay legible: a hundred
   rounded cards with soft edges read as a pile, a hundred square ones read
   as a table. */

@font-face {
    font-family: 'Geist';
    src: url('../static/font/geist.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'InterVar';
    src: url('../static/font/inter.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../static/font/jetbrainsmono.woff2') format('woff2');
    font-weight: 100 800;
    font-display: swap;
}

:root {
    --alp-sans: 'InterVar', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2';
    --alp-head: 'Geist', var(--alp-sans);
    --alp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --alp-ink: #08090a;
    --alp-page: #f9f9f9;
    --alp-card: #ffffff;
    --alp-shade: #f4f4f4;
    --alp-line: #e5e7eb;
    --alp-line-strong: #08090a;
    --alp-text: #45474a;
    --alp-head-ink: #08090a;
    --alp-quiet: #6b7280;
    --alp-faint: #9ca3af;
    --alp-accent: #1c7363;
    --alp-accent-hover: #27a18b;
    --alp-accent-soft: #e7f3f0;
    --alp-danger: #ba1a1a;
    --alp-danger-soft: #fdecec;
    --alp-warn: #b45309;
    --alp-warn-soft: #fdf1e3;
    --alp-bar: 56px;
}

/* One label treatment, everywhere a word is a label rather than a sentence:
   the nav, the buttons, the column heads, the small print above a figure. */
.alp-rail-item,
.alp-button,
.alp-add,
.alp-table th,
.alp-label,
.alp-tag,
.alp-pill {
    font-family: var(--alp-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

h1, h2, h3,
.alp-balance-figure,
.alp-mark {
    font-family: var(--alp-head);
    letter-spacing: -0.02em;
}

/* Square, all of it. The pill shapes that stay round say so themselves. */
.alp-panel, .alp-card, .alp-wallet, .alp-button, .alp-add, .alp-field,
.alp-field input, .alp-select, .alp-table, .alp-code, .alp-addr-full,
.alp-modal-card, .alp-transit-qr, .alp-icon-button, .alp-tag, .alp-search,
input, select, textarea, button {
    border-radius: 0;
}

.alp-panel, .alp-card, .alp-wallet, .alp-modal-card {
    box-shadow: none;
}

body {
    margin: 0;
    background: var(--alp-page);
    color: var(--alp-text);
    font-family: var(--alp-sans);
    font-size: 14px;
    line-height: 1.55;
}

.alp-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- the bar */

.alp-bar {
    height: var(--alp-bar);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 18px;
    border-bottom: 1px solid var(--alp-line);
}

.alp-bar-dark {
    background: var(--alp-card);
    color: var(--alp-head-ink);
}

.alp-mark {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--alp-head-ink);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
}

.alp-mark img {
    display: block;
    width: 22px;
    height: 22px;
}

.alp-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alp-pill {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--alp-line);
    color: var(--alp-text);
    text-decoration: none;
}

.alp-pill-on {
    background: var(--alp-ink);
    color: #fff;
    border-color: var(--alp-ink);
}

.alp-company {
    appearance: none;
    background: var(--alp-card);
    color: var(--alp-head-ink);
    border: 1px solid var(--alp-line);
    padding: 6px 28px 6px 10px;
    font-family: var(--alp-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.alp-company:hover {
    border-color: var(--alp-line-strong);
}

.alp-company option {
    color: var(--alp-text);
}

.alp-who {
    font-family: var(--alp-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 14px;
    opacity: 0.85;
}

.alp-icon-button svg {
    width: 16px;
    height: 16px;
    display: block;
}

.alp-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.alp-icon-button {
    background: transparent;
    border: none;
    color: var(--alp-quiet);
    cursor: pointer;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.alp-icon-button:hover {
    color: var(--alp-head-ink);
}

/* --- signed out */

.alp-auth {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: 56px 20px;
}

.alp-card {
    background: var(--alp-card);
    border: 1px solid var(--alp-line);
    border-radius: 6px;
    padding: 40px 48px 44px;
    width: 100%;
    max-width: 520px;
}

.alp-card h1 {
    font-size: 34px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 20px;
}

.alp-card p.alp-lede {
    text-align: center;
    margin: 0 0 12px;
    color: var(--alp-text);
}

.alp-field {
    position: relative;
    margin-bottom: 18px;
}

.alp-field input {
    width: 100%;
    box-sizing: border-box;
    /* The right padding leaves room for the eye toggle a password field
       carries; every other field simply has a wide right margin. */
    padding: 11px 44px 11px 13px;
    border: 1px solid var(--alp-line);
    border-radius: 8px;
    font: inherit;
    line-height: 20px;
    background: #fff;
    color: var(--alp-text);
}

.alp-field input:focus,
.alp-select:focus {
    outline: none;
    border-color: var(--alp-ink);
    box-shadow: 0 0 0 3px rgba(11, 14, 23, 0.08);
}

.alp-field input::placeholder {
    color: var(--alp-quiet);
}

.alp-field input::placeholder {
    color: var(--alp-quiet);
}

.alp-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--alp-quiet);
    padding: 4px;
}

.alp-go {
    display: block;
    margin: 26px auto 0;
    min-width: 150px;
    padding: 12px 34px;
    border: none;
    border-radius: 999px;
    background: var(--alp-ink);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.alp-go:disabled {
    background: var(--alp-quiet);
    cursor: default;
}

.alp-alt {
    text-align: center;
    margin: 18px 0 0;
}

.alp-alt a {
    color: var(--alp-text);
    font-weight: 700;
}

.alp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
}

.alp-error {
    color: var(--alp-danger);
    text-align: center;
    margin: 16px 0 0;
}

.alp-note {
    color: var(--alp-accent);
    text-align: center;
    margin: 16px 0 0;
}

/* --- signed in */

.alp-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    align-items: stretch;
}

.alp-rail {
    background: var(--alp-card);
    border-right: 1px solid var(--alp-line);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.alp-rail-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    color: var(--alp-quiet);
    text-decoration: none;
}

.alp-rail-item:hover {
    background: var(--alp-shade);
    color: var(--alp-text);
}

/* Where you are: the accent and a shade behind it, no weight change — a nav
   that bolds the current item shifts every row beside it. */
.alp-rail-on,
.alp-rail-on:hover {
    background: var(--alp-shade);
    color: var(--alp-accent);
}

.alp-rail-off {
    color: var(--alp-quiet);
    cursor: default;
}

.alp-rail-off:hover {
    background: transparent;
}

.alp-rail-quiet {
    margin-top: auto;
    color: var(--alp-quiet);
}

.alp-rail-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.alp-rail-icon svg {
    width: 16px;
    height: 16px;
}

.alp-main {
    min-width: 0;
    padding: 18px 20px;
}

.alp-panel {
    background: var(--alp-card);
    border: 1px solid var(--alp-line);
    padding: 18px 20px;
    margin-bottom: 24px;
}

.alp-panel h2 {
    margin: 0 0 18px;
    font-size: 20px;
}

.alp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.alp-panel-head h2 {
    margin: 0;
}

.alp-button {
    padding: 7px 14px;
    border: 1px solid var(--alp-line);
    background: #fff;
    color: var(--alp-text);
    cursor: pointer;
    line-height: 1.5;
}

.alp-button:hover:not(:disabled) {
    border-color: var(--alp-line-strong);
    color: var(--alp-head-ink);
}

.alp-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.alp-table {
    width: 100%;
    border-collapse: collapse;
}

.alp-table th {
    text-align: left;
    font-size: 10px;
    color: var(--alp-faint);
    padding: 7px 14px 7px 0;
    border-bottom: 1px solid var(--alp-line);
}

.alp-table td {
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--alp-line);
    vertical-align: middle;
}

.alp-table tbody tr:hover {
    background: var(--alp-shade);
}

/* --- what narrows a long list, and which page of it is being read */

/* Above the table: the controls that narrow it, wrapping on a phone rather
   than squeezing each other into unreadable widths. */
.alp-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 4px 0 16px;
}

.alp-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.alp-filter-name {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--alp-faint);
}

.alp-filter .alp-select {
    min-width: 160px;
}

/* Under it. The count carries the free space between itself and the two
   steps, so the buttons sit together at the right where a thumb is. */
.alp-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.alp-pager-count {
    margin-right: auto;
    font-size: 13px;
    color: var(--alp-quiet);
}

.alp-pager button:disabled {
    opacity: 0.4;
    cursor: default;
}

.alp-search {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border: 1px solid var(--alp-text);
    border-radius: 8px;
    font: inherit;
    margin-bottom: 20px;
}

/* The shared sheet dresses an input for a dark console; every input here is
   on white, so the colours are said outright rather than inherited. */
.alp-shell input,
.alp-shell select,
.alp-shell textarea {
    background: #fff;
    color: var(--alp-text);
}



.alp-wallet-name {
    font-weight: 700;
}

.alp-wallet-keys {
    color: var(--alp-quiet);
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.alp-add {
    display: block;
    width: 220px;
    margin: 20px auto 4px;
    padding: 16px 0;
    border: 1px dashed var(--alp-line);
    background: transparent;
    color: var(--alp-text);
    font: inherit;
    cursor: pointer;
    text-align: center;
}

.alp-empty {
    text-align: center;
    color: var(--alp-quiet);
    padding: 40px 0 0;
}

.alp-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.alp-inline input {
    flex: 1 1 auto;
    max-width: 320px;
    padding: 12px 14px;
    border: 1px solid var(--alp-text);
    border-radius: 8px;
    font: inherit;
}

/* --- the footer */

.alp-foot {
    background: var(--alp-card);
    color: var(--alp-faint);
    border-top: 1px solid var(--alp-line);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--alp-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.alp-faq {
    border: 1px solid var(--alp-line);
    padding: 5px 12px;
    color: var(--alp-quiet);
    text-decoration: none;
}

.alp-wallet-act {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alp-network {
    padding: 8px 12px;
    border: 1px solid var(--alp-line);
    border-radius: 999px;
    font: inherit;
}

/* --- the rail's wallet selector, and what a wallet's own page is made of */

.alp-rail-wallet {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    margin-bottom: 12px;
    border: 1px solid var(--alp-line);
    background: var(--alp-card);
    font-family: var(--alp-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

span.alp-rail-wallet {
    display: block;
    font-weight: 400;
    color: var(--alp-quiet);
}

.alp-wallet {
    border: 1px solid var(--alp-line);
    border-radius: 10px;
    background: var(--alp-card);
    padding: 13px 18px;
    /* Each wallet is its own card. They used to be flush — a -1px margin
       collapsing the shared border — which read as one block of ruled lines
       rather than as a list of things each of which is clickable. */
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--alp-text);
}

/* The name, and under it the chains it can be paid on. Two lines, so the
   names line up down the left edge whatever each wallet is on. */
.alp-wallet-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.alp-wallet-nets {
    color: var(--alp-quiet);
    font-size: 13px;
}


.alp-wallet:hover {
    background: var(--alp-shade);
    border-color: var(--alp-line-strong);
}

/* The chevron sits after the balance, not pushed on its own: two things in
   one row each claiming the free space split it between them, which left the
   balance stranded in the middle. One auto margin per row. */
.alp-wallet-go {
    color: var(--alp-quiet);
    font-size: 22px;
    line-height: 1;
}

.alp-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alp-button-on {
    background: var(--alp-ink);
    color: #fff;
    border-color: var(--alp-ink);
}

.alp-button-small {
    padding: 4px 10px;
    font-size: 10px;
}

.alp-balance {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.alp-balance-figure {
    font-size: 40px;
    font-weight: 300;
}

.alp-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    word-break: break-all;
}

/* A currency reads as its mark and its ticker together, so the two never
   wrap apart from each other. */
.alp-coin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.alp-coin img {
    display: block;
    border-radius: 50%;
}

.alp-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

/* A square that holds one drawn glyph in its middle. The centring has to be
   said: these were characters once, and a line box centred them by accident
   — an svg is a block and lands wherever the padding leaves it. */
.alp-icon {
    background: transparent;
    border: 1px solid var(--alp-line);
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--alp-quiet);
}

.alp-icon:hover {
    border-color: var(--alp-line-strong);
    color: var(--alp-head-ink);
}

.alp-row-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.alp-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 14, 23, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.alp-modal-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    /* A form is read down its left edge. Centring one makes every line start
       somewhere different, which is why the announcements opt in instead. */
    text-align: left;
    max-width: 420px;
    width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.alp-modal-wide {
    max-width: 680px;
}

/* The only part that scrolls, so the buttons stay put however long the form
   is. The side padding is the card's, borrowed back, so a focus ring is not
   clipped by the scroll box. */
.alp-modal-body {
    overflow-y: auto;
    min-height: 0;
    margin: 0 -32px;
    padding: 2px 32px;
    /* The standard pair, not the webkit pseudo-elements: Chrome honours
       scrollbar-width and then ignores ::-webkit-scrollbar, so setting both
       leaves the platform's own dark overlay bar down the side of a white
       card. */
    scrollbar-width: thin;
    scrollbar-color: var(--alp-line) transparent;
}

.alp-centred {
    text-align: center;
}

/* Wherever a labelled field lands — a centred auth card, a modal — the label
   sits over its control's left edge, because that is where reading starts. */
.alp-labelled {
    text-align: left;
}

.alp-modal-card h2 {
    margin: 0 0 18px;
}

.alp-modal-card .alp-key {
    margin: 18px 0;
}

/* A popup asks, so what it holds reads left to right — only the title and a
   QR are centred, and both say so themselves. */
.alp-centred .alp-key,
.alp-centred p {
    text-align: center;
}

.alp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.alp-modal-head h2 {
    margin: 0;
}

/* A checkbox underneath — the track and the knob are drawn here, so the
   control keeps the keyboard and the screen reader a checkbox has. */
.alp-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
}

.alp-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.alp-switch-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: #d7dbe3;
    transition: background 120ms ease;
    flex: none;
}

.alp-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 120ms ease;
}

.alp-switch input:checked + .alp-switch-track {
    background: #f0a500;
}

.alp-switch input:checked + .alp-switch-track::after {
    transform: translateX(16px);
}

.alp-switch input:focus-visible + .alp-switch-track {
    outline: 2px solid #0b0e17;
    outline-offset: 2px;
}

/* An address holding none of its network's coin. It may hold any amount of a
   token and still be unable to move it — a TRC-20 transfer is paid for in TRX
   — so the zero is the thing to read, not a quiet absence of a number. */
.alp-fee-empty {
    color: var(--alp-warn);
}

/* What a wallet is, said next to its name. */
.alp-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    background: var(--alp-warn-soft);
    color: var(--alp-warn);
    font-size: 10px;
    letter-spacing: 0.06em;
    vertical-align: middle;
}

.alp-wallet-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alp-wallet-head img {
    border-radius: 50%;
    flex: none;
}

/* A link that leaves: underlined on hover only, so a table of them does not
   read as a wall of blue. */
.alp-out {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #b9bec9;
}

.alp-out:hover {
    border-bottom-style: solid;
    color: #0b0e17;
}

/* Three prices to choose between, each a row that is the whole target — a
   radio you have to hit exactly is a radio people mis-click. */
.alp-speeds {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alp-speed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e6e8ee;
    border-radius: 8px;
    cursor: pointer;
}

.alp-speed-on {
    border-color: #0b0e17;
    background: #f7f8fa;
}

.alp-speed-name {
    flex: 1;
    text-transform: capitalize;
    font-weight: 600;
}

/* Money in and money out, told apart at a glance and not only by a sign. */
.alp-move {
    font-weight: 600;
    white-space: nowrap;
}

.alp-move-in {
    color: #1a7f4b;
}

.alp-move-out {
    color: #a8324a;
}

.alp-wallet-mark {
    border-radius: 50%;
    flex: none;
}

.alp-modal-foot {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--alp-line);
}

.alp-label {
    display: block;
    margin: 16px 0 6px;
    font-size: 13px;
    color: #6b7280;
}

.alp-select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--alp-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    line-height: 20px;
    color: var(--alp-text);
}

.alp-networks {
    margin-top: 6px;
}

.alp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    border-bottom: 1px solid #f1f2f5;
}

.alp-check:last-child {
    border-bottom: 0;
}

.alp-check img {
    border-radius: 50%;
    flex: none;
}

/* The name takes the slack, which is what puts the tick on the right edge
   and lines the column of them up. */
.alp-check-name {
    flex: 1;
    min-width: 0;
}

.alp-check input {
    flex: none;
    margin: 0;
}

.alp-button-go {
    background: #0b0e17;
    color: #fff;
    border-color: #0b0e17;
}

/* Two fields on one line: where a key reaches and how long it lasts are one
   sentence about the same key, and neither needs the whole width. */
.alp-two {
    display: flex;
    gap: 14px;
}

.alp-two > * {
    flex: 1 1 0;
    min-width: 0;
}

.alp-two .alp-select {
    flex: 1 1 0;
    min-width: 0;
}

/* A field that says what it is. A placeholder disappears the moment anything
   is typed, so a form built out of placeholders is one nobody can re-read. */
.alp-labelled {
    margin-bottom: 18px;
    min-width: 0;
}

.alp-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--alp-ink);
    margin-bottom: 6px;
}

.alp-hint {
    font-size: 12px;
    line-height: 17px;
    color: var(--alp-quiet);
    margin: 0 0 7px;
}

.alp-labelled .alp-field {
    margin-bottom: 0;
}

/* One family of permissions. Two families can each have a "read", so the
   heading is not decoration — it is what tells them apart. */
.alp-family {
    margin-top: 14px;
}

.alp-family:first-child {
    margin-top: 0;
}

.alp-family-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--alp-quiet);
    margin: 0 0 8px;
}

/* Two columns where there is room, one where there is not. A permission is a
   name and a reason, and the reason is the half that decides anything. */
.alp-acls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px 20px;
    margin-bottom: 4px;
}

.alp-acl {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    line-height: 19px;
    cursor: pointer;
}

.alp-acl input {
    margin: 1px 0 0;
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--alp-ink);
}

.alp-acl-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.alp-acl-name {
    font-weight: 500;
}

.alp-acl-why {
    font-size: 12px;
    line-height: 16px;
    color: var(--alp-quiet);
}

/* A key that no longer works still has a row, because when it stopped is
   worth reading; it is dimmed rather than dropped. */
.alp-row-off td {
    opacity: 0.5;
}

/* A cell with nothing to say says so. An empty one reads as a bug. */
.alp-none {
    color: var(--alp-quiet);
}

.alp-quiet-line {
    color: var(--alp-quiet);
    font-size: 13px;
    margin: 0 0 14px;
}

/* A cell that is a warning rather than a value. "anywhere" is a true answer
   to where a key may be used from, and the wrong one to read past. */
.alp-warn-line {
    color: var(--alp-danger);
    white-space: nowrap;
}

/* A row that needs attention, and the line under it that says why. A red dot
   is a thing to notice; this is a thing to act on. */
.alp-row-warn td {
    background: rgba(220, 38, 38, 0.06);
}

.alp-row-warn .alp-warn-line {
    white-space: normal;
}

.alp-grow {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

/* What the far end said, kept small and clipped: it is evidence, not prose. */
.alp-said {
    font-size: 12px;
    word-break: break-all;
}

/* A button that sits beside a field rather than under one: it should be as
   tall as the input it is next to, not as tall as its own padding. */
.alp-button-fit {
    flex: none;
    align-self: stretch;
}

/* Three fields across, falling to one when there is no room for three. The
   password card was the only place with a three-up row and it had its own
   spacing; it uses the same labelled field as every other form now. */
.alp-three .alp-labelled {
    margin-bottom: 0;
}

/* A short list of facts about one thing: the label narrow and quiet, the
   value beside it. Two of them separated by spaces in a paragraph were one
   line, because HTML collapses exactly the thing doing the separating. */
.alp-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 20px;
    margin: 0;
}

.alp-facts dt {
    color: var(--alp-quiet);
    font-size: 13px;
    align-self: center;
}

.alp-facts dd {
    margin: 0;
    font-weight: 500;
    /* An id is one long word with nothing to break at, and a grid column
       that will not break one is a card that scrolls sideways. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* What a wallet holds, in the row for that wallet. The only thing in the row
   that claims the free space, so it goes hard right with the chevron behind
   it, and the column of amounts lines up at the end to be read down. */
.alp-wallet-held {
    margin-left: auto;
    padding-right: 18px;
    text-align: right;
    white-space: nowrap;
}

/* The unit beside the headline figure, which is a number and needs saying
   what of. */
.alp-balance-unit {
    font-size: 18px;
    font-weight: 600;
    margin: 0 10px 0 6px;
}

/* A body, shown as it was sent or as it came back. Monospaced because it is
   a document somebody's code produced, wrapped because a JSON line can be
   longer than any card, and scrolled because a 4 KB answer should not make
   the dialog taller than the screen. */
.alp-code {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 17px;
    background: var(--alp-page);
    border: 1px solid var(--alp-line);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0;
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* The facts above the two bodies read as a short table, not a form. */
.alp-modal-body .alp-facts {
    margin-bottom: 20px;
}

/* A transit's address is the page: it is what somebody is being paid into,
   so it is readable at a glance and the code sits beside it rather than
   behind a button. The two stack on a narrow screen, code first, because a
   phone is where a code is most likely to be pointed at. */
.alp-transit-address {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 0 4px;
}

.alp-transit-qr {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--alp-line);
    border-radius: 10px;
    padding: 10px;
    line-height: 0;
}

.alp-transit-value {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* An address and the button that copies it: two things that belong together
   and must not touch. h() writes adjacent nodes with no whitespace between
   them, so the gap has to be said. */
.alp-addr {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* The whole address, never shortened. A transit's address is the one string
   on this screen that has to be right, and an ellipsis in the middle of it
   is a thing a person cannot check against what they pasted. */
.alp-addr-full {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    line-height: 22px;
    word-break: break-all;
    background: var(--alp-page);
    border: 1px solid var(--alp-line);
    border-radius: 8px;
    padding: 12px 14px;
}

/* A name that opens something, in a table that is otherwise plain text. */
.alp-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--alp-line);
}

.alp-link:hover {
    border-bottom-color: currentColor;
}

.alp-qr-big {
    display: flex;
    justify-content: center;
    padding: 4px 0 18px;
    line-height: 0;
}

/* The mark on a warning line, drawn rather than typed — see alpen-icon.js
   for why none of these is a character any more. */
.alp-warn-mark {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 6px;
}

.alp-warn-mark svg {
    width: 15px;
    height: 15px;
}

.alp-eye svg {
    width: 16px;
    height: 16px;
    display: block;
}

.alp-warn-after {
    margin: 0 0 0 5px;
}

/* The address a send goes out from: stated, not chosen, so it reads as a
   fact of the dialog rather than a field somebody has still to fill. */
.alp-from {
    margin: 0;
    padding: 9px 11px;
    background: var(--alp-shade);
    border: 1px solid var(--alp-line);
    word-break: break-all;
}

/* A dropdown that can carry a mark on every line, which a native select
   cannot. The panel sits over whatever is under it rather than pushing the
   dialog taller, and the dialog scrolls it into view if it has to. */
.alp-pick {
    position: relative;
}

.alp-pick-button {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--alp-line);
    background: var(--alp-card);
    color: var(--alp-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.alp-pick-button:hover,
.alp-pick-open .alp-pick-button {
    border-color: var(--alp-line-strong);
}

/* Drawn rather than typed, like every other mark here. */
.alp-pick-caret {
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--alp-faint);
}

/* Wider than the field when it has to be: this one sits in a half-width
   column, and a network name is longer than the column — wrapping "BNB Smart
   Chain" over three lines is what a native select did and the reason for
   replacing it.

   It grows leftward, because the only field that has one is the right-hand
   of a pair and growing right would put it outside the dialog. A picker in
   a left-hand column would want the opposite, and would have to measure to
   know; there is no such picker, and guessing at one now would be a rule
   written for a case that does not exist. */
.alp-pick-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    right: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    max-height: 272px;
    overflow: auto;
    background: var(--alp-card);
    border: 1px solid var(--alp-line-strong);
    padding: 3px;
}

.alp-pick-option {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 8px;
    border: 0;
    background: transparent;
    color: var(--alp-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.alp-pick-option:hover:not(:disabled) {
    background: var(--alp-shade);
}

.alp-pick-option:disabled {
    opacity: 0.4;
    cursor: default;
}

.alp-pick-on {
    color: var(--alp-accent);
}

/* What separates the live networks from the ones that are not money. */
/* A heading inside the panel: a currency, or the one line that says nothing
   below it is money. The mark sits beside the word, so a currency is found by
   its logo at a glance rather than by reading six tickers. */
.alp-pick-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--alp-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--alp-faint);
    padding: 10px 8px 4px;
    margin-top: 3px;
    border-top: 1px solid var(--alp-line);
}

/* The first heading of a side needs no rule above it — the panel's own edge is
   one — and the test line wants the heavier break, being the boundary that
   matters. */
.alp-pick-panel > .alp-pick-group:first-child {
    border-top: 0;
    margin-top: 0;
}

.alp-pick-test {
    color: var(--alp-warn);
    border-top-width: 2px;
}

.alp-pick-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

/* The button itself does have to fit its column, so a long name there is cut
   rather than wrapped — the panel is where the whole of it is read. */
.alp-pick-button .alp-pick-line {
    overflow: hidden;
}

.alp-pick-button .alp-pick-line span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.alp-pick-line img {
    flex: 0 0 18px;
}

.alp-pick-line b {
    font-weight: 600;
}

/* --- what Alpen adds to the sheet it took over: a checklist and its documents */

/* The product's name beside the mark, said in the label voice. */
.alp-bar-title {
    font-family: var(--alp-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--alp-quiet);
}

/* Where a section stands, as a tag. Four tones, each the colour the word
   already has in a person's head: grey for nothing yet, blue for waiting on
   a reviewer, green for passed, amber for sent back. */
.alp-status {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--alp-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.alp-status-quiet {
    background: var(--alp-shade);
    color: var(--alp-quiet);
    border-color: var(--alp-line);
}

.alp-status-waiting {
    background: #e8f0fb;
    color: #1d4f91;
}

.alp-status-good {
    background: var(--alp-accent-soft);
    color: var(--alp-accent);
}

.alp-status-warn {
    background: var(--alp-warn-soft);
    color: var(--alp-warn);
}

/* How far a checklist has got, drawn rather than counted out: approved in
   the accent, waiting in blue, sent back in amber, the rest the track. */
.alp-progress {
    display: flex;
    height: 6px;
    width: 100%;
    min-width: 120px;
    background: var(--alp-shade);
    overflow: hidden;
}

.alp-progress span {
    display: block;
    height: 100%;
}

.alp-progress-good {
    background: var(--alp-accent);
}

.alp-progress-waiting {
    background: #3b74c4;
}

.alp-progress-warn {
    background: var(--alp-warn);
}

.alp-progress-line {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
}

.alp-progress-words {
    font-size: 12px;
    color: var(--alp-quiet);
    white-space: nowrap;
}

/* One section of a checklist: its number and name, what it covers, where it
   stands, and under it the documents and the reviewer's note. */
.alp-section {
    border: 1px solid var(--alp-line);
    background: var(--alp-card);
    padding: 14px 18px;
    margin-bottom: 8px;
}

.alp-section-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.alp-section-no {
    font-family: var(--alp-mono);
    font-size: 11px;
    color: var(--alp-faint);
    width: 24px;
    flex: none;
    padding-top: 3px;
}

.alp-section-title {
    flex: 1 1 auto;
    min-width: 0;
}

.alp-section-title b {
    font-family: var(--alp-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--alp-head-ink);
}

.alp-section-covers {
    color: var(--alp-quiet);
    font-size: 13px;
    margin-top: 2px;
}

.alp-section-act {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* The documents under a section: a row each, name first, then size and who,
   then what can be done with it. */
.alp-docs {
    list-style: none;
    margin: 12px 0 0 38px;
    padding: 0;
}

.alp-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--alp-line);
}

.alp-doc:first-child {
    border-top: 0;
}

.alp-doc-icon {
    display: inline-flex;
    color: var(--alp-faint);
}

.alp-doc-icon svg {
    width: 16px;
    height: 16px;
}

.alp-doc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--alp-head-ink);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.alp-doc-name:hover {
    text-decoration: underline;
}

.alp-doc-meta {
    color: var(--alp-quiet);
    font-size: 12px;
    white-space: nowrap;
}

/* The reviewer's note, under the documents: what was said, by whom, when. */
.alp-review-note {
    margin: 12px 0 0 38px;
    padding: 10px 12px;
    border-left: 3px solid var(--alp-warn);
    background: var(--alp-warn-soft);
    font-size: 13px;
}

.alp-review-note-good {
    border-left-color: var(--alp-accent);
    background: var(--alp-accent-soft);
}

.alp-review-who {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--alp-quiet);
}

/* A row in the suppliers table that is waiting on somebody carries a mark. */
.alp-attention {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--alp-warn);
    white-space: nowrap;
}

.alp-attention svg {
    width: 14px;
    height: 14px;
}

/* A place to drop files, which is also a button. */
.alp-drop {
    margin: 12px 0 0 38px;
    padding: 12px;
    border: 1px dashed var(--alp-line);
    color: var(--alp-quiet);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

.alp-drop:hover,
.alp-drop-over {
    border-color: var(--alp-line-strong);
    color: var(--alp-text);
    background: var(--alp-shade);
}

.alp-drop input {
    display: none;
}

/* A name that opens something, in a table that is otherwise plain text. */
.alp-row-link {
    color: var(--alp-head-ink);
    font-weight: 600;
    text-decoration: none;
}

.alp-row-link:hover {
    text-decoration: underline;
}

/* The way back, above a page about one thing. */
.alp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--alp-quiet);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 14px;
}

.alp-back:hover {
    color: var(--alp-head-ink);
}

.alp-back svg {
    width: 14px;
    height: 14px;
    transform: scaleX(-1);
}

/* A multi-line field in a dialog: the reviewer's note, a supplier's notes. */
.alp-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 88px;
    padding: 11px 13px;
    border: 1px solid var(--alp-line);
    font: inherit;
    line-height: 20px;
    resize: vertical;
    color: var(--alp-text);
}

.alp-field textarea:focus {
    outline: none;
    border-color: var(--alp-ink);
    box-shadow: 0 0 0 3px rgba(11, 14, 23, 0.08);
}

/* The two sides of the template page: a standard row is the tree's and says
   so; an added one says who added it. */
.alp-standard {
    color: var(--alp-faint);
    font-size: 11px;
    font-family: var(--alp-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}