/* API console, sign-in and the owner's analytics dashboard, on Lantern's After Hours theme.
   Loaded after site.css only on those pages. Lantern owns the header, footer, buttons, fields,
   steps, code figures and toasts; this file lays out the console's own pieces. Open ground and
   1px hairline rows; a surface only where it groups a decision or a form. No hue. */

.portal-section { padding-block: 40px 120px; }
.portal-section .ln-input { width: 100%; min-width: 0; font: inherit; }
.portal-section h2, .portal-section h3 { font-weight: var(--ln-weight-strong); }
.portal-section :focus:not(:focus-visible) { outline: none; }
#portal-message:empty { display: none; }
#portal-message:not(:empty) { max-width: 760px; margin: 0 0 24px; padding: 12px 16px; border-radius: 12px; background: rgb(255 255 255 / .06); color: var(--ln-ink); font-size: 15px; }
.portal-notice { max-width: 620px; margin: 0 0 24px; color: var(--ln-ink-quiet); font-size: 14px; }

/* Quiet text actions: muted ink with an underline, full ink on hover. */
.text-button { padding: 0; border: 0; background: none; color: var(--ln-ink-secondary); font: inherit; font-size: 14px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ln-ink) 30%, transparent); text-underline-offset: 4px; cursor: pointer; }
.text-button:hover { color: var(--ln-ink); text-decoration-color: currentColor; }
.text-button:active { opacity: .75; }
.text-button:disabled { opacity: .5; cursor: default; }
.console-language-row { display: flex; justify-content: end; margin-bottom: 8px; }
.developer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.developer-actions > a:not(.ln-btn) { color: var(--ln-ink-secondary); font-size: 15px; text-decoration-color: color-mix(in srgb, var(--ln-ink) 30%, transparent); text-underline-offset: 4px; }
.developer-actions > a:not(.ln-btn):hover { color: var(--ln-ink); text-decoration-color: currentColor; }

/* -- Sign in, registration, recovery and reset ------------------------------ */
#auth-panel { max-width: 400px; margin: 40px auto 40px; }
.portal-form { position: relative; display: grid; gap: 20px; }
.portal-form .ln-field { display: grid; gap: 8px; }
.portal-form label { display: flex; align-items: center; gap: 8px; color: var(--ln-ink); font-size: 15px; font-weight: var(--ln-weight-strong); }
.portal-form .small { margin: 0; }
.portal-form #password-hint { color: var(--ln-ink-quiet); font-size: 13px; }
.auth-heading { display: grid; gap: 8px; margin-bottom: 4px; }
.auth-heading #auth-title { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; }
.auth-heading p { margin: 0; color: var(--ln-ink-secondary); font-size: 15px; }
.auth-heading #auth-free-note { color: var(--ln-ink-quiet); font-size: 14px; }
.portal-form #auth-submit { width: 100%; }
/* Turnstile's widget takes no room until a visitor has to answer it. */
.auth-turnstile:not(.is-interactive) { position: absolute; inset-inline: 0; block-size: 0; overflow: hidden; }
.portal-form .ln-form-divider { display: flex; align-items: center; gap: 12px; color: var(--ln-ink-quiet); font-size: 13px; }
.portal-form .ln-form-divider::before, .portal-form .ln-form-divider::after { content: ''; flex: 1; height: 1px; background: var(--ln-hairline); }
.passkey-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.portal-form .passkey-actions > button { width: 100%; gap: 8px; }
.auth-switches { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
#auth-terms { color: var(--ln-ink-quiet); font-size: 13px; line-height: 1.6; }
#auth-terms a { color: var(--ln-ink-secondary); }
/* The plan chosen on the homepage, named beside the form. */
.auth-intent { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: rgb(255 255 255 / .06); }
.auth-intent p { margin: 0; }
#auth-intent-plan { color: var(--ln-ink); font-weight: var(--ln-weight-strong); font-variant-numeric: tabular-nums; }
#auth-intent-next { color: var(--ln-ink-secondary); font-size: 14px; }
/* Resetting a password revokes every API key: a consequence, so it reads as a caution, not fine print. */
#reset-warning { padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--ln-caution) 40%, transparent); border-radius: 12px; color: var(--ln-ink); font-size: 14px; line-height: 1.55; }

/* A recovery code or a new key, shown once. */
.secret-panel { max-width: 760px; margin: 0 0 32px; padding: 24px; border-color: var(--ln-hairline-strong); }
.secret-panel h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }
.secret-panel p { margin: 0 0 16px; color: var(--ln-ink-secondary); font-size: 15px; }
.secret-panel textarea { margin-bottom: 16px; font-family: var(--mono) !important; font-size: 14px; resize: none; }

/* -- Signed-in shell: the sidebar of destinations and one view at a time ------ */
.workspace-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; align-content: start; min-height: calc(100vh - 300px); }
.workspace-sidebar { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; min-height: 480px; }
.workspace-identity { min-width: 0; margin-bottom: 24px; padding-inline: 12px; }
.workspace-identity > div { min-width: 0; }
.workspace-identity strong { display: block; font-size: 15px; font-weight: var(--ln-weight-strong); }
.workspace-identity p { margin: 2px 0 0; color: var(--ln-ink-quiet); font-size: 13px; overflow-wrap: anywhere; }
.workspace-sidebar nav > a, .workspace-sidebar-bottom > a, .workspace-sidebar-bottom > button { font-size: 15px; }
.workspace-sidebar nav > a[aria-current='page'] { background: rgb(255 255 255 / .08); color: var(--ln-ink); }
.workspace-sidebar nav > a:hover:not([aria-current='page']) { background: rgb(255 255 255 / .04); }
.workspace-sidebar-bottom { display: grid; gap: 2px; margin-top: auto; padding-top: 40px; }
/* Same geometry as the nav rows, so icons and labels share one column. */
.workspace-sidebar-bottom > a, .workspace-sidebar-bottom > button { display: flex; align-items: center; justify-content: start; gap: 12px; min-height: 40px; margin: 0; padding: 8px 12px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--ln-ink-quiet); font: inherit; font-size: 14px; font-weight: 400; text-decoration: none; cursor: pointer; }
.workspace-sidebar-bottom > a:hover, .workspace-sidebar-bottom > button:hover { background: rgb(255 255 255 / .04); color: var(--ln-ink); }
.workspace-sidebar .ln-icon { width: 18px; height: 18px; flex-basis: 18px; }
.workspace-main { min-width: 0; }
.workspace-heading { margin-bottom: 40px; }
.workspace-heading h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; }
.workspace-heading p { margin: 6px 0 0; color: var(--ln-ink-secondary); font-size: 15px; }

/* Each view is a run of sections on open ground, separated by air and a hairline. */
.workspace-main [data-workspace-view] > section, .workspace-main [data-workspace-view] > div:not(.account-overview, .console-rows, .developer-actions) { margin-top: 48px; }
.workspace-main [data-workspace-view] > :first-child { margin-top: 0; }
.workspace-main [data-workspace-view] h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.workspace-main [data-workspace-view] h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.workspace-main [data-workspace-view] p { max-width: 62ch; }
.workspace-main [data-workspace-view] p:not(.small, .ln-step-detail, .balance-value, .pack-price, .plan-choice, .plan-intent-due) { color: var(--ln-ink-secondary); font-size: 15px; }
.workspace-main .small { color: var(--ln-ink-quiet); font-size: 13px; }
:where(.workspace-main [data-workspace-view]) p { margin: 0 0 12px; }
:where(.workspace-main [data-workspace-view]) p:last-child { margin-bottom: 0; }
.workspace-main section > .small:last-child { margin-bottom: 0; }

/* Hairline rows for keys, passkeys and the ledger. */
.console-rows { margin-top: 20px; border-bottom: 1px solid var(--ln-hairline); }
.console-rows > p { margin: 0; padding-block: 18px; border-top: 1px solid var(--ln-hairline); color: var(--ln-ink-quiet) !important; font-size: 14px !important; }
.key-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 16px; border-top: 1px solid var(--ln-hairline); overflow-wrap: anywhere; }
.key-row > div { min-width: 0; }
.key-row p { margin: 0; color: var(--ln-ink) !important; font-size: 15px; unicode-bidi: plaintext; }
.key-row small { display: block; margin-top: 2px; color: var(--ln-ink-quiet); font-size: 13px; }
.key-row .developer-actions { flex-shrink: 0; gap: 8px; margin: 0; }
.key-row .ln-btn { --ln-button-height: 36px; padding-block: 6px; padding-inline: 16px; font-size: 14px; }
#purchases .key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(6rem, auto); gap: 16px; font-variant-numeric: tabular-nums; }
#purchases .key-row > div > span { color: var(--ln-ink); font-size: 15px; }
#purchases .key-row > span { color: var(--ln-ink-secondary); font-size: 15px; text-align: end; white-space: nowrap; }
#purchases .key-row > span:last-child { color: var(--ln-ink); }

/* -- Overview ---------------------------------------------------------------- */
.account-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.balance-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.workspace-main .balance-panel h2 { margin: 0; color: var(--ln-ink-secondary); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.balance-value { margin: 4px 0 0; font-size: 56px; font-weight: var(--ln-weight-strong); line-height: 1.05; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.balance-breakdown { margin: 20px 0 0; border-bottom: 1px solid var(--ln-hairline); }
.balance-breakdown[hidden] { display: none; }
.balance-breakdown > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid var(--ln-hairline); font-size: 15px; }
.balance-breakdown dt { color: var(--ln-ink-secondary); }
.balance-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.workspace-main .balance-panel > p.small { margin: 14px 0 0; }
.workspace-main .balance-panel > p.small:empty { display: none; }
#credit-debt { color: var(--ln-ink) !important; }
.free-plan-speed strong { color: var(--ln-ink); font-weight: var(--ln-weight-strong); }
.free-plan-speed a { color: var(--ln-ink-secondary); text-underline-offset: 4px; }
.overview-plan { padding-top: 2px; }
.overview-plan > p { margin: 6px 0 14px !important; }
.overview-plan > a { display: inline-flex; align-items: center; gap: 8px; color: var(--ln-ink); font-size: 15px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ln-ink) 30%, transparent); text-underline-offset: 4px; }
.overview-plan > a:hover { text-decoration-color: currentColor; }
.overview-plan .ln-icon { width: 16px; height: 16px; flex-basis: 16px; }
[dir='rtl'] .overview-plan .ln-icon { transform: scaleX(-1); }

.workspace-next, .integration-success, .overview-first-request { padding-top: 32px; border-top: 1px solid var(--ln-hairline); }
.console-steps { margin-top: 24px; max-width: 640px; }
.console-steps a { color: inherit; text-decoration: none; }
.console-steps a:hover { text-decoration: underline; text-underline-offset: 4px; }
.console-steps .ln-step-detail { color: var(--ln-ink-quiet); font-size: 14px; }
.progress-refresh { margin-top: 20px; }
/* The latest job's state, under the milestones. */
.onboarding-status { max-width: 62ch; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: rgb(255 255 255 / .06); font-size: 15px; }
.onboarding-status p { margin: 0; color: var(--ln-ink) !important; }
.onboarding-status p + p, .onboarding-status > a { margin-top: 10px; }
.onboarding-status > a { display: inline-block; color: var(--ln-ink-secondary); font-size: 14px; }
.onboarding-status > [hidden] { display: none; }
.onboarding-status code { font-size: 13px; overflow-wrap: anywhere; }
.onboarding-status[data-state='failed'], .onboarding-status[data-state='expired'] { background: none; border: 1px solid color-mix(in srgb, var(--ln-caution) 40%, transparent); }
.integration-success .developer-actions { margin-top: 16px; }
.integration-production { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ln-hairline); }
.integration-production .ln-btn { margin-top: 4px; }
.overview-first-request .ln-code { margin-top: 20px; }
.overview-first-request pre { margin: 0; padding: 16px 20px; overflow-x: auto; font-size: 13px; line-height: 1.7; }
.overview-key-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.overview-key-cta .ln-btn { gap: 8px; }
.overview-key-cta .small { margin: 0; }

/* -- API keys ---------------------------------------------------------------- */
/* Creating a key is the view's one form, so it gets the surface. */
.key-form { display: grid; gap: 20px; margin-top: 24px; padding: 24px; border-radius: 14px; background: var(--ln-surface); }
.key-name-field { display: grid; gap: 8px; max-width: 30rem; }
.key-name-field label { font-size: 15px; font-weight: var(--ln-weight-strong); }
.key-scopes { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; border: 0; font-size: 15px; }
.key-scopes legend { margin-bottom: 10px; padding: 0; color: var(--ln-ink); font-size: 15px; font-weight: var(--ln-weight-strong); }
.key-scopes label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ln-ink-secondary); cursor: pointer; }
.key-scopes input { width: 16px; height: 16px; margin: 0; accent-color: var(--ln-ink); }
.key-form > .ln-btn { justify-self: start; }
.quickstart-downloads { margin-top: 48px; }
.quickstart-downloads .developer-actions { margin-top: 12px; }
.quickstart-downloads > p:last-child a { color: var(--ln-ink-secondary); font-size: 14px; text-underline-offset: 4px; }
.quickstart-sample { color: var(--ln-ink-quiet); font-size: 14px; }
.portal-keys > h2 { margin-top: 48px !important; }
.portal-keys > h2 + .small { margin: 0; }

/* -- Billing ----------------------------------------------------------------- */
.current-subscription h2 { font-size: 24px !important; letter-spacing: -.02em !important; }
.current-subscription .developer-actions { margin-block: 16px 14px; }
.account-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.account-heading h2 { margin: 0 !important; }
#currency-note { margin: 4px 0 0; }
/* Plans as a hairline sheet, as on the public pricing: name, price, minutes, one action per row. */
.plan-cards { margin-block: 20px 16px; border-bottom: 1px solid var(--ln-hairline); }
.plan-cards > article { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(15rem, auto); align-items: center; gap: 4px 24px; padding-block: 18px; border-top: 1px solid var(--ln-hairline); }
.plan-cards > article > h3 { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 17px !important; }
.plan-cards > article.plan-selected > h3 { grid-row: 1; }
.plan-cards > article > .plan-choice { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; padding: 2px 10px; border-radius: 999px; background: rgb(255 255 255 / .1); color: var(--ln-ink) !important; font-size: 12px !important; }
.plan-cards > article > .plan-choice[hidden] { display: none; }
.plan-cards .pack-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--ln-ink); font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-cards .pack-price span { color: var(--ln-ink-quiet); font-size: 14px; }
.plan-cards > article > p:not(.pack-price, .plan-choice) { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 15px; }
.plan-cards > article > .ln-btn { grid-column: 4; grid-row: 1 / span 2; justify-self: end; min-width: 15rem; white-space: normal; text-align: center; }
.plan-interval { color: var(--ln-ink-quiet); font-size: 13px; font-weight: 400; letter-spacing: 0; }
/* The plan named by a homepage CTA, and the current plan, stand out in ink, not colour. */
.plan-cards > article.plan-selected { box-shadow: inset 2px 0 0 var(--ln-ink); padding-inline-start: 16px; }
[dir='rtl'] .plan-cards > article.plan-selected { box-shadow: inset -2px 0 0 var(--ln-ink); }
/* Unavailable choices read as statements; the current plan reads as a status. */
.plan-cards .ln-btn:disabled { opacity: 1; border-color: transparent; background: none; box-shadow: none; color: var(--ln-ink-quiet); cursor: not-allowed; }
.plan-cards .ln-btn.is-current-plan:disabled { color: var(--ln-ink); cursor: default; }
.plan-cards .ln-btn.is-current-plan::after { content: ''; width: 6px; height: 6px; margin-inline-start: 8px; border-radius: 50%; background: var(--ln-ink); order: -1; margin-inline: 0 8px; }
#metered-option, #account-topups, #credit-history { padding-top: 32px; border-top: 1px solid var(--ln-hairline); }
#metered-option .ln-btn { margin-top: 4px; }
#metered-note, #topup-note { margin-top: 10px; }
#account-topups .developer-actions { margin-top: 16px; }
#account-topups .ln-btn bdi { margin-inline-start: 4px; }
/* A decision before payment: the one place in Billing that earns a surface. */
.plan-intent, #upgrade-panel { padding: 24px; border-color: var(--ln-hairline-strong); }
.plan-intent h2, #upgrade-panel h2 { margin-top: 0; }
.plan-intent-due { margin: 12px 0 4px; color: var(--ln-ink) !important; font-size: 24px !important; font-weight: var(--ln-weight-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-intent .developer-actions, #upgrade-panel .developer-actions { margin-block: 16px 12px; }
.auth-intent[hidden], .plan-intent[hidden], .plan-choice[hidden] { display: none; }

/* -- Security ---------------------------------------------------------------- */
.account-security .developer-actions { margin-top: 16px; }
.account-security .developer-actions:has(> #add-passkey[hidden]) { display: none; }

#secret-value, #email, #recovery, #account-email { direction: ltr; text-align: left; unicode-bidi: isolate; }
[dir='rtl'] #account-email { text-align: right; }
[dir='rtl'] .key-row p { text-align: right; }
/* Notices and a new secret line up with the column they belong to. */
.portal-wrap:has(#dashboard[hidden]) #portal-message { max-width: 400px; margin-inline: auto; }
.portal-wrap:has(#dashboard:not([hidden])) :is(#portal-message, .secret-panel) { margin-inline-start: 256px; }

/* -- Arabic ------------------------------------------------------------------ */
:lang(ar) :is(.workspace-heading h2, .auth-heading #auth-title, .balance-value, .plan-intent-due, .current-subscription h2) { letter-spacing: 0 !important; }
:lang(ar) .workspace-main [data-workspace-view] p, :lang(ar) .portal-form p { line-height: 1.8; }
:lang(ar) .auth-heading #auth-title, :lang(ar) .workspace-heading h2 { line-height: 1.35; }

@media (max-width: 960px) {
  .workspace-shell { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
  .portal-wrap:has(#dashboard:not([hidden])) :is(#portal-message, .secret-panel) { margin-inline-start: 212px; }
  .account-overview { grid-template-columns: minmax(0, 1fr); }
  .plan-cards > article { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-cards > article > h3 { grid-column: 1; }
  .plan-cards .pack-price { grid-column: 2; grid-row: 1; text-align: end; }
  .plan-cards > article > .plan-choice { grid-row: 2; }
  .plan-cards > article > p:not(.pack-price, .plan-choice) { grid-column: 1 / -1; grid-row: auto; }
  .plan-cards > article > .ln-btn { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; min-width: 0; margin-top: 10px; }
}
@media (max-width: 700px) {
  .portal-section { padding-block: 16px 80px; }
  #auth-panel { margin-block: 8px 24px; }
  .workspace-shell { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .portal-wrap:has(#dashboard:not([hidden])) :is(#portal-message, .secret-panel) { margin-inline-start: 0; }
  .workspace-sidebar { position: relative; top: 0; min-height: 0; }
  .workspace-identity { margin-bottom: 16px; padding-inline: 0 7rem; }
  /* Four destinations, aligned as one row of tabs. */
  .workspace-sidebar .ln-sidebar-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .workspace-sidebar .ln-sidebar-nav > a { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; font-size: 13px; text-align: center; }
  .workspace-sidebar-bottom { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding-top: 8px; }
  .workspace-sidebar-bottom > * { white-space: nowrap; }
  .workspace-sidebar-bottom > a { padding-inline: 0; }
  .workspace-sidebar-bottom > a:hover { background: none; }
  /* Sign out joins the account row so the links below never crowd or wrap. */
  .workspace-sidebar-bottom > #logout { position: absolute; top: 0; inset-inline-end: 0; padding-inline: 12px; }
  .workspace-heading { margin-bottom: 28px; }
  .workspace-heading h2 { font-size: 24px; }
  .balance-value { font-size: 48px; }
  .key-form { padding: 20px; }
  .key-row { flex-wrap: wrap; align-items: start; }
  #purchases .key-row { grid-template-columns: minmax(0, 1fr) auto; }
  #purchases .key-row > span:nth-child(2) { grid-column: 2; grid-row: 1; }
  #purchases .key-row > span:last-child { grid-column: 2; }
  .plan-intent, #upgrade-panel, .secret-panel { padding: 20px; }
}

/* -- Owner analytics dashboard ----------------------------------------------- */
/* Charts in ink tiers only: the measured value in the brightest series, its track in the faintest. */
.analytics-dashboard { padding-block: 64px 120px; }
.analytics-gate { max-width: 660px; margin: 32px 0 80px; }
.analytics-gate .ln-statement { max-width: none; }
.analytics-gate-message { margin-top: 24px; color: var(--ln-ink); }
.analytics-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; }
.analytics-gate-actions p { margin: 0; }
.analytics-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.analytics-heading .ln-statement { max-width: 560px; }
.analytics-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; }
:is(.analytics-controls, .analytics-people-filters, .analytics-web-controls) label { color: var(--ln-ink-secondary); font-size: 14px; }
:is(.analytics-controls, .analytics-people-filters, .analytics-web-controls) .ln-input { width: auto; min-height: 40px; }
#analytics-status { margin: 0 0 8px; }
.analytics-warning { padding: 12px 16px; border-radius: 12px; background: rgb(255 255 255 / .06); color: var(--ln-ink); }
.analytics-dashboard .muted { color: var(--ln-ink-quiet); }
.analytics-dashboard .small { font-size: 13px; }

.analytics-section { margin-block: 56px 20px; }
.analytics-section-heading h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
.analytics-section-heading p { max-width: 70ch; margin: 0; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-block: 8px; }
/* Panels sit on the open ground under a hairline; tables carry the structure. */
.analytics-panel { min-width: 0; padding-block: 28px 8px; border-top: 1px solid var(--ln-hairline); }
.analytics-panel-wide { grid-column: 1 / -1; }
.analytics-panel-block { margin-block: 24px; }
.analytics-panel h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }
.analytics-panel-note { max-width: 70ch; margin: 0 0 16px; }
.analytics-subheading { margin: 24px 0 8px; font-size: 15px; }
.analytics-panel > div > .analytics-subheading:first-child, .analytics-panel-block > div > .analytics-subheading:first-child { margin-top: 0; }
.analytics-table-scroll { overflow-x: auto; }
.analytics-panel table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.analytics-panel th, .analytics-panel td { padding: 10px 8px; border-bottom: 1px solid var(--ln-hairline); text-align: start; vertical-align: top; }
.analytics-panel :is(th, td):first-child { padding-inline-start: 0; }
.analytics-panel :is(th, td):last-child { padding-inline-end: 0; }
.analytics-panel th { color: var(--ln-ink-quiet); font-size: 13px; font-weight: 400; }
.analytics-panel td { color: var(--ln-ink-secondary); }
.analytics-panel td:first-child { color: var(--ln-ink); overflow-wrap: break-word; }
.analytics-panel :is(td, th).num { text-align: end; white-space: nowrap; }
[id^='analytics-translation-'] td { white-space: nowrap; }
.analytics-note { margin-top: 24px; }
.analytics-caveat { max-width: 70ch; margin: 16px 0 0; }

/* Stat tiles: a quiet label over a large figure, separated by hairlines. */
.analytics-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 32px; margin-block: 20px 8px; }
#analytics-free-summary, #analytics-translation-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analytics-metric { display: grid; align-content: start; gap: 2px; padding-block: 16px; border-top: 1px solid var(--ln-hairline); }
.analytics-metric p { margin: 0; }
.analytics-metric strong { font-size: 32px; line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#analytics-translation-summary .analytics-metric strong { font-size: clamp(20px, 5vw, 32px); }

/* Funnels: each journey grouped on a surface, its steps as ink bars on a faint track. */
.analytics-funnel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.analytics-funnel-card { min-width: 0; padding: 20px; border-radius: 14px; background: var(--ln-surface); }
.analytics-funnel-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.analytics-funnel-steps { display: grid; gap: 12px; }
.analytics-funnel-step { display: grid; grid-template-columns: 8rem minmax(4rem, 1fr) 3.5rem; align-items: center; gap: 10px; }
.analytics-funnel-step-label { color: var(--ln-ink-secondary); font-size: 14px; }
.analytics-funnel-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--ln-series-6); }
.analytics-funnel-bar { height: 100%; min-width: 0; border-radius: inherit; background: var(--ln-series-1); }
.analytics-funnel-step.is-partial .analytics-funnel-bar { background: repeating-linear-gradient(135deg, var(--ln-series-2) 0 4px, transparent 4px 7px); }
.analytics-funnel-step-value { text-align: end; font-variant-numeric: tabular-nums; }
.analytics-funnel-step-meta { grid-column: 2 / -1; margin-top: -6px; font-variant-numeric: tabular-nums; }
.analytics-drop { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--ln-hairline); }
.analytics-drop strong { font-weight: var(--ln-weight-strong); }

/* Active people: three figures and a daily spark per product. */
.analytics-active-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 32px; margin-top: 20px; }
.analytics-active-card { display: grid; align-content: start; gap: 10px; min-width: 0; padding-block: 18px; border-top: 1px solid var(--ln-hairline); }
.analytics-active-card h3 { margin: 0; font-size: 16px; }
.analytics-active-card p { margin: 0; }
.analytics-active-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.analytics-active-stat { display: grid; align-content: space-between; }
.analytics-active-stat strong { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.analytics-spark { display: flex; align-items: end; gap: 2px; height: 48px; padding-top: 4px; border-bottom: 1px solid var(--ln-chart-grid); }
.analytics-spark-bar { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--ln-series-2); }
.analytics-spark-bar.is-zero { background: var(--ln-series-6); }
.analytics-spark-axis { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

/* Retention: each cell's ink rises with its share. */
.analytics-panel .analytics-retention-table :is(td, th) { text-align: center; }
.analytics-panel .analytics-retention-table :is(th[scope='row'], th:first-child) { color: var(--ln-ink); text-align: start; white-space: nowrap; }
.analytics-heat { background: color-mix(in srgb, var(--ln-series-1) var(--share, 0%), transparent); border-inline: 2px solid var(--ln-canvas); }
.analytics-heat.is-strong { color: var(--ln-on-accent) !important; }
.analytics-heat.is-future { background: transparent; }

/* People and one person's timeline. */
.analytics-people-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.analytics-people-heading h2 { margin-bottom: 6px; }
.analytics-people-heading .analytics-panel-note { margin-bottom: 0; }
.analytics-panel-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 8px; }
.analytics-panel-title h2 { margin: 0; }
.analytics-people-filters, .analytics-web-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.analytics-person-link { padding: 4px 0; border: 0; background: none; color: var(--ln-ink); font: inherit; font-family: var(--mono); font-size: 13px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ln-ink) 30%, transparent); text-underline-offset: 3px; cursor: pointer; }
.analytics-person-link:hover { text-decoration-color: currentColor; }
.analytics-person { scroll-margin-top: 96px; margin-bottom: 24px; padding: 20px; border-radius: 14px; background: var(--ln-surface); }
.analytics-person:focus { outline: 1px solid var(--ln-hairline-strong); outline-offset: 0; }
.analytics-person-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.analytics-person-heading h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.analytics-timeline { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.analytics-timeline-item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding-inline-start: 12px; border-inline-start: 2px solid var(--ln-series-5); }
.analytics-timeline-item.is-good { border-inline-start-color: var(--ln-series-1); }
.analytics-timeline-item.is-bad { border-inline-start-color: var(--ln-critical); }
.analytics-tag { margin-inline-start: 6px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--ln-critical) 60%, transparent); border-radius: 6px; color: var(--ln-critical); font-size: 12px; }

/* Website events and data controls fold away like FAQ rows. */
.analytics-settings-panel { padding-block: 20px; border-top: 1px solid var(--ln-hairline); }
.analytics-settings-panel:last-child { border-bottom: 1px solid var(--ln-hairline); }
.analytics-settings-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: var(--ln-weight-strong); list-style: none; cursor: pointer; }
.analytics-settings-panel > summary::-webkit-details-marker { display: none; }
.analytics-settings-panel > summary::after { content: ''; width: 12px; height: 12px; flex: none; background: linear-gradient(var(--ln-ink-quiet), var(--ln-ink-quiet)) center / 12px 1.5px no-repeat, linear-gradient(var(--ln-ink-quiet), var(--ln-ink-quiet)) center / 1.5px 12px no-repeat; transition: transform .2s var(--ln-ease); }
.analytics-settings-panel[open] > summary::after { transform: rotate(45deg); }
.analytics-settings-panel[open] > summary { margin-bottom: 16px; }
.analytics-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.analytics-setting-row p { margin: 4px 0 0; }
.analytics-delete-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ln-hairline); }
.analytics-delete-form label { display: grid; gap: 6px; color: var(--ln-ink-secondary); font-size: 14px; }
.analytics-delete-form .ln-input { width: 100%; min-height: 44px; }

@media (max-width: 800px) {
  .analytics-heading { flex-direction: column; align-items: start; }
  .analytics-controls { justify-content: start; }
  .analytics-metrics, #analytics-free-summary, #analytics-translation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .analytics-dashboard { padding-top: 32px; }
  .analytics-funnel-grid, .analytics-grid { grid-template-columns: minmax(0, 1fr); }
  .analytics-panel-wide { grid-column: auto; }
  .analytics-funnel-card, .analytics-person { padding: 16px; }
  .analytics-funnel-step { grid-template-columns: 6.5rem minmax(3rem, 1fr) 3rem; }
  .analytics-setting-row, .analytics-person-heading { flex-direction: column; align-items: start; }
  .analytics-delete-form { grid-template-columns: minmax(0, 1fr); }
  .analytics-delete-form button { justify-self: start; }
  .analytics-timeline-item { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :is(.analytics-controls, .analytics-people-filters) > * { flex: 1 1 auto; }
  :is(.analytics-controls, .analytics-people-filters) label { flex: 0 0 auto; }
  .analytics-panel :is(th, td) { padding-inline: 6px; }
}