/* intake.css -- the staging intake page.
   Plain CSS, no framework, no font from a third party (R152, and a page that
   waits on someone else's CDN is a page that fails on their outage). Light and
   dark both come from the viewer's own setting. */

:root {
  --bg: #f7f7f5;
  --card: #ffffff;
  --ink: #1c1c1a;
  --ink-soft: #5c5c56;
  --line: #dedcd6;
  --accent: #2f5d50;
  --accent-ink: #ffffff;
  --read: #2f5d50;
  --notread: #8a5a12;
  --err: #8c2f2f;
  --declared: #3a4a8c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181a;
    --card: #1e2124;
    --ink: #e8e6e1;
    --ink-soft: #a5a29b;
    --line: #33383d;
    --accent: #6fae9b;
    --accent-ink: #12211d;
    --read: #6fae9b;
    --notread: #d9a445;
    --err: #e08585;
    --declared: #93a6e8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header, main, footer { max-width: 46rem; margin: 0 auto; }

header { padding: 1.75rem 0 0.5rem; }
h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
h3 { margin: 1.1rem 0 0.35rem; font-size: 0.9rem; text-transform: uppercase;
     letter-spacing: 0.06em; color: var(--ink-soft); }

.tag {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  vertical-align: 0.35em; padding: 0.15rem 0.4rem; border-radius: 0.2rem;
  background: var(--accent); color: var(--accent-ink);
}

.sub, .hint { color: var(--ink-soft); }
.sub { margin: 0.4rem 0 0; }
.hint { font-size: 0.85rem; margin: 0.25rem 0 0.6rem; }
/* A hint that reports a LOSS, not an aside. Used by the profile-id box when it
   is empty: corrections made in that state are never stored, and the page says
   so before one is tapped rather than after one is gone. */
.hint.warn { color: var(--err); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 1rem 1.1rem;
  margin: 0.85rem 0;
}

.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.row label { font-size: 0.85rem; color: var(--ink-soft); min-width: 8.5rem; }

input[type=text], input[type=number], input[type=password], input[type=email] {
  flex: 1 1 9rem; min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.35rem;
  background: var(--bg); color: var(--ink); font: inherit;
}
input[type=file] { flex: 1 1 14rem; font: inherit; color: var(--ink-soft); }

button {
  padding: 0.5rem 0.9rem; border-radius: 0.35rem; font: inherit;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  cursor: pointer;
}
button.primary { background: var(--accent); color: var(--accent-ink);
                 border-color: var(--accent); }
button:disabled { opacity: 0.55; cursor: progress; }

/* the six bands ---------------------------------------------------------- */
.bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
         gap: 0.45rem; margin: 0.5rem 0 0.35rem; }
.band {
  text-align: left; padding: 0.55rem 0.65rem; line-height: 1.3;
  border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg);
}
.band[aria-checked=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.band b { display: block; font-size: 0.95rem; }
.band span { font-size: 0.75rem; color: var(--ink-soft); }

/* the read-back ---------------------------------------------------------- */
.group-title {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); margin: 0.9rem 0 0.35rem;
}
.field {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
  padding: 0.4rem 0; border-top: 1px solid var(--line);
}
.field .name { flex: 1 1 11rem; }
.field .val {
  flex: 2 1 10rem; text-align: left; font-variant-numeric: tabular-nums;
  border: 1px dashed var(--line); background: transparent;
  color: var(--read); padding: 0.3rem 0.45rem;
}
.field.notread .val { color: var(--notread); font-style: italic; }
.field.declared .val { color: var(--declared); }
.field .prov { flex: 0 0 auto; font-size: 0.72rem; color: var(--ink-soft); }
.field .tier {
  flex: 0 0 auto; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 0.2rem; padding: 0 0.3rem;
}
.field input {
  flex: 2 1 10rem; padding: 0.3rem 0.45rem;
  border: 1px solid var(--accent); border-radius: 0.3rem;
  background: var(--bg); color: var(--ink); font: inherit;
}

/* the answer ------------------------------------------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.badge {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid var(--line); border-radius: 0.2rem; padding: 0.1rem 0.4rem;
  color: var(--ink-soft);
}
#headline { font-size: 1.15rem; line-height: 1.35; }
#factors, #receipts { margin: 0.3rem 0 0; padding-left: 1.1rem; }
#factors li, #receipts li { margin: 0.2rem 0; }
#receipts li { font-size: 0.85rem; color: var(--ink-soft); }
summary { cursor: pointer; font-size: 0.85rem; color: var(--ink-soft); }

.nextask {
  margin-top: 1rem; padding: 0.7rem 0.8rem; border-radius: 0.4rem;
  border: 1px dashed var(--accent);
}
.nextask b { display: block; font-size: 0.85rem; }

.status {
  margin: 0.6rem 0 0; padding: 0.55rem 0.7rem; border-radius: 0.35rem;
  border: 1px solid var(--line); font-size: 0.88rem; white-space: pre-wrap;
}
.status.err { border-color: var(--err); color: var(--err); }

#preview { max-width: 100%; max-height: 14rem; margin-top: 0.7rem;
           border: 1px solid var(--line); border-radius: 0.35rem; }

footer { margin-top: 1.5rem; font-size: 0.8rem; color: var(--ink-soft); }
footer p { margin: 0.3rem 0; }
footer a { color: var(--accent); }

/* ==========================================================================
   M09 -- ASK THE ADVISOR
   Additions only. Every rule below is scoped to an id or class this section
   introduced, so nothing above it changes: the existing page keeps its own
   look and this card inherits it.
   ========================================================================== */
.field-lbl { font-size: .78rem; color: #8b93a7; letter-spacing: .02em; }
.band-note { display: block; font-size: .72rem; color: #8b93a7; margin-top: .2rem;
             line-height: 1.35; font-weight: 400; }
.band.on { border-color: #6ea8fe; background: #1b2436; }
.bands.langs { display: inline-flex; gap: .35rem; margin: 0 .5rem 0 .35rem; }
.bands.langs .band { padding: .3rem .7rem; }

.why h3.why-lbl { margin: 1.15rem 0 .4rem; font-size: .82rem; text-transform: uppercase;
                  letter-spacing: .06em; color: #8b93a7; font-weight: 600; }
.why-slot { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            text-transform: none; letter-spacing: 0; color: #6ea8fe;
            font-size: .78rem; margin-left: .4rem; }
#why-l1 { font-size: 1.02rem; line-height: 1.55; margin: 0; }
.conditional { margin: .5rem 0 0; padding: .5rem .7rem; border-left: 3px solid #d4a037;
               background: #221d10; font-size: .88rem; line-height: 1.5; }
.delta { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
         font-size: .82rem; color: #8fd0a0; margin-top: .15rem; }
.receipt { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
           font-size: .78rem; color: #b8c0d0; margin: .15rem 0; line-height: 1.45;
           overflow-wrap: anywhere; }

table.alts { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.alts th { text-align: left; font-weight: 600; color: #8b93a7; font-size: .74rem;
                text-transform: uppercase; letter-spacing: .04em;
                border-bottom: 1px solid #2a3245; padding: .35rem .5rem; }
table.alts td { padding: .4rem .5rem; border-bottom: 1px solid #1e2534;
                vertical-align: top; }
table.alts tr.excluded td { color: #8b93a7; }
/* THE EXCLUDED ROW IS LEGIBLE, NOT HIDDEN AND NOT GREYED TO NOTHING: the
   reader is meant to SEE the floor refusing the naive #1. */
td.notranked { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
               font-size: .78rem; color: #e0846f; }

#why-context { margin: .8rem 0 0; padding: .6rem .8rem; border: 1px dashed #4a5570;
               background: #161b26; }
.ctx-head { margin: 0 0 .3rem; font-size: .74rem; font-weight: 700;
            letter-spacing: .05em; color: #e0846f; }
.ctx-body { margin: 0; font-size: .85rem; line-height: 1.5; color: #b8c0d0; }

.badge-abstain { background: #3a2418; border-color: #7a4a30; color: #e0a487; }
.badge-basis { margin-left: .4rem; font-size: .68rem; }
#why-raw { font-size: .72rem; line-height: 1.4; overflow-x: auto; color: #8b93a7;
           max-height: 22rem; }