/* Phinix base styles: mobile first, no build step (E39). */
:root {
  --bg: #ffffff;
  --fg: #1c1d21;
  --muted: #5b5e66;
  --accent: #0b6bcb;
  --on-accent: #ffffff;
  --border: #e2e4e8;
  --danger: #b42318;
  --danger-bg: #fdecea;
  --info-bg: #eef4fb;
  --success-bg: #eaf6ee;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15161a;
    --fg: #e8e9ec;
    --muted: #a3a6ad;
    --accent: #5ea8f2;
    --on-accent: #0d1b2a; /* white on the light dark-mode blue would be ~2.6:1 */
    --border: #2c2e34;
    --danger: #ff8a80;
    --danger-bg: #3a1d1b;
    --info-bg: #1b2633;
    --success-bg: #1b2d22;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem; }
.site-header { border-bottom: 1px solid var(--border); padding: .75rem 1rem; }
.brand { font-weight: 700; text-decoration: none; color: var(--fg); }
main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .75rem; }
.lead { font-size: 1.125rem; color: var(--muted); }

/* Header with account links */
/* Wraps on phones: the account links move below the brand instead of being pushed off-screen. */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.account { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem .75rem; font-size: .9rem; min-width: 0; }
.account form { margin: 0; }
.who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* Forms (auth pages) */
.stack { display: flex; flex-direction: column; gap: 1rem; margin: 1.25rem 0; }
.field { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; }
.field input {
  font: inherit; font-weight: 400; padding: .7rem .8rem; border: 1px solid var(--border);
  border-radius: .5rem; background: var(--bg); color: var(--fg); width: 100%;
}
.field input[aria-invalid="true"] { border-color: var(--danger); }
button:not(.link), a.button {
  font: inherit; font-weight: 600; padding: .75rem 1rem; border: 0; border-radius: .5rem;
  background: var(--accent); color: var(--on-accent); cursor: pointer; text-align: center; text-decoration: none;
  display: inline-block;
}
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.form-title { font-size: 1.1rem; margin: 1.5rem 0 -.25rem; }
.msg { margin: 0; padding: .6rem .8rem; border-radius: .5rem; background: var(--info-bg); }
.msg-error { background: var(--danger-bg); color: var(--danger); }
.msg-success { background: var(--success-bg); }
.links { display: flex; flex-direction: column; gap: .5rem; }

/* Tables (administration) */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }

/* Second factor (account page) */
.qr { display: block; background: #fff; padding: .5rem; border-radius: .5rem; }
.hint { color: var(--muted); margin: 0; }
code.secret { font-size: 1rem; word-break: break-all; }
.codes { columns: 2; padding-left: 1.5rem; margin: 0; font-size: 1rem; }

/* Administration */
.subnav { display: flex; gap: 1rem; margin: 0 0 1rem; }
.subnav a[aria-current="page"] { font-weight: 700; text-decoration: none; color: var(--fg); }
.cards { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.card { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.card-title { font-weight: 600; overflow-wrap: anywhere; }
form.inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
form.inline .field { flex: 1 1 10rem; }
select { font: inherit; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg); color: var(--fg); width: 100%; }
.checks { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.checks legend { font-weight: 600; margin-bottom: .5rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; }