/* Account, gates and blurred previews.
   ---------------------------------------------------------------------------
   ADDITIVE ONLY. Every rule here is a new class. Nothing in macro.css is redefined, so this
   file can be deleted and the dashboard is exactly as it was. The variables, radii, spacing
   and type sizes are macro.css's own — see :root there — because this is the same site and
   not a second one bolted to it.

   Dash serves every file in assets/ automatically and in alphabetical order, so `auth.css`
   loads after `macro.css` and its variables are already defined. No import, no link tag.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. Accessibility primitives used throughout
   --------------------------------------------------------------------------- */
/* Text for a screen reader, off-screen for everybody else. Used to describe a blurred
   region, which is `aria-hidden` precisely so its invented numbers are never read aloud. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ONE focus ring for everything this file adds. `:focus-visible` rather than `:focus`, so a
   mouse click does not draw it and a Tab key always does. Two colours, because a single
   accent ring disappears against the accent-coloured primary button. */
.acct-toggle:focus-visible,
.nav-auth-link:focus-visible,
.nav-auth-cta:focus-visible,
.acct-in:focus-visible,
.acct-go:focus-visible,
.acct-danger:focus-visible,
.acct-secondary:focus-visible,
.cta-go:focus-visible,
.cta-alt:focus-visible,
.lg-check-in:focus-visible,
.acct-mi:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
.acct-go:focus-visible, .agree-btn:focus-visible {
  outline-color: var(--text);          /* the accent ring is invisible on an accent button */
}

/* ---------------------------------------------------------------------------
   2. The nav bar's right-hand cell
   --------------------------------------------------------------------------- */
/* 1fr auto 1fr, not 32px 1fr 32px. The links stay centred on the PAGE — which is what
   macro.css's own comment says the centring is for — while the right cell takes whatever
   the account control needs. */
.navbar-auth { grid-template-columns: 1fr auto 1fr; }
.navbar-auth > :last-child { justify-self: end; }

.nav-auth { display: flex; align-items: center; gap: .55rem; }

.nav-auth-link {
  background: none; border: 1px solid transparent; border-radius: 7px;
  color: var(--muted); font-size: .92rem; font-weight: 500;
  padding: .38rem .7rem; cursor: pointer; text-decoration: none;
  font-family: inherit; transition: color .15s, background .15s;
}
.nav-auth-link:hover { color: var(--text); background: var(--panel); }

.nav-auth-cta {
  border: 1px solid var(--accent); color: var(--accent); background: transparent;
  border-radius: 7px; padding: .38rem .8rem; font-size: .92rem; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.nav-auth-cta:hover { background: rgba(77, 182, 232, .12); color: var(--accent); }

/* ---- the person icon ---------------------------------------------------- */
/* Drawn, not fetched: a circle for the head and a rounded shoulder, both `currentColor`, so
   the glyph follows hover and focus colour. An <img> cannot do that and an icon font is a
   dependency this design does not get to add. */
.acct-toggle {
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--muted); line-height: 0; cursor: pointer;
}
.acct-toggle:hover, .acct-menu-wrap.show .acct-toggle { color: var(--text); }
/* Bootstrap's caret, in case the `caret=False` prop is not honoured by the installed dbc. */
.acct-toggle::after { display: none !important; }

.acct-ava {
  display: inline-block; position: relative; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--panel2-t);
  overflow: hidden; vertical-align: middle;
}
.acct-ava::before {
  content: ''; position: absolute; left: 50%; top: 6px;
  width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: currentColor;
}
.acct-ava::after {
  content: ''; position: absolute; left: 50%; top: 17.5px;
  width: 17px; height: 13px; margin-left: -8.5px;
  border-radius: 8.5px 8.5px 0 0; background: currentColor;
}

/* ---- the menu ----------------------------------------------------------- */
.acct-menu-wrap .dropdown-menu {
  background: var(--panel) !important; border: 1px solid var(--border) !important;
  border-radius: 12px; padding: .35rem; min-width: 15.5rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
.acct-mi-head {
  color: var(--muted) !important; font-size: .74rem !important;
  text-transform: none; letter-spacing: .02em;
  padding: .5rem .7rem .35rem !important;
  border-bottom: 1px solid var(--border); margin-bottom: .3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis;
}
.acct-mi {
  color: var(--text) !important; font-size: .92rem; border-radius: 8px;
  padding: .55rem .7rem !important; cursor: pointer;
}
.acct-mi:hover, .acct-mi:focus { background: var(--panel2) !important; color: var(--text) !important; }
/* The destructive one is coloured, and it is also the last one and the longest label. Colour
   alone is never the only cue — the wording says "Delete account and all data" in full. */
.acct-mi-danger { color: var(--red) !important; }
.acct-mi-danger:hover, .acct-mi-danger:focus {
  background: rgba(242, 97, 92, .12) !important; color: var(--red) !important;
}

/* ---------------------------------------------------------------------------
   3. Account panels, login and signup
   --------------------------------------------------------------------------- */
.acct-body { max-height: 72vh; }
.acct-panel { display: flex; flex-direction: column; }
.acct-h { font-size: 1.15rem; font-weight: 650; margin: 0 0 .7rem; letter-spacing: -.01em; }
.acct-p { color: #c7d3e3; line-height: 1.62; font-size: .93rem; margin-bottom: .8rem; max-width: 68ch; }
.acct-fine { color: var(--muted); font-size: .84rem; }
.acct-kicker {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: .2rem 0 .5rem;
}
.acct-list { color: #c7d3e3; line-height: 1.6; font-size: .9rem; padding-left: 1.15rem; margin-bottom: 1rem; }
.acct-list li { margin-bottom: .4rem; }
.acct-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; }

/* The address is the answer to "what do you hold about me", so it is set as the answer:
   large, selectable, unmasked, and not wrapped in explanation. */
.acct-email {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.05rem, 3.4vw, 1.45rem); color: var(--text);
  background: var(--panel2-t); border: 1px solid var(--border); border-radius: 10px;
  padding: .75rem .9rem; margin-bottom: .9rem; user-select: all;
  word-break: break-all;
}

.acct-field { margin-bottom: .9rem; }
.acct-lb { display: block; font-size: .84rem; color: var(--muted); margin-bottom: .3rem; }
/* `.lock-in` (macro.css) carries the surface, border and focus treatment; this only makes the
   field fill its row, since the password box in systems.py sits beside a button and these
   do not. */
.acct-in { width: 100%; display: block; }
.acct-hint { color: var(--muted); font-size: .8rem; margin-top: .35rem; line-height: 1.5; }
.acct-live { min-height: 1.2em; }

.acct-rules {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel2-t); padding: .8rem .9rem; margin: .3rem 0 1rem;
}
.acct-rule-h { font-size: .8rem; font-weight: 600; color: var(--text); margin-bottom: .4rem; }
.acct-rule { margin: 0 0 .2rem; padding-left: 1.1rem; }
.acct-rule-li { color: var(--muted); font-size: .84rem; line-height: 1.55; margin-bottom: .3rem; }

/* Reserved height. `.lock-err` in macro.css does the same thing and its comment says why:
   the card must not jump the first time something is wrong. */
.acct-err { color: var(--red); font-size: .86rem; line-height: 1.5; min-height: 1.3em; margin: .3rem 0 .6rem; }
.acct-ok  { color: var(--green); font-size: .86rem; line-height: 1.5; min-height: 1.3em; margin: .3rem 0 .6rem; }

.acct-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.acct-go { flex: 0 0 auto; }
.acct-secondary {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: .5rem .9rem; font-size: .92rem; cursor: pointer;
  font-family: inherit;
}
.acct-secondary:hover { border-color: var(--muted); }
/* Destructive: outlined rather than filled. A filled red button is the easiest thing on the
   screen to hit by accident, and this one erases an account. */
.acct-danger {
  background: transparent; border: 1px solid var(--red); color: var(--red);
  border-radius: 9px; padding: .5rem .9rem; font-size: .92rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.acct-danger:hover { background: rgba(242, 97, 92, .12); }

.acct-ref {
  font-size: 1.05rem; letter-spacing: .06em; color: var(--text);
  background: var(--panel2-t); border: 1px solid var(--border); border-radius: 10px;
  padding: .7rem .9rem; margin-bottom: .8rem; word-break: break-all;
}

/* ---------------------------------------------------------------------------
   4. The legal blocks
   --------------------------------------------------------------------------- */
.lg-h { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .8rem; }
.lg-p { color: #c7d3e3; line-height: 1.68; font-size: .95rem; margin-bottom: .8rem; max-width: 70ch; }
.lg-p strong { color: var(--text); }
.lg-lead { font-weight: 600; font-size: .95rem; margin-bottom: .6rem; }
.lg-list { padding-left: 1.2rem; margin-bottom: 1rem; }
.lg-li { color: #c7d3e3; line-height: 1.6; font-size: .89rem; margin-bottom: .6rem; max-width: 70ch; }
.lg-li::marker { color: var(--accent); font-weight: 600; }
.lg-li strong { color: var(--text); }

/* The tick is the binding act, so it is given a surface of its own rather than being one more
   line of grey text under a wall of grey text. */
.lg-check-wrap {
  border: 1px solid var(--accent); border-radius: 10px;
  background: rgba(77, 182, 232, .06); padding: .8rem .9rem; margin: .4rem 0 .6rem;
}
.lg-check-lb {
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  color: var(--text); font-size: .95rem; line-height: 1.5;
}
.lg-check-in {
  width: 18px; height: 18px; margin-top: .1rem; flex: 0 0 auto;
  accent-color: var(--accent); cursor: pointer;
}
.lg-ver {
  color: var(--muted); font-size: .76rem; margin-top: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------------------
   5. The sign-up call to action
   --------------------------------------------------------------------------- */
.cta {
  margin-top: 2.5rem; padding: 1.8rem 1.6rem;
  background: var(--panel-t); border: 1px solid var(--border); border-radius: 16px;
}
.cta-head { margin-bottom: 1rem; }
.cta-h { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .5rem; }
.cta-where { color: var(--accent); font-size: .95rem; line-height: 1.6; margin: 0; max-width: 70ch; }
.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: 1.1rem; }
.cta-go {
  display: inline-block; background: var(--accent); color: #06121b !important;
  border: 1px solid var(--accent); border-radius: 9px;
  padding: .58rem 1.1rem; font-size: .95rem; font-weight: 600; text-decoration: none;
}
.cta-go:hover { filter: brightness(1.08); }
.cta-alt { color: var(--muted) !important; font-size: .92rem; text-decoration: none; }
.cta-alt:hover { color: var(--text) !important; text-decoration: underline; }
.cta-fine { color: var(--muted); font-size: .8rem; margin: .8rem 0 0; }
.strat-line { color: var(--muted); font-size: .88rem; line-height: 1.6; max-width: 80ch; margin-top: 1.4rem; }

/* ---------------------------------------------------------------------------
   6. Blurred previews
   ---------------------------------------------------------------------------
   READ placeholders.py BEFORE CHANGING ANYTHING HERE.

   None of the rules below are a security control and none of them are load-bearing. The blur
   is a picture of a lock: `filter: blur()` leaves the string in the DOM and in the callback's
   JSON, and any reader can lift it with two lines of devtools. What makes this safe is that
   the content underneath was invented on the server and the real values were never sent.

   `pointer-events` and `user-select` are here so a reader cannot accidentally select and
   paste invented figures into a spreadsheet, not to stop a determined one. If these rules
   were the only thing standing between a visitor and the real numbers, the design would be
   broken regardless of what this file says.
   --------------------------------------------------------------------------- */
.locked { margin-top: 2.5rem; }
.blur-head { margin-bottom: 1rem; }
.blur-h { font-size: 1.15rem; font-weight: 650; margin: 0 0 .4rem; letter-spacing: -.01em; }
.blur-p { color: var(--muted); font-size: .92rem; line-height: 1.62; margin: 0; max-width: 72ch; }

.blur-wrap { position: relative; margin: 0 0 .6rem; }
.blur-veil {
  filter: blur(5px);
  opacity: .55;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
  /* Fades out downward, so the region reads as "this continues" rather than as a panel that
     failed to render. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}
/* A reader who has asked for less motion has often also asked for more legibility. Heavier
   blur is not a security change — the content is invented either way — but a strong blur on
   a high-contrast display can read as a rendering fault. */
@media (prefers-reduced-transparency: reduce) {
  .blur-veil { filter: blur(7px); opacity: .4; }
}

.blur-cap {
  color: var(--muted); font-size: .78rem; line-height: 1.55;
  max-width: 78ch; margin: 0 0 .6rem;
  border-left: 2px solid var(--border); padding-left: .7rem;
}

.blur-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.blur-th {
  color: var(--muted); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; text-align: right;
  padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.blur-td {
  color: var(--text); padding: 7px 10px; text-align: right;
  border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.blur-th:nth-child(-n+3), .blur-td:nth-child(-n+3) { text-align: left; }

.blur-note { color: var(--muted); font-size: .88rem; line-height: 1.6; margin-bottom: .6rem; max-width: 76ch; }
.blur-note-t { color: var(--text); }
.blur-syms { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }

/* A flat bar, not a dial. A blurred gauge still points somewhere; a bar of invented width
   says "a measure belongs here" without asserting a value. */
.blur-meter {
  height: 10px; border-radius: 999px; background: var(--panel2);
  border: 1px solid var(--border); overflow: hidden; margin-top: 1.2rem;
}
.blur-meter-fill { height: 100%; width: 62%; background: var(--accent); opacity: .5; }

/* ---------------------------------------------------------------------------
   7. Small screens
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Four nav links plus two auth controls do not fit a phone held sideways. The links keep
     their row and scroll horizontally; the account control never scrolls out of reach. */
  .navbar-auth { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; padding: .5rem .7rem; }
  .nav-links { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; justify-content: flex-start; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { padding: .42rem .7rem; font-size: .92rem; white-space: nowrap; }
  .nav-auth-link { padding: .38rem .5rem; font-size: .86rem; }
  .nav-auth-cta { padding: .38rem .6rem; font-size: .86rem; }
}
@media (max-width: 560px) {
  /* Signed out, on a narrow screen, "Sign up" is the one that has to survive: a visitor
     without an account is the visitor this control exists for. "Log in" is still reachable
     from the sign-up page, which says "I already have one". */
  .nav-auth .nav-auth-link { display: none; }
  /* Signed in, the sign-out button is the ONLY .nav-auth-link present, and hiding it would
     leave no way out of the account. */
  .nav-auth #acct-signout { display: inline-block; font-size: .82rem; }
  .cta { padding: 1.3rem 1.1rem; }
  .acct-row { flex-direction: column; align-items: stretch; }
  .acct-row .btn, .acct-row .acct-secondary, .acct-row .acct-danger { width: 100%; }
  .blur-tbl { font-size: 11.5px; }
  .blur-th, .blur-td { padding: 6px 6px; }
}