/* ============================================================================
   Account — sign-up gate, cookie consent, and the profile modal.

   Design pack 07. On the prod lane the gate signs in through Cognito; on dev
   and each preview it is a mock (account.js). See
   planning-showcase-design/07-account-and-profile.md.

   Every colour, radius and face below comes from the :root block in
   tokens.css. If a value is hard-coded here it is a bug — say so rather than
   matching it by eye.

   Prefix: everything is .eik-* / #eik-* so this file can be deleted whole.
   ========================================================================= */

/* ---------------------------------------------------------------- avatar   */
/* #sitehead is the top-right pill: a column of wordmark, then #mainnav.
   account.js wraps #mainnav and the avatar in .eik-navrow so they share a row. */
.eik-navrow { display: flex; align-items: center; gap: 8px; }
.eik-navrow #mainnav { flex: 1 1 auto; }

#eik-avatar {
  position: relative; flex: none;
  width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer;
  background: var(--brand-soft); color: var(--brand);
  font: 600 12.5px/1 var(--font-sans);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.22);
  transition: box-shadow .15s;
}
#eik-avatar:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.42); }
#eik-avatar:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
#eik-avatar[hidden] { display: none !important; }

/* ---------------------------------------------------------------- shared   */
.eik-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5, 20, 26, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* margin:auto rather than align-items:center — a card taller than the viewport
   still scrolls to its own top, which centring would clip */
.eik-layer { position: fixed; inset: 0; z-index: 91; display: flex;
             overflow-y: auto; overscroll-behavior: contain; padding: 24px 20px; }
.eik-layer > * { margin: auto; }
.eik-layer[hidden], .eik-scrim[hidden] { display: none !important; }

/* The consent banner has to coexist with the gate, and the sign-up card is
   848px tall in a 900px viewport — there is no vertical room for both. So the
   banner sits bottom-LEFT, in its own column beside the centred 420px card,
   rather than across the bottom where it covered "Create account". Below
   1000px they cannot sit side by side, so it goes full width and the gate
   pads to clear it. */
@media (max-width: 999px) {
  body.eik-cookie-open #eik-gate { padding-bottom: 260px; }
}

/* ONE modal size for the whole app. Content modals — account, cookies &
   privacy, and About this map in style.css — all use it, so they read as the
   same object. Sized with room for a policy document, which is what will go in
   here next. The gate is deliberately NOT this: a sign-in form at 860px is a
   worse sign-in form. */
:root {
  --eik-modal-w:  min(860px, calc(100vw - 32px));
  /* a FIXED height, not a max — a max lets the frame shrink to its contents,
     so Profile came up short and a 16,000-word policy came up tall, and the
     modal appeared to resize as you moved around inside it. Sized for the
     longest thing it holds; everything shorter scrolls inside a still frame. */
  --eik-modal-h:  min(86vh, 820px);
  --eik-auth-w:   min(420px, 100%);
}

/* the shipping modal anatomy, from #infosheet-card */
.eik-card {
  position: relative;
  background: var(--surface); color: var(--text);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.eik-close {
  position: absolute; top: 13px; right: 13px; z-index: 2;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-grey); color: var(--text-muted);
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.eik-close:hover { background: var(--surface-greyblue); color: var(--text); }
.eik-close:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }

.eik-btn,
.eik-btn-ghost,
.eik-btn-quiet,
.eik-btn-danger,
.eik-btn-outline {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent;
}
.eik-btn { background: var(--brand); color: #fff; }
.eik-btn:hover { background: #053d73; }
.eik-btn[disabled] { background: var(--surface-greyblue); color: var(--text-muted); cursor: not-allowed; }
.eik-btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.eik-btn-ghost:hover { background: var(--surface-stone); }
.eik-btn-quiet { background: transparent; color: var(--brand); border: 0; padding: 0 8px; }
.eik-btn-quiet:hover { color: var(--brand-line); text-decoration: underline; }
.eik-btn-danger { background: var(--destructive); color: #fff; }
.eik-btn-danger:hover { filter: brightness(.88); }
.eik-btn-danger[disabled] { background: var(--surface-greyblue); color: var(--text-muted); cursor: not-allowed; }
/* the same weight as .eik-btn — the lapsed card's two ways forward are equal,
   because for most towns the invoiced route is the real one */
.eik-btn-outline { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.eik-btn-outline:hover { background: var(--brand-soft); }
.eik-btn:focus-visible, .eik-btn-ghost:focus-visible, .eik-btn-quiet:focus-visible, .eik-btn-danger:focus-visible, .eik-btn-outline:focus-visible {
  outline: 2px solid var(--brand-line); outline-offset: 2px;
}

.eik-inp {
  width: 100%; height: 44px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0 13px; background: var(--surface); color: var(--text);
  font: 400 14px/1 var(--font-sans);
}
.eik-inp:focus { outline: none; border-color: var(--brand-line); box-shadow: 0 0 0 3px #008cff26; }
.eik-inp::placeholder { color: var(--text-muted); }

.eik-field { margin-bottom: 11px; }
.eik-field[hidden] { display: none; }
.eik-field label,
.eik-lab { display: block; font: 500 12.5px/1.3 var(--font-sans); color: var(--text-body); margin-bottom: 5px; }
.eik-field .eik-opt { font-weight: 400; color: var(--text-muted); }
.eik-err {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 6px;
  font-size: 12px; line-height: 1.45; color: var(--destructive);
}
.eik-err[hidden] { display: none !important; }
.eik-inp.bad { border-color: var(--destructive); }
.eik-inp.bad:focus { box-shadow: 0 0 0 3px #d4183d26; }
.eik-hint { font-size: 12px; line-height: 1.4; color: var(--text-muted); margin-top: 4px; }
.eik-hint a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.eik-hint a:hover { color: var(--brand-line); }
.eik-labrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.eik-labrow .eik-lab { margin-bottom: 0; }

/* ---------------------------------------------------------------- gate     */
#eik-gate .eik-col { width: var(--eik-auth-w); display: flex; flex-direction: column; gap: 18px; }
#eik-gate .eik-card { padding: 24px 30px 22px; }
#eik-gate h2 {
  margin: 0 0 2px; font-family: var(--font-display);
  font-size: 23px; font-weight: 700; letter-spacing: -.01em;
}
#eik-gate .eik-sub { margin: 0 0 4px; font-size: 13.5px; color: var(--text-muted); }
.eik-gate-state[hidden] { display: none !important; }
/* the close button sits in the card's corner, so the headings clear it */
#eik-gate h2 { padding-right: 44px; }
#eik-gate h2:focus { outline: none; }
.eik-gate-msg {
  margin: 0 44px 12px 0; padding: 10px 12px; border-radius: 10px;
  background: #d4183d14; color: var(--destructive);
  font-size: 13px; line-height: 1.45;
}
.eik-gate-msg[hidden] { display: none !important; }
.eik-gate-msg.eik-gate-msg-good { background: var(--brand-soft); color: var(--text-body); }
.eik-ms-approval {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--brand-soft); font-size: 13px; line-height: 1.45; color: var(--text-body);
}
.eik-ms-approval[hidden] { display: none !important; }
.eik-ms-approval p { margin: 0; }
.eik-ms-approval a { color: var(--brand); font-weight: 500; text-underline-offset: 2px; }
.eik-ms-approval a:hover { color: var(--brand-line); }
.eik-primary { width: 100%; margin-top: 4px; }
.eik-back { width: 100%; min-height: 40px; margin-top: 2px; border: 0; border-radius: 999px;
            background: transparent; color: var(--text-body);
            font: 500 13.5px/1 var(--font-sans); cursor: pointer; }
.eik-back:hover { background: var(--surface-stone); color: var(--text); }
.eik-or { display: flex; align-items: center; gap: 12px; margin: 15px 0 13px;
          color: var(--text-muted); font-size: 12px; }
.eik-or::before, .eik-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* the providers lead the card — a planner's account is almost always one of
   these two, so making them hunt past a form for it is the wrong order */
.eik-sso-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.eik-sso {
  width: 100%; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 500; font-size: 14px;
}
.eik-sso svg { flex: none; }

.eik-mkt-note { margin: 12px 0 8px; font-size: 13px; line-height: 1.45; color: var(--text-body); }
.eik-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-size: 13px; line-height: 1.45; color: var(--text-body); cursor: pointer;
}
.eik-check input {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--brand); cursor: pointer;
}
.eik-check input:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }

.eik-policies {
  margin: 11px 0 0; text-align: center;
  font-size: 11.5px; line-height: 1.55; color: var(--text-muted);
}
.eik-policies button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: var(--brand); text-decoration: underline;
  text-underline-offset: 2px;
}
.eik-policies button:hover { color: var(--brand-line); }
.eik-policies button:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; border-radius: 3px; }
.eik-gate-foot { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--text-muted); }
.eik-gate-foot a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.eik-sent-mark {
  width: 52px; height: 52px; border-radius: 50%; margin: 4px 0 18px;
  background: var(--brand-soft); display: flex; align-items: center; justify-content: center;
}
.eik-note { margin: 0 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--text-body); }
.eik-note b { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------- password field    */
.eik-pw { position: relative; }
.eik-pw .eik-inp { padding-right: 70px; }
.eik-pw-show {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  min-height: 36px; padding: 0 10px; border-radius: 8px;
  font: 600 12.5px/1 var(--font-sans); color: var(--brand);
}
.eik-pw-show:hover { background: var(--surface-stone); }

/* ---------------------------------------------------------------- cookies  */
#eik-cookie {
  position: fixed; left: 20px; bottom: 20px;
  z-index: 95; width: 540px;
  padding: 22px 24px 18px;
  display: flex; gap: 16px; align-items: flex-start;
}
@media (max-width: 1100px) {
  #eik-cookie { left: 50%; transform: translateX(-50%);
                width: min(600px, calc(100vw - 24px)); }
}
@media (max-width: 520px) {
  #eik-cookie { left: 12px; right: 12px; bottom: 12px;
                width: auto; transform: none; padding: 18px 16px 14px; gap: 12px; }
  .eik-cookie-mark { width: 36px; height: 36px; }
  .eik-cookie-mark svg { width: 19px; height: 19px; }
}
#eik-cookie[hidden] { display: none !important; }
.eik-cookie-acts[hidden] { display: none !important; }
.eik-cookie-mark {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
#eik-cookie h3 { margin: 0 0 6px; font-family: var(--font-display);
                 font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
#eik-cookie p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-body); max-width: 60ch; }
/* one row, never wrapping, down to the narrowest phone */
.eik-cookie-acts {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; margin-top: 18px; flex-wrap: nowrap;
}
/* never shrink below the label — a clipped button is worse than a short one */
.eik-cookie-acts > * { white-space: nowrap; flex: 0 0 auto; }
.eik-narrow { display: none; }
.eik-cookie-acts .eik-btn,
.eik-cookie-acts .eik-btn-ghost { padding: 0 15px; font-size: 13.5px; }
/* Customize and Reject are the same plain link, side by side; only Accept stands out. */
.eik-cookie-acts .eik-btn-quiet { padding: 0; }
.eik-cookie-acts #eik-ck-reject { margin: 0 auto 0 8px; }
#eik-cookie h3 { font-size: 19px; }
#eik-cookie p { font-size: 13.5px; }
@media (max-width: 520px) {
  /* three full labels cannot fit 375px legibly, so the two long ones shorten
     rather than collide */
  .eik-wide { display: none; }
  .eik-narrow { display: inline; }
  .eik-cookie-acts { gap: 6px; margin-top: 14px; }
  .eik-cookie-acts .eik-btn,
  .eik-cookie-acts .eik-btn-ghost { padding: 0 11px; font-size: 12.5px; min-height: 40px; }
  .eik-cookie-acts .eik-btn-quiet { font-size: 12.5px; }
  #eik-cookie h3 { font-size: 17px; }
  #eik-cookie p { font-size: 12.5px; }
}

#eik-cprefs .eik-card { width: var(--eik-modal-w); height: var(--eik-modal-h);
                        display: flex; flex-direction: column; padding: 26px 28px 24px; }
#eik-cprefs-rows { flex: 1; min-height: 0; overflow-y: auto; }
#eik-cprefs h3, #eik-delacct h3 { margin: 0 0 6px; font-family: var(--font-display);
                 font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
#eik-cprefs h3:focus, #eik-delacct h3:focus { outline: none; }
#eik-cprefs .eik-lede, #eik-delacct .eik-lede { margin: 0 0 20px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
#eik-delacct .eik-card { width: var(--eik-auth-w); padding: 26px 28px 24px; }
#eik-delacct .eik-field { margin-bottom: 20px; }
.eik-crow { display: flex; gap: 18px; align-items: flex-start;
            padding: 16px 0; border-top: 1px solid var(--border); }
.eik-crow:first-of-type { border-top: 0; padding-top: 4px; }
.eik-crow .ct { flex: 1; min-width: 0; }
.eik-crow .cn { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.eik-crow .cd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-body); }
.eik-cprefs-acts { display: flex; justify-content: flex-end; margin-top: 22px; }

/* switch */
.eik-switch {
  width: 44px; height: 26px; flex: none; position: relative; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--surface-greyblue);
}
.eik-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .16s ease;
}
.eik-switch[aria-pressed="true"] { background: var(--brand-line); }
.eik-switch[aria-pressed="true"]::after { transform: translateX(18px); }
.eik-switch[disabled] { background: var(--brand-line); opacity: .5; cursor: not-allowed; }
.eik-switch[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.eik-switch[aria-busy="true"] { opacity: .5; cursor: progress; }
.eik-switch:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }

/* ---------------------------------------------------------------- profile  */
#eik-modal .eik-card {
  width: var(--eik-modal-w); height: var(--eik-modal-h);
  display: flex; flex-direction: column; overflow: hidden;
}
.eik-prof-head { display: flex; align-items: center; gap: 14px; padding: 26px 28px 20px; }
.eik-prof-head .ava {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--brand-soft); color: var(--brand);
  font: 600 16px/1 var(--font-sans);
  display: flex; align-items: center; justify-content: center;
}
.eik-prof-head .nm { font-family: var(--font-display); font-size: 20px; font-weight: 700;
                     letter-spacing: -.01em; line-height: 1.2; }
.eik-prof-head .em { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.eik-split { display: flex; flex: 1; min-height: 0; }
.eik-rail {
  width: 208px; flex: none; padding: 8px 14px 20px 20px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
}
.eik-rail-btn {
  display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left;
  font: 400 13.5px/1 var(--font-sans); color: var(--text-body);
}
.eik-rail-btn:hover { background: var(--surface-stone); }
.eik-rail-btn[aria-current="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.eik-rail-btn:focus-visible { outline: 2px solid var(--brand-line); outline-offset: -2px; }
.eik-rail-btn.danger { color: var(--destructive); margin-top: 10px; }
.eik-rail-btn.quiet { color: var(--text-muted); font-size: 12.5px; }
.eik-rail-btn.quiet:hover { color: var(--destructive); background: var(--surface-stone); }
.eik-rail-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
                 display: flex; flex-direction: column; gap: 1px; }
.eik-rail-doc {
  border: 0; background: transparent; cursor: pointer; text-align: left;
  min-height: 32px; padding: 0 12px; border-radius: 6px;
  font: 400 12px/1 var(--font-sans); color: var(--text-muted);
}
.eik-rail-doc:hover { color: var(--brand); background: var(--surface-stone); }

/* the frame is fixed, so a short section leaves space below the fields; the
   Save action goes to the foot of it rather than floating mid-modal, which
   also means Save is in the same place on every section that has one */
.eik-body { flex: 1; min-width: 0; padding: 4px 30px 28px; overflow-y: auto;
            display: flex; flex-direction: column; }
.eik-body > .eik-doc { flex: 0 0 auto; }
.eik-sec-head { margin: 10px 0 4px; }
.eik-sec-head h3 { margin: 0; font-family: var(--font-display);
                   font-size: 17px; font-weight: 700; letter-spacing: -.005em; }
#eik-body h3:focus { outline: none; }
.eik-sec-head p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.eik-sec-lede { margin: 6px 0 4px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* A field is a stacked block: label, control, helper underneath. The old
   128px label column squeezed any helper text into a gutter — which is what
   made the Role row unreadable. Nothing here has a fixed-width column. */
.eik-field-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 20px;
  align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border);
}
/* :last-child never matched — .eik-form-foot is the last child — so the last
   field kept its rule and the foot's own border landed 22px under it, reading
   as a stray line. One separator above Save is enough. */
.eik-field-row:not(:has(~ .eik-field-row)) { border-bottom: 0; }
.eik-field-row .k { font-size: 13.5px; font-weight: 500; color: var(--text); }
.eik-field-row .sub {
  grid-column: 1 / -1; grid-row: 2;
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted);
  max-width: 62ch;
}
.eik-field-row .ctl { grid-row: 1; grid-column: 2; justify-self: end;
                      display: flex; align-items: center; gap: 9px; }
.eik-field-row .v { font-size: 13.5px; color: var(--text); }
.eik-field-row .v.readonly { color: var(--text-body); }
.eik-field-row .empty { font-size: 13.5px; font-style: italic; color: var(--text-muted); }

.eik-seg { display: inline-flex; gap: 2px;
           background: var(--surface-stone); border-radius: 999px; padding: 3px; }
.eik-seg button {
  border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  min-height: 34px; padding: 0 14px;
  font: 400 12.5px/1 var(--font-sans); color: var(--text-body);
}
.eik-seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
}

.eik-form-foot {
  display: flex; justify-content: flex-end; flex: none;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border);
}

.eik-rolehead {
  display: flex; align-items: baseline; gap: 9px; margin: 18px 0 2px;
  font: 600 11px/1.4 var(--font-sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.eik-group:first-of-type .eik-rolehead { margin-top: 6px; }
.eik-rolehead .what { font-weight: 400; font-size: 11.5px; letter-spacing: 0; text-transform: none; }

/* -------------------------------------------------------------- resources */
.eik-faq { border-bottom: 1px solid var(--border); }
.eik-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box; min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none;
  font: 600 14px/1.4 var(--font-sans); color: var(--text);
}
.eik-faq summary::-webkit-details-marker { display: none; }
.eik-faq summary::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-2px) rotate(45deg);
}
.eik-faq[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.eik-faq summary:hover { color: var(--brand); }
.eik-faq summary:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; border-radius: 4px; }
.eik-faq-a { max-width: 68ch; padding: 0 0 16px; font-size: 13.5px; line-height: 1.65; color: var(--text-body); }
.eik-faq-a p { margin: 0 0 10px; }
.eik-faq-a p:last-child { margin-bottom: 0; }
.eik-faq-a strong { color: var(--text); font-weight: 600; }
.eik-faq-a a { color: var(--brand); text-underline-offset: 2px; }
.eik-faq-a a:hover { color: var(--brand-line); }
@media (prefers-reduced-motion: no-preference) {
  .eik-faq summary::after { transition: transform .16s ease; }
}

/* ---------------------------------------------------------------- policy   */
.eik-doc-head { margin: 8px 0 4px; }
.eik-doc-head h3 { margin: 0; font-family: var(--font-display);
                   font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.eik-doc-meta { margin: 5px 0 0; font-size: 12px; color: var(--text-muted); }
.eik-doc-meta span { font-style: italic; }
.eik-doc-onlyhead h2 { margin: 0; font-family: var(--font-display);
                       font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.eik-doc-missing { font-size: 13.5px; color: var(--text-body); }
.eik-back-link {
  color: var(--brand); font-weight: 500;
  background: none; border: 0; padding: 0; font-size: inherit; cursor: pointer;
}
.eik-back-link:hover { color: var(--brand-line); text-decoration: underline; }

/* long-form reading, not UI: a real measure and generous leading */
.eik-doc { padding-top: 14px; max-width: 68ch; font-size: 13.5px; line-height: 1.65; color: var(--text-body); }
.eik-doc h2 { margin: 26px 0 8px; font-family: var(--font-display);
              font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.eik-doc h2:first-child { margin-top: 4px; }
.eik-doc h3 { margin: 18px 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.eik-doc h4 { margin: 14px 0 4px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.eik-doc p  { margin: 0 0 10px; }
.eik-doc ul { margin: 0 0 12px; padding-left: 20px; }
.eik-doc li { margin-bottom: 5px; }
.eik-doc ul ul { margin: 5px 0 0; }
.eik-doc strong { color: var(--text); font-weight: 600; }
/* a wide table scrolls inside its own box, so the window never scrolls sideways */
.eik-doc-table { margin: 4px 0 14px; overflow-x: auto; }
.eik-doc table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12.5px; line-height: 1.45; }
.eik-doc th, .eik-doc td { padding: 7px 12px 7px 0; text-align: left; vertical-align: top; }
.eik-doc th { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--text-muted); }
.eik-doc td { border-bottom: 1px solid var(--border); }
.eik-doc td:first-child { color: var(--text); font-weight: 500; }
.eik-doc a { color: var(--brand); text-underline-offset: 2px; }
.eik-doc a:hover { color: var(--brand-line); }
.eik-doc-link {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: var(--brand); text-decoration: underline; text-underline-offset: 2px;
}
.eik-doc-link:hover { color: var(--brand-line); }

/* ----------------------------------------------------------- subscription */
.eik-plan {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin: 8px 0 18px;
  background: var(--brand-soft); border-radius: 10px;
}
.eik-plan-badge {
  font: 600 12px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand); background: var(--surface);
  padding: 7px 11px; border-radius: 999px;
}
.eik-plan-when { font-size: 13.5px; color: var(--text); }


/* toast */
#eik-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 96;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: 999px;
  background: var(--brand-deep); color: #fff;
  font: 400 13px/1.4 var(--font-sans);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
#eik-toast[hidden] { display: none !important; }
#eik-toast i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--brand-accent); }

@media (max-width: 640px) {
  /* The rail is tall here, so it scrolls with the text under the fixed head and close button. */
  .eik-split { flex-direction: column; overflow-y: auto; }
  .eik-body { flex: none; overflow: visible; }
  .eik-rail { width: auto; border-right: 0; border-bottom: 1px solid var(--border);
              flex-direction: row; flex-wrap: wrap; padding: 6px 16px 12px; }
  .eik-rail-foot { flex-direction: row; flex-wrap: wrap; width: 100%; margin-top: 6px; padding-top: 6px; }
  .eik-field-row { grid-template-columns: 1fr; }
  .eik-field-row .ctl { grid-column: 1; grid-row: auto; justify-self: stretch; margin-top: 6px; }
  .eik-field-row .sub { grid-row: auto; }
  .eik-sel, .eik-field-inp { width: 100%; max-width: none; }
  #eik-cookie { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .eik-switch::after { transition: none; } }

/* In place of the report when the edge gate refuses it to a signed-out viewer. */
.eik-report-locked {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin: 32px 0; padding: 24px; border: 1px solid var(--border); border-radius: 12px;
  font-family: var(--font-sans); color: var(--text);
}
.eik-report-locked p { margin: 0; font-size: 16px; }

/* The trial banner: red from the first day, and it leads to payment. */
#eik-trial {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 88;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  /* left: 50% alone caps a fixed box at half the screen, which wrapped the longer line. */
  width: max-content;
  padding: 6px 6px 6px 16px; border-radius: 999px;
  background: var(--eik-bar-bg, var(--destructive)); color: var(--eik-bar-fg, #fff);
  transition: background-color .4s ease;
  font: 500 13px/1.4 var(--font-sans);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
#eik-trial[hidden] { display: none !important; }
#eik-trial .eik-btn { flex: none; min-height: 32px; padding: 0 14px; font-size: 12.5px; }
@media (max-width: 700px) {
  /* Side by side, the long button squeezed the text to a word a line. */
  #eik-trial { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; transform: none;
               border-radius: 14px; flex-direction: column; align-items: stretch;
               gap: 10px; padding: 12px; text-align: center; }
  #eik-trial .eik-btn { width: 100%; min-height: 40px; font-size: 13.5px; }
}

#eik-trial-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* The beta note: opens above the banner from the word "beta". */
#eik-trial .eik-beta-tip {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  border-bottom: 1px dotted currentColor; cursor: help;
}
#eik-trial .eik-beta-tip:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
#eik-beta-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(300px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 12px 14px; border-radius: 12px; text-align: left;
  background: #fff; color: var(--text, #051c23);
  font: 400 13px/1.5 var(--font-sans); box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
#eik-beta-pop[hidden] { display: none; }
/* Keeps the note open while the pointer crosses the gap to it. */
#eik-beta-pop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
#eik-beta-pop h4 { margin: 0 0 4px; font: 500 13px/1.3 var(--font-sans); }
#eik-beta-pop p { margin: 0; }
#eik-beta-pop a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* The pale end of the ramp needs an edge to show against the map. */
#eik-trial[data-phase="calm"] { box-shadow: 0 8px 28px rgba(0,0,0,.25), inset 0 0 0 1px rgba(61,4,16,.14); }

/* States 5 and 6's card (08-states-truth-table.md): one checklist, not a
   split of what's kept vs lost — setting up payment is a full switch back
   on, never a partial one. The trial-ended one has no .eik-close — it does
   not close. */
.eik-planwall-card {
  width: min(540px, calc(100vw - 40px));
  padding: 30px 32px; display: flex; flex-direction: column;
}
.eik-planwall-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--destructive); margin-bottom: 8px;
}
.eik-planwall-card h2 {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 23px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
}
.eik-planwall-card .eik-sub {
  margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--text-body);
}
.eik-planwall-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.eik-planwall-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; }
.eik-planwall-list svg { flex: none; margin-top: 1px; color: var(--brand); }
.eik-planwall-card .eik-primary { margin-top: 0; margin-bottom: 10px; }
.eik-planwall-card .eik-back { margin: 0 0 16px; }
.eik-planwall-foot {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted);
}
@media (max-width: 560px) {
  .eik-planwall-card { padding: 24px 20px; }
}

/* Talk to us about payment: the same shape and field pattern as the
   Request-access form beside the gate, opened over whichever wall asked. */
#eik-talk .eik-card { padding: 24px 30px 22px; }
#eik-talk .eik-card:has(> #eik-upgrade-intro:not([hidden])) { box-sizing: border-box; }
#eik-talk h2 { margin: 0 0 2px; font-family: var(--font-display);
               font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
#eik-talk .eik-sub { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
#eik-talk-sent h2, #eik-upgrade-intro h2 { margin-bottom: 8px; }
#eik-talk-sent .eik-sub, #eik-upgrade-intro .eik-sub { margin-bottom: 16px; }
#eik-talk-sent a.eik-btn { display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; text-decoration: none; }

#eik-report-request .eik-card { padding: 24px 30px 22px; }
#eik-report-request h2 { margin: 0 0 16px; font-family: var(--font-display);
                          font-size: 23px; font-weight: 700; }
#eik-report-request .eik-sub { margin: 0 0 16px; font-size: 13.5px;
                                line-height: 1.5; color: var(--text-muted); }
#eik-report-request .eik-primary { margin-top: 6px; }
#eik-report-request-open { margin-top: 20px; }
#eik-report-request .eik-radios { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
#eik-report-request .eik-radios legend { padding: 0; }
.eik-field .eik-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer;
  font: 400 14px/1.3 var(--font-sans); color: var(--text); }
.eik-field .eik-radio:hover { background: var(--surface-stone); }
.eik-field .eik-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: none; }
.eik-field .eik-radio:has(input:checked) { border-color: var(--brand); background: var(--surface-greyblue); }
.eik-field .eik-radio:has(input:focus-visible) { box-shadow: 0 0 0 3px #008cff26; }

#orient .orient-note {
  /* 42.8ch at 13.5px is the width of the paragraph above: 34ch at 17px. */
  box-sizing: border-box; max-width: 42.8ch;
  margin: 0 auto 18px; padding: 10px 12px;
  background: rgba(158,223,255,.10); border: 1px solid rgba(158,223,255,.24);
  border-radius: 8px; font-size: 13.5px; line-height: 1.5; color: var(--on-dark, #fff);
}
#orient .orient-note b { font-weight: 600; }

/* Above the map and the panel (z 5, later in the DOM), below the card (z 6). */
#eik-intro-glass { position: absolute; inset: 0; z-index: 5; }

.eik-workmail {
  margin: 4px 0 2px; padding: 10px 12px; border-radius: 9px;
  background: var(--brand-soft); color: var(--text);
  font-size: 13px; line-height: 1.5;
}
.eik-workmail b { font-weight: 600; }

.eik-notice {
  margin: 4px 0 2px; padding: 10px 12px; border-radius: 9px;
  background: var(--brand-soft); color: var(--text);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.eik-notice p { margin: 0; font-size: 13px; line-height: 1.5; }
.eik-notice .eik-btn-quiet { padding: 0; min-height: auto; font-weight: 600; }
.eik-notice[hidden] { display: none !important; }

/* Brand blue, not red: a refused address is not an error. */
.eik-eyebrow {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand);
}
.eik-inp.eik-area { min-height: 64px; padding-top: 10px; padding-bottom: 10px; resize: vertical; }

/* z 90 and first in the DOM: above the viewer, below the cookie notice and the policies. */
#eik-thanks {
  position: fixed; inset: 0; z-index: 90;
  display: flex; overflow-y: auto; padding: 24px 16px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(6,77,144,.5), transparent 72%), var(--brand-deep);
}
#eik-thanks[hidden] { display: none !important; }
html.eik-thanks-open, html.eik-thanks-open body { overflow: hidden; }
.eik-thanks-col {
  margin: auto; width: min(440px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.eik-thanks-brand { color: var(--on-dark); line-height: 0; }
.eik-thanks-brand svg { display: block; width: auto; height: 30px; }
#eik-thanks .eik-card { width: 100%; box-sizing: border-box; padding: 34px 32px 32px; text-align: center; }
#eik-thanks .eik-sent-mark { margin: 0 auto 18px; }
#eik-thanks h2 {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  text-wrap: balance;
}
#eik-thanks h2:focus { outline: none; }
#eik-thanks .eik-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
#eik-thanks .eik-learn { display: inline-flex; align-items: center; justify-content: center; margin-top: 22px; text-decoration: none; }
#eik-thanks .eik-sub b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

/* ── Small screens (small-screen.js) ──────────────────────────────────────
   Over the trial banner (88), so the card is the one thing to read, but under
   the sign-up box (90) and the cookie notice (95), so both still open above it
   and consent stays possible. */
#ss-layer {
  position: fixed; inset: 0; z-index: 89; display: grid; place-items: center; padding: 20px;
  background: rgba(5, 28, 35, .58); backdrop-filter: blur(2px);
}
/* A browser that cannot draw the map already has its own message and route to the report. */
body.graphics-unavailable #ss-layer { display: none; }
#ss-card {
  position: relative; box-sizing: border-box; width: 100%; max-width: 360px;
  padding: 30px 24px 24px; text-align: center; color: var(--on-dark);
  background: rgba(5, 28, 35, .94); border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(2, 14, 18, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  outline: 1px solid rgba(158, 223, 255, .14);
}
#ss-card .ss-x {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 999px; background: transparent; color: var(--on-dark-muted); cursor: pointer;
  display: grid; place-items: center;
}
#ss-card .ss-x:hover { color: var(--on-dark); }
#ss-card .ss-glyph {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(158, 223, 255, .10); color: var(--brand-accent);
}
#ss-card h2 {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px;
  line-height: 1.2; letter-spacing: -.01em; text-wrap: balance;
}
#ss-card p { margin: 0 auto 22px; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--on-dark-body); }
#ss-card .ss-acts { display: flex; flex-direction: column; gap: 10px; }
#ss-card .ss-acts button {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  border: 0; border-radius: 999px; cursor: pointer; font: 600 15px/1 var(--font-sans);
  transition: background .2s cubic-bezier(.22, .61, .36, 1), transform .16s cubic-bezier(.22, .61, .36, 1);
}
#ss-card .ss-acts button:active { transform: scale(.98); }
#ss-card .ss-copy { background: var(--brand-accent); color: var(--brand-deep); }
#ss-card .ss-copy:hover, #ss-card .ss-copy.ss-done { background: color-mix(in srgb, var(--brand-accent), var(--on-dark) 40%); }
#ss-card .ss-report { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(158, 223, 255, .38); }
#ss-card .ss-report:hover { box-shadow: inset 0 0 0 1px rgba(158, 223, 255, .7); }
#ss-card .ss-link {
  box-sizing: border-box; width: 100%; margin: 0 0 4px; padding: 10px 12px; border: 1px solid rgba(158, 223, 255, .38);
  border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--on-dark); font: 14px/1.3 var(--font-sans);
}
#ss-card :focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }

#ss-banner {
  margin: 0; padding: 12px 16px; background: var(--brand-soft); color: var(--brand-deep);
  font-size: 13.5px; line-height: 1.45; border-bottom: 1px solid var(--border);
}
#ss-banner button {
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--brand); text-decoration: underline; text-underline-offset: 2px;
}
@media (min-width: 641px) { #ss-banner { display: none; } }