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

   FIRST DRAFT, design pack 07. Nothing here is wired to real auth: the gate is
   a mock, any credentials pass, and everything lives in memory for the length
   of a page view. See planning-showcase-design/07-account-and-profile.md.

   Every colour, radius and face below comes from the :root block at the top of
   style.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 {
  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:focus-visible, .eik-btn-ghost:focus-visible, .eik-btn-quiet: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 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-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-orient { text-align: center; }
.eik-orient p {
  margin: 0; color: var(--on-dark-body); font: 400 14.5px/1.5 var(--font-sans);
  text-wrap: balance;
}
.eik-orient p b { color: var(--on-dark); font-weight: 600; }
#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; }
.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-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: 0; text-align: center; font-size: 12px; color: var(--on-dark-muted); }
.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-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-end;
  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; }
.eik-cookie-acts .eik-btn-quiet { margin-right: auto; padding: 0; }
#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 { margin: 0 0 6px; font-family: var(--font-display);
                 font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
#eik-cprefs .eik-lede { margin: 0 0 20px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.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: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;
}
.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-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-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); }

/* team rows keep an avatar + two lines, so they stay a flex row */
.eik-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           padding: 12px 0; border-bottom: 1px solid var(--border); }
.eik-row:last-child { border-bottom: 0; }
.eik-row .v { font-size: 13.5px; font-weight: 500; color: var(--text); }
.eik-row .sub { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

.eik-mini {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--surface-stone); color: var(--text-body);
  font: 600 11.5px/1 var(--font-sans);
  display: flex; align-items: center; justify-content: center;
}
.eik-role-tag {
  margin-left: auto; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); font: 600 11.5px/1.5 var(--font-sans); 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-sel {
  min-height: 40px; min-width: 210px; max-width: 280px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: 400 13.5px/1 var(--font-sans); padding: 0 34px 0 12px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23051c239e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.eik-sel:focus { outline: none; border-color: var(--brand-line); box-shadow: 0 0 0 3px #008cff26; }

.eik-field-inp { width: 260px; height: 40px; font-size: 13.5px; }
/* the free-text role sits under the select, not beside it */
.eik-field-row .ctl { flex-wrap: wrap; justify-content: flex-end; }
.eik-role-other[hidden] { display: none !important; }
.eik-role-other { width: 260px; }
.eik-form-foot {
  display: flex; justify-content: flex-end; flex: none;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border);
}
.eik-save { min-width: 116px; }
.eik-mini-btn {
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 0; background: var(--brand); color: #fff;
  font: 600 13px/1 var(--font-sans); white-space: nowrap;
}
.eik-mini-btn.ghost { background: var(--surface); color: var(--brand); border: 1px solid var(--border); }

/* team */
.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; }
.eik-empty-role { padding: 13px 0; font-size: 13px; font-style: italic; color: var(--text-muted); }
.eik-invite { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--border); }
.eik-invite h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; }
.eik-invite > p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.eik-inv-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.eik-inv-row .eik-inp { flex: 1; min-width: 170px; height: 40px; font-size: 13.5px; }

/* ---------------------------------------------------------------- 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; }

/* 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; }
.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); }

/* what the pricing discussion did not settle is marked, not invented */
.eik-tbd {
  border-bottom: 1px dashed var(--text-muted); color: var(--text-muted);
}


/* 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) {
  .eik-split { flex-direction: column; }
  .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; 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; }