/* Sign-in pages and Settings (dashboard/templates, served by dashboard/web.py), and the small labels (.badge) the
   dashboard shares. Dash loads this file on its pages too, so everything is prefixed. */

/* ---------- the new look, "Dusk" (docs/redesign.md; Elijah, Nov 10 2026) ----------
   These pages are calm ones: the form straight on the paper with no card around it (Elijah, Nov 11 2026: "the open,
   no card layout"), Newsreader for the headline, Inter for the rest, solid ink buttons. No night sky, no pixel art. The colours are the same tokens, under the same names, as style.css's
   ":root:has(#shell.dusk)" block: keep the two in step. They are set for a page whose <body> is .auth-body only, so
   the Dash pages that also load this file are untouched; every rule below starts with .auth- or .auth-body for the
   same reason. Light only for now. */
:root:has(body.auth-body), body.auth-body {
  --bg: #F5F4F0;            /* paper */
  --surface: #FCFBF9;
  --surface-2: #EDEBE4;     /* a pressed or hovered surface */
  --border: #DCDAD2;        /* hairlines */
  --line: #C9C6BC;          /* a border that must show on a surface: fields, outlined buttons */
  --text: #44454E;
  --text-strong: #1B1C22;   /* ink */
  --ink-hover: #32333C;     /* a solid ink button under the pointer */
  --muted: #696B74;
  --muted-2: #696B74;
  --primary: #3B4A8C;       /* indigo, the brand colour */
  --primary-soft: #E4E6F1;
  --pos: #2E7D55;
  --pos-soft: #E4EFE8;
  --neg: #B4472F;
  --neg-soft: #F6E5E0;
  --warn: #C7853A;          /* dawn amber */
  --warn-soft: #F6E9D8;
  --violet: #7A5C93;        /* heather */
  --rose: #A46A86;
  --sage: #6E8F86;
  --bench: #84868E;
  --night: #10132A;
  --radius: 3px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;   /* headlines only */
  --lift: 0 1px 0 rgba(27,28,34,.03), 0 18px 40px -28px rgba(27,28,34,.28);   /* a card's soft shadow, as on the intro page */
}

.auth-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg);
  color: var(--text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.auth-body ::selection { background: var(--primary-soft); }
.auth-body .mono { font-family: var(--font); }   /* (Mono is for tables and charts in the new look) */
.auth-body :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* the top bar: the logo (home) and a few plain links, as on the intro page once you scroll */
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 68px; flex: none;
  padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--border); background: var(--bg); }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text-strong); }
/* The name beside the logo (Elijah, Nov 11 2026: "with the name", his pick for the app's top bar; the same here so
   every top bar matches): Newsreader in widely spaced capitals, ink, nothing around it. The logo alone on a phone.
   Same numbers as .tb-name in assets/dusk-shell.css and assets/intro.css. */
.brand-name { margin-right: -.2em; font: 400 19px/1 var(--serif); letter-spacing: .2em; color: var(--text-strong); }
@media (max-width: 760px) { .brand-name { display: none; } }
.auth-nav { display: flex; gap: 22px; font-size: 15px; font-weight: 500; color: var(--text-strong); }
.auth-nav a { white-space: nowrap; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.auth-nav a:hover { text-decoration: underline; }

/* (The logo's own colours and motion come with its drawing: templates/_logo.html, logo_style.) */

.auth-main { flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: clamp(40px, 11vh, 120px) 20px 48px; }
/* The page's one column (the class is still called "card"): open, nothing drawn around it. Settings is open too:
   its two panes are told apart by one hairline (.acct-nav, below). */
.auth-card { width: min(384px, 100%); }
.auth-card-wide { width: min(620px, 100%); }
/* The column settles into place as the page opens. Not when it has a message to show: that is seen at once. */
@media (prefers-reduced-motion: no-preference) {
  .auth-card:not(:has(.alert)) { animation: auth-in .55s cubic-bezier(.2, .7, .2, 1) backwards; }
  .auth-card .alert { animation: auth-in .4s cubic-bezier(.2, .7, .2, 1) backwards; }
  .auth-foot { animation: auth-fade .6s ease .25s backwards; }
}
@keyframes auth-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes auth-fade { from { opacity: 0; } }
.auth-title { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.12;
  letter-spacing: -.012em; color: var(--text-strong); text-wrap: balance; }
.auth-sub { margin: 0 0 24px; color: var(--text); line-height: 1.55; text-wrap: pretty; }
.auth-section { margin: 30px 0 10px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 16px;
  font-weight: 600; color: var(--text-strong); }
/* the closing line: as wide as the column above it, under a hairline, as the intro page's footer */
.auth-foot { width: min(384px, 100%); margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.5; }
.auth-card-wide ~ .auth-foot { width: min(620px, 100%); }
.acct-card ~ .auth-foot { width: min(1000px, 100%); }
.auth-foot a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.auth-foot a:hover { color: var(--text-strong); }

.auth-form { display: flex; flex-direction: column; }
.auth-form .btn { align-self: flex-start; margin-top: 8px; }
.auth-label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 500; color: var(--text-strong); }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-label-row .auth-link { font-size: 13px; }
.auth-input {
  width: 100%; height: 44px; padding: 0 12px; background: var(--surface); color: var(--text-strong);
  border: 1px solid var(--line); border-radius: var(--radius); font: 15px var(--font);
  transition: border-color .15s, box-shadow .15s;
}
select.auth-input { appearance: auto; }
.auth-input:hover { border-color: var(--muted); }
.auth-input:focus, .auth-input:focus-visible { outline: 2px solid transparent; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft); }
.auth-input::placeholder { color: var(--muted); opacity: .8; }
.auth-prefix { display: flex; align-items: stretch; }
.auth-prefix span { display: flex; align-items: center; padding: 0 11px; border: 1px solid var(--line);
  border-right: none; border-radius: var(--radius) 0 0 var(--radius); background: var(--surface-2); color: var(--muted); }
.auth-prefix .auth-input { border-radius: 0 var(--radius) var(--radius) 0; }
.auth-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.auth-fine { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.auth-switch { margin: 22px 0 0; color: var(--muted); }
.auth-link { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); transition: text-decoration-color .15s; }
.auth-link:hover { text-decoration-color: currentColor; }
.auth-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.auth-inline { margin: 8px 0 0; }
.auth-row { display: flex; align-items: center; gap: 10px; margin: 0; }

/* Buttons, as on the intro page: outlined ("ghost") by default, solid ink for the one main action. */
.auth-body .btn { display: inline-block; padding: 9px 16px; background: transparent; color: var(--text-strong);
  border: 1px solid var(--text-strong); border-radius: var(--radius); font: 600 14px var(--font); line-height: 1.4;
  cursor: pointer; text-align: center; transition: background-color .15s, border-color .15s, color .15s, transform .08s; }
.auth-body .btn:hover { background: var(--surface-2); border-color: var(--text-strong); color: var(--text-strong); }
.auth-body .btn:active { transform: translateY(1px); }
.auth-body .btn-primary { background: var(--text-strong); color: var(--bg); }
.auth-body .btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--bg); filter: none; }
.auth-body .btn:disabled, .auth-body .btn:disabled:hover { opacity: .45; cursor: not-allowed; transform: none; }
.auth-body .btn-quiet { border-color: transparent; color: var(--muted); font-weight: 500; }
.auth-body .btn-quiet:hover { background: none; border-color: var(--line); color: var(--text-strong); }
.auth-body .auth-submit { width: 100%; height: 46px; margin-top: 22px; align-self: stretch; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .auth-body .btn, .auth-input, .auth-link { transition: none; } }

.auth-providers { display: flex; flex-direction: column; gap: 10px; }
.auth-provider {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--text-strong); font-weight: 500; transition: border-color .15s, background-color .15s;
}
.auth-provider:hover { border-color: var(--text-strong); background: var(--bg); }
.auth-provider svg { width: 18px; height: 18px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Messages (_alerts.html): a tinted note with ink text, so it reads on paper. Amber: something went wrong. Green: done. */
.auth-body .alert { margin: 0 0 20px; padding: 11px 14px; border: 1px solid; border-radius: var(--radius); }
.auth-body .alert-title { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--text-strong); }
.auth-body .alert-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.auth-body .alert-ok { background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 40%, transparent); }
.auth-body .alert-warn .alert-title, .auth-body .alert-ok .alert-title { color: var(--text-strong); }

.auth-notice { margin: 24px 0 6px; padding: 16px 18px; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); }
.auth-notice-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.auth-notice ul { margin: 0; padding-left: 18px; line-height: 1.55; }
.auth-notice li + li { margin-top: 4px; }
.auth-notice .welcome-facts { margin-top: 14px; }
.auth-notice .acct-choices legend { display: none; }  /* the box's title asks the question */
.auth-notice .acct-choice { background: var(--bg); }
.auth-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; line-height: 1.45; cursor: pointer; }
.auth-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.auth-check-hint { margin: 2px 0 0 26px; }

.auth-steps { display: flex; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: step; font-size: 13px; }
.auth-steps li { counter-increment: step; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.auth-steps li::before { content: counter(step); width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; border: 1px solid var(--line); font-size: 12px; font-weight: 500; }
.auth-steps li + li::after { content: none; }
.auth-steps li.done::before { content: "✓"; background: var(--pos-soft); border-color: var(--pos); color: var(--pos); }
.auth-steps li.current { color: var(--text-strong); font-weight: 500; }
.auth-steps li.current::before { border-color: var(--text-strong); background: var(--text-strong); color: var(--bg); }
.auth-steps li:not(:last-child)::after { content: ""; width: 18px; height: 1px; background: var(--line); margin-left: 4px; }

.auth-methods { list-style: none; margin: 0; padding: 0; }
.auth-methods li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border); }
.auth-methods form { margin: 0; }

/* (The main page, / for anyone not signed in, has its own styles: assets/intro.css.) */

/* Settings (/account, templates/account.html): the sections on the left, one section on the right. On a phone
   /account is the list and /account/<section> one section with a way back. */
.auth-card.acct-card { width: min(1000px, 100%); padding: 0; }
.auth-main:has(.acct-card) { padding-top: clamp(32px, 7vh, 72px); }
.acct { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 520px; }
.acct-nav { border-right: 1px solid var(--border); padding: 0 0 4px; display: flex; flex-direction: column; }
.acct-title { margin: 0 20px 16px 0; font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.01em;
  color: var(--text-strong); }
.acct-me { display: flex; align-items: center; gap: 10px; margin: 0 20px 12px 0; padding-bottom: 16px;
  border-bottom: 1px solid var(--border); min-width: 0; }
.acct-me-text { min-width: 0; }
.acct-me-name { color: var(--text-strong); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.acct-me-user { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.acct-links { list-style: none; margin: 0; padding: 0; }
.acct-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-right: 20px; color: var(--text);
  border-radius: var(--radius); transition: background-color .15s, color .15s; }
.acct-link svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.acct-link:hover { background: var(--surface-2); color: var(--text-strong); }
.acct-link.on { color: var(--text-strong); font-weight: 500; background: var(--primary-soft); }
.acct-link.on svg { color: var(--primary); }
.acct-back { align-self: flex-start; margin: auto 20px 0 0; }  /* (a .back-link: style.css) */
.acct-panel { padding: 0 0 8px 44px; min-width: 0; }
.acct-panel .alert { margin-bottom: 16px; }
.acct-up { display: none; }
.acct-h { margin: 0 0 6px; font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em;
  color: var(--text-strong); }
.acct-sub { margin: 28px 0 6px; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.acct-sub-first { margin-top: 0; }
.acct-row-actions { margin: 10px 0 0; }
.acct-warn { color: var(--neg); }

.acct-photo { display: flex; align-items: center; gap: 18px; padding: 16px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.acct-photo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-photo-text strong { color: var(--text-strong); font-weight: 600; }
.acct-photo-text .auth-hint { margin: 0; }
.acct-photo-actions { display: flex; gap: 8px; align-items: center; }
.acct-photo-actions form { margin: 0; }
.acct-photo-actions label.btn { cursor: pointer; }
.acct-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.acct-file:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }
textarea.auth-input.acct-bio { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 1.45; }

.acct-choices { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.acct-choices legend { padding: 0; margin: 0 0 -2px; }
.acct-choice { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; margin-top: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); line-height: 1.45;
  transition: border-color .15s, background-color .15s; }
.acct-choice:hover { border-color: var(--muted); }
.acct-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.acct-choice input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.acct-choice strong { display: block; color: var(--text-strong); font-weight: 600; }
.acct-choice-desc { display: block; font-size: 14px; color: var(--text); }
.acct-choice.is-off { cursor: not-allowed; }
.acct-choice.is-off strong { color: var(--muted-2); }
.acct-admin-note { margin-top: 10px; }
.acct-admin-note strong { color: var(--text-strong); font-weight: 600; }

.acct-rows { list-style: none; margin: 0 0 6px; padding: 0; }
.acct-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; }
.acct-row.is-off { cursor: default; opacity: .65; }
.acct-row-text { flex: 1; min-width: 0; }
.acct-row-text strong { display: block; color: var(--text-strong); font-weight: 600; margin-bottom: 2px; }
.acct-row-text .auth-hint { margin: 0; display: block; }
.acct-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 38px; height: 22px;
  margin: 0; border-radius: 11px; background: var(--bench); cursor: pointer; transition: background .15s; }
.acct-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .15s, background .15s; }
.acct-switch:checked { background: var(--pos); }
.acct-switch:checked::after { left: 19px; background: #fff; }
.acct-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acct-switch:disabled { cursor: default; }
.acct-verify { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px 0 8px; }
.acct-facts { margin: 0; padding-left: 18px; line-height: 1.6; }
.acct-facts li + li { margin-top: 6px; }
.acct-facts strong { color: var(--text-strong); }

.auth-prose p, .auth-prose li { line-height: 1.6; }
.auth-prose ul { padding-left: 18px; }

/* small labels shared with the dashboard */
.badge { display: inline-block; padding: 1px 7px; border: 1px solid var(--border); border-radius: 10px; font-size: 11px;
  font-weight: 500; color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.badge-ok { border-color: rgba(34,163,90,.5); color: var(--pos); }
.badge-admin { border-color: rgba(155,122,230,.55); color: var(--violet); }
.badge-trade { border-color: rgba(58,142,230,.5); color: var(--primary); }
.badge-free { border-color: rgba(224,163,57,.5); color: var(--warn); }
.badge-sample { border-color: rgba(138,148,166,.5); color: var(--bench); }
.badge-off { border-color: rgba(229,72,77,.5); color: var(--neg); }
.auth-body .badge { border-color: var(--line); color: var(--text); font-size: 12px; }
.auth-body .badge-ok { border-color: color-mix(in srgb, var(--pos) 55%, transparent); color: var(--pos); }
.auth-body .badge-admin { border-color: color-mix(in srgb, var(--violet) 55%, transparent); color: var(--violet); }
/* "Back to …" (style.css .back-link) on these pages: a plain arrow in place of the pixel one */
.auth-body .back-arrow { -webkit-mask: none; mask: none; background: none; width: auto; height: auto; }
.auth-body .back-arrow::before { content: "←"; color: var(--text-strong); font-size: 14px; line-height: 1; }
.auth-body .back-link { border-color: var(--line); background: transparent; height: 32px; color: var(--muted); }
.auth-body .back-link:hover { border-color: var(--text-strong); background: var(--surface-2); }

@media (max-width: 760px) {
  .auth-top { height: 60px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .auth-nav { gap: 16px; font-size: 14px; }
  .auth-main { padding: 28px 20px 32px; }
  .auth-title { font-size: 28px; margin-bottom: 6px; }
  .auth-sub { margin-bottom: 20px; }
  .auth-or { margin: 18px 0 0; }
  .auth-label { margin-top: 14px; }
  .auth-body .auth-submit { margin-top: 20px; }
  .auth-switch { margin-top: 18px; }
  .auth-foot { margin-top: 30px; }
  .acct-card ~ .auth-foot { width: auto; align-self: stretch; margin: 30px 20px 24px; }
  .auth-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .auth-input { font-size: 16px; }  /* stops phones zooming into the field */
  .auth-steps { flex-wrap: wrap; }
  .auth-main:has(.acct-card) { padding: 0; }
  .acct { display: block; min-height: 0; }
  .acct-nav { border: 0; padding: 24px 0 8px; }
  .acct-title, .acct-me { margin-left: 20px; margin-right: 20px; }
  .acct-link { padding: 15px 20px; margin-right: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
  .acct-link.on { background: none; color: var(--text); font-weight: 400; }
  .acct-link.on svg { color: var(--muted); }
  .acct-link::after { content: "›"; margin-left: auto; font-size: 18px; color: var(--muted); }
  .acct-back { margin: 18px 20px 0; }
  .acct-panel { padding: 20px 20px 28px; }
  .acct-up { display: inline-flex; margin-bottom: 14px; }
  .acct-card:not(.acct-index) .acct-nav { display: none; }
  .acct-card.acct-index .acct-panel { display: none; }
  .acct-photo { flex-wrap: wrap; }
  .acct-photo-text { flex-basis: calc(100% - 90px); }
  .acct-photo-actions { width: 100%; }
}