/* 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). */

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/static/fonts/mona-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/static/fonts/mona-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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 */
.lu-top { border-bottom: 1px solid var(--lu-hair); }
.lu-top > .lu-wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.lu-brand { 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; }
.lu-mark { width: 28px; height: 28px; display: block; flex: none; }

/* main column */
.lu-main { padding-block: 24px 48px; }
.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); }
.lu-page a:not(.lu-btn), .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 { 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); }

/* 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--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; }
.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 var(--lu-edge); 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; }
.lu-signedas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--lu-text-2); }
.lu-signedas > form { margin: 0; }
.lu-linkbtn { background: none; border: 0; padding: 0 4px; margin: 0; min-height: 44px; color: var(--lu-link); font: 15px var(--lu-font); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* 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. */
.lu-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lu-doc { 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); font-variant-numeric: tabular-nums; }
.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; }
/* 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; }

/* focus, as on the site */
.lu-brand:focus-visible, .lu-btn:focus-visible, .lu-in:focus-visible, .lu-agree > input:focus-visible, .lu-linkbtn: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; }
}

/* 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; }
}