/* The documents site's shell: luumelabs.com's dark tokens, one for one. Every rule here is
   scoped under a lu- class, because the signing page shows an agreement whose own stylesheet
   styles bare elements (body, h1, h2, p, table, th, td) and must keep doing so inside the paper.
   Two rules follow from that: a chrome element always carries a class in its selector, so a bare
   rule can never outrank it; and no selector ever descends from .lu-main or .lu-wrap, the two
   ancestors of the paper, so nothing here can reach into the agreement (docs_test.go holds the
   stylesheet to that). */

html:root {
  --lu-bg: #08090c; --lu-surface: #0e1015;
  --lu-hair: rgba(255, 255, 255, .08); --lu-hair-2: rgba(255, 255, 255, .14); --lu-edge: rgba(255, 255, 255, .30);
  --lu-text: #f4f5f7; --lu-text-2: #9aa0ab; --lu-text-3: #6a707b; --lu-link: #6fd6ff;
  --lu-bad: #ff8a8a; --lu-bad-bg: rgba(255, 78, 85, .10);
  --lu-font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
/* The agreement's own body rule sets a measure, margins and a white ground; the shell takes the
   box and leaves the font and colour to it, which the paper inherits. */
html > body { margin: 0; padding: 0; max-width: none; min-height: 100vh; background: var(--lu-bg); display: grid; grid-template-rows: auto 1fr auto; }

.lu-top, .lu-page, .lu-strip, .lu-panel, .lu-foot { font: 16px/1.6 var(--lu-font); color: var(--lu-text); -webkit-font-smoothing: antialiased; }
.lu-top, .lu-top *, .lu-main, .lu-wrap, .lu-page *, .lu-strip, .lu-strip *, .lu-paper, .lu-panel, .lu-panel *, .lu-foot, .lu-foot * { box-sizing: border-box; }
.lu-wrap { width: 100%; max-width: 640px; margin-inline: auto; padding-inline: 20px; }

/* header. As a grid row it must be allowed to be narrower than the address it holds, or the row
   widens the page instead of cutting the address. */
.lu-top { border-bottom: 1px solid var(--lu-hair); min-width: 0; }
.lu-top > .lu-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.lu-brand { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--lu-text); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.lu-mark { width: 28px; height: 28px; display: block; flex: none; }
/* the signed-in person, at the bar's right: the address gives way first, cut with an ellipsis,
   so Sign out and the mark never move. */
.lu-who { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.lu-who-e { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--lu-text-2); }
.lu-who > form { flex: none; margin: 0; }
.lu-who-out { min-height: 44px; padding: 0 12px; margin: 0; background: none; border: 1px solid var(--lu-hair-2); border-radius: 8px; color: var(--lu-text); font: 500 14px/1 var(--lu-font); white-space: nowrap; cursor: pointer; }
.lu-who-out:hover { border-color: var(--lu-edge); }

/* main column */
.lu-main { padding-block: 24px 48px; min-width: 0; }
.lu-main > .lu-wrap { display: grid; gap: 24px; align-content: start; min-width: 0; }
.lu-page > h1 { margin: 0; font: 640 28px/1.1 var(--lu-font); font-stretch: 108%; letter-spacing: -0.03em; color: var(--lu-text); text-wrap: balance; }
.lu-page > p, .lu-panel > p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--lu-text); overflow-wrap: anywhere; }
.lu-page a:not(.lu-btn, .lu-tab), .lu-strip a, .lu-foot a { color: var(--lu-link); text-underline-offset: .18em; }
.lu-quiet.lu-quiet { color: var(--lu-text-2); }
.lu-strip { font-size: 14px; color: var(--lu-text-2); display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; margin: 0; max-width: none; }
.lu-strip a { min-height: 44px; display: inline-flex; align-items: center; }
.lu-status { border: 1px solid var(--lu-hair-2); border-radius: 8px; padding: 14px 16px; background: var(--lu-surface); font-size: 15px; }
.lu-alert, .lu-pay-problem:not(:empty) { border: 2px solid var(--lu-bad); border-radius: 8px; padding: 12px 14px; background: var(--lu-bad-bg); font-weight: 600; font-size: 15px; }
.lu-alert > span { color: var(--lu-bad); }
.lu-note { font-size: 14px; color: var(--lu-text-2); }

/* a notice to read: prose at the page's measure, in the page's own rhythm. A heading sits closer
   to what follows it than to what came before; a paragraph's lead-in is bold, not a heading. */
.lu-read { display: block; max-width: 52ch; margin-top: -8px; }
.lu-read > h2 { margin: 36px 0 10px; font: 620 22px/1.15 var(--lu-font); font-stretch: 105%; letter-spacing: -0.02em; color: var(--lu-text); }
.lu-read > p, .lu-read > ul { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--lu-text); }
.lu-read > ul { padding-left: 20px; }
.lu-read li { margin-bottom: 8px; }
.lu-read strong { font-weight: 650; }

/* the agreement, as paper. A table wider than a phone scrolls within the paper rather than
   widening the page; the browser then lets the keyboard reach the paper to scroll it. */
.lu-paper { display: block; min-width: 0; overflow-x: auto; background: #fff; color-scheme: light; border-radius: 6px; padding: 28px 20px 32px; }
.lu-paper:focus-visible { outline: 2px solid var(--lu-text); outline-offset: 3px; }

/* the signing panel */
.lu-panel { display: grid; gap: 20px; padding: 24px 20px; background: var(--lu-surface); border: 1px solid var(--lu-hair); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.lu-panel > h2 { margin: 0; font: 620 22px/1.15 var(--lu-font); font-stretch: 105%; letter-spacing: -0.02em; color: var(--lu-text); }
.lu-panel > form, .lu-form { display: grid; gap: 20px; margin: 0; }

/* controls */
.lu-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 24px; margin: 0; border: 0; border-radius: 8px; background: var(--lu-text); color: var(--lu-bg); font: 550 16px/1 var(--lu-font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; }
.lu-btn:hover { background: #fff; }
.lu-btn:disabled { opacity: .45; cursor: default; }
.lu-btn--ghost { background: none; color: var(--lu-text); border: 1px solid var(--lu-hair-2); }
.lu-btn--ghost:hover { background: none; border-color: var(--lu-edge); }
.lu-field { display: grid; gap: 6px; }
.lu-field > label { font-size: 15px; font-weight: 600; line-height: 1.4; }
.lu-hint { margin: 0; font-size: 14px; color: var(--lu-text-2); }
.lu-err { margin: 0; font-size: 14px; color: var(--lu-bad); font-weight: 600; }
/* a field's edge is the only thing that says where to type, so it clears 3:1 against the page and
   its own ground (WCAG 1.4.11); --lu-edge, at .30, reaches 2.7:1. */
.lu-in { display: block; width: 100%; height: 48px; padding: 0 12px; margin: 0; font: 16px var(--lu-font); color: var(--lu-text); background: var(--lu-surface); border: 1px solid rgba(255, 255, 255, .38); border-radius: 0; }
.lu-in::placeholder { color: var(--lu-text-3); }
.lu-field--bad > .lu-in { border: 2px solid var(--lu-bad); }
.lu-agree { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.lu-agree > input { width: 24px; height: 24px; margin: 10px 0 0; accent-color: var(--lu-text); }
.lu-agree > label { font-weight: 500; line-height: 1.5; padding-block: 8px; min-height: 44px; }
.lu-agree--bad > label { box-shadow: inset 3px 0 0 var(--lu-bad); padding-left: 12px; }

/* tabs: the page's jobs, one open at a time, in one row that scrolls sideways when it must; at
   16px apart, the three tabs and a count fit a 360px phone without scrolling. The open tab is bold
   and underlined, not only brighter. The list bleeds 5px past the rule and pads it back, so the
   scroller cannot clip a tab's focus ring. */
.lu-tabs { border-bottom: 1px solid var(--lu-hair); margin-top: -8px; min-width: 0; }
.lu-tabs > ul { list-style: none; display: flex; gap: 16px; margin: -5px; padding: 5px; overflow-x: auto; }
.lu-tabs li { flex: none; display: grid; }
.lu-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; border-bottom: 2px solid transparent; color: var(--lu-text-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.lu-tab:hover { color: var(--lu-text); }
.lu-tab[aria-current] { color: var(--lu-text); font-weight: 600; border-bottom-color: var(--lu-text); }
/* a count on a tab, of what needs the person: a pill, with the words for a screen reader hidden
   beside it. */
.lu-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lu-text); color: var(--lu-bg); font: 600 12px/1 var(--lu-font); }

/* document rows: the title and date, then the two things to do with it. On a phone the actions
   share a row under the text, each half the card wide; a wider screen puts them beside it. The
   row's buttons grow with their text rather than clipping it. Invoice rows and plan blocks take
   the same shell. */
.lu-docs, .lu-invs, .lu-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lu-doc, .lu-inv, .lu-sub { display: grid; gap: 14px 20px; padding: 16px 20px; background: var(--lu-surface); border: 1px solid var(--lu-hair); border-radius: 14px; color: var(--lu-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.lu-doc-x { display: grid; gap: 2px; min-width: 0; }
.lu-doc-t { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.lu-doc-m { font-size: 14px; color: var(--lu-text-2); }
.lu-doc-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lu-doc-a > form { display: grid; margin: 0; }
.lu-doc-a > .lu-btn, .lu-doc-a > form > .lu-btn { width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 10px 12px; font-size: 15px; line-height: 1.2; text-align: center; }
.lu-all { display: grid; gap: 8px; margin: 0; }
/* invoice rows, in the document row's shell: the number with what it is for and its state under
   it, the amount at the right edge on the number's line so the amounts read down the list, and
   the PDF under them. The figures are proportional, like every other number on the page. */
.lu-inv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "x m" "s m" "a a"; gap: 2px 16px; align-items: start; }
.lu-inv-x { grid-area: x; display: grid; gap: 2px; min-width: 0; }
.lu-inv-n { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.lu-inv-w { font-size: 14px; color: var(--lu-text-2); overflow-wrap: anywhere; }
.lu-inv-s { grid-area: s; font-size: 14px; color: var(--lu-text-2); }
.lu-inv-s--due { color: var(--lu-text); }
.lu-inv-m { grid-area: m; font-weight: 600; line-height: 1.3; text-align: right; }
.lu-inv-a { grid-area: a; margin-top: 12px; }
/* a row's actions, and a page's: side by side, each as wide as the other, or one across the row.
   A step's (the button, then the way back) stack on a phone, the button first, and sit side by
   side once there is room. */
.lu-inv-a, .lu-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 0; }
.lu-acts--stack { grid-auto-flow: row; grid-auto-columns: auto; }
.lu-inv-a > .lu-btn, .lu-acts > .lu-btn { width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 10px 12px; font-size: 15px; line-height: 1.2; }
/* plan blocks: each plan's facts (.lu-facts) and, under them, the line about an invoice of its
   that is late, whose link is a thumb's target without moving the line. */
.lu-sub { gap: 16px; min-width: 0; align-content: start; }
/* Landing on a plan's block by its id after giving notice: room above it for the status line
   saying so (three lines on a phone), which a scroll flush to the block would hide. */
.lu-status ~ .lu-subs > .lu-sub { scroll-margin-top: 9rem; }
.lu-sub > p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.lu-sub > p > a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
/* a link standing on its own line (the help question under the plans, a way back): the footer
   link's trick, by padding rather than a minimum height, because on a phone the text may wrap to
   two lines. */
.lu-link { display: inline-block; padding-block: 11px; margin-block: -11px; }
/* paying an invoice: what it is for, the figure its state is about, and the state; then Stripe's
   Payment Element in the panel. The loading line goes once Stripe has put its frame in. The
   problem line is in the page from the start, so the alert is heard, and takes the alert's box
   only once it says something. */
/* An invoice number never breaks at its hyphen. */
.lu-ref { white-space: nowrap; }
.lu-pay-sum { display: grid; gap: 4px; }
.lu-pay-sum > p { margin: 0; }
.lu-pay-what, .lu-pay-state { font-size: 15px; color: var(--lu-text-2); }
.lu-pay-amt { font: 640 32px/1.1 var(--lu-font); font-stretch: 108%; letter-spacing: -0.03em; }
.lu-pay-of { font: 500 15px/1.4 var(--lu-font); letter-spacing: 0; color: var(--lu-text-2); }
.lu-pay-state--due { color: var(--lu-text); }
.lu-pay-loading { margin: 0; font-size: 15px; color: var(--lu-text-2); }
.lu-pay-el:has(iframe) > .lu-pay-loading { display: none; }
.lu-pay-problem { margin: 0; }
.lu-pay-problem:not(:empty) { margin-bottom: 16px; }
.lu-pay-go > .lu-btn { width: 100%; }
/* Stripe's badge, over the card line: 120px wide, smaller than the site's own mark, and a thumb's
   target without pushing the line under it away. */
.lu-stripe { display: flex; align-items: center; width: max-content; min-height: 44px; margin: -8px 0 0; }
.lu-stripe > svg { display: block; width: 120px; height: 27.2px; }
/* labelled facts (the bank details to pay by transfer, a plan): each on its own row, its name
   over its value on a phone and beside it when there is room, a Copy button at the row's end
   where there is one. An account name is never restyled: the payer's bank checks it. A row is as
   tall as its button, so the button appearing moves nothing. */
.lu-facts { margin: 0; display: grid; gap: 10px; }
.lu-facts > div { display: grid; gap: 2px; min-width: 0; }
.lu-facts dt { font-size: 14px; color: var(--lu-text-2); }
.lu-facts dd { margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; overflow-wrap: anywhere; }
.lu-facts dd:has(> .lu-copy) { min-height: 44px; }
.lu-facts-x { min-width: 0; }
.lu-facts-h { grid-column: 1 / -1; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--lu-text-2); }
.lu-copy { flex: none; min-width: 5.75rem; min-height: 44px; padding: 0 12px; margin: 0; background: none; border: 1px solid var(--lu-hair-2); border-radius: 8px; color: var(--lu-text); font: 500 14px/1 var(--lu-font); cursor: pointer; }
.lu-copy:hover { border-color: var(--lu-edge); }
.lu-copy[hidden] { display: none; }
.lu-bank-warn.lu-bank-warn { font-size: 15px; color: var(--lu-text); }
/* Read out but not drawn: the document's title inside each of its controls' names. */
.lu-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* footer */
.lu-foot { border-top: 1px solid var(--lu-hair); padding-block: 24px; font-size: 13px; color: var(--lu-text-2); line-height: 1.6; }
.lu-foot > .lu-wrap { display: grid; gap: 6px; }
.lu-foot p { margin: 0; max-width: none; font-size: 13px; }
/* the footer's link is a thumb's target without moving the lines around it. */
.lu-foot-l { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }

/* focus, as on the site */
.lu-brand:focus-visible, .lu-btn:focus-visible, .lu-in:focus-visible, .lu-agree > input:focus-visible, .lu-who-out:focus-visible, .lu-copy:focus-visible,
.lu-page a:focus-visible, .lu-strip a:focus-visible, .lu-foot a:focus-visible { outline: 2px solid var(--lu-text); outline-offset: 3px; }

@media (min-width: 720px) {
  .lu-btn { width: auto; min-width: 16rem; }
  .lu-paper { padding: 40px 44px; }
  .lu-doc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .lu-doc-a { grid-template-columns: auto auto; }
  .lu-doc-a > .lu-btn, .lu-doc-a > form > .lu-btn { width: auto; padding-inline: 16px; }
  .lu-inv { grid-template-columns: minmax(0, 1fr) auto minmax(17.5rem, auto); grid-template-areas: "x m a" "s m a"; column-gap: 20px; }
  .lu-inv-a { margin-top: 0; align-self: center; justify-content: end; }
  .lu-inv-a, .lu-acts { grid-auto-columns: auto; }
  .lu-acts { justify-content: start; }
  .lu-acts--stack { grid-auto-flow: column; }
  .lu-inv-a > .lu-btn, .lu-acts > .lu-btn { width: auto; padding-inline: 16px; }
  .lu-facts > div { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: 12px; }
}

/* Wider screens earn a second column: the panel beside the paper, in view while the reader
   scrolls. Pages with one job keep one 640px column. */
@media (min-width: 1000px) {
  .lu-wrap--wide { max-width: 1120px; padding-inline: 32px; }
  .lu-main--sign > .lu-wrap { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
  .lu-main--sign > .lu-wrap > .lu-strip { grid-column: 1 / -1; }
  .lu-main--sign > .lu-wrap > .lu-strip > a { display: none; }
  .lu-main--sign > .lu-wrap > .lu-paper { max-width: 760px; }
  .lu-main--sign > .lu-wrap > .lu-panel { position: sticky; top: 16px; }
  .lu-panel .lu-btn { width: 100%; }
}

@media print {
  html > body { background: #fff; display: block; min-height: 0; }
  .lu-top, .lu-strip, .lu-panel, .lu-foot { display: none; }
  .lu-paper { padding: 0; border-radius: 0; overflow: visible; }
}