/* PansarPost site theme (2026-10-30). Tokens and rules come from the brand
   guidelines in the parent repository: docs/reference/brand-guidelines.md.
   styles.css stays frozen for issued documents, whose stored HTML links it. */

@font-face {
    font-family: "Fraunces";
    src: url("/fonts/fraunces-heading.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/fonts/nunito.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Fraunces", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --radius: 14px;
    /* Layout: one centered column. The logo, the menu, titles and every box
       share its left and right edges. A box holds about 75 characters of
       18 px body text per line. The width is in px, not ch: ch follows each
       element's font size, which would move the edge of large headings. */
    --box-width: 880px;
    --page-edge: max(16px, calc((100% - var(--box-width)) / 2));
    /* Wide admin data tables only. */
    --page-width: 1040px;
    --paper: #f1f9ff;
    --surface: #ffffff;
    --paper-alt: #e2f2ff;
    --box-line: #bfe3ff;
    --logo-orange: #ff9213;
    --ink: #00316d;
    --muted: #485d73;
    --line: #d3e0ea;
    --brand: #39b5ff;
    --brand-ink: #00478a;
    --link-hover: #001a3d;
    --brand-soft: #d0ecff;
    --accent: #00478a;
    --accent-hover: #00316d;
    --accent-ink: #ffffff;
    --header-btn: #ffffff;
    --header-btn-ink: #00478a;
    --header-btn-hover: #d0ecff;
    --good: #00713e;
    --good-soft: #daf7e3;
    --warn: #8f520d;
    --warn-soft: #ffeecd;
    --bad: #b32322;
    --bad-soft: #ffe7e4;
    --danger: #be2323;
    --danger-hover: #a21a1b;
    --danger-ink: #ffffff;
    --header-from: #00478a;
    --header-to: #39b5ff;
    --shadow: 0 1px 2px rgba(0, 49, 109, 0.06), 0 8px 24px rgba(0, 49, 109, 0.08);
}

/* Dark tokens: the visitor's choice (data-theme, set by js/theme.js) wins over
   the system setting. Without JavaScript the system setting applies. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #05162e;
        --surface: #0b2140;
        --paper-alt: #071b37;
        --ink: #e8f0f6;
        --muted: #a5bacd;
        --line: #274064;
        --box-line: #1f4b70;
        --brand-ink: #78c7fd;
        --link-hover: #e8f0f6;
        --brand-soft: #0f304a;
        --accent: #39b5ff;
        --accent-hover: #78c7fd;
        --accent-ink: #00316d;
        --header-btn: #39b5ff;
        --header-btn-ink: #00316d;
        --header-btn-hover: #78c7fd;
        --good: #72d699;
        --good-soft: #12301e;
        --warn: #f2b966;
        --warn-soft: #3c260e;
        --bad: #f58b84;
        --bad-soft: #451e1c;
        --danger: #d33b36;
        --danger-hover: #be2323;
        --header-from: #0b2140;
        --header-to: #00478a;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #05162e;
    --surface: #0b2140;
    --paper-alt: #071b37;
    --ink: #e8f0f6;
    --muted: #a5bacd;
    --line: #274064;
    --box-line: #1f4b70;
    --brand-ink: #78c7fd;
    --link-hover: #e8f0f6;
    --brand-soft: #0f304a;
    --accent: #39b5ff;
    --accent-hover: #78c7fd;
    --accent-ink: #00316d;
    --header-btn: #39b5ff;
    --header-btn-ink: #00316d;
    --header-btn-hover: #78c7fd;
    --good: #72d699;
    --good-soft: #12301e;
    --warn: #f2b966;
    --warn-soft: #3c260e;
    --bad: #f58b84;
    --bad-soft: #451e1c;
    --danger: #d33b36;
    --danger-hover: #be2323;
    --header-from: #0b2140;
    --header-to: #00478a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
    color-scheme: light;
}

/* General */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    background: var(--paper);
    color: var(--ink);
    margin: 0;
}

h1, h2, h3, .title, .subtitle {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
}

/* Links: blue and always underlined. The underline is the link signal and
   works without colour and on touch. Hover makes the underline thicker and
   the colour shift clear, as on GOV.UK. The text does not move. The hover
   colour is a step as large as GOV.UK uses: darker navy in light mode
   (9.3:1 to 17.3:1), near white in dark mode. */
a {
    color: var(--brand-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--link-hover);
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 3px solid var(--brand-ink);
    outline-offset: 2px;
}

.margin-top {
    margin-top: 20px;
}

.full-width {
    width: 100%;
    table-layout: auto;
}

table {
    border-collapse: collapse;
}

th, td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}

th {
    color: var(--muted);
}

table tr:nth-child(even) {
    background-color: var(--paper-alt);
}

table.full-width th, table.full-width td {
    width: auto;
}

.left-aligned {
    text-align: left;
}

.right-aligned {
    text-align: right;
}

.center-aligned {
    text-align: center;
}

.small-font {
    font-size: 0.85em;
    color: var(--muted);
}

/* Footer: company identity on every page. No own background, so a short
   page shows no band below it. */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: 64px;
    padding: 28px var(--page-edge) 40px;
    border-top: 1px solid var(--line);
    font-size: 15px;
}

.site-footer p {
    margin: 0 0 4px;
}

.site-footer ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
}

/* Old logo. Frozen documents use /img/tank_logo.svg with this class. */
.flipped-image {
    transform: scaleX(-1);
}

/* Title */
.title {
    font-size: clamp(28px, 5vw, 40px);
    text-align: left;
    margin: 40px 16px 20px var(--page-edge);
    color: var(--ink);
}

.subtitle {
    font-size: 22px;
    text-align: left;
    margin: 36px 16px 12px var(--page-edge);
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    background-color: var(--surface);
    min-width: 200px;
    padding: 8px;
    z-index: 10;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.dropdown.is-open .dropdown-content {
    display: block;
}

.dropdown-content br {
    display: none;
}

.topbar .dropdown-content .topbar-link {
    display: block;
    white-space: nowrap;
}

.no-highlight {
    background-color: initial;
    color: initial;
}

/* Centered text box */
div.centered-text-box {
    box-sizing: border-box;
    width: min(var(--box-width), calc(100% - 32px));
    max-width: none;
    margin-left: var(--page-edge);
    margin-right: auto;
    margin-bottom: 20px;
    text-align: left;
    padding: 20px 24px;
    border: 1px solid var(--box-line);
    background: var(--surface);
    box-shadow: var(--shadow);
    border-radius: 18px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink);
    overflow-x: auto; /* Allow horizontal scrolling if needed */
}

/* Wide data tables on admin pages: wider, still centered. */
div.wide-text-box {
    width: min(var(--page-width), calc(100% - 32px));
    margin-left: max(16px, calc((100% - var(--page-width)) / 2));
}

@media (max-width: 700px) {
    :root {
        --page-edge: 12px;
    }

    div.centered-text-box,
    div.wide-text-box {
        width: auto;
        margin-left: 12px;
        margin-right: 12px;
        padding: 16px;
        font-size: 17px;
    }
}

textarea {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--muted);
    border-radius: 8px;
    padding: 8px 10px;
}

textarea.pgp-public-key {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Status messages. The leading word or icon carries the meaning; colour is a
   second cue. */
div.message,
div.message-green,
div.warning,
div.error {
    padding: 12px 16px;
    border: 1px solid transparent;
    border-left: 5px solid currentColor;
    border-radius: 10px;
    box-shadow: none;
}

div.message {
    background-color: var(--brand-soft);
    color: var(--brand-ink);
}

div.message-green {
    background-color: var(--good-soft);
    color: var(--good);
}

div.warning {
    background-color: var(--warn-soft);
    color: var(--warn);
}

div.error {
    background-color: var(--bad-soft);
    color: var(--bad);
}

div.message > p:first-child::before { content: "i  "; font-weight: 800; }
div.message-green > p:first-child::before { content: "✓  "; font-weight: 800; }
div.warning > p:first-child::before { content: "!  "; font-weight: 800; }
div.error > p:first-child::before { content: "✕  "; font-weight: 800; }

/* Warning rendered inside the subscription box; do not apply the standalone
   centered-text-box width or horizontal overflow to this nested element. */
div.subscription-overlap-warning {
    margin-bottom: 20px;
    overflow-wrap: anywhere;
}

/* Forms */
.form {
    width: 320px;
    margin: 0 auto;
    text-align: left;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* Form boxes have the common box width; the form itself stays narrow. */
div.centered-text-box.form > form {
    max-width: 420px;
}

label,
form.label {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    display: block;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], select {
    width: 100%;
    padding: 11px 14px;
    margin: 0 0 10px 0;
    box-sizing: border-box;
    border: 1px solid var(--muted);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
    outline: 3px solid var(--brand-ink);
    outline-offset: 1px;
}

.register_email {
    display: flex;
    align-items: center;
    gap: 4px;
}

#email_name {
    text-align: right;
    padding: 8px;
    margin: 0;
    font-size: 16px;
}

.email_at {
    font-size: 16px;
    padding: 3px;
}

.email_domain {
    font: inherit;
    font-size: 16px;
    padding: 8px;
    background: var(--surface);
    color: var(--ink);
    box-sizing: border-box;
    border: 1px solid var(--muted);
    border-radius: 8px;
}

/* Buttons: one filled blue main action, blue outline for other choices, red
   only for actions that delete, disable or stop something. */
.button {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--accent);
    color: var(--accent-ink);
    padding: 12px 20px;
    margin: 8px 0;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.button:hover {
    background-color: var(--accent-hover);
    color: var(--accent-ink);
}

.button-small {
    width: 200px;
    padding: 9px 12px;
    font-size: 14px;
}

.button-tiny {
    width: auto;
    min-width: 64px;
    padding: 4px 10px;
    font-size: 12px;
}

/* Password toggle visibility */
/* The button sits beside the input instead of floating: a float overlaps the
   line below it and pushes the next label out of alignment with its input. */
.password-input-row {
    display: flex;
    gap: 8px;
}

.password-input-row input[type="password"],
.password-input-row input[type="text"] {
    flex: 1;
}

/* Fixed width so the input does not resize when the label toggles to "Hide". */
.toggle-password-visibility-button,
.toggle-password-visibility-button.button {
    width: 130px;
    padding: 6px 12px;
    margin: 0 0 10px 0;
    border: 2px solid var(--brand-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--brand-ink);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

.toggle-password-visibility-button:hover {
    background: var(--brand-soft);
    color: var(--brand-ink);
}

/* Header */
.topbar {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    color: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.topbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    /* The logo and the buttons line up with the page column. */
    padding: 14px var(--page-edge);
    box-sizing: border-box;
    background: linear-gradient(17deg, var(--header-from), var(--header-to));
    /* The logo's orange (#ff9213), used only here and in list markers. */
    border-bottom: 4px solid var(--logo-orange);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    text-decoration: none;
}

.brand:hover {
    color: #ffffff;
}

.brand img {
    height: 52px;
    width: auto;
    display: block;
}

.brand .wordmark {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
}

.logged-in-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logged-in-info .email {
    font-weight: 700;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.login-link,
.button.login-link {
    width: auto;
    margin: 0;
    background-color: var(--header-btn);
    color: var(--header-btn-ink);
    padding: 9px 18px;
    white-space: nowrap;
}

/* Own hover token: --brand-soft is dark navy in dark mode, which left the
   navy label at 1.1:1. Light 7.6:1, dark 6.9:1. */
.login-link:hover,
.button.login-link:hover {
    background-color: var(--header-btn-hover);
    color: var(--header-btn-ink);
}

.topbar nav ul {
    list-style-type: none;
    margin: 0;
    /* Links have 12px padding: their text lines up with the page column. */
    padding: 6px 16px 6px calc(var(--page-edge) - 12px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 16px;
}

.topbar li {
    margin: 0;
}

.topbar .topbar-link {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-block; /* Make the entire area of the link, including the padding, clickable */
    cursor: pointer;
}

.topbar .topbar-link:hover {
    color: var(--brand-ink);
    background-color: var(--paper-alt);
}

.topbar-link:before {
    margin-right: 5px;
}

@media (max-width: 600px) {
    .topbar-top {
        padding: 10px 12px;
    }

    .brand {
        gap: 10px;
    }

    .brand img {
        height: 40px;
    }

    .brand .wordmark {
        font-size: 20px;
    }

    .logged-in-info .email {
        display: none;
    }

    .topbar nav ul {
        gap: 2px 8px;
    }
}

@media (max-width: 420px) {
    .brand img {
        height: 34px;
    }

    .brand .wordmark {
        font-size: 18px;
    }
}

@media (max-width: 350px) {
    .brand .wordmark {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}

/* Guide */


.guide-contents h2 {
    margin-top: 0;
}

.guide-contents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
}

.guide-contents-grid h3 {
    font-size: 18px;
    margin-top: 0;
}

.guide-contents-grid ul {
    padding-left: 20px;
}

.guide-contents-grid li + li {
    margin-top: 12px;
}

.guides h2[id],
#guide-contents {
    scroll-margin-top: 24px;
}

.guide-back-link {
    text-align: center;
}

.guides summary {
    cursor: pointer;
    font-weight: 700;
}

.guide-address {
    overflow-wrap: anywhere;
}

.guide-image-natural-width {
    width: auto;
}

.guide-image {
    max-width: 100%;
    max-height: 440px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* Pre */
pre, code {
    font-family: var(--font-mono);
}

pre {
    display: block;
    padding: 10px;
    margin: 0.6em 0;
    overflow: auto;
    font-size: 13px;
    line-height: 1.35;
    background-color: var(--paper-alt);
    color: var(--ink);
    border-radius: 8px;
    border: 1px solid var(--line);
}

/* Invitation link */
.copy-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.copy-container input[type="text"] {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
}

.button-container {
    position: relative;
    flex-shrink: 0; /* Prevents shrinking if the content overflows */
}

.tooltip {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -160%);
    background-color: var(--ink);
    color: var(--paper);
    padding: 5px 8px;
    border-radius: 6px;
}

.tooltip.show {
    visibility: visible;
}

/* Domain DNS records */
.mono {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Page components from the approved demos: page intro, section heads,
   badges, hints and the help panel. */
:root {
    interpolate-size: allow-keywords;
}

.page-intro {
    width: min(var(--box-width), calc(100% - 32px));
    margin: -8px auto 20px var(--page-edge);
    font-size: 18px;
    color: var(--muted);
}

.back-link {
    width: min(var(--box-width), calc(100% - 32px));
    margin: 32px 16px -28px var(--page-edge);
    font-size: 15px;
}

.back-link a::before {
    content: "← ";
}

.section-head {
    width: min(var(--box-width), calc(100% - 32px));
    margin: 32px 16px 12px var(--page-edge);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.section-head h2 {
    font-size: 22px;
    margin: 0;
}

/* Status badges: the word carries the status, the colour supports it. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    white-space: nowrap;
}

.badge-good { background: var(--good-soft); color: var(--good); }
.badge-off { background: var(--paper-alt); color: var(--muted); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-info { background: var(--brand-soft); color: var(--brand-ink); }

.hint {
    display: block;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 15px;
}

/* Forms that only carry hidden inputs for a script to submit. */
.hidden {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Help panel: a native popover from the right. It opens from the info link
   and closes on Escape, on an outside click or with the close button. Without
   popover support the panel shows as a box at the end of the page. */
.info-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 4px 12px 4px 6px;
    border: 2px solid var(--brand-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--brand-ink);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    vertical-align: middle;
    cursor: pointer;
}

.info-link:hover {
    background: var(--brand-soft);
}

.info-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-ink);
    color: var(--surface);
    font-size: 13px;
}

.help-panel {
    width: min(var(--box-width), calc(100% - 32px));
    margin: 32px 16px 0 var(--page-edge);
    box-sizing: border-box;
}

@supports not selector(:popover-open) {
    .info-link,
    .help-close {
        display: none;
    }
}

@supports selector(:popover-open) {
    .help-panel {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(400px, 100vw);
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 20px 24px 32px;
        overflow-y: auto;
        border: 0;
        border-left: 1px solid var(--box-line);
        background: var(--surface);
        color: var(--ink);
        box-shadow: -8px 0 24px rgba(0, 49, 109, 0.12);
        font-size: 16px;
        transform: translateX(100%);
        transition: transform 220ms ease-out, overlay 220ms allow-discrete, display 220ms allow-discrete;
    }

    .help-panel:popover-open {
        transform: translateX(0);
    }

    @starting-style {
        .help-panel:popover-open {
            transform: translateX(100%);
        }
    }

    .help-panel::backdrop {
        background: rgba(0, 20, 45, 0.2);
    }
}

.help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.help-head h2 {
    margin: 0;
    font-size: 22px;
}

.help-panel h3 {
    margin: 20px 0 4px;
    font-size: 17px;
}

.help-panel p {
    margin: 0;
    line-height: 1.55;
}

.help-close {
    width: 36px;
    height: 36px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 16px;
    cursor: pointer;
}

.help-close:hover {
    border-color: var(--brand-ink);
}

/* A status badge stays next to its heading. Longer notes go to the right. */
.section-head .meta {
    margin-left: auto;
    color: var(--muted);
    font-size: 15px;
}

/* Item lists: one row for each alias, domain or similar, with its action at
   the end of the row. */
.item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item-list > li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.item-list > li::marker {
    content: none;
}

.item-list > li:first-child {
    padding-top: 0;
}

.item-list > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.item-name {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.item-meta {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    color: var(--muted);
    font-size: 15px;
}

.item-list .item-action {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

.empty-note {
    margin: 0 0 4px;
    color: var(--muted);
}

/* Add forms under a list: a label, a hint, the field and one button. */
.add-form {
    margin-top: 16px;
}

.add-form label {
    display: block;
    font-weight: 800;
}

.add-form .button {
    width: auto;
    margin-top: 12px;
}

/* One link button under a box's text, at its natural width. */
.button.button-fit {
    width: auto;
}

.address-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.address-row input {
    flex: 1 1 180px;
    margin: 0;
}

.address-row select {
    flex: 0 1 220px;
    width: auto;
    margin: 0;
}

.address-row .at {
    font-weight: 800;
    color: var(--muted);
}

/* Key figures in a summary box, such as saldo and the next renewal. */
.figures {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    margin: 0 0 12px;
}

.figures dt {
    color: var(--muted);
    font-size: 14px;
}

.figures dd {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
}

/* A read-only value with its Copy button, such as an invite link. */
.copy-row {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

.copy-row input {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}

.copy-row .button {
    width: auto;
    margin: 0;
    white-space: nowrap;
}

/* Copy buttons (utils/clipboard.js): the button says what happened. */
.copy.copied {
    border-color: var(--good);
    color: var(--good);
}

@media (prefers-reduced-motion: reduce) {
    .help-panel {
        transition: none;
    }
}

/* Confirmation dialog (Components/ConfirmDialog.twig). Native <dialog>, so the
   backdrop, Escape handling, and focus trapping come from the browser. */
dialog#confirm-dialog {
    width: 30vw;
    min-width: 320px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    font-size: 18px;
}

dialog#confirm-dialog::backdrop {
    background-color: rgba(0, 20, 45, 0.55);
}

dialog#confirm-dialog h3 {
    margin-top: 0;
}

.dialog-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.dialog-buttons .button {
    width: auto;
    min-width: 120px;
}

/* Cancel and other choices: a blue outline, never grey, because grey buttons
   look disabled. */
.button-secondary {
    background-color: transparent;
    border-color: var(--brand-ink);
    color: var(--brand-ink);
}

.button-secondary:hover {
    background-color: var(--brand-soft);
    color: var(--brand-ink);
}

.button-danger,
.button.delete-alias {
    background-color: var(--danger);
    color: var(--danger-ink);
}

.button-danger:hover,
.button.delete-alias:hover {
    background-color: var(--danger-hover);
    color: var(--danger-ink);
}

.button-disabled,
.button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Light and dark mode switch in the header */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

.theme-toggle img {
    width: 22px;
    height: 22px;
}

.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

@media (max-width: 600px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
}

/* Orange list markers in content boxes. */
.centered-text-box li::marker {
    color: var(--logo-orange);
}


/* Menu triggers use the same spacing as navigation links. */
.topbar button.topbar-link {
    width: auto;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
}

.withdrawal-details p {
    overflow-wrap: anywhere;
}