/* Lotwell on the web: the same asphalt, sign, and curb yellow as the app. */
:root {
  color-scheme: dark;
  --asphalt: #24272c;
  --card: #2f3338;
  --card-raised: #3a3f46;
  --line: rgba(245, 244, 241, 0.16);
  --paint: #f5f4f1;
  --muted: #b4b9c0;
  --yellow: #f0b429;
  --blue: #7fa9e8;
  --action: #3a6fc8;
  --green: #5fae88;
  --red: #e57368;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--asphalt); color: var(--paint);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
main.narrow { max-width: 30rem; }
header.bar { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.wordmark { font-size: 2rem; font-weight: 800; letter-spacing: 0.06em; font-stretch: condensed; margin: 0; }
.wordmark span { color: var(--yellow); }
.kicker { font: 500 0.72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.spacer { flex: 1; }
h2 { font-size: 1.05rem; margin: 2rem 0 0.75rem; }
p { margin: 0 0 0.9rem; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
[hidden] { display: none !important; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.2rem; }
.stack > * + * { margin-top: 0.9rem; }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

label { display: block; font-size: 0.875rem; color: var(--muted); margin-bottom: 0.3rem; }
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  width: 100%; min-height: 44px; padding: 0.55rem 0.8rem; border-radius: 12px;
  border: 1px solid var(--line); background: #1e2126; color: var(--paint); font: inherit;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

button, a.button {
  min-height: 44px; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card-raised); color: var(--paint); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
button.primary, a.button.primary { background: var(--action); border-color: transparent; color: #fff; }
button.danger { color: var(--red); }
button.quiet { background: transparent; }
button:disabled { opacity: 0.5; cursor: default; }
.wide { width: 100%; }

.notice { border-radius: 12px; padding: 0.7rem 0.9rem; background: var(--card-raised); border: 1px solid var(--line); }
.notice.error { background: #6e2a23; border-color: transparent; }
.notice.good { background: #24503d; border-color: transparent; }
.notice.warn { background: #5c4a14; border-color: transparent; }

.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.total b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }

.property { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: start; }
.property h3 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.property .facts { color: var(--muted); font-size: 0.9rem; }
.property .actions { grid-column: 1 / -1; }
.property .actions button { min-height: 38px; padding: 0.35rem 0.9rem; font-size: 0.9rem; }
.chip {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 6px; font: 600 0.72rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em; text-transform: uppercase; background: #5c6167; color: #fff;
}
.chip.good { background: #3e7a5e; }
.chip.bad { background: #be3a2b; }
.chip.warn { background: var(--yellow); color: #1e2126; }

.code { font: 700 2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; text-align: center; user-select: all; }
dialog { background: var(--card); color: var(--paint); border: 1px solid var(--line); border-radius: 20px; padding: 1.4rem; max-width: 26rem; width: calc(100% - 2rem); }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.amount { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The page's security policy forbids inline styles, so these small adjustments are classes. */
.narrow-card { max-width: 28rem; }
.flat { margin: 0; }
.grow { flex: 1; min-width: 14rem; }
.end { align-self: end; }

/* The console's tabs, lists, and checklists. */
nav.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
nav.tabs a {
  min-height: 44px; padding: 0.5rem 1rem; border-radius: 999px; color: var(--muted); text-decoration: none;
  font-weight: 600; display: inline-flex; align-items: center;
}
nav.tabs a[aria-current="page"] { background: var(--card-raised); color: var(--paint); }
a { color: var(--blue); }
.property h3 a { color: var(--paint); text-decoration: none; }
.property h3 a:hover { text-decoration: underline; }
.title { font-size: 1.5rem; }
select { appearance: auto; width: auto; min-width: 12rem; }
textarea { font: 0.9rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
input[type="file"] { color: var(--muted); font: inherit; max-width: 100%; }
label.check { display: flex; gap: 0.5rem; align-items: center; color: var(--paint); font-size: 1rem; min-height: 44px; margin: 0; }
label.check input { width: 1.2rem; height: 1.2rem; }
.rows { padding: 0.2rem 1.2rem; }
.line { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; padding: 0.7rem 0; }
.line + .line { border-top: 1px solid var(--line); }
.when { min-width: 10.5rem; font-variant-numeric: tabular-nums; }
.small-button { min-height: 38px; padding: 0.3rem 0.9rem; font-size: 0.9rem; }
.gap { margin-left: 0.5rem; }
.bad-text { color: var(--red); }
.chips { justify-content: flex-end; }
ol.steps { list-style: none; margin: 0; padding: 0.2rem 1.2rem; }
ol.steps li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.8rem 0; }
ol.steps li + li { border-top: 1px solid var(--line); }
ol.steps .chip { min-width: 4.2rem; text-align: center; margin-top: 0.15rem; }
progress { display: block; width: 100%; max-width: 20rem; height: 0.5rem; margin-top: 0.45rem; accent-color: var(--green); }
.total b.words { font-size: 1.1rem; line-height: 2.1rem; }
.property .actions a.button { min-height: 38px; padding: 0.35rem 0.9rem; font-size: 0.9rem; }

/* Placards: white cards on screen, and nothing but the cards on paper. */
.sheet-tools fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 0.3rem 1.2rem; flex-wrap: wrap; }
.sheet-tools legend { font-size: 0.875rem; color: var(--muted); margin-bottom: 0.3rem; padding: 0; }
.placards { display: grid; gap: 0.25in; justify-content: start; margin-top: 1.5rem; }
/* Sized to fit both US Letter and A4 inside the half inch page margin. */
.placards.large { grid-template-columns: repeat(2, 3.5in); }
.placards.small { grid-template-columns: repeat(3, 2.25in); }
.placard {
  background: #fff; color: #111; border: 1px dashed #999; border-radius: 0.12in; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  break-inside: avoid; page-break-inside: avoid; overflow: hidden;
}
.placards.large .placard { height: 4.7in; padding: 0.22in; }
.placards.small .placard { height: 2.25in; padding: 0.1in; }
.placard .where { font: 600 0.11in/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #444; }
.placard .number { font-weight: 800; letter-spacing: 0.02em; line-height: 1; font-stretch: condensed; }
.placards.large .number { font-size: 0.95in; }
.placards.small .number { font-size: 0.42in; }
.placard svg { display: block; }
.placards.large svg { width: 2.5in; height: 2.5in; }
.placards.small svg { width: 1.25in; height: 1.25in; }
.placard .how { font-size: 0.12in; color: #333; }
.placards.small .where, .placards.small .how { font-size: 0.085in; }
@page { margin: 0.5in; }
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .no-print { display: none !important; }
  .placards { margin: 0; }
}