/* The showroom - its own pages. PLN-0050 stage 1.2 (APR-0233).
   House style of the 13treden letter: paper and ink, one gold, Georgia headings, small gold capitals.
   System fonts only, no script, no request to anyone else. Phone first (390), then 1280.
   Markup that server code builds (index.js) is styled by its existing classes; nothing here needs a change there. */

:root {
  color-scheme: light dark;
  --bg: #faf8f3; --panel: #ffffff; --fg: #1c2230; --muted: #5a6373; --line: #d8d2c6;
  --accent: #8c6a1f; --on-accent: #ffffff; --err: #a8231b; --err-bg: #fbeceb; --wash: #f2eee4;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151c; --panel: #1a1e28; --fg: #e9e6dd; --muted: #a2a9b6; --line: #333a49;
    --accent: #d1ab55; --on-accent: #14171f; --err: #ffa69e; --err-bg: #2e1a1a; --wash: #181c25;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 16px/1.55 var(--sans); color: var(--fg); background: var(--bg); }
body.plain { display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 2rem; }
@media (max-width: 479px) { body.plain { padding-top: 2rem; } }

a { color: var(--accent); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font-size: 1.75rem; margin: .1rem 0 .9rem; }
h2 { font-size: 1.3rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
p { margin: 0 0 1rem; }
.eyebrow { margin: 0; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.lede { font-family: var(--serif); font-size: 1.1rem; color: var(--muted); }
.meta { color: var(--muted); font-size: .9rem; }
.foot { margin: 1.25rem 0 0; font-size: .95rem; }
code { font-family: var(--mono); font-size: .85em; overflow-wrap: anywhere; }

/* ---- the single card pages: landing, login, 404, 503, message, invite, logout ---- */
.card { width: 100%; max-width: 26rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1.75rem 1.5rem 1.5rem; }
.card h1 { margin-top: .5rem; }

/* ---- forms ---- */
label { display: block; margin: 0 0 1rem; font-size: .95rem; color: var(--muted); }
input:not([type=checkbox]) {
  display: block; width: 100%; min-height: 48px; margin-top: .3rem; padding: .6rem .75rem;
  font: inherit; font-size: 1rem; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px;
}
input[type=checkbox] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
label.check { display: flex; gap: .7rem; align-items: center; min-height: 44px; color: var(--fg); }
button, a.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.2rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 6px;
}
button.primary, a.button { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.card button.primary, .card a.button { width: 100%; }
button.quiet { color: var(--muted); }

/* The notice has its height reserved whether or not it holds text, so a failed login moves nothing. */
.message { min-height: 5.4rem; margin: 1rem 0 0; padding: .55rem .8rem; font-size: .95rem; line-height: 1.45; border-left: 3px solid transparent; }
.message:not(:empty) { color: var(--err); background: var(--err-bg); border-left-color: var(--err); border-radius: 0 6px 6px 0; }

/* ---- logged-in pages ---- */
.bar { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; padding: .25rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.bar a { display: inline-flex; align-items: center; min-height: 44px; }
.bar .who { margin-right: auto; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
main.page { max-width: 40rem; margin: 0 auto; padding: 1.75rem 1rem 3rem; }
main.wide { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1rem 3rem; }

/* ---- the business list: each card is one door ---- */
ul.businesses { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
li.business { position: relative; display: grid; gap: .15rem; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
li.business a { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--fg); text-decoration: none; }
li.business a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
li.business:hover, li.business:focus-within { border-color: var(--accent); }
li.business a:focus-visible { outline: none; }
li.business:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
li.empty { padding: 1.5rem 1.1rem; color: var(--muted); font-family: var(--serif); background: var(--panel); border: 1px dashed var(--line); border-radius: 10px; }

/* ---- the admin ---- */
.panel, section.tenant { margin-top: 1.5rem; padding: 1.1rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
section.tenant h2 code { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--muted); }
form.inline { display: inline-block; margin: 0 .4rem .4rem 0; }
form.inline button { min-height: 44px; padding: .4rem .9rem; font-size: .9rem; }
table { width: 100%; border-collapse: collapse; margin: .4rem 0 .5rem; font-size: .9rem; }
th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
th, td { text-align: left; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
td form.inline { margin: 0; }
td form.inline button { min-height: 36px; padding: .2rem .7rem; }
ul.history, ul.log { margin: 0; padding: 0; list-style: none; font-size: .85rem; }
ul.history li { padding: .3rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
ul.log { max-height: 26rem; overflow-y: auto; padding: .5rem .7rem; background: var(--wash); border-radius: 6px; }
ul.log li { padding: .15rem 0; }
ul.log code { white-space: pre-wrap; }

/* Narrow: every table row becomes a stacked card. Labels come from the column's place, so the
   markup the server builds stays as it is. The empty cell (no action) is dropped. */
@media (max-width: 719px) {
  table, tbody, tr, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { margin: 0 0 .75rem; padding: .4rem .8rem; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
  td { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; padding: .45rem 0; border-bottom: 0; overflow-wrap: anywhere; }
  td:empty { display: none; }
  td::before { flex: 0 0 5.6rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
  section.tenant td:nth-child(1)::before { content: "Version"; }
  section.tenant td:nth-child(2)::before { content: "Shown"; }
  section.tenant td:nth-child(3)::before { content: "Clients"; }
  section.tenant td:nth-child(4)::before { content: "Hide"; }
  section.tenant td:nth-child(5)::before { content: "Folder"; }
  table.people td:nth-child(1)::before { content: "User"; }
  table.people td:nth-child(2)::before { content: "Role"; }
  table.people td:nth-child(3)::before { content: "Business"; }
  table.people td:nth-child(4)::before { content: "State"; }
  table.people td:nth-child(5)::before { content: "TOTP"; }
  td form.inline button { min-height: 44px; }
}
@media (min-width: 720px) {
  main.page, main.wide { padding-top: 2.5rem; }
  .panel, section.tenant { padding: 1.4rem 1.6rem; }
  .bar { padding: .25rem 2rem; }
}