/* Domeniq clients: design tokens and base styles, direction A "Household Ledger".
   Copied in reduced form from the Domeniq node (docs/brand-guidelines.md, wwwroot/app.css): the same palette and faces.
   Light theme by default, dark by lamplight under prefers-color-scheme; there is no theme switch.
   Logical properties only (inline/block, start/end), so a right-to-left language (Hebrew) mirrors the layout. */

:root {
    color-scheme: light dark;

    /* Primitives */
    --hv-paper: #F3EDE2;
    --hv-paper-raised: #FBF8F1;
    --hv-paper-sunken: #EAE2D3;
    --hv-ink: #1B1A18;
    --hv-ink-soft: #6B6256;
    --hv-rule: #D9CFBE;
    --hv-rule-strong: #BDB2A1;
    --hv-seal: #9E2F2A;
    --hv-seal-deep: #7F2420;
    --hv-seal-tint: #F2DCD8;
    --hv-slate: #2F4A6D;
    --hv-slate-deep: #243A56;
    --hv-slate-tint: #DCE4EE;
    --hv-moss: #3E6B4A;
    --hv-moss-tint: #DCE8D9;
    --hv-ochre: #8A5A00;
    --hv-ochre-tint: #F3E6C3;

    /* Semantic: components use these only */
    --hv-bg: var(--hv-paper);
    --hv-surface: var(--hv-paper-raised);
    --hv-surface-sunken: var(--hv-paper-sunken);
    --hv-text: var(--hv-ink);
    --hv-text-muted: var(--hv-ink-soft);
    --hv-border: var(--hv-rule);
    --hv-border-strong: var(--hv-rule-strong);
    --hv-accent: var(--hv-seal);
    --hv-accent-hover: var(--hv-seal-deep);
    --hv-accent-soft: var(--hv-seal-tint);
    --hv-on-accent: var(--hv-paper);
    --hv-accent-text: var(--hv-seal);
    --hv-link: var(--hv-slate);
    --hv-link-hover: var(--hv-slate-deep);
    --hv-focus: var(--hv-slate);
    --hv-info: var(--hv-slate);
    --hv-info-bg: var(--hv-slate-tint);
    --hv-success: var(--hv-moss);
    --hv-success-bg: var(--hv-moss-tint);
    --hv-caution: var(--hv-ochre);
    --hv-caution-bg: var(--hv-ochre-tint);
    --hv-danger: var(--hv-seal);
    --hv-danger-bg: var(--hv-seal-tint);

    /* The notebook ground and the paper notes on it */
    --hv-ruling: rgba(47, 74, 109, 0.22);
    --hv-margin-line: rgba(158, 47, 42, 0.6);
    --hv-tape-sand: rgba(233, 214, 160, 0.75);
    --hv-shadow-note: 0 1px 0 var(--hv-rule), 0 2px 3px rgba(27, 26, 24, 0.06), 0 14px 22px -12px rgba(27, 26, 24, 0.28), 0 34px 44px -30px rgba(27, 26, 24, 0.4);

    /* Type */
    --hv-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --hv-font-ui: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --hv-font-mono: "Azeret Mono", ui-monospace, Consolas, "SFMono-Regular", monospace;
    --hv-display-settings: "opsz" 72, "SOFT" 30, "WONK" 0;

    /* Shape, depth, rhythm */
    --hv-radius-sm: 2px;
    --hv-tap: 44px;
    --hv-space-1: 0.25rem;
    --hv-space-2: 0.5rem;
    --hv-space-3: 0.75rem;
    --hv-space-4: 1rem;
    --hv-space-5: 1.5rem;
    --hv-space-6: 2rem;
}

/* The ledger read by lamplight: Ink becomes the ground, Paper the text, accents lifted to keep 4.5:1. */
@media (prefers-color-scheme: dark) {
    :root {
        --hv-bg: #1B1A18;
        --hv-surface: #24221F;
        --hv-surface-sunken: #141311;
        --hv-text: #F3EDE2;
        --hv-text-muted: #BDB2A1;
        --hv-border: #3A3631;
        --hv-border-strong: #57514A;
        --hv-accent: #C94A43;
        --hv-accent-hover: #D9625B;
        --hv-accent-soft: #3A2422;
        --hv-on-accent: #F3EDE2;
        --hv-accent-text: #E07A72;
        --hv-link: #9DB5D6;
        --hv-link-hover: #C2D2E8;
        --hv-focus: #9DB5D6;
        --hv-info: #9DB5D6;
        --hv-info-bg: #22303F;
        --hv-success: #8FBF99;
        --hv-success-bg: #1F3326;
        --hv-caution: #D9A846;
        --hv-caution-bg: #3A2E12;
        --hv-danger: #E07A72;
        --hv-danger-bg: #3A2422;
        --hv-ruling: rgba(157, 181, 214, 0.12);
        --hv-margin-line: rgba(201, 74, 67, 0.45);
        --hv-tape-sand: rgba(160, 140, 90, 0.5);
        --hv-shadow-note: 0 1px 0 var(--hv-border), 0 2px 3px rgba(0, 0, 0, 0.3), 0 14px 22px -12px rgba(0, 0, 0, 0.6), 0 34px 44px -30px rgba(0, 0, 0, 0.7);
    }
}

/* Base */

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

/* A hidden element stays hidden whatever display its class sets (a hidden .inline-form is still in the markup, so a
   post that is being answered finds its handler). */
[hidden] {
    display: none !important;
}

html {
    background: var(--hv-bg);
}

body {
    margin: 0;
    min-block-size: 100vh;
    font-family: var(--hv-font-ui);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--hv-text);
    background: var(--hv-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin-block: 0 var(--hv-space-4);
    font-family: var(--hv-font-display);
    font-weight: 600;
    font-variation-settings: var(--hv-display-settings);
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

h1 {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

p {
    margin-block: 0 var(--hv-space-4);
}

a {
    color: var(--hv-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--hv-link-hover);
}

:focus-visible {
    outline: 2px solid var(--hv-focus);
    outline-offset: 2px;
}

::selection {
    background: var(--hv-info-bg);
}

code, kbd, samp, pre {
    font-family: var(--hv-font-mono);
    font-size: 0.875em;
}

hr {
    border: 0;
    border-block-start: 1px solid var(--hv-border);
}

/* Data: amounts, dates, key hints and reference numbers in the mono face with tabular figures. */
.data {
    font-family: var(--hv-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Controls: the defaults every form starts from. */

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

input:not([type=checkbox]):not([type=radio]),
select,
textarea {
    min-block-size: var(--hv-tap);
    padding-inline: var(--hv-space-3);
    border: 1px solid var(--hv-border-strong);
    border-radius: var(--hv-radius-sm);
    background: var(--hv-surface);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--hv-focus);
}

label {
    display: block;
    margin-block-end: var(--hv-space-1);
    font-weight: 500;
}

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--hv-tap);
    padding-inline: 1.25rem;
    border: 1px solid var(--hv-text);
    border-radius: var(--hv-radius-sm);
    background: transparent;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* The one primary action of a screen: Seal fill. A submit button and a link styled as a button both take it. */
button[type=submit]:not(.secondary),
.button,
.primary {
    border-color: var(--hv-accent);
    background: var(--hv-accent);
    color: var(--hv-on-accent);
}

button[type=submit]:not(.secondary):hover,
.button:hover,
.primary:hover:not(:disabled) {
    border-color: var(--hv-accent-hover);
    background: var(--hv-accent-hover);
    color: var(--hv-on-accent);
}

/* Outlined in Ink: everything that is not the main action. */
.secondary,
.secondary[type=submit] {
    border-color: var(--hv-text);
    background: transparent;
    color: var(--hv-text);
}

.secondary:hover:not(:disabled) {
    border-color: var(--hv-text);
    background: var(--hv-surface-sunken);
}

button:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Messages: a tint with matching text and a 2 px radius; no coloured side bar. Status is never colour alone, so the
   text always says what it is. */

.alert, .error, .caution, .danger {
    margin-block: 0 var(--hv-space-4);
    padding: var(--hv-space-3) var(--hv-space-4);
    border-radius: var(--hv-radius-sm);
}

.error, .danger, .alert.danger {
    background: var(--hv-danger-bg);
    color: var(--hv-danger);
}

.caution, .alert.caution {
    background: var(--hv-caution-bg);
    color: var(--hv-caution);
}

.alert.info {
    background: var(--hv-info-bg);
    color: var(--hv-info);
}

.alert.success {
    background: var(--hv-success-bg);
    color: var(--hv-success);
}

/* Read by screen readers, not shown. */
.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The wordmark: Fraunces at its largest optical size, "Domen" and "iq" on one baseline 2 px apart, "iq" italic in Seal
   (as text, so it holds its contrast by lamplight). dir="ltr" on the element keeps it "Domeniq" in Hebrew. */
.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: var(--hv-text);
    font-family: var(--hv-font-display);
    font-size: 30px;
    font-weight: 500;
    font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
    letter-spacing: -0.03em;
    line-height: 1;
    text-decoration: none;
}

.wordmark:hover {
    color: var(--hv-text);
}

.wordmark .tail {
    color: var(--hv-accent-text);
    font-style: italic;
}

/* The masthead: plain Paper, the wordmark at the start, the language, admin link and Sign out at the end. */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hv-space-3) var(--hv-space-5);
    padding-block: 20px 12px;
    padding-inline: 16px;
    border-block-end: 1px solid var(--hv-border);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hv-space-2) var(--hv-space-4);
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--hv-tap);
}

.sign-out {
    margin: 0;
}

/* The language switch: three plain buttons, each named in itself; the current one is bold and underlined, so the
   choice never rests on colour alone. */
.language-switch {
    display: flex;
    align-items: center;
    gap: var(--hv-space-1);
    margin: 0;
}

.language-switch button {
    min-inline-size: var(--hv-tap);
    padding-inline: var(--hv-space-2);
    border-color: transparent;
    font-weight: 500;
    color: var(--hv-text-muted);
}

.language-switch button:hover {
    border-color: var(--hv-border-strong);
    background: var(--hv-surface-sunken);
    color: var(--hv-text);
}

.language-switch button[aria-current="true"] {
    border-color: transparent;
    background: transparent;
    color: var(--hv-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* The writing surface: ruled like a notebook page, with one margin line on the reading side (the start edge, so it
   moves to the right in Hebrew). Cards cover the rules, which is the point: sheets lying on a ruled desk. */
.ground {
    position: relative;
    display: block;
    min-block-size: calc(100vh - 80px);
    padding-block: var(--hv-space-6);
    padding-inline: 44px 16px;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--hv-ruling) 31px 32px);
}

.ground::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 22px;
    inline-size: 2px;
    background: var(--hv-margin-line);
}

.ground > * {
    position: relative;
    max-inline-size: 44rem;
    margin-inline: auto;
}

/* Paper notes: a sheet stuck to the page with a strip of tape, a four-layer shadow and square 2 px corners. A note is
   positioned itself: the tape is absolute against it, and cards nest. */
.card, .landing, .login, .message {
    position: relative;
    padding: 26px var(--hv-space-5) var(--hv-space-5);
    border-radius: var(--hv-radius-sm);
    background: var(--hv-surface);
    box-shadow: var(--hv-shadow-note);
    rotate: -0.35deg;
}

.card::before, .landing::before, .login::before, .message::before {
    content: "";
    position: absolute;
    inset-block-start: -10px;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 104px;
    block-size: 22px;
    rotate: 2deg;
    background: var(--hv-tape-sand);
    clip-path: polygon(2% 0, 98% 4%, 100% 52%, 97% 100%, 3% 96%, 0 48%);
}

.ground > .card, .ground > .landing, .ground > .login, .ground > .message {
    margin-block-end: var(--hv-space-5);
}

/* The privacy policy: one long note; its sections are plain headings, its paragraphs read at a comfortable length. */
.privacy-updated {
    color: var(--hv-text-muted);
}

.privacy h2 {
    margin-block-start: var(--hv-space-5);
}

/* The colophon: one quiet line under the page, the privacy policy on the reading side. */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-2) var(--hv-space-4);
    padding-block: var(--hv-space-4);
    padding-inline: 16px;
    border-block-start: 1px solid var(--hv-border);
    font-size: 0.875rem;
}

.site-footer a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--hv-tap);
    color: var(--hv-text-muted);
}

/* The cabinet and the subscribe page. */

/* The cabinet: wider than the reading pages, one column on a phone and two from 64rem (the access and its spending on
   the left, the key on the right, the history across both). Notes keep their own height: the shorter column leaves
   space under it rather than stretching a note. */
.ground > .cabinet {
    max-inline-size: 72rem;
}

.cabinet-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hv-space-5);
    align-items: start;
}

.cabinet-column {
    display: flex;
    flex-direction: column;
    gap: var(--hv-space-5);
    min-inline-size: 0;
}

@media (min-width: 64rem) {
    .cabinet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cabinet-wide {
        grid-column: 1 / -1;
    }
}

.status-line {
    font-family: var(--hv-font-display);
    font-size: 1.25rem;
    font-variation-settings: var(--hv-display-settings);
    line-height: 1.3;
}

.status-line .data {
    font-size: 0.9em;
}

.key-hint {
    font-size: 1.25rem;
}

.key-field {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-2);
    margin-block-end: var(--hv-space-4);
}

.key-field input {
    flex: 1 1 16rem;
    min-inline-size: 0;
}

.regenerate {
    margin-block-start: var(--hv-space-5);
    padding-block-start: var(--hv-space-4);
    border-block-start: 1px solid var(--hv-border);
}

.check {
    display: flex;
    align-items: center;
    gap: var(--hv-space-2);
    min-block-size: var(--hv-tap);
    font-weight: 400;
}

.check input {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    accent-color: var(--hv-accent);
}

.history {
    margin: 0;
    padding: 0;
    list-style: none;
}

.history li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-1) var(--hv-space-4);
    padding-block: var(--hv-space-2);
    border-block-end: 1px solid var(--hv-border);
}

.history li:last-child {
    border-block-end: 0;
}

.nodes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nodes li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hv-space-2) var(--hv-space-4);
    padding-block: var(--hv-space-2);
    border-block-end: 1px solid var(--hv-border);
}

.nodes li:last-child {
    border-block-end: 0;
}

.history-status, .history-gift {
    color: var(--hv-text-muted);
}

.plans {
    margin: 0 0 var(--hv-space-4);
    padding: 0;
    border: 0;
}

.plans legend {
    margin-block-end: var(--hv-space-3);
    font-weight: 600;
}

.plan {
    margin-block-end: var(--hv-space-4);
    padding-block-end: var(--hv-space-3);
    border-block-end: 1px solid var(--hv-border);
}

.plan-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--hv-space-3);
    min-block-size: var(--hv-tap);
    font-weight: 600;
}

.plan-choice input {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: 0.2rem;
    accent-color: var(--hv-accent);
}

/* "Pay with PayPal" under its plan; it submits the PayPal form by its id, not the request form around it. */
.plan .paypal {
    margin-block-start: var(--hv-space-2);
}

/* The cabinet's unfinished PayPal request: "Continue to PayPal" beside "Cancel request". */
.paypal-pending {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-2);
}

.paypal-pending .danger {
    flex-basis: 100%;
}

.instructions-title {
    margin-block: var(--hv-space-3) var(--hv-space-1);
    font-family: var(--hv-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--hv-text-muted);
}

/* The admin's payment instructions: plain text, with the line breaks they were written with. */
.instructions {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.subscribe input[name="Reference"] {
    inline-size: 100%;
    margin-block-end: var(--hv-space-4);
}

/* The admin area: every admin page starts with the admin nav, and is as wide as the cabinet (tables and request rows
   need the room). */
.ground:has(> .admin-nav) > * {
    max-inline-size: 72rem;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-2) var(--hv-space-4);
    margin-block-end: var(--hv-space-4);
    font-weight: 600;
}

.admin-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--hv-tap);
}

.requests {
    margin: 0;
    padding: 0;
    list-style: none;
}

.request {
    padding-block: var(--hv-space-3);
    border-block-end: 1px solid var(--hv-border);
}

.request-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-2) var(--hv-space-3);
    align-items: baseline;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-2);
    align-items: center;
    margin-block-start: var(--hv-space-2);
}

.inline-form input:not([type=hidden]) {
    flex: 1 1 12rem;
    min-inline-size: 0;
}

.table-wrap {
    overflow-x: auto;
}

.admin-table {
    inline-size: 100%;
    border-collapse: collapse;
}

.admin-table th, .admin-table td {
    padding: var(--hv-space-2) var(--hv-space-3);
    border-block-end: 1px solid var(--hv-border);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.admin-table th {
    font-weight: 600;
    color: var(--hv-text-muted);
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-2);
    align-items: center;
}

.search-form input, .search-form select {
    flex: 1 1 12rem;
}

.client-name {
    margin-inline-start: var(--hv-space-2);
    color: var(--hv-text-muted);
}

.field-help {
    margin-block: 0 var(--hv-space-3);
    font-size: 0.875rem;
    color: var(--hv-text-muted);
}

.subscription {
    padding-block: var(--hv-space-3);
    border-block-end: 1px solid var(--hv-border);
}

.payments {
    margin: 0;
    padding: 0;
    list-style: none;
}

.payments li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-1) var(--hv-space-3);
}

.payment-note {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.plan-editor textarea, .client-head textarea {
    inline-size: 100%;
}

@media (min-width: 48rem) {
    .site-header {
        padding-block: 28px 16px;
        padding-inline: 44px;
    }

    .ground {
        padding-inline: 76px 44px;
    }

    .ground::before {
        inset-inline-start: 44px;
    }

    .site-footer {
        padding-inline: 44px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .card, .landing, .login, .message {
        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    @keyframes rise {
        from {
            opacity: 0;
            translate: 0 16px;
        }
    }
}