/* Self-hosted fonts. Sources and licenses: priv/static/fonts/SOURCES.md. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable-7916b58acb294b5f798bde06531eaea4.woff2?vsn=d") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable-6555cf40195d84dd673541587f97b90d.woff2?vsn=d") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/CormorantGaramond-Variable-e4e91be2ba4cdba28af3bf1db8dda052.woff2?vsn=d") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/CormorantGaramond-Italic-Variable-b3c0ffa577fae07e18a1a70aa4bcf498.woff2?vsn=d") format("woff2"); font-style: italic; font-weight: 300 700; font-display: swap; }
/* The door pages (log in, request access, and through Layouts.app the
   magic-link landing, account settings, confirmations, invitations, the
   workspace picker and the desktop and MCP consent pages), in the public
   site's look. Loaded by Layouts.entry only; every rule is scoped to
   .bt-entry so the rest of the app, and its four themes, are untouched. The
   page keeps its night ground in every theme because it is the door to the
   site, not a screen inside the app.

   Layout: one column on phones and tablets (header, form, story, legal);
   from 960px the story panel takes the right half and stays in view. */

html:has(.bt-entry), html:has(.bt-entry) body { background: #06090e; color-scheme: dark; }
/* The entry header carries the account links; the root strip would repeat them. */
html:has(.bt-entry) body > .auth-utility { display: none; }

.bt-entry {
  --e-ground: #06090e;
  --e-panel: #0b111a;
  --e-field: #0c121b;
  --e-field-on: #0f1822;
  --e-fill: #101a25;
  --e-line: rgba(255, 255, 255, .08);
  --e-line-2: rgba(255, 255, 255, .13);
  --e-ink: #f2f2ee;
  --e-ink-2: #a9b6c1;
  --e-ink-3: #8fa3b3;
  --e-ice: #b3e4e9;
  --e-ice-line: rgba(179, 228, 233, .28);
  --e-warm: #e6b09a;
  --e-error: #f3b8bf;
  --e-error-line: rgba(240, 150, 160, .62);
  --e-button: #dcebe8;
  --e-button-ink: #0b1a1f;
  --e-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --e-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --e-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --e-gutter: clamp(20px, 5vw, 72px);
  --e-column: 440px;
  --e-ease: cubic-bezier(.2, .7, .2, 1);
  /* daisyUI and Tailwind colours for anything a page brings along, so a door
     page reached under a light theme still reads on the night ground. */
  --color-base-100: #0c121b;
  --color-base-200: #0a1018;
  --color-base-300: #16202b;
  --color-base-content: #f2f2ee;
  --color-primary: #dcebe8;
  --color-primary-content: #0b1a1f;
  --color-error: #f3b8bf;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "body" "story" "legal";
  align-content: start;
  background: var(--e-ground);
  color: var(--e-ink);
  font-family: var(--e-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.bt-entry a { color: #e4f2f2; }
.bt-entry a:hover { color: #fff; }
.bt-entry :focus-visible { outline: 2px solid var(--e-ice); outline-offset: 3px; }
.bt-entry ::selection { background: var(--e-warm); color: #0b0f15; }

/* Header: brand on the left, one action or the account on the right */
.bt-entry-header { grid-area: header; container-type: inline-size; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 28px var(--e-gutter) 0; }
.bt-entry-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--e-ink); }
.bt-entry-brand:hover { color: var(--e-ink); }
.bt-entry-wordmark { display: flex; align-items: baseline; gap: 7px; }
.bt-entry-wordmark b { font-family: var(--e-serif); font-weight: 600; font-size: 27px; line-height: 1; letter-spacing: -.01em; }
.bt-entry-wordmark span { font-size: 11px; font-weight: 600; letter-spacing: .2em; color: #9fb1bd; }
.bt-entry-header-action { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 14px; color: var(--e-ink-2); }
.bt-entry-header-action a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--e-ice-line); border-radius: 999px; color: #dcebeb; font-weight: 500; white-space: nowrap; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.bt-entry-header-action a:hover { border-color: rgba(179, 228, 233, .6); background: rgba(179, 228, 233, .07); color: #fff; }
.bt-entry-account { display: flex; align-items: center; gap: 4px 18px; min-width: 0; font-size: 14px; }
.bt-entry-account-email { min-width: 0; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--e-ink-3); }
.bt-entry-account a { display: inline-flex; align-items: center; min-height: 40px; color: #dcebeb; text-decoration: underline; text-decoration-color: rgba(220, 235, 235, .3); text-underline-offset: 4px; }
.bt-entry-account a:hover { text-decoration-color: currentColor; }

/* The form column */
.bt-entry-body { grid-area: body; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 44px var(--e-gutter) 40px; }
html .bt-entry .auth-card.bt-entry-card { width: 100%; max-width: var(--e-column); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; display: flex; flex-direction: column; gap: 24px; }
.bt-entry .auth-entry-note { width: 100%; max-width: var(--e-column); margin: 0; padding-top: 18px; border-top: 1px solid var(--e-line); font-size: 13px; line-height: 1.6; color: var(--e-ink-3); text-wrap: pretty; }
.bt-entry-legal { grid-area: legal; display: flex; flex-wrap: wrap; gap: 0 24px; padding: 8px var(--e-gutter) 24px; font-size: 13px; }
.bt-entry-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--e-ink-3); }
.bt-entry-legal a:hover { color: var(--e-ink); }

/* Headings. The prefix outranks the older auth-card rules in system.css. */
.bt-entry-intro { display: flex; flex-direction: column; gap: 12px; }
html .bt-entry .bt-entry-card h1 { margin: 0; font-family: var(--e-serif); font-weight: 500; font-size: clamp(40px, 4.2vw, 56px); line-height: 1; letter-spacing: -.025em; color: var(--e-ink); text-wrap: balance; overflow-wrap: anywhere; }
html .bt-entry .bt-entry-card .bt-entry-intro--display h1 { font-size: clamp(56px, 5.6vw, 82px); line-height: .92; letter-spacing: -.035em; overflow-wrap: normal; }
.bt-entry-card h1 em { font-style: italic; color: var(--e-ice); padding-right: .04em; }
.bt-entry-card h2 { margin: 0; font: 600 13px/1.4 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-ink-3); }
.bt-entry-card p { margin: 0; }
.bt-entry-intro p { max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--e-ink-2); text-wrap: pretty; }
.bt-entry-intro strong { font-weight: 500; color: var(--e-ink); overflow-wrap: anywhere; }
.bt-entry-intro .bt-entry-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--e-warm); }
.bt-entry-text { font-size: 14px; line-height: 1.6; color: var(--e-ink-2); text-wrap: pretty; }

/* Flash, in the form column */
.bt-entry-notice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(179, 228, 233, .24); background: linear-gradient(180deg, rgba(179, 228, 233, .07), rgba(179, 228, 233, .03)), var(--e-panel); color: #dfeaec; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.bt-entry-notice .bt-entry-notice-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--e-ice); }
.bt-entry-notice--error { border-color: rgba(240, 150, 160, .38); background: linear-gradient(180deg, rgba(240, 150, 160, .09), rgba(240, 150, 160, .04)), var(--e-panel); color: #f6dfe1; }
.bt-entry-notice--error .bt-entry-notice-icon { color: var(--e-error); }
.bt-entry-notice--warning { border-color: rgba(230, 176, 154, .38); background: linear-gradient(180deg, rgba(230, 176, 154, .09), rgba(230, 176, 154, .04)), var(--e-panel); color: #f3e4dc; }
.bt-entry-notice--warning .bt-entry-notice-icon { color: var(--e-warm); }
/* Notes for developers (the local mail adapter) stay quiet */
.bt-entry .bt-entry-card .alert { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; width: auto; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .14); background: transparent; box-shadow: none; color: var(--e-ink-3); font-size: 13px; line-height: 1.55; }
.bt-entry .bt-entry-card .alert .size-6 { width: 18px; height: 18px; margin-top: 1px; color: var(--e-ink-3); }
.bt-entry .bt-entry-card .alert a { color: var(--e-ice); }

/* Password | Email me a link */
.bt-entry-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: #0a1018; border: 1px solid var(--e-line); }
.bt-entry-tabs[hidden] { display: none; }
.bt-entry-tabs button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--e-ink-3); font: 500 14px var(--e-sans); cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.bt-entry-tabs button:hover { color: var(--e-ink); }
.bt-entry-tabs button[aria-selected="true"] { background: #1a2632; color: var(--e-ink); box-shadow: inset 0 1px 0 rgba(220, 240, 250, .14), 0 1px 3px rgba(0, 0, 0, .45); }
.bt-entry-tabs button:focus-visible { outline-offset: 1px; }
.bt-entry [data-entry-panel][hidden], .bt-entry [data-entry-divider][hidden] { display: none; }

/* Forms and fields, from the core <.input> markup */
.bt-entry form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.bt-entry .fieldset { margin: 0; padding: 0; gap: 0; border: 0; min-width: 0; }
.bt-entry .fieldset > label { display: block; color: inherit; }
.bt-entry .fieldset .label { display: block; margin: 0 0 8px; padding: 0; color: #cfd9df; font-size: 14px; font-weight: 500; line-height: 20px; white-space: normal; }
.bt-entry .bt-entry-card .input,
.bt-entry .bt-entry-card .select {
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--e-line-2);
  background: var(--e-field);
  color: var(--e-ink);
  font: 400 16px var(--e-sans);
  box-shadow: none;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.bt-entry .bt-entry-card .input::placeholder { color: #6f8291; }
.bt-entry .bt-entry-card .input:hover { border-color: rgba(255, 255, 255, .2); }
.bt-entry .bt-entry-card .input:focus,
.bt-entry .bt-entry-card .input:focus-visible { outline: 2px solid transparent; outline-offset: 0; border-color: rgba(179, 228, 233, .62); background-color: var(--e-field-on); box-shadow: 0 0 0 4px rgba(179, 228, 233, .12); }
.bt-entry .bt-entry-card .input[readonly] { border-style: dashed; background-color: transparent; color: var(--e-ink-2); }
.bt-entry .bt-entry-card .input-error,
.bt-entry .bt-entry-card .input[aria-invalid="true"] { border-color: var(--e-error-line); }
.bt-entry .bt-entry-card .input-error:focus,
.bt-entry .bt-entry-card .input[aria-invalid="true"]:focus { border-color: #f3b8bf; box-shadow: 0 0 0 4px rgba(240, 150, 160, .14); }
/* Chromium paints autofilled fields pale yellow or white; keep the night field. */
.bt-entry .bt-entry-card .input:is(:-webkit-autofill, :autofill) { -webkit-text-fill-color: var(--e-ink); caret-color: var(--e-ink); -webkit-box-shadow: 0 0 0 1000px var(--e-fill) inset; box-shadow: 0 0 0 1000px var(--e-fill) inset; transition: background-color 9999s 0s, color 9999s 0s; }
.bt-entry .bt-entry-card .input:is(:-webkit-autofill, :autofill):focus { -webkit-box-shadow: 0 0 0 1000px var(--e-fill) inset, 0 0 0 4px rgba(179, 228, 233, .12); box-shadow: 0 0 0 1000px var(--e-fill) inset, 0 0 0 4px rgba(179, 228, 233, .12); }
.bt-entry .bt-entry-card .text-error { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--e-error); }
.bt-entry .bt-entry-card .text-error .size-5 { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* Show / hide on password fields (added by butler-entry.js) */
.bt-entry .fieldset:has(> .bt-entry-reveal) { position: relative; }
.bt-entry .fieldset:has(> .bt-entry-reveal) .input { padding-right: 76px; }
.bt-entry-reveal { position: absolute; z-index: 2; top: 33px; right: 5px; min-width: 60px; height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--e-ink-3); font: 500 13px var(--e-sans); cursor: pointer; transition: color .2s ease, background .2s ease; }
.bt-entry-reveal:hover { background: rgba(255, 255, 255, .05); color: var(--e-ink); }
.bt-entry-reveal:focus-visible { outline-offset: -2px; }

/* Checkbox and radio */
.bt-entry .checkbox,
.bt-entry .radio { flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid rgba(255, 255, 255, .32); background-color: var(--e-field); accent-color: var(--e-ice); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.bt-entry .checkbox { border-radius: 6px; }
.bt-entry .radio { border-radius: 50%; }
.bt-entry .checkbox:checked { border-color: var(--e-ice); background-color: var(--e-ice); color: var(--e-button-ink); }
.bt-entry .radio:checked { border-color: var(--e-ice); background-color: var(--e-field); color: var(--e-ice); box-shadow: inset 0 0 0 4px var(--e-field); background-image: radial-gradient(circle, var(--e-ice) 0 4px, transparent 4.5px); }
.bt-entry .checkbox:focus-visible,
.bt-entry .radio:focus-visible { outline: 2px solid var(--e-ice); outline-offset: 3px; }
.bt-entry .fieldset .label:has(.checkbox) { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; color: var(--e-ink-2); font-weight: 400; cursor: pointer; }

/* A list of choices, one per row (workspace pickers) */
.bt-entry-choices { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.bt-entry-choices legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 500; color: #cfd9df; }
.bt-entry-choice { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; border: 1px solid var(--e-line-2); border-radius: 12px; background: var(--e-field); color: var(--e-ink); font-size: 15px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.bt-entry-choice:hover { border-color: rgba(255, 255, 255, .22); }
.bt-entry-choice:has(:checked) { border-color: rgba(179, 228, 233, .5); background: var(--e-field-on); }
.bt-entry-choice span { min-width: 0; overflow-wrap: anywhere; }
/* A choice that goes somewhere (the workspace picker): a whole-row button or link */
.bt-entry-choice--go { width: 100%; justify-content: space-between; font: 500 15px var(--e-sans); text-align: left; text-decoration: none; }
.bt-entry a.bt-entry-choice--go { color: var(--e-ink); }
.bt-entry-choice--go::after { content: "→"; flex: none; color: var(--e-ink-3); transition: transform .25s var(--e-ease), color .2s ease; }
.bt-entry-choice--go:hover { background: var(--e-field-on); border-color: rgba(179, 228, 233, .45); }
.bt-entry-choice--go:hover::after { color: var(--e-ice); transform: translateX(3px); }
.bt-entry-choice--go:active { transform: translateY(1px); }
.bt-entry-choice--go:focus-visible { outline: 2px solid var(--e-ice); outline-offset: 3px; }

/* Stacks inside the form column: a page's own wrapper keeps the card's rhythm */
.bt-entry-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.bt-entry-stack--tight { gap: 10px; }
.bt-entry form > .btn + .btn { margin-top: -6px; }

/* First name | Last name, stacked when the column is narrow */
.bt-entry-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 18px 14px; }

/* Rows: keep me signed in | forgot password; two buttons side by side */
.bt-entry-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: -4px 0 -2px; }
.bt-entry-row .fieldset { flex: 0 0 auto; }
.bt-entry-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bt-entry-actions > * { flex: 1 1 auto; min-width: 0; }
.bt-entry-actions form { flex: 1 1 140px; }
.bt-entry .bt-entry-card .bt-entry-actions .btn { white-space: nowrap; }
.bt-entry .bt-entry-card .bt-entry-actions > .btn-ghost { flex: 0 0 auto; }
.bt-entry-hint { margin: -8px 0 0; font-size: 13px; line-height: 1.5; color: var(--e-ink-3); text-wrap: pretty; }
.bt-entry-callout { margin: 0; padding: 2px 0 2px 14px; border-left: 1px solid rgba(230, 176, 154, .55); font-size: 13px; line-height: 1.55; color: var(--e-ink-2); text-wrap: pretty; }
.bt-entry-forgot { margin: 0; font-size: 13px; }
.bt-entry-forgot a, .bt-entry .link-primary { display: inline-flex; align-items: center; min-height: 44px; color: var(--e-ice); text-decoration: underline; text-decoration-color: rgba(179, 228, 233, .3); text-underline-offset: 4px; }
.bt-entry-forgot a:hover, .bt-entry .link-primary:hover { color: #dff5f7; text-decoration-color: currentColor; }
.bt-entry-forgot a, .bt-entry-legal a, .bt-entry-account a, .bt-entry .alert a { border-radius: 6px; }
.bt-entry-quiet-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--e-ink-2); text-decoration: underline; text-decoration-color: rgba(220, 235, 235, .3); text-underline-offset: 4px; }

/* Buttons, from the core <.button> markup. One filled button per page. */
.bt-entry .bt-entry-card .btn {
  position: relative;
  min-height: 52px;
  height: auto;
  margin: 0;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--e-ice-line);
  background: transparent;
  color: #e7f3f2;
  font: 600 15px var(--e-sans);
  gap: 10px;
  box-shadow: none;
  text-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s var(--e-ease), opacity .2s ease;
}
.bt-entry .bt-entry-card .btn:hover { border-color: rgba(179, 228, 233, .58); background-color: rgba(179, 228, 233, .07); color: #fff; }
.bt-entry .bt-entry-card .btn:active { transform: translateY(1px); background-color: rgba(179, 228, 233, .1); }
.bt-entry .bt-entry-card .btn:focus-visible { outline: 2px solid var(--e-ice); outline-offset: 3px; }
.bt-entry .bt-entry-card .btn > [aria-hidden="true"] { display: inline-block; transition: transform .25s var(--e-ease); }
.bt-entry .bt-entry-card .btn:hover > [aria-hidden="true"] { transform: translateX(3px); }
.bt-entry .bt-entry-card :is(.btn-gradient, .btn-primary) {
  border-color: transparent;
  background: var(--e-button);
  color: var(--e-button-ink);
  box-shadow: 0 0 0 5px rgba(179, 228, 233, .06), 0 14px 40px rgba(0, 0, 0, .4);
}
.bt-entry .bt-entry-card :is(.btn-gradient, .btn-primary):hover { border-color: transparent; background: #f4fbf9; color: var(--e-button-ink); box-shadow: 0 0 0 7px rgba(179, 228, 233, .1), 0 16px 44px rgba(0, 0, 0, .45), 0 0 40px rgba(179, 228, 233, .14); transform: translateY(-1px); }
.bt-entry .bt-entry-card :is(.btn-gradient, .btn-primary):active { background: #cfe3df; transform: translateY(0); box-shadow: 0 0 0 4px rgba(179, 228, 233, .08), 0 8px 24px rgba(0, 0, 0, .4); }
.bt-entry .bt-entry-card .btn-ghost { border-color: transparent; color: var(--e-ink-2); }
.bt-entry .bt-entry-card .btn-ghost:hover { border-color: var(--e-line-2); background-color: rgba(255, 255, 255, .04); color: var(--e-ink); }
.bt-entry .bt-entry-card .btn:disabled,
.bt-entry .bt-entry-card .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* Sending: butler-entry.js marks the button that sent the form. */
.bt-entry .bt-entry-card .btn[aria-busy="true"] { cursor: progress; transform: none; }
.bt-entry .bt-entry-card .btn[aria-busy="true"] > [aria-hidden="true"] { display: none; }
.bt-entry .bt-entry-card .btn[aria-busy="true"]::after { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: .8; animation: bt-entry-spin .7s linear infinite; }
.bt-entry .bt-entry-card .btn-block, .bt-entry .bt-entry-card .w-full { width: 100%; }
.bt-entry .bt-entry-card .divider { display: flex; align-items: center; gap: 14px; height: auto; margin: 0; font-size: 12px; color: var(--e-ink-3); white-space: nowrap; }
.bt-entry .bt-entry-card .divider::before, .bt-entry .bt-entry-card .divider::after { content: ""; flex: 1; height: 1px; background: var(--e-line); }
.bt-entry .bt-entry-card .divider:empty { gap: 0; }

/* A developer shortcut, dev only */
.bt-entry-dev { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed rgba(255, 255, 255, .12); border-radius: 14px; }
.bt-entry-dev p { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--e-ink-3); }
.bt-entry .bt-entry-card .bt-entry-dev .btn { min-height: 40px; font-size: 13px; font-weight: 500; border-color: var(--e-line-2); color: var(--e-ink-2); }

/* The story panel */
.bt-entry-story {
  grid-area: story;
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 8px var(--e-gutter) 0;
  border-radius: 24px;
  border: 1px solid rgba(200, 225, 240, .1);
  border-top-color: rgba(220, 240, 250, .2);
  background: radial-gradient(70% 60% at 70% 20%, rgba(38, 72, 98, .55), transparent 70%), radial-gradient(60% 50% at 20% 100%, rgba(105, 70, 57, .28), transparent 70%), var(--e-panel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: 28px 24px;
}
.bt-entry-story--warm { background: radial-gradient(60% 55% at 30% 20%, rgba(105, 70, 57, .32), transparent 70%), radial-gradient(60% 50% at 80% 90%, rgba(38, 72, 98, .5), transparent 70%), var(--e-panel); }
.bt-entry-story--door { background: radial-gradient(70% 60% at 20% 30%, rgba(38, 72, 98, .5), transparent 70%), radial-gradient(60% 50% at 85% 95%, rgba(105, 70, 57, .24), transparent 70%), var(--e-panel); }
.bt-entry-story::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(179, 228, 233, .1) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(60% 60% at 60% 40%, #000, transparent 80%); mask-image: radial-gradient(60% 60% at 60% 40%, #000, transparent 80%); }
.bt-entry-story p { margin: 0; }
.bt-entry-kicker { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--e-ice); }
.bt-entry-kicker--warm { color: var(--e-warm); }
.bt-entry-night { position: relative; max-width: 460px; margin: 0; padding: 0 0 0 36px; list-style: none; display: flex; flex-direction: column; gap: 28px; }
.bt-entry-night::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, rgba(179, 228, 233, .1), rgba(179, 228, 233, .6) 40%, rgba(230, 176, 154, .8)); }
.bt-entry-night li { position: relative; display: flex; flex-direction: column; gap: 3px; }
.bt-entry-night li::before { content: ""; position: absolute; left: -36px; top: 5px; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; background: var(--e-panel); border: 2px solid var(--e-ice); }
.bt-entry-night li.is-now::before { border: 0; background: var(--e-warm); animation: bt-entry-breathe 3.2s ease-in-out infinite; }
.bt-entry-night time { font-family: var(--e-mono); font-size: 13px; color: var(--e-ink-3); font-variant-numeric: tabular-nums; }
.bt-entry-night span { font-size: 17px; line-height: 1.45; color: #dfe7eb; text-wrap: pretty; }
.bt-entry-night small { font-size: 14px; color: #97aab8; }
.bt-entry-story-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; }
.bt-entry-quote { max-width: 12em; font-family: var(--e-serif); font-style: italic; font-weight: 500; font-size: clamp(40px, 4.4vw, 72px); line-height: .96; letter-spacing: -.02em; color: #e3efee; text-wrap: balance; }
.bt-entry-quote em { display: block; color: #ecc4b2; }
.bt-entry-quote--warm { color: #f0e2da; }
.bt-entry-quote--warm em, .bt-entry-story--door .bt-entry-quote em { color: var(--e-ice); }
.bt-entry-sample { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8d9cab; }
.bt-entry-steps { max-width: 480px; margin: 0; padding: 0; list-style: none; }
.bt-entry-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--e-line); }
.bt-entry-steps li:last-child { border-bottom: 1px solid var(--e-line); }
.bt-entry-steps span { font-family: var(--e-serif); font-style: italic; font-size: 38px; line-height: 1; color: var(--e-warm); }
.bt-entry-steps p { font-size: 17px; color: #ecebe7; }
.bt-entry-steps p + p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--e-ink-2); text-wrap: pretty; }
.bt-entry-door { display: flex; flex-direction: column; gap: 22px; }
.bt-entry-door-lede { max-width: 34ch; font-size: 16px; line-height: 1.7; color: var(--e-ink-2); text-wrap: pretty; }
.bt-entry-continuity { display: flex; align-items: center; gap: 12px; font-family: var(--e-mono); font-size: 12px; color: var(--e-ink-3); }
.bt-entry-continuity i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(179, 228, 233, .15), rgba(179, 228, 233, .5)); }
.bt-entry-continuity i:last-of-type { background: linear-gradient(90deg, rgba(179, 228, 233, .5), rgba(230, 176, 154, .8)); }
.bt-entry-continuity span:last-child { color: var(--e-warm); }

@keyframes bt-entry-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 176, 154, .55), 0 0 18px rgba(230, 176, 154, .6); } 50% { box-shadow: 0 0 0 7px rgba(230, 176, 154, 0), 0 0 26px rgba(230, 176, 154, .8); } }
@keyframes bt-entry-spin { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
  .bt-entry-story { padding: 40px; }
}
/* Two columns: the story takes the right half and stays in view. */
@media (min-width: 960px) {
  .bt-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "header story" "body story" "legal story"; }
  .bt-entry-header { padding-top: 32px; }
  .bt-entry-body { padding-block: 48px; }
  .bt-entry-story { position: sticky; top: 16px; align-self: start; height: max(640px, calc(100dvh - 32px)); margin: 16px 16px 16px 0; padding: clamp(36px, 4vw, 56px); gap: 40px; }
}
/* A narrow header keeps brand and action on one row: the lead-in words go
   to screen readers only, and the address gives way to Log out. */
@container (max-width: 460px) {
  .bt-entry-header-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .bt-entry-account-email { display: none; }
}
@media (max-width: 520px) {
  .bt-entry-header { padding-top: 16px; }
  .bt-entry-header-action a { min-height: 44px; padding: 0 16px; }
  .bt-entry-account a { min-height: 44px; }
  .bt-entry-body { padding-top: 32px; }
  .bt-entry-quote { font-size: 38px; }
  .bt-entry-steps li { grid-template-columns: 44px 1fr; gap: 12px; }
  .bt-entry-steps span { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-entry *, .bt-entry *::before, .bt-entry *::after { animation: none !important; transition: none !important; }
  .bt-entry .bt-entry-card .btn:hover, .bt-entry .bt-entry-card .btn:hover > [aria-hidden="true"] { transform: none; }
}
@media (forced-colors: active) {
  .bt-entry .bt-entry-card .btn, .bt-entry-tabs button[aria-selected="true"], .bt-entry-notice { border: 1px solid CanvasText; }
}