/* ProWPHost portal. Plain CSS, no build step.
   Quiet and classic, like a private bank statement: EB Garamond for headings, domains and amounts,
   Source Sans 3 for everything else (both OFL 1.1, self-hosted, Latin subset).
   The deep teal comes from the emailed invoice and is kept for actions only. */
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
    --ink: #1b2429;
    --muted: #485358;
    --paper: #eef1f2;
    --surface: #ffffff;
    --line: #e1e5e7;
    --field: #8a969b;          /* 3:1 on white, for input and button borders */
    --teal: #1b4f5c;          /* actions and links only */
    --teal-deep: #133a44;
    --mist: #eaf1f3;          /* selected and highlighted */
    --amber: #7f5217;  --amber-bg: #f7f0e6;   /* due: a muted bronze */
    --ok: #3f6b2a;     --ok-bg: #eef3ea;
    --bad: #9b2c2c;    --bad-bg: #f8eaea;
    --radius: 4px;
    --tap: 44px;
    --measure: 46rem;
    --serif: "EB Garamond", Garamond, "Times New Roman", serif;
    --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sans);
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
}

a { color: var(--teal); text-underline-offset: .15em; }
a:hover { color: var(--teal-deep); }
h1, h2 { font-family: var(--serif); font-weight: 400; font-variant-numeric: lining-nums; }
h1 { font-size: 2.35rem; line-height: 1.15; margin: 0 0 1.5rem; }
h2 { font-size: 1.55rem; line-height: 1.25; margin: 2.25rem 0 .9rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 .75rem; }
small, .small { font-size: .88rem; }
code { font-size: .95em; }

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

.skip-link { position: absolute; left: .5rem; top: -3rem; padding: .5rem 1rem; background: var(--surface); z-index: 10; }
.skip-link:focus { top: .5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header and navigation */
.site-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem;
    padding: 0 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--teal-deep); }
.primary-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; flex: 1; }
.primary-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.primary-nav .tools { margin-left: auto; }
.primary-nav a {
    display: inline-flex; align-items: center; min-height: 3.5rem; padding: 0 .75rem;
    color: var(--ink); text-decoration: none;
}
.primary-nav a:hover { color: var(--teal); }
.primary-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--teal); }

.profile-menu { position: relative; }
.profile-menu summary { display: flex; align-items: center; gap: .5rem; min-height: 3.5rem; padding: 0 .5rem; cursor: pointer; }
.profile-menu summary::after { content: ""; width: .4rem; height: .4rem; margin-top: -.25rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.profile-menu[open] summary::after { margin-top: .2rem; transform: rotate(-135deg); }
.profile-menu ul {
    position: absolute; right: 0; min-width: 12rem; margin: 0; padding: .25rem 0; list-style: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); z-index: 5;
    box-shadow: 0 6px 18px rgba(23, 40, 45, .12);
}
.profile-menu li a, .profile-menu .link-button {
    display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 0 1rem;
    color: var(--ink); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; text-align: left;
}
.profile-menu li a:hover, .profile-menu .link-button:hover { background: var(--mist); }

/* Page and content */
.page { max-width: 64rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.page--narrow { max-width: calc(var(--measure) + 3rem); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.muted { color: var(--muted); }
.notice { padding: .8rem 1rem; background: var(--mist); color: var(--ink); border-left: 2px solid var(--teal); border-radius: var(--radius); }
.notice--warn { background: var(--amber-bg); border-left-color: var(--amber); }
.empty-state { padding: 2rem 1.5rem; }
.empty-state h2 { margin-top: 0; }
.breadcrumb { margin: 0 0 .5rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.page-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.page-heading > .actions, .page-heading > .button, .page-heading > form { margin-left: auto; align-self: center; }
.page-heading h1 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
section.card + section.card { margin-top: 1rem; }
.card > h2:first-child { margin-top: 0; }

/* Forms */
.stack > * + * { margin-top: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.field input, .field select, .field textarea, td input, td select {
    width: 100%; min-height: var(--tap); padding: .5rem .75rem; font: inherit; color: var(--ink);
    border: 1px solid var(--field); border-radius: var(--radius); background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus, td input:focus, td select:focus { border-color: var(--teal); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bad); }
.field--inline { display: flex; align-items: flex-start; gap: .6rem; }
.field--inline input { width: 1.25rem; min-height: 1.25rem; margin-top: .2rem; accent-color: var(--teal); flex: none; }
.field--inline label { margin: 0; font-weight: 400; }
.field-error { color: var(--bad); margin: .3rem 0 0; }
.button {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 1.15rem;
    font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: #fff; background: var(--teal);
    border: 1px solid var(--teal); border-radius: var(--radius); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.button:hover { color: #fff; background: var(--teal-deep); border-color: var(--teal-deep); }
.button--secondary { color: var(--ink); background: var(--surface); border-color: var(--field); }
.button--secondary:hover { color: var(--ink); background: var(--mist); border-color: var(--teal); }
.inline-form { display: inline; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }

/* Status: small text with a coloured dot. Always text plus colour, never colour alone. */
.badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.badge--ok { color: var(--ok); }
.badge--warn { color: var(--amber); }
.badge--bad { color: var(--bad); }
.badge--muted { color: var(--muted); }
.badge--muted::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Money and figures line up in columns; serif amounts use lining figures */
.money, table { font-variant-numeric: lining-nums tabular-nums; }

/* Websites: each website is a nameplate, the domain set on the invoice's teal rule.
   Grid, so on phones the rule stays under the domain and the buttons move below the facts. */
.nameplate { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "domain actions" "facts facts"; }
.nameplate__domain, .nameplate__actions { border-bottom: 1px solid #9aa5aa; padding-bottom: .75rem; display: flex; align-items: flex-end; }
.nameplate__domain { grid-area: domain; margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.15; overflow-wrap: break-word; }
.nameplate__domain--long { font-size: clamp(1.35rem, 3.2vw, 1.75rem); }
.nameplate__actions .button { white-space: nowrap; }
.nameplate__domain a { color: var(--ink); text-decoration: none; }
.nameplate__domain a:hover { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; }
.nameplate__actions { grid-area: actions; gap: .5rem; padding-left: 1.5rem; }
.nameplate .facts { grid-area: facts; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem 3rem; margin: 1rem 0 0; }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: .85rem; color: var(--muted); }
.facts dd { margin: 0; }

/* Billing: what you owe comes first */
.owed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; }
.owed__total { font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 400; line-height: 1.2; margin: 0 0 .25rem; }
.owed__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.owed__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.owed__what { display: flex; flex-direction: column; }
.due { color: var(--amber); font-weight: 600; }

/* Invoice: laid out like the emailed invoice */
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.invoice-head h1 { margin: 0 0 .25rem; }
.invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 2rem; margin-bottom: 1.5rem; }
.invoice-parties h2 { font-size: .9rem; color: var(--muted); margin: 0 0 .25rem; font-weight: 400; }
.invoice-parties p { margin: 0; }
.invoice-items { border-top: 1px solid var(--line); }
.invoice-items td:last-child, .invoice-items th:last-child { text-align: right; }
.totals { margin: 0 0 0 auto; max-width: 22rem; padding: 1rem 0; }
.totals div { display: flex; justify-content: space-between; gap: 2rem; padding: .2rem .75rem; }
.totals dt, .totals dd { margin: 0; }
.totals .totals__grand { margin-top: .4rem; padding-top: .6rem; border-top: 1px solid var(--ink); font-family: var(--serif); font-size: 1.4rem; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
th, td { padding: .7rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .85rem; color: var(--muted); font-weight: 600; }
td a { display: inline-flex; align-items: center; min-height: var(--tap); }
caption { text-align: left; font-weight: 600; padding: 0 0 .5rem; }
.num { text-align: right; }

/* Support conversation */
.thread { list-style: none; padding: 0; margin: 1.5rem 0; }
.thread > li + li { margin-top: 1rem; }
.message { border-left: 2px solid var(--line); }
.message--staff { border-left-color: var(--teal); }
.message__who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .5rem; }
pre.legacy { white-space: pre-wrap; font-family: inherit; margin: 0; }

/* Guest pages */
.guest { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.guest .brand { display: block; font-size: 1.9rem; margin-bottom: 1.25rem; }
.guest-card { width: 100%; max-width: 27rem; padding: 2rem; }
.guest-foot { max-width: 27rem; margin-top: 1.25rem; text-align: center; color: var(--muted); font-size: .9rem; }

/* Admin and shared bits */
.qr svg { width: 12rem; height: 12rem; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.filters .field { min-width: 12rem; flex: 1; }
.attention + .attention { margin-top: 1rem; }
.attention ul { margin: 0; padding-left: 1.25rem; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.pagination { display: flex; gap: .25rem; list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); justify-content: center; }

/* Websites list: one row per site */
.sites__domain { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.sites__domain a { color: var(--ink); text-decoration: none; }
/* Plan, status and renewal stay on one line; a long domain wraps at its dots instead. */
.sites td { white-space: nowrap; }
.sites__domain a:hover { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; }
.sites__row--ended .sites__domain a { color: var(--muted); }
.sites__actions { text-align: right; white-space: nowrap; }
.sites__actions .button { min-height: 2.4rem; padding: 0 .9rem; }

/* Invoice summary: amount, date and actions before the document */
.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.summary__amount { font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.2; margin: 0 0 1rem; font-variant-numeric: lining-nums; }
.summary__when { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-left: .35rem; }
.summary .secure { margin: .75rem 0 0; }

/* Panels sit a little above the page */
.card, table, .owed, .summary { box-shadow: 0 1px 3px rgba(27, 36, 41, .05); }
.show-sm { display: none; }
.guest-card .button { width: 100%; }

/* Phones: nav on its own scrollable row; tables become stacked rows labelled by data-label */
@media (max-width: 640px) {
    html { font-size: 16px; }
    .site-header { padding: 0 1rem; gap: 0 1rem; }
    .brand { min-height: 3rem; display: inline-flex; align-items: center; }
    .primary-nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -.75rem; }
    .primary-nav a, .profile-menu summary { min-height: var(--tap); }
    .profile-menu { margin-left: auto; }
    .page { padding: 1.25rem 1rem 3rem; }
    .hide-sm { display: none !important; }
    .show-sm { display: inline; }
    h1 { font-size: 1.6rem; }
    .nameplate { grid-template-columns: minmax(0, 1fr); grid-template-areas: "domain" "facts" "actions"; }
    .nameplate__actions { border-bottom: 0; padding: 1rem 0 0; }
    .nameplate__actions .button { flex: 1; }
    .facts { gap: .5rem 1.5rem; }
    .owed__list .actions { width: 100%; }
    .owed__list .inline-form { display: block; flex: 1 1 100%; }
    .owed__list li .button { width: 100%; }
    .summary { padding: 1.25rem; }
    .summary .actions > *, .summary .actions .button { width: 100%; }
    .sites__domain { padding: .7rem .75rem .2rem; font-size: 1.35rem; }
    .sites__actions { display: flex; gap: .5rem; text-align: left; }
    .sites__actions .button { flex: 1; min-height: var(--tap); }
    table, thead, tbody, tr, th, td { display: block; }
    table { border: 0; box-shadow: none; background: transparent; }
    tr { box-shadow: 0 1px 3px rgba(27, 36, 41, .05); }
    thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .75rem; background: var(--surface); }
    td { border: 0; padding: .45rem .75rem; position: relative; text-align: right; }
    td[data-label] { padding-left: 46%; min-height: 2.4rem; }
    td[data-label]::before { content: attr(data-label); position: absolute; left: .75rem; top: .55rem; width: 42%; font-size: .85rem; color: var(--muted); text-align: left; }
    td a { min-height: 0; padding: .6rem 0; margin: -.6rem 0; }
    .invoice-items td:last-child { text-align: right; }
    .totals { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.actions--below { margin: 1rem 0 0; gap: 1.5rem; }
table + table { margin-top: 1.5rem; }
.actions + table { margin-top: 1rem; }
/* An amount never breaks across lines ("USD" / "0.00"). */
.money { white-space: nowrap; }
.price__list { display: block; }
/* A section heading with its action on the right ("Backups … Back up now"). */
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 2.25rem 0 .9rem; }
.section-heading h2 { margin: 0; }
.facts-updated { margin: .6rem 0 0; }
/* Row actions (Update, Restore…) sit at the right edge of their table. */
td[data-label="Action"] { text-align: right; }
.facts-updated + .notice { margin-top: 1.25rem; }
.guest-card form + p { margin-top: 1rem; }
td strong + .badge { margin-left: .5rem; }
.invoice-parties h2 { font-family: var(--sans); }
.secure { display: flex; align-items: flex-start; gap: .4rem; color: var(--muted); }
.secure svg { flex: none; margin-top: .2rem; color: var(--ok); }
.question { margin-top: 2rem; color: var(--muted); }

/* Design review 2026-09-26 */
/* Page status sits beside its title (a Paid/Open badge), never 900 px away. */
.page-heading .badge { align-self: center; }
/* Admin history: a quiet ruled list, not bullets. */
.audit { list-style: none; padding: 0; margin: 0; }
.audit li { padding: .55rem 0; border-top: 1px solid var(--line); }
.audit li:last-child { border-bottom: 1px solid var(--line); }
.audit code { font-size: .85rem; color: var(--muted); }
/* Admin overview cards: the count reads as a count, and items as rows. */
.attention h2 { display: flex; align-items: center; gap: .6rem; }
.attention h2 .badge { font-family: var(--sans); font-size: .95rem; }
.attention ul { list-style: none; padding: 0; margin: 0; }
.attention li { padding: .55rem 0; border-top: 1px solid var(--line); }
section.attention + section.attention { margin-top: 1rem; }
/* File inputs: the native control, without a text-field box around it. */
.field input[type="file"] { border: 0; padding: .4rem 0; min-height: 0; background: transparent; }
.field-hint { margin: .3rem 0 0; }
/* Two short fields side by side (city + postcode). */
.field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.card + p { margin-top: 1rem; }
td.num, th.num { text-align: right; }
.invoice-lines th:first-child { width: 50%; }
.totals__note { max-width: 24rem; margin: .5rem 0 0 auto; text-align: right; }
.guest-card h1 { font-size: 1.9rem; }
details.more > summary { cursor: pointer; color: var(--teal); text-decoration: underline; text-underline-offset: .15em; }
details.more[open] > summary { margin-bottom: .75rem; }

@media (max-width: 640px) {
    /* Prose cells (subjects, descriptions, messages) read left to right on their own line. */
    td.lead { padding: .6rem .75rem .2rem; text-align: left; min-height: 0; }
    td.lead::before { position: static; display: block; width: auto; margin-bottom: .15rem; }
    /* Row actions: a full-width button without a label row. */
    td[data-label="Action"] { padding-left: .75rem; text-align: left; }
    td[data-label="Action"]::before { display: none; }
    td[data-label="Action"] .button, td[data-label="Action"] form { width: 100%; }
    /* Label/value lists stack, so long values are not squeezed into half the width. */
    .details { grid-template-columns: 1fr; gap: 0; }
    .details dt { margin-top: .6rem; font-size: .85rem; }
    .details dd { margin: 0; }
    /* The admin nav wraps instead of scrolling behind a visible scrollbar. */
    .primary-nav { flex-wrap: wrap; overflow: visible; }
    .primary-nav .tools { margin-left: 0; }
    .primary-nav ul { gap: 0 .5rem; }
    .field-row { grid-template-columns: 1fr; }
    /* Line-item inputs: every control full width with its label above. */
    .invoice-lines td[data-label] { padding-left: .75rem; text-align: left; }
    .invoice-lines td[data-label]::before { position: static; display: block; width: auto; margin-bottom: .15rem; }
    /* Header actions share the row evenly. */
    .page-heading > .actions { width: 100%; margin-left: 0; }
    .page-heading > .actions .button, .page-heading > .actions form { flex: 1; }
    .page-heading > .actions form .button { width: 100%; }
}