/* Existing SkyControl layout for the Analyst desk, plus the sign-in door and its stepper. */
.public-portal [hidden] { display: none !important; }
.public-portal #navigation { flex-shrink: 0; }
.public-portal .account-avatar { font-style: normal; }
.public-portal .account-avatar img { object-fit: cover; }

/* Before the role is verified there is no desk: the shell is not painted at all. The
   first session check shows one line on the door's background; the dialog then takes over. */
body.public-portal:not(.desk-open) { background: #101114; }
.public-portal:not(.desk-open) .app-shell { display: none; }
body.public-portal:not(.desk-open)::before { content: "Checking your Discord session…"; position: fixed; inset: 0; display: grid; place-items: center; color: #b5bac1; font: 500 1rem/1.4 "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; background: #101114; }
/* The door (/portal/ sign-in). Same serif as the home page, served from the site itself. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/manrope-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2"); }
.door, .plan-sheet { --door-ink: #f2f3f5; --door-quiet: #b5bac1; --door-line: #2a2c31; --door-lavender: #c2b4ef; --door-serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  /* the plan step wears the desk's own palette */
  --plan-canvas: #0b0c10; --plan-card: #15171d; --plan-raised: #1b1e26; --plan-line: #2a2d36; --plan-ink: #f4f5f7; --plan-quiet: #a7acb8;
  --plan-accent: #12e996; --plan-accent-ink: #082b1c; --plan-accent-hover: #4ff2b3; --plan-gold: #e7c769;
  /* member pages: payment failed (6.9:1 on the card), tertiary text, and the two notice washes */
  --plan-danger: #ff7d70; --plan-danger-ink: #2b0d0a; --plan-faint: #7c8190; --plan-danger-wash: #2a1716; --plan-gold-wash: #2a2516;
  --plan-sans: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
.public-portal #auth-dialog.door { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #101114; color: var(--door-ink); box-shadow: none; overflow: auto; }
.public-portal #auth-dialog.door::backdrop { background: #101114; }
.door :focus-visible { outline-color: var(--door-lavender); }
.door-wrap { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100%; }
.door-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 5rem); background: #16151c; border-right: 1px solid #23222b; overflow: hidden; }
.door-back { position: absolute; top: 1.5rem; left: clamp(2rem, 6vw, 5rem); z-index: 1; color: var(--door-quiet); font-size: .85rem; text-decoration: none; }
.door-back:hover { color: var(--door-ink); text-decoration: underline; text-underline-offset: .25em; }
/* The memorable thing: the price desk behind frosted glass, icons only, fading out under the heading. */
.door-ghost { position: absolute; inset: -1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 9.5rem; gap: 1rem; padding: 2rem; opacity: .34; filter: blur(1px); pointer-events: none; transform: rotate(-4deg) scale(1.08); -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 75%); mask-image: linear-gradient(160deg, #000 10%, transparent 75%); }
.ghost-card { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1rem; background: #24232d; border: 1px solid #34323f; border-radius: 8px; }
.ghost-card img { width: 40px; height: 40px; image-rendering: pixelated; object-fit: contain; }
.ghost-card i { display: block; height: .5rem; width: 75%; border-radius: 2px; background: #3b3947; }
.ghost-card i + i { width: 40%; background: #4a4560; }
.door-copy { position: relative; }
.door-heading { margin: 0; font-family: var(--door-serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4.25rem); line-height: .98; letter-spacing: -.02em; color: var(--door-ink); }
.door-heading span { display: block; }
.door-heading em { font-style: italic; color: var(--door-lavender); }
.door-copy p { max-width: 38ch; margin: 1.4rem 0 0; font-family: var(--door-serif); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; color: #dcdde3; }
.door-side { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 6vw, 5rem); }
.public-portal #auth-form.door-card { display: block; width: min(100%, 26rem); padding: 2rem; background: #17191d; border: 1px solid var(--door-line); border-radius: 12px; text-align: center; font-family: "gg sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
.door-ids { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: 1.25rem; color: var(--door-quiet); }
.door-ids img { width: 52px; height: 52px; border-radius: 13px; background: #000; border: 1px solid #ffffff1f; object-fit: cover; }
.door-ids img + span + img { border-radius: 50%; }
.public-portal #auth-form.door-card h2 { margin: 0; font-family: var(--door-serif); font-weight: 400; font-size: 1.55rem; line-height: 1.2; color: var(--door-ink); }
.public-portal #auth-form.door-card p { margin: .6rem 0 0; color: var(--door-quiet); font-size: .9rem; line-height: 1.45; }
.public-portal #auth-form.door-card #auth-error { color: var(--danger); }
.door-card .button { width: 100%; min-height: 46px; margin-top: 1.4rem; border-radius: 8px; font-size: .95rem; font-weight: 600; text-decoration: none; }
.door-card .button + .button { margin-top: .6rem; }
.door-discord { gap: .7rem; background: #5865f2; border-color: #5865f2; color: #fff; }
.door-discord:hover { background: #4752c4; border-color: #4752c4; }
.door-card .button.secondary { background: #22252b; border-color: #34373e; color: var(--door-ink); }
.door-card .button.secondary:hover { background: #2a2d34; border-color: #4a4e57; }
.door-note { display: block; margin-top: 1rem; font-size: .78rem; color: var(--door-quiet); }
.door-note b { font-weight: 600; color: var(--door-lavender); }
.door-intent { margin: .2rem 0 0; padding: .55rem .75rem; border: 1px solid rgba(18, 233, 150, .4); border-radius: 9px; background: rgba(18, 233, 150, .08); color: #c9f7e4 !important; font-size: .85rem !important; }
.public-portal #auth-form.door-card .gate-welcome { margin: -.5rem 0 1.25rem; font-size: .85rem; text-align: center; color: var(--door-quiet); }
.gate-welcome .text-button { padding: 0; font-size: inherit; }
.door-note a, .gate-who .text-button, .gate-welcome .text-button { color: var(--door-lavender); text-decoration: underline; text-underline-offset: .2em; }
/* The stepper: a real sequence, so it is numbered; the current step carries the lavender. */
.gate-steps { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 1.5rem; padding: 0 0 1.25rem; list-style: none; border-bottom: 1px solid var(--door-line); text-align: left; }
.gate-steps li { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: .45rem; min-width: 0; font-size: .74rem; line-height: 1.25; color: #80848e; }
.gate-number { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid #3a3d44; border-radius: 50%; font-size: .75rem; font-variant-numeric: tabular-nums; }
.gate-steps li.done { color: var(--door-quiet); }
.gate-steps li.done .gate-number { border-color: #2f6b47; color: #7fd6a2; }
.gate-steps li.current { color: var(--door-ink); }
.gate-steps li.current .gate-number { border-color: var(--door-lavender); background: var(--door-lavender); color: #1a1625; font-weight: 700; }
.gate-body { text-align: left; }
.public-portal #auth-form.door-card .gate-body h2 { font-size: 1.4rem; }
.gate-body strong { display: block; margin-bottom: .25rem; color: var(--door-ink); font-weight: 600; }
.gate-invite { flex-direction: column; gap: .1rem; background: #5865f2; border-color: #5865f2; color: #fff; }
.gate-invite:hover { background: #4752c4; border-color: #4752c4; }
.gate-invite small { color: #dfe2ff; font-size: .72rem; font-weight: 400; }
.public-portal #auth-form.door-card .gate-status { min-height: 1.2em; margin-top: .8rem; font-size: .8rem; }
.public-portal #auth-form.door-card .gate-status:empty { display: none; }
.public-portal #auth-form.door-card .gate-sky { margin-top: 1rem; padding: .8rem .9rem; border: 1px solid #3a3550; border-radius: 8px; background: #1f1d28; color: var(--door-ink); }
.public-portal #auth-form.door-card .gate-who { margin-top: 1.5rem; font-size: .78rem; text-align: center; }
.gate-who .text-button { padding: 0; font-size: inherit; }
/* The plan step, the Spotlight layout in the desk's own palette (near-black and its mint green), Manrope inside
   the card. One heading and one Monthly | Lifetime control, then Insider as a wide hero (the desk beside its pitch,
   the one solid emerald button), two compact Discord cards beneath, the comparison table one tap away, and the
   reassurance lines last. Under 44rem of card (every phone, and a narrow card on a mid-size window) it all stacks. */
.public-portal #auth-dialog.door[data-step="plan"] .door-wrap { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
.public-portal #auth-dialog.door[data-step="plan"] .door-side { padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.5vw, 2.5rem); }
.public-portal #auth-dialog.door[data-step="plan"] #auth-form.door-card { width: min(100%, 56rem); background: var(--plan-canvas); border-color: var(--plan-line); }
.public-portal #auth-dialog.door[data-step="plan"] .door-heading { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
/* The plan step is the whole screen: no door panel beside it, the card spans the viewport. */
.public-portal #auth-dialog.door[data-step="plan"] .door-wrap { grid-template-columns: minmax(0, 1fr); }
.public-portal #auth-dialog.door[data-step="plan"] .door-panel { display: none; }
.public-portal #auth-dialog.door[data-step="plan"], .public-portal #auth-dialog.door[data-step="plan"]::backdrop { background: var(--plan-canvas); }
.public-portal #auth-dialog.door[data-step="plan"] .door-side { align-items: stretch; padding: 0; }
.public-portal #auth-dialog.door[data-step="plan"] #auth-form.door-card { width: 100%; max-width: none; min-height: 100vh; margin: 0; border: 0; border-radius: 0; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 4rem); }
.plan-step { container: plan / inline-size; font-family: var(--plan-sans); color: var(--plan-ink); }
.plan-step :focus-visible { outline: 2px solid var(--plan-accent); outline-offset: 3px; }
/* The head: the outcome line and its intro on the left, the billing control on the right. */
.plan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.plan-head-copy { flex: 1 1 24rem; min-width: 0; }
.public-portal #auth-form.door-card .plan-step h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; text-wrap: balance; }
.public-portal #auth-form.door-card .plan-sub { margin-top: .5rem; max-width: 52ch; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .95rem; font-weight: 500; }
/* Pay monthly | Pay yearly: real buttons in a labelled group; the pressed one is raised, and gold once it says yearly.
   The "Save up to 20%" pill rides on the control's top-right edge, out of the grid. */
.plan-term { position: relative; flex: 0 0 auto; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--plan-line); border-radius: 999px; background: var(--plan-card); }
:is(.door, .plan-sheet) .plan-term-option { grid-row: 1; min-height: 40px; padding: .45rem 1.1rem; border: 0; border-radius: 999px; background: none; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .9rem; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
:is(.door, .plan-sheet) .plan-term-option[data-term="monthly"] { grid-column: 1; }
:is(.door, .plan-sheet) .plan-term-option[data-term="yearly"] { grid-column: 2; padding-bottom: 1.55rem; }
:is(.door, .plan-sheet) .plan-term-option:hover { color: var(--plan-ink); }
:is(.door, .plan-sheet) .plan-term-option[aria-pressed="true"] { background: var(--plan-raised); color: var(--plan-ink); box-shadow: inset 0 0 0 1px var(--plan-line); cursor: default; }
:is(.door, .plan-sheet) .plan-term-option[aria-pressed="true"]:nth-child(2) { background: var(--plan-gold); color: #1f2024; box-shadow: none; }
:is(.door, .plan-sheet) .plan-term-option:disabled { cursor: progress; opacity: .7; }
/* "Save up to 20%" is a second, smaller line inside the yearly half (same grid cell, under the words), so it never
   covers them and needs no room beside the control at phone width: dark ink on the gold pill, gold text when off. */
.plan-save { grid-row: 1; grid-column: 2; align-self: end; justify-self: center; position: relative; margin: 0 .8rem .5rem; color: var(--plan-gold); font-family: var(--plan-sans); font-size: .72rem; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none; }
:is(.door, .plan-sheet) .plan-term-option[data-term="yearly"]:hover ~ .plan-save { color: var(--plan-ink); }
:is(.door, .plan-sheet) .plan-term-option[data-term="yearly"][aria-pressed="true"] ~ .plan-save { color: #4a3b0e; }
.plan-grid { display: grid; gap: .9rem; }
/* The cards share one register: name, price, list and button. */
.plan-col { position: relative; display: grid; align-content: start; gap: .9rem; min-width: 0; padding: 1.25rem; border: 1px solid var(--plan-line); border-radius: 14px; background: var(--plan-card); text-align: left; }
.plan-name { font-size: 1.3rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--plan-ink); }
.plan-line { display: block; margin-top: .25rem; font-size: .88rem; font-weight: 500; letter-spacing: 0; color: var(--plan-quiet); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .3rem; font-variant-numeric: tabular-nums; }
.plan-price b { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.door .plan-price small { color: var(--plan-quiet); font-size: .95rem; font-weight: 500; }
/* Yearly: the monthly price struck beside the figure, then the real yearly charge on its own line. */
.door .plan-price .was-price { color: var(--plan-faint); font-size: 1.05rem; font-weight: 600; }
.plan-price .bill { flex-basis: 100%; margin-top: .3rem; color: var(--plan-gold); font-size: .9rem; font-weight: 600; }
.plan-price .bill.quiet { color: var(--plan-quiet); font-weight: 500; }
.door .plan-price .to-yearly { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--plan-ink); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.door .plan-price .to-yearly:hover { color: var(--plan-gold); }
.door .plan-price .to-yearly:disabled { cursor: progress; opacity: .7; }
.plan-features { list-style: none; margin: 0; padding: .9rem 0 0; border-top: 1px solid var(--plan-line); display: grid; align-content: start; gap: .5rem; font-size: .9rem; font-weight: 500; line-height: 1.4; }
.plan-features li { position: relative; padding-left: 1.5rem; }
.plan-features li::before { content: ""; position: absolute; left: .2rem; top: .3em; width: .35rem; height: .65rem; border-right: 2px solid var(--plan-accent); border-bottom: 2px solid var(--plan-accent); transform: rotate(45deg); }
.plan-act { display: block; }
.door :is(.plan-buy, .plan-table-buy) { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: .65rem .8rem; border: 1px solid transparent; border-radius: 10px; font-family: var(--plan-sans); font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; white-space: normal; cursor: pointer; }
.door :is(.plan-buy, .plan-table-buy):disabled { cursor: progress; opacity: .7; }
/* The pressed button on its way to Stripe: full strength, a small spinner before its label. */
.door :is(.plan-buy, .plan-table-buy, .plan-manage).is-leaving { gap: .55rem; opacity: 1; }
.door :is(.plan-buy, .plan-table-buy, .plan-manage).is-leaving::before { content: ""; flex: 0 0 auto; width: .95em; height: .95em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: plan-leaving .7s linear infinite; }
@keyframes plan-leaving { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .door :is(.plan-buy, .plan-table-buy, .plan-manage).is-leaving::before { animation: none; border-right-color: currentColor; opacity: .6; } }
/* Scout is the quiet outline. Trader wears the Discord role's pink gradient (#965f7f → #ffaadc): the box is the
   element, the gradient is clipped to the label span. Insider is the one solid emerald button. */
.door :is(.plan-buy, .plan-table-buy).ghost { border-color: #353842; background: none; color: var(--plan-quiet); }
.door :is(.plan-buy, .plan-table-buy).ghost:hover { border-color: #4a4e5a; background: #1a1d24; color: var(--plan-ink); }
.door :is(.plan-buy, .plan-table-buy).outline { border-color: transparent; background: linear-gradient(#0f1116, #0f1116) padding-box, linear-gradient(90deg, #965f7f, #ffaadc) border-box; }
.door :is(.plan-buy, .plan-table-buy).outline:hover { background: linear-gradient(#241a22, #241a22) padding-box, linear-gradient(90deg, #b57a9c, #ffc6e6) border-box; }
.door :is(.plan-buy, .plan-table-buy).outline > span { color: transparent; background-image: linear-gradient(90deg, #c78ab0, #ffaadc); background-clip: text; -webkit-background-clip: text; }
.door :is(.plan-buy, .plan-table-buy).fill { border-color: var(--plan-accent); background: var(--plan-accent); color: var(--plan-accent-ink); font-weight: 800; }
.door :is(.plan-buy, .plan-table-buy).fill:hover { border-color: var(--plan-accent-hover); background: var(--plan-accent-hover); }
@media (prefers-reduced-motion: no-preference) { .door :is(.plan-buy, .plan-table-buy) { transition: background-color .15s, border-color .15s, color .15s; } }
.plan-current { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .55rem .5rem; border: 1px dashed #4a4e5a; border-radius: 10px; color: var(--plan-quiet); font-size: .9rem; font-weight: 600; text-align: center; }
/* The spotlight: the desk on the left, the pitch on the right, a soft emerald edge instead of a neon one. */
.plan-col.plan-spot { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.4rem; padding: 1.4rem; border-color: rgba(18, 233, 150, .55); border-radius: 16px; box-shadow: 0 0 0 1px rgba(18, 233, 150, .12), 0 0 60px -30px rgba(18, 233, 150, .55); }
/* The preview fills its column's full height beside the copy: taller, no dead space under it. */
.plan-shot-wrap { margin: 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.plan-shot { display: block; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border: 1px solid var(--plan-line); border-radius: 8px; background: #0f1113; }
.plan-shot-note { margin-top: .5rem; color: #6f7482; font-size: .78rem; font-weight: 500; }
.plan-spot-body { display: grid; align-content: start; gap: .9rem; min-width: 0; }
.plan-col.plan-selected { border-color: var(--plan-accent); box-shadow: 0 0 0 2px rgba(18, 233, 150, .45), 0 0 70px -28px rgba(18, 233, 150, .7); }
.plan-tag { display: inline-block; width: max-content; max-width: 100%; padding: .2rem .6rem; border: 1px solid rgba(18, 233, 150, .4); border-radius: 999px; color: var(--plan-accent); font-size: .72rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
.plan-spot .plan-name { font-size: 1.6rem; }
.plan-spot .plan-price b { font-size: 2.8rem; }
.door .plan-try { display: inline-block; width: max-content; max-width: 100%; min-height: 0; color: var(--plan-ink); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.door .plan-try::after { content: " ↗"; color: var(--plan-quiet); }
.door .plan-try:hover { color: var(--plan-accent); }
/* The Discord doors: one line, then two compact cards whose buttons sit on the same baseline. */
.public-portal #auth-form.door-card .plan-or { margin: .4rem 0 -.1rem; color: #6f7482; font-family: var(--plan-sans); font-size: .9rem; font-weight: 600; text-align: left; }
/* The Discord line and the Monthly | Lifetime control on one row: the control sits with the cards it flips. */
.plan-or-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-top: .4rem; }
.public-portal #auth-form.door-card .plan-or-row .plan-or { margin: 0; }
.plan-minis { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.plan-minis .plan-col { grid-template-rows: auto auto 1fr auto; }
/* The comparison, one tap away below the cards: a panel with grouped rows, prices on top, buttons at the foot,
   and the Insider column framed in emerald from its tag to its button. */
.door .plan-compare { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin: .6rem auto 0; padding: .45rem 1.05rem; border: 1px solid var(--plan-line); border-radius: 999px; background: none; color: var(--plan-ink); font-family: var(--plan-sans); font-size: .9rem; font-weight: 700; cursor: pointer; }
.door .plan-compare::after { content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); }
.door .plan-compare[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(-135deg); }
.door .plan-compare:hover { border-color: #4a4e5a; color: var(--plan-accent); }
.plan-table-wrap { display: none; min-width: 0; margin-top: .9rem; padding: clamp(1rem, 2.4vw, 1.6rem); border: 1px solid var(--plan-line); border-radius: 16px; background: var(--plan-card); font-family: var(--plan-sans); }
.compare-open .plan-table-wrap { display: block; }
.plan-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.public-portal #auth-form.door-card .plan-compare-head h3 { margin: 0; color: var(--plan-ink); font-family: var(--plan-sans); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; text-align: left; }
.public-portal #auth-form.door-card .plan-compare-head p { margin: .25rem 0 0; color: var(--plan-quiet); font-size: .95rem; text-align: left; }
.door .plan-compare-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--plan-quiet); cursor: pointer; }
.door .plan-compare-close:hover { border-color: var(--plan-line); color: var(--plan-ink); }
.plan-compare-close .plan-ico { width: 22px; height: 22px; }
.plan-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: .8rem; }
.plan-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.door .plan-table { width: 100%; min-width: 46rem; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .92rem; font-weight: 500; line-height: 1.4; text-align: center; }
.door .plan-table col.plan-table-label { width: 34%; }
.door .plan-table th, .door .plan-table td { max-width: none; padding: .8rem .9rem; border: 0; border-top: 1px solid var(--plan-line); background: none; color: var(--plan-quiet); font-size: inherit; font-weight: 500; letter-spacing: normal; text-transform: none; white-space: normal; vertical-align: middle; overflow-wrap: break-word; }
.door .plan-table :is(td, th):is(.trader, .insider) { border-left: 1px solid var(--plan-line); }
.door .plan-table thead th, .door .plan-table thead td { position: relative; border-top: 0; padding: 1rem .7rem 1.1rem; vertical-align: bottom; }
.door .plan-table .plan-table-corner { color: var(--plan-quiet); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.plan-th-name { display: block; color: var(--plan-ink); font-size: 1.15rem; font-weight: 800; }
.plan-th-line { display: block; margin: .2rem 0 .45rem; color: var(--plan-quiet); font-size: .82rem; font-weight: 500; }
.door .plan-table thead .plan-price { justify-content: center; }
.door .plan-table thead .plan-price b { font-size: 1.6rem; }
.door .plan-table thead .plan-price .bill { font-size: .78rem; text-align: center; }
.plan-th-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: .2rem .65rem; border-radius: 999px; background: var(--plan-accent); color: var(--plan-accent-ink); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.door .plan-table tr.plan-group th { padding: .7rem .9rem; background: var(--plan-raised); color: var(--plan-accent); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.plan-group th { display: table-cell; }
.plan-group th > * { vertical-align: middle; }
.plan-group th .plan-ico { margin-right: .6rem; }
.door .plan-table tbody tr:hover { background: none; }
.door .plan-table tbody th[scope="row"] { color: var(--plan-ink); text-align: left; }
.door .plan-table tbody th[scope="row"] { display: table-cell; }
.plan-row-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: .75rem; border: 1px solid var(--plan-line); border-radius: 9px; background: var(--plan-raised); color: var(--plan-quiet); vertical-align: middle; }
.plan-row-copy { display: inline-block; max-width: calc(100% - 3rem); vertical-align: middle; }
.plan-feature { display: block; font-weight: 700; }
.door .plan-table tbody th small { display: block; margin-top: .1rem; color: var(--plan-quiet); font-size: .78rem; font-weight: 500; }
.door .plan-table tbody td.insider { color: var(--plan-ink); font-weight: 600; }
.plan-win { color: var(--plan-accent); font-weight: 700; }
.door .plan-table tfoot td { border-top: 1px solid var(--plan-line); padding: .9rem .6rem; }
.door .plan-table-buy { min-height: 44px; font-size: .95rem; }
.door .plan-table tfoot .plan-current { min-height: 44px; }
/* The Insider column: one emerald frame from header to button. */
.door .plan-table :is(th, td).insider { background: rgba(18, 233, 150, .045); border-left: 1px solid rgba(18, 233, 150, .7); border-right: 1px solid rgba(18, 233, 150, .7); }
.door .plan-table thead th.insider { border-top: 1px solid rgba(18, 233, 150, .7); border-radius: 12px 12px 0 0; box-shadow: 0 -18px 40px -30px rgba(18, 233, 150, .8); }
.door .plan-table tfoot td.insider { border-bottom: 1px solid rgba(18, 233, 150, .7); border-radius: 0 0 12px 12px; }
.door .plan-table tr.plan-group td.insider { background: rgba(18, 233, 150, .07); }
.plan-mark { font-weight: 800; }
.plan-mark.yes { color: var(--plan-accent); font-size: 1.1rem; }
.plan-mark.no { color: #5b606c; font-weight: 400; }
.plan-yearly .plan-th-tag { background: var(--plan-gold); color: #1f2024; }
.door .plan-yearly .plan-table :is(th, td).insider { border-left-color: rgba(231, 199, 105, .7); border-right-color: rgba(231, 199, 105, .7); background: rgba(231, 199, 105, .045); }
.door .plan-yearly .plan-table thead th.insider { border-top-color: rgba(231, 199, 105, .7); box-shadow: 0 -18px 40px -30px rgba(231, 199, 105, .8); }
.door .plan-yearly .plan-table tfoot td.insider { border-bottom-color: rgba(231, 199, 105, .7); }
.door .plan-yearly .plan-table tr.plan-group td.insider { background: rgba(231, 199, 105, .07); }
.plan-yearly .plan-win, .plan-yearly .plan-table .insider .plan-mark.yes { color: var(--plan-gold); }
/* Under everything: the reassurance line, then where to get help. */
.public-portal #auth-form.door-card .plan-assure { margin: 1.1rem 0 0; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .82rem; font-weight: 500; line-height: 1.6; text-align: center; }
.plan-dot { color: #6f7482; margin: 0 .35rem; }
.plan-assure-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.plan-assure-item .plan-ico { width: 16px; height: 16px; color: var(--plan-quiet); }
.public-portal #auth-form.door-card .plan-support { margin-top: .25rem; color: #6f7482; }
.plan-support a { color: var(--plan-ink); text-decoration: underline; text-underline-offset: .2em; }
.plan-support a:hover { color: var(--plan-accent); }
/* How switching works: a short list under the reassurance line, and on Your plan above its footer. */
.public-portal :is(#auth-form, #plan-sheet) .plan-rules { max-width: 46rem; margin: 1.5rem auto 0; padding: 1rem 1.25rem; border: 1px solid var(--plan-line); border-radius: 12px; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .plan-rules-title { margin: 0 0 .5rem; color: var(--plan-ink); font-family: var(--plan-sans); font-size: .95rem; font-weight: 700; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .plan-rules-list { margin: 0; padding-left: 1.1rem; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .86rem; font-weight: 500; line-height: 1.5; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .plan-rules-list li + li { margin-top: .3rem; }
/* Under "Add Insider monthly" for a plan kept for good: what stays. */
.plan-stack-note { display: block; margin-top: .5rem; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .85rem; font-weight: 600; line-height: 1.4; text-align: center; }
.door .plan-manage { display: block; min-height: 44px; margin: .8rem auto 0; padding: .5rem; color: var(--plan-ink); font-family: var(--plan-sans); font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.door .plan-manage:hover { color: var(--plan-accent); }
.public-portal #auth-form.door-card .plan-note { margin-top: .9rem; padding: .7rem .85rem; border: 1px solid var(--plan-line); border-radius: 8px; background: var(--plan-card); color: var(--plan-ink); }
.door .gate-check.text-button { padding: 0; font-size: inherit; }
/* Yearly: the same dark cards; the price note, the Insider frame and its button turn gold. */
.door .plan-yearly .plan-price small { color: var(--plan-gold); }
.plan-yearly .plan-col.plan-spot { border-color: rgba(231, 199, 105, .6); box-shadow: 0 0 0 1px rgba(231, 199, 105, .12), 0 0 60px -30px rgba(231, 199, 105, .55); }
.plan-yearly .plan-tag { border-color: rgba(231, 199, 105, .45); color: var(--plan-gold); }
.door .plan-yearly :is(.plan-buy, .plan-table-buy).fill { border-color: var(--plan-gold); background: var(--plan-gold); color: #1f2024; }
.door .plan-yearly :is(.plan-buy, .plan-table-buy).fill:hover { border-color: #f0d47c; background: #f0d47c; }
.plan-yearly :focus-visible { outline-color: var(--plan-gold); }
.plan-yearly .plan-col.plan-spot.plan-selected { border-color: var(--plan-gold); box-shadow: 0 0 0 2px rgba(231, 199, 105, .45), 0 0 70px -28px rgba(231, 199, 105, .7); }
/* Insider's "Best value" badge, yearly only: a gold pill on the card's top-right edge. */
.plan-best { position: absolute; top: 0; right: 1.4rem; z-index: 1; transform: translateY(-50%); padding: .2rem .65rem; border-radius: 999px; background: var(--plan-gold); color: #1f2024; font-family: var(--plan-sans); font-size: .72rem; font-weight: 800; letter-spacing: .03em; line-height: 1.3; white-space: nowrap; }
/* Under Insider's button: what it renews at. Under the cards: the one renewal line. */
.plan-act-note { display: block; margin-top: .5rem; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .82rem; font-weight: 500; line-height: 1.4; text-align: center; }
.public-portal #auth-form.door-card .plan-renew { margin: 1rem 0 0; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .82rem; font-weight: 500; line-height: 1.5; text-align: center; }
/* Phone-width card: the control under the copy, the desk above its pitch, the Discord cards one under the other. */
@container plan (max-width: 44rem) {
  .plan-head { flex-direction: column; align-items: stretch; }
  .plan-head-copy { flex-basis: auto; }
  .plan-term { display: grid; width: 100%; }
  .plan-col.plan-spot { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.1rem; }
  .plan-minis { grid-template-columns: 1fr; }
  .plan-col { padding: 1.1rem; }
  /* Phones: the whole table fits the card, so all three plans (Insider included) are on screen at once. */
  .plan-table-wrap { min-width: 0; padding: 1rem .6rem .8rem; }
  .plan-compare-head { padding: 0 .4rem; }
  .plan-table-scroll { overflow-x: visible; }
  .door .plan-table { min-width: 0; font-size: .76rem; line-height: 1.3; }
  .door .plan-table col.plan-table-label { width: 31%; }
  .door .plan-table th, .door .plan-table td { padding: .55rem .3rem; }
  .door .plan-table tbody th[scope="row"] { padding-left: .4rem; }
  .door .plan-table thead th, .door .plan-table thead td { padding: .9rem .25rem .7rem; }
  .door .plan-table .plan-table-corner { font-size: .62rem; letter-spacing: .08em; }
  .plan-th-name { font-size: .92rem; }
  .plan-th-line, .plan-th-tag, .plan-row-ico, .door .plan-table tbody th small { display: none; }
  .door .plan-table thead .plan-price { flex-direction: column; align-items: center; gap: 0; }
  .door .plan-table thead .plan-price b { font-size: 1.05rem; }
  .door .plan-table thead .plan-price small { font-size: .7rem; }
  .plan-row-copy { max-width: 100%; }
  .door .plan-table tr.plan-group th { padding: .55rem .4rem; font-size: .66rem; letter-spacing: .1em; }
  .plan-group th .plan-ico { width: 15px; height: 15px; margin-right: .4rem; }
  .door .plan-table tfoot td { padding: .7rem .2rem; }
  .door .plan-table-buy { min-height: 44px; padding: .4rem .3rem; font-size: .76rem; }
  .plan-assure-item { white-space: normal; }
}
@media (max-width: 900px) {
  .door-wrap, .public-portal #auth-dialog.door[data-step="plan"] .door-wrap { grid-template-columns: 1fr; }
  .door-panel { min-height: 0; padding: 4.5rem 1rem 2.5rem; border-right: 0; border-bottom: 1px solid #23222b; }
  .door-back { left: 1rem; top: 1.25rem; }
  .door-ghost { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 7.5rem; }
  .door-side { align-items: flex-start; padding: 1.5rem 1rem 2.5rem; }
  .public-portal #auth-form.door-card { padding: 1.5rem 1.25rem; }
}
@media (prefers-reduced-motion: no-preference) { .door-card .button { transition: background-color .15s, border-color .15s; } }

/* Watchlist editor: the desk watch row with inline forms; channel copy names the observed posting channel. */
.watch-editor .panel-header { display: flex; align-items: start; justify-content: space-between; gap: 1.25rem; }
.watch-editor-tools, .watch-row-actions, .watch-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.watch-editor .button svg { width: 14px; height: 14px; flex: none; }
.watch-status { margin: 0 1.375rem; color: var(--success); font-size: .75rem; }
.watch-status:empty { display: none; }
.watch-editor-list { list-style: none; margin: 0; padding: 0 1.375rem; }
.watch-editor-row { padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.watch-editor-row:last-child { border-bottom: 0; }
.watch-editor-main { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.watch-editor-main .desk-watch-identity { flex: 1; min-width: 0; }
.watch-form { display: grid; gap: 1rem; margin: 1rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--elevated); }
.watch-editor > .watch-form { margin: 1rem 1.375rem 0; }
.watch-form h3 { font-size: .9rem; overflow-wrap: anywhere; }
.watch-form fieldset { display: grid; gap: .6rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.watch-form legend { padding: 0; margin-bottom: .35rem; font-size: .75rem; font-weight: 600; }
.watch-choice { display: flex; align-items: start; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
.watch-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-muted); }
.watch-choice input { width: 15px; min-height: 15px; margin-top: .15rem; accent-color: var(--accent); }
.watch-choice span { display: grid; gap: .15rem; font-size: .8rem; }
.watch-choice small { font-size: .7rem; }
.watch-field { display: grid; gap: .35rem; font-size: .72rem; color: var(--secondary); max-width: 22rem; }
.watch-threshold { display: flex; flex-wrap: wrap; gap: .75rem; }
.watch-hint { color: var(--secondary); font-size: .7rem; max-width: 64ch; }
.watch-field-error, .watch-error { color: var(--danger); font-size: .72rem; }
.watch-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid #6b5733; border-radius: 5px; background: #332e22; color: #f2d49b; font-size: .75rem; }
.watch-item-search { position: relative; display: grid; gap: .35rem; max-width: 26rem; font-size: .72rem; color: var(--secondary); }
.watch-picked { display: flex; align-items: center; gap: .9rem; }
.watch-picked .item-art { width: 44px; height: 44px; flex: none; }
.watch-confirm p { font-size: .8rem; max-width: 64ch; }
.watch-exclusions { display: grid; gap: .6rem; margin-top: 1rem; padding: 1rem 1.1rem; border-left: 2px solid var(--border); }
.watch-exclusions h4 { margin: 0; font-size: .8rem; }
.watch-exclusions .watch-form { margin: 0; }
.watch-exclusion-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.watch-exclusion-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; font-size: .78rem; overflow-wrap: anywhere; }
.watch-exclusion-who { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.watch-exclusion-name { display: grid; min-width: 0; line-height: 1.25; }
.watch-exclusion-name strong { font-weight: 600; }
.watch-exclusion-name .muted { font-size: .72rem; }
.member-avatar.member-avatar-small { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; }
.member-chip { display: flex; align-items: center; gap: .55rem; min-height: 36px; padding: .3rem .4rem .3rem .5rem; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); }
.member-chip .watch-exclusion-name { flex: 1; }
.member-chip .button { min-height: 28px; padding: 4px 10px; }
.member-suggestion { padding: 9px 12px; gap: 10px; }
.watch-readonly-note { margin: .75rem 0 0; font-size: .75rem; }
/* Owner editing another member's watchlist: an amber notice above the editor. */
.empty-state.admin-banner, .member-sheet .empty-state.admin-banner { padding: 12px 16px; margin: 0 0 16px; text-align: left; background: #332e22; border: 1px solid #6b5733; border-left: 3px solid var(--warning); border-radius: 5px; }
.empty-state.admin-banner h2 { font-size: 13px; color: var(--warning); }
.empty-state.admin-banner p { margin: 4px 0 0; max-width: none; color: #f2d49b; font-size: 12px; }
/* Portfolio editor: the watch editor's form styles plus a wrapping row of number fields. */
.portfolio-fields { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.portfolio-field { flex: 1 1 12rem; min-width: 0; }
.portfolio-input { display: flex; gap: .4rem; min-width: 0; }
.portfolio-input input { flex: 1; min-width: 0; }
.portfolio-input .button { flex: none; }
/* Admin trades (member sheet): ticket rows reuse the watch editor rows and forms. */
.button.danger { background: #402c33; border-color: #69414c; color: #f0adb4; }
.button.danger:hover { background: #4a323a; border-color: #8a5562; }
.trade-ticket { display: grid; gap: .6rem; min-width: 0; }
.trade-ticket-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .8rem; }
.trade-ticket-heading .trade-amount { margin-left: auto; font-variant-numeric: tabular-nums; }
.trade-parties { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .78rem; overflow-wrap: anywhere; }
.trade-parties li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.trade-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .4rem 1rem; margin: 0; font-size: .75rem; }
.trade-facts dt { color: var(--secondary); font-size: .68rem; }
.trade-facts dd { margin: 0; overflow-wrap: anywhere; }
.trade-description { margin: 0; overflow-wrap: anywhere; }
/* Middleman v2: whose turn it is, an open proposal, the items and the items editor. */
.trade-terms { display: grid; gap: .25rem; font-size: .78rem; overflow-wrap: anywhere; }
.trade-terms p { margin: 0; }
.trade-items-list { margin: 0; padding-left: 1.1rem; }
.trade-items { border: 1px solid var(--border); border-radius: 8px; margin: 0; padding: .6rem .8rem; display: grid; gap: .6rem; min-width: 0; }
.trade-items legend { padding: 0 .3rem; font-size: .75rem; color: var(--secondary); }
.trade-item-row { display: grid; gap: .35rem; min-width: 0; }
.trade-timeline summary { cursor: pointer; width: fit-content; font-size: .75rem; color: var(--secondary); }
.trade-timeline-list { list-style: none; margin: .5rem 0 0; padding: 0 0 0 .8rem; border-left: 2px solid var(--border); display: grid; gap: .5rem; font-size: .75rem; }
.trade-timeline-list li { display: flex; flex-wrap: wrap; gap: .2rem .6rem; min-width: 0; overflow-wrap: anywhere; }
.trade-timeline-list time { color: var(--secondary); }
.trade-timeline-list p { flex-basis: 100%; margin: 0; }
.trade-danger { border-color: #69414c; }
.trade-readonly { margin-inline: 1.375rem; }
.trades-editor .watch-editor-list { padding-bottom: .5rem; }
/* Admin actions (member sheet): read-only audit rows with pretty-printed summaries. */
.admin-action-list { list-style: none; margin: 0; padding: 0; }
.admin-action { padding: 14px 0; border-bottom: 1px solid var(--border); display: grid; gap: 8px; min-width: 0; font-size: 12px; }
.admin-action:last-child { border-bottom: 0; }
.admin-action .member-event-heading { margin-bottom: 0; }
.admin-action-sentence { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.admin-action-details > summary { cursor: pointer; width: fit-content; color: var(--secondary); font-size: 12px; }
.admin-action-details[open] > summary { margin-bottom: 8px; }
.admin-action-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-action-summary { margin: 4px 0 0; padding: 8px 10px; background: var(--elevated); border: 1px solid var(--border); border-radius: 5px; font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-height: 16rem; overflow-y: auto; }
/* Owner panels (Billing review, Undelivered messages, Billing lookup): header and rows share the desk's
   inner padding, so rows never touch the panel border and line up with the title at every width. */
.dashboard-panel.billing-review-panel > .panel-header,
.dashboard-panel.ambiguous-effects-panel > .panel-header,
.dashboard-panel.billing-lookup-panel > .panel-header { padding-inline: var(--desk-pad); }
.dashboard-panel.billing-review-panel > .panel-header + div,
.dashboard-panel.ambiguous-effects-panel > .panel-header + div,
.dashboard-panel.billing-lookup-panel > .panel-header + div { padding: 4px var(--desk-pad) 16px; min-width: 0; }
.dashboard-panel.billing-review-panel > .panel-header + div > .dashboard-empty,
.dashboard-panel.ambiguous-effects-panel > .panel-header + div > .dashboard-empty { margin: 0; text-align: left; max-width: none; padding: 14px 0; }
/* Billing lookup (Command overview, owner only): the Billing review panel's rows, with a search form. */
.billing-lookup-form { margin: 16px 0; }
.billing-lookup-member { display: grid; gap: 14px; padding-bottom: 6px; }
.billing-lookup-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.billing-lookup-identity > div { min-width: 0; }
.billing-lookup-identity strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.billing-lookup-identity .cell-secondary { font-size: 11px; }
.billing-lookup-member .detail-list dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.billing-lookup-section { margin-top: 22px; }
.billing-lookup-section > .member-event-heading { margin-bottom: 4px; }
.billing-lookup-section > .member-event-heading > :last-child { margin-left: auto; }
.billing-lookup-section > p { margin: 6px 0; }
.billing-lookup-lead { font-size: 11px; margin: 4px 0 6px; }
.billing-lookup-section .dashboard-empty, .billing-lookup-panel [data-billing-lookup-result] > .dashboard-empty { margin: 0; text-align: left; max-width: none; padding: 14px 0; }
.billing-lookup-panel .admin-action .badge { flex: none; }
.billing-lookup-link { justify-self: start; }
.billing-review-panel .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.billing-lookup-copied { font-size: 11px; }
@media (max-width: 760px) { .billing-lookup-form .button { grid-column: 1 / -1; justify-self: start; min-width: 120px; } }
@media (max-width: 700px) {
  .watch-editor .panel-header { flex-direction: column; }
  .portfolio-field { flex-basis: 100%; }
  .watch-editor-list { padding-inline: 1rem; }
  .watch-editor > .watch-form, .watch-status { margin-inline: 1rem; }
  .watch-editor-main { flex-wrap: wrap; }
  .watch-row-actions { flex-basis: 100%; }
  .watch-row-actions .button, .watch-form-actions .button { min-height: 40px; }
  .watch-field, .watch-item-search { max-width: none; }
  .trade-readonly { margin-inline: 1rem; }
  .trade-ticket-heading .trade-amount { margin-left: 0; flex-basis: 100%; }
  .admin-action-diff { grid-template-columns: minmax(0, 1fr); }
}

/* Add to Home Screen */
.install-app{display:flex;align-items:center;gap:11px;width:100%;margin:14px 0 0;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);text-align:left;overflow:hidden}
.install-app:hover{border-color:var(--accent);background:var(--elevated)}
.install-app-mark{display:block;width:34px;height:34px;border-radius:9px;overflow:hidden;flex:none;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.install-app-mark img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.16)}
.install-app-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.install-app-text strong{font-size:12px;font-weight:600;line-height:1.25}
.install-app-text small{font-size:10.5px;color:var(--secondary);line-height:1.3}
.install-dialog{max-width:420px}
.install-sheet{display:flex;flex-direction:column;gap:16px}
.install-preview{display:flex;align-items:center;gap:12px;font-weight:650;font-size:17px}
.install-preview img{width:64px;height:64px;border-radius:15px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));box-shadow:0 6px 20px #0008}
.install-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.5}
.install-glyph{display:inline-grid;place-items:center;width:22px;height:22px;margin:0 2px;vertical-align:-6px;border-radius:6px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.install-glyph svg{display:block}
.install-note{font-size:11px}
@media(max-width:760px){.install-app{margin:10px 0 12px;width:auto}.install-app-text small{display:none}}

/* Account menu on the desk: the plan, its status in words, and "Your plan". */
.plan-tools { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 12px; color: var(--secondary); }
.plan-tools a { color: var(--accent); text-underline-offset: .2em; }
.plan-tools .text-button { align-self: flex-start; min-height: 36px; padding: 4px 0; color: var(--accent); font-weight: 600; }
.plan-tools-status { color: var(--danger); }
.plan-tools-plan { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--elevated); }
.plan-tools-row { display: flex; justify-content: space-between; gap: 10px; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.plan-tools-row b { font-weight: 700; }
.plan-tools-state { font-weight: 600; }
.plan-tools-state.is-active { color: var(--accent); }
.plan-tools-state.is-ending { color: var(--warning); }

/* "Your plan": a compact summary of what the member holds, their fixing action, the Stripe button, then one
   card per plan they can move up to. Same palette and type as the plan step; the upgrade cards carry the weight. */
.yp { max-width: 60rem; margin: 0 auto; }
.public-portal #auth-form.door-card .yp-nav { display: flex; justify-content: center; gap: .25rem; max-width: 60rem; margin: -.25rem auto 1.75rem; border-bottom: 1px solid var(--plan-line); }
.public-portal #auth-form.door-card .yp-tab { min-height: 44px; padding: 0 1rem; border: 0; border-radius: 0; background: none; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .95rem; font-weight: 700; cursor: pointer; }
.public-portal #auth-form.door-card .yp-tab:hover { color: var(--plan-ink); }
.public-portal #auth-form.door-card .yp-tab[aria-current="page"] { color: var(--plan-ink); box-shadow: inset 0 -2px 0 var(--plan-accent); cursor: default; }
.public-portal #auth-form.door-card .yp-tab:focus-visible { outline: 2px solid var(--plan-accent); outline-offset: -2px; }
.public-portal :is(#auth-form, #plan-sheet) .plan-step h2.yp-title { margin: 0 0 .9rem; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-copy { margin: .4rem 0 0; max-width: 60ch; color: #d3d6dd; font-family: var(--plan-sans); font-size: .95rem; font-weight: 500; line-height: 1.5; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-hint { margin: 0; flex: 1 1 0; min-width: min(14rem, 100%); color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .86rem; font-weight: 500; line-height: 1.45; text-align: left; }
/* A notice comes first when something needs doing: payment failed (red) or a cancel pending (gold). */
.yp-notice { margin: 0 0 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--plan-line); border-radius: 14px; background: var(--plan-card); text-align: left; }
.yp-notice.is-failed { border-color: #6b302b; background: var(--plan-danger-wash); }
.yp-notice.is-ending { border-color: #5a4d22; background: var(--plan-gold-wash); }
.public-portal :is(#auth-form, #plan-sheet) .yp-notice-title { display: flex; align-items: flex-start; gap: .55rem; margin: 0; font-family: var(--plan-sans); font-size: 1.15rem; font-weight: 800; line-height: 1.35; text-align: left; }
.yp-notice.is-failed .yp-notice-title { color: var(--plan-danger); }
.yp-notice.is-ending .yp-notice-title { color: var(--plan-gold); }
.yp-notice-title .plan-ico { width: 1.15rem; height: 1.15rem; margin-top: .18rem; }
.yp-notice .yp-actions { margin-top: 1rem; }
/* The plan card: who you are on the left, the facts on the right, the Stripe button across the foot. */
.yp-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem 2.5rem; padding: 1.15rem 1.35rem; border: 1px solid var(--plan-line); border-radius: 14px; background: var(--plan-card); text-align: left; }
.yp-card.is-failed { border-color: #6b302b; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-name { margin: 0; color: var(--plan-ink); font-family: var(--plan-sans); font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-kind { margin: .25rem 0 0; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .9rem; font-weight: 600; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-status { display: flex; align-items: flex-start; gap: .45rem; margin: .65rem 0 0; font-family: var(--plan-sans); font-size: .95rem; font-weight: 700; line-height: 1.35; }
.yp-status .plan-ico { width: 1rem; height: 1rem; margin-top: .12rem; }
.public-portal :is(#auth-form, #plan-sheet) .is-active p.yp-status { color: var(--plan-accent); }
.is-active .yp-status .plan-ico { fill: currentColor; stroke: none; }
.public-portal :is(#auth-form, #plan-sheet) .is-ending p.yp-status { color: var(--plan-gold); }
.public-portal :is(#auth-form, #plan-sheet) .is-failed p.yp-status { color: var(--plan-danger); }
.public-portal :is(#auth-form, #plan-sheet) .is-kept p.yp-status { color: var(--plan-ink); }
.yp-facts { display: grid; align-content: start; margin: 0; font-family: var(--plan-sans); }
.yp-fact { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--plan-line); }
.yp-fact:first-child { padding-top: 0; }
.yp-fact:last-child { border-bottom: 0; }
.yp-fact dt { color: var(--plan-quiet); font-size: .86rem; font-weight: 600; }
.yp-fact dd { margin: 0; color: var(--plan-ink); font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.yp-fact dd b { font-size: 1rem; font-weight: 800; }
/* Join step: a subscriber outside the server sees their plan above the join prompt, compact. */
.yp-join { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0 0 1.75rem; padding: 1.25rem 1.5rem; }
.public-portal #auth-form .yp-join p.yp-kind { margin: 0 0 .35rem; }
.public-portal #auth-form .yp-join p.yp-name { font-size: clamp(1.9rem, 5vw, 2.4rem); }
.public-portal #auth-form .yp-join p.yp-status { margin-top: .75rem; font-size: 1rem; }
.public-portal #auth-form .yp-join p.yp-copy { margin: .5rem 0 0; color: var(--plan-quiet); text-align: left; }
.yp-card > .yp-actions { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--plan-line); }
.public-portal :is(#auth-form, #plan-sheet) .yp-card > .yp-actions .yp-btn { min-height: 44px; }
.yp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
/* Buttons: one filled per decision area; the Stripe button on the card stays secondary. */
.public-portal :is(#auth-form, #plan-sheet) .yp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; margin: 0; padding: .6rem 1.15rem; border: 1px solid #3a3e49; border-radius: 10px; background: none; color: var(--plan-ink); font-family: var(--plan-sans); font-size: .95rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn:hover { border-color: #4f5461; background: var(--plan-raised); }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn.fill { border-color: var(--plan-accent); background: var(--plan-accent); color: var(--plan-accent-ink); font-weight: 800; }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn.fill:hover { border-color: var(--plan-accent-hover); background: var(--plan-accent-hover); }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn.fix { border-color: var(--plan-danger); background: var(--plan-danger); color: var(--plan-danger-ink); font-weight: 800; }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn.fix:hover { border-color: #ff9a90; background: #ff9a90; }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn:disabled { cursor: progress; opacity: .7; }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn:focus-visible { outline: 2px solid var(--plan-accent); outline-offset: 3px; }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn.fix:focus-visible { outline-color: var(--plan-danger); }
.yp-btn .plan-ico { width: 15px; height: 15px; opacity: .8; }
.yp-btn.is-leaving .plan-ico { display: none; }
.yp-btn.is-leaving::before { content: ""; flex: 0 0 auto; width: .95em; height: .95em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: plan-leaving .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .yp-btn.is-leaving::before { animation: none; border-right-color: currentColor; opacity: .6; } }
/* Under the summary: a quiet one-line note (Checkout cancelled, a billing answer), not a bar at the foot. */
.public-portal :is(#auth-form, #plan-sheet) p.yp-said { margin: .75rem 0 0; padding: .1rem 0 .1rem .8rem; border-left: 2px solid #4a4e5a; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .9rem; font-weight: 600; line-height: 1.45; text-align: left; }
/* Upgrade, sold as one offer: a serif proposition with the Monthly | Yearly control beside it, the hero offer on the
   site's Gold Dust (warm near-black, gold dust drifting up), a locked look at the Live Dashboard, then any other
   plan as a quiet card. The boldness is spent on the hero alone. */
.yp-up { margin-top: 2.5rem; text-align: left; }
.yp-up-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.yp-up-copy { max-width: 36rem; }
.public-portal :is(#auth-form, #plan-sheet) .yp-up-title { margin: 0; color: var(--plan-ink); font-family: var(--plan-sans); font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) h3.yp-pitch { margin: 0; color: var(--plan-ink); font-family: var(--door-serif); font-size: clamp(1.75rem, 4.4vw, 2.6rem); font-weight: 420; line-height: 1.08; letter-spacing: -.02em; text-align: left; text-wrap: balance; }
.public-portal :is(#auth-form, #plan-sheet) .yp-up-head p.yp-copy { margin-top: .7rem; color: #c9ccd4; font-size: .95rem; }
.yp-up-top { padding: 1rem 0 0; border-top: 1px solid var(--plan-line); }
/* The hero offer. */
.yp-offer { position: relative; min-width: 0; border: 1px solid var(--plan-line); border-radius: 14px; background: var(--plan-card); }
.yp-offer.is-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.75rem; margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); overflow: hidden; isolation: isolate;
  border-color: rgba(231, 199, 105, .5); background: linear-gradient(180deg, #171311 0%, #1a1512 100%); }
.yp-offer.is-hero:not(:has(.yp-peek)) { grid-template-columns: minmax(0, 1fr); }
.yp-offer-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
/* Gold Dust, two layers of the site's dots; still unless motion is welcome. */
.yp-dust { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.yp-dust i { position: absolute; inset: 0 0 calc(-1 * var(--tile)) 0; display: block; opacity: var(--o); background-repeat: repeat; background-size: var(--tile) var(--tile); }
.yp-dust .d1 { --tile: 260px; --o: .7;
  background-image: radial-gradient(circle at 30px 60px, rgba(240,210,120,.55) 0, rgba(240,210,120,.18) 1.5px, rgba(240,210,120,0) 4px),
                    radial-gradient(circle at 180px 140px, rgba(240,210,120,.45) 0, rgba(240,210,120,.14) 1.2px, rgba(240,210,120,0) 3.5px),
                    radial-gradient(circle at 110px 230px, rgba(240,210,120,.5) 0, rgba(240,210,120,.16) 1px, rgba(240,210,120,0) 3px); }
.yp-dust .d2 { --tile: 420px; --o: .5;
  background-image: radial-gradient(circle at 70px 300px, rgba(240,210,120,.4) 0, rgba(240,210,120,.12) 2.5px, rgba(240,210,120,0) 7px),
                    radial-gradient(circle at 330px 90px, rgba(240,210,120,.38) 0, rgba(240,210,120,.1) 2px, rgba(240,210,120,0) 6px); }
@keyframes yp-dust-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-1 * var(--tile)), 0); } }
@keyframes yp-sheen { 0%, 70% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .yp-dust .d1 { animation: yp-dust-rise 48s linear infinite; }
  .yp-dust .d2 { animation: yp-dust-rise 80s linear infinite; }
  .public-portal :is(#auth-form, #plan-sheet) p.yp-best { animation: yp-sheen 6s ease-in-out infinite; }
}
.public-portal :is(#auth-form, #plan-sheet) p.yp-best { align-self: flex-start; margin: 0; padding: .2rem .7rem; border-radius: 999px; color: #1f2024; font-family: var(--plan-sans); font-size: .76rem; font-weight: 800; letter-spacing: .02em; line-height: 1.4;
  background: linear-gradient(105deg, var(--plan-gold) 40%, #fbedb8 50%, var(--plan-gold) 60%) var(--plan-gold); background-size: 250% 100%; background-position: 160% 0; }
.public-portal :is(#auth-form, #plan-sheet) .yp-offer-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0; color: var(--plan-ink); font-family: var(--plan-sans); font-size: 1.3rem; font-weight: 800; line-height: 1.2; text-align: left; }
.yp-offer-line { color: var(--plan-quiet); font-size: .88rem; font-weight: 500; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-offer-price { margin: 0; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: left; }
.yp-offer-price b { color: var(--plan-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.is-hero .yp-offer-price b { font-size: clamp(2.3rem, 6vw, 3rem); line-height: 1; }
.yp-offer-bill { display: block; margin-top: .3rem; color: var(--plan-quiet); font-size: .9rem; font-weight: 600; }
/* The saving, in dollars and percent: the one gold line under the price. */
.public-portal :is(#auth-form, #plan-sheet) p.yp-save { margin: -.2rem 0 0; color: var(--plan-gold); font-family: var(--plan-sans); font-size: .98rem; font-weight: 800; line-height: 1.35; font-variant-numeric: tabular-nums; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-save.is-quiet { font-weight: 600; }
.public-portal :is(#auth-form, #plan-sheet) .yp-save .yp-save-flip { min-height: 40px; color: var(--plan-gold); }
.yp-gains { display: grid; gap: .65rem; margin: .2rem 0 0; padding: 0; list-style: none; font-family: var(--plan-sans); }
.yp-gains li { position: relative; padding-left: 1.55rem; }
.yp-gains li::before { content: ""; position: absolute; left: .3rem; top: .28em; width: .38rem; height: .72rem; border-right: 2px solid var(--plan-gold); border-bottom: 2px solid var(--plan-gold); transform: rotate(45deg); }
.yp-gain-to { color: var(--plan-ink); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.yp-offer-act { display: grid; gap: .55rem; margin-top: auto; padding-top: .5rem; }
.public-portal :is(#auth-form, #plan-sheet) .yp-offer-act .yp-btn { width: 100%; white-space: normal; }
.public-portal :is(#auth-form, #plan-sheet) .is-hero .yp-offer-act .yp-btn.fill { min-height: 54px; font-size: 1.05rem; }
.public-portal :is(#auth-form, #plan-sheet) .yp-offer-act p.yp-hint { flex: none; min-width: 0; font-size: .8rem; }
.public-portal :is(#auth-form, #plan-sheet) .yp-btn.line:hover { border-color: var(--plan-accent); color: var(--plan-ink); }
/* The locked look at the Live Dashboard: the desk's own Featured Item panel (styles.css .dashboard-panel,
   .featured-*, .item-art), compact, under a scrim with the lock and its words over it. The door card's type rules
   (serif h2, quiet p, block strong) would restyle the panel, so its text gets the desk's values back here. */
.yp-peek { position: relative; z-index: 1; align-self: center; display: flex; min-width: 0; margin: 0; }
.yp-peek-screen { flex: 1; min-width: 0; }
.public-portal :is(#auth-form, #plan-sheet) .yp-peek .yp-peek-featured.featured-panel { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); text-align: left; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.yp-peek-featured .panel-header { display: flex; justify-content: space-between; align-items: center; }
.yp-peek-featured .featured-body { min-height: 0; padding-bottom: 6px; }
.public-portal :is(#auth-form, #plan-sheet) .yp-peek .yp-peek-featured.featured-panel h2 { margin: 0; font-family: var(--font); font-size: 16px; font-weight: 550; line-height: 1.3; letter-spacing: 0; color: var(--text); text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .yp-peek .yp-peek-featured.featured-panel h3 { margin: 0; font-family: var(--font); font-size: 20px; font-weight: 550; font-style: italic; line-height: 1.2; color: var(--text); }
.public-portal :is(#auth-form, #plan-sheet) .yp-peek .yp-peek-featured.featured-panel p.featured-category { margin: 8px 0 0; font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--secondary); text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .yp-peek .yp-peek-featured.featured-panel .featured-price strong { display: block; margin: 0; font-size: 28px; font-weight: 550; line-height: 1.15; color: var(--text); }
.public-portal :is(#auth-form, #plan-sheet) .yp-peek .yp-peek-featured.featured-panel .featured-sale-change strong { display: inline; margin: 0; font-size: 22px; font-weight: 600; color: var(--accent); }
.yp-peek-featured .featured-context { margin: 14px 0 8px; filter: blur(1.5px) saturate(.8); }
.yp-peek-featured .featured-sale-change { margin-bottom: 0; }
.yp-peek-sample { flex: none; padding: .05rem .5rem; border: 1px dashed #4a4e5a; border-radius: 999px; color: var(--secondary); font-size: 11px; font-weight: 600; }
.yp-peek-lock { position: absolute; inset: 66% 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .8rem 1rem; border-radius: 0 0 var(--radius) var(--radius); text-align: center; font-family: var(--plan-sans);
  background: linear-gradient(180deg, rgba(10, 12, 14, 0) 0%, rgba(10, 12, 14, .84) 34%, rgba(10, 12, 14, .95) 100%); }
.yp-peek-lock .plan-ico { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--plan-gold); stroke-width: 1.8; }
.yp-peek-lock span { color: var(--plan-ink); font-size: 1rem; font-weight: 800; }
.yp-peek-lock small { max-width: 26ch; color: var(--plan-quiet); font-size: .74rem; font-weight: 500; line-height: 1.35; }
/* Any other plan: a quiet card under the hero, outlined button. */
.yp-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.yp-offer.is-second { display: flex; padding: 1.15rem 1.25rem; }
.yp-offer.is-second .yp-offer-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "name gains" "price gains" "save act"; align-items: start; gap: .6rem 2rem; }
.is-second .yp-offer-name { grid-area: name; } .is-second .yp-offer-price { grid-area: price; } .is-second .yp-save { grid-area: save; }
.is-second .yp-gains { grid-area: gains; } .is-second .yp-offer-act { grid-area: act; padding-top: 0; }
.yp-offer.is-second .yp-gains li::before { border-color: var(--plan-quiet); }
.yp-offer.is-second .yp-gain-to { color: #d3d6dd; font-size: .9rem; font-weight: 500; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-flip { margin: .75rem 0 0; text-align: left; }
/* How switching works, under the cards: helper text, not a boxed section. */
.public-portal :is(#auth-form, #plan-sheet) :is(.yp, .yp-sheet) .plan-rules { max-width: none; margin: 1.75rem 0 0; padding: 0; border: 0; border-radius: 0; }
.public-portal :is(#auth-form, #plan-sheet) :is(.yp, .yp-sheet) .plan-rules-title { margin: 0 0 .35rem; color: var(--plan-quiet); font-size: .84rem; }
.public-portal :is(#auth-form, #plan-sheet) :is(.yp, .yp-sheet) .plan-rules-list { color: var(--plan-faint); font-size: .8rem; }
.public-portal :is(#auth-form, #plan-sheet) p.yp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; margin: 2.75rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--plan-line); color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .9rem; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .yp-foot a, .public-portal #auth-form.door-card .yp-link, .public-portal #plan-sheet .yp-link { min-height: 44px; padding: 0; color: var(--plan-ink); font-family: var(--plan-sans); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.public-portal :is(#auth-form, #plan-sheet) .yp-foot a:hover, .public-portal #auth-form.door-card .yp-link:hover, .public-portal #plan-sheet .yp-link:hover { color: var(--plan-accent); }
.yp h2[tabindex="-1"]:focus, .yp-sheet h2[tabindex="-1"]:focus { outline: none; }
/* The full plans page's table: the member's column washed in mint with "Your plan" under its name. */
.plan-th-mine { display: block; margin: .2rem 0 .45rem; color: var(--plan-accent); font-size: .82rem; font-weight: 700; }
.door .plan-table thead th.mine { box-shadow: inset 0 3px 0 var(--plan-accent); }
.door .plan-table :is(th, td).mine:not(.insider) { background: rgba(18, 233, 150, .06); }
.plan-yearly .plan-th-mine { color: var(--plan-gold); }
/* Compare plans (2026-11-01): one pinned head row (the term control, each plan's price and its button) over the rows
   that differ, the rows every plan shares folded underneath. The head and the table share one column grid. */
.cmp { --cmp-label: 30%; position: relative; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .cmp p { margin: 0; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .9rem; line-height: 1.4; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .cmp-intro h2 { margin: 0; color: var(--plan-ink); font-family: var(--plan-sans); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-align: left; }
.public-portal :is(#auth-form, #plan-sheet) .cmp-intro p { margin-top: .35rem; max-width: 46rem; }
.cmp h2[tabindex="-1"]:focus { outline: none; }
.public-portal :is(#auth-form, #plan-sheet) .cmp p.cmp-note { margin-top: 1rem; padding: .7rem .9rem; border: 1px solid var(--plan-line); border-left: 3px solid var(--plan-gold); border-radius: 8px; color: var(--plan-ink); }
/* The head: sticky at the top of the dialog while the rows scroll under it. */
.cmp-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: var(--cmp-label) repeat(3, minmax(0, 1fr)); align-items: stretch; margin-top: 1.25rem;
  border-bottom: 1px solid var(--plan-line); background: var(--plan-canvas); }
.cmp-corner { display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; padding: 0 1rem .9rem 0; }
.cmp-corner .plan-term { align-self: flex-start; }
.public-portal :is(#auth-form, #plan-sheet) .cmp p.cmp-term { color: var(--plan-faint); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cmp-plan { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .9rem .9rem 1rem; border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; }
.cmp-plan > :not(.yp-dust) { position: relative; z-index: 1; }
.cmp-plan.is-mine { box-shadow: inset 0 3px 0 var(--plan-accent); background: rgba(18, 233, 150, .05); }
.cmp-plan.is-best { border-color: rgba(231, 199, 105, .5); background: linear-gradient(180deg, #1d1813 0%, #1a1512 100%); }
.cmp-plan.is-mine.is-best { box-shadow: inset 0 3px 0 var(--plan-accent); }
.public-portal :is(#auth-form, #plan-sheet) .cmp p.cmp-name { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; color: var(--plan-ink); font-size: 1.05rem; font-weight: 800; }
.cmp-mine, .cmp-best { padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; }
.cmp-mine { color: var(--plan-accent); box-shadow: inset 0 0 0 1px rgba(18, 233, 150, .45); }
.cmp-best { color: #1f2024; background: linear-gradient(105deg, var(--plan-gold) 40%, #fbedb8 50%, var(--plan-gold) 60%) var(--plan-gold); background-size: 250% 100%; background-position: 160% 0; }
@media (prefers-reduced-motion: no-preference) { .cmp-best { animation: yp-sheen 6s ease-in-out infinite; } }
.public-portal :is(#auth-form, #plan-sheet) .cmp p.cmp-price { margin-top: .35rem; color: var(--plan-quiet); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-price b { color: var(--plan-ink); font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.public-portal :is(#auth-form, #plan-sheet) .cmp p.cmp-bill { color: var(--plan-faint); font-size: .8rem; font-variant-numeric: tabular-nums; }
.public-portal :is(#auth-form, #plan-sheet) .cmp p.cmp-save { color: var(--plan-gold); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-act { margin-top: auto; padding-top: .7rem; }
.public-portal :is(#auth-form, #plan-sheet) .cmp-act .yp-btn { width: 100%; min-height: 44px; padding: .5rem .7rem; font-size: .88rem; white-space: normal; text-align: center; }
.public-portal :is(#auth-form, #plan-sheet) .cmp-act .yp-btn .cmp-rest { font-weight: inherit; }
.cmp-plan.is-below > :is(.cmp-name, .cmp-price, .cmp-bill, .cmp-save) { opacity: .55; }
/* The table: compact rows, one line each where it fits; the held column keeps its mint wash, Insider a gold one. */
.cmp-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: var(--plan-sans); font-size: .88rem; font-variant-numeric: tabular-nums; }
.cmp-table col.cmp-col-label { width: var(--cmp-label); }
.public-portal :is(#auth-form, #plan-sheet) .cmp-table th[scope="row"] { padding: .6rem 1rem .6rem 0; color: var(--plan-ink); font-size: .88rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: normal; text-align: left; vertical-align: top; }
.public-portal :is(#auth-form, #plan-sheet) .cmp-table th[scope="row"] small { display: block; white-space: normal; text-transform: none; letter-spacing: 0; margin-top: .1rem; color: var(--plan-faint); font-size: .76rem; font-weight: 500; line-height: 1.35; }
.public-portal :is(#auth-form, #plan-sheet) .cmp-table td { padding: .6rem .9rem; font-size: .88rem; letter-spacing: 0; text-transform: none; color: #d3d6dd; line-height: 1.35; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cmp-table tr { border-bottom: 1px solid var(--plan-line); }
.cmp-table td.is-mine { background: rgba(18, 233, 150, .05); }
.cmp-table td.insider { background: rgba(231, 199, 105, .045); }
.cmp-table td.insider.is-mine { background: rgba(18, 233, 150, .05); }
.cmp-table .plan-mark.no { color: #5b606c; }
.is-yearly .cmp-table td.insider .plan-mark.yes, .is-yearly .cmp-table td.insider .plan-win { color: var(--plan-gold); }
.cmp-table .plan-win { color: var(--plan-accent); font-weight: 700; }
/* Rows every plan shares: folded under a quiet label, a step down in weight. */
.public-portal :is(#auth-form, #plan-sheet) .cmp-shared-head th { padding: 1.25rem 0 .4rem; color: var(--plan-faint); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.cmp-table tr.cmp-shared-head { border-bottom: 0; }
.public-portal :is(#auth-form, #plan-sheet) .cmp-shared tr:not(.cmp-shared-head) :is(th, td) { padding-block: .45rem; color: var(--plan-quiet); font-size: .82rem; font-weight: 500; }
.cmp-shared tr:not(.cmp-shared-head) th small { display: none; }
.cmp-shared tr:last-child { border-bottom: 0; }
@container plan (max-width: 44rem) {
  /* A phone: three plan columns under a full-width toggle; each row's label spans the width above its values. */
  .cmp-head { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: -.25rem; }
  .cmp-corner { grid-column: 1 / -1; padding: 0 .25rem .75rem; }
  .cmp-corner .plan-term { align-self: stretch; }
  .cmp-plan { padding: .65rem .45rem .7rem; gap: .1rem; }
  .public-portal :is(#auth-form, #plan-sheet) .cmp p.cmp-name { font-size: .92rem; }
  .cmp-mine, .cmp-best { font-size: .64rem; padding-inline: .4rem; }
  .cmp-price b { font-size: 1.25rem; }
  .public-portal :is(#auth-form, #plan-sheet) .cmp p.cmp-price { font-size: .74rem; }
  .public-portal :is(#auth-form, #plan-sheet) .cmp p:is(.cmp-bill, .cmp-save) { font-size: .7rem; }
  .public-portal :is(#auth-form, #plan-sheet) .cmp-act .yp-btn { padding: .45rem .35rem; font-size: .82rem; }
  .cmp-act .yp-btn .plan-ico { display: none; }
  .cmp-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cmp-table, .cmp-table tbody { display: block; }
  .cmp-table colgroup { display: none; }
  .cmp-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-portal :is(#auth-form, #plan-sheet) .cmp-table th[scope="row"] { grid-column: 1 / -1; padding: .55rem 0 .1rem; }
  .public-portal :is(#auth-form, #plan-sheet) .cmp-table th[scope="row"] small { display: inline; margin-left: .35rem; }
  .cmp-table th[scope="row"] small::before { content: "· "; }
  .public-portal :is(#auth-form, #plan-sheet) .cmp-table td { padding: .2rem .45rem .55rem; font-size: .8rem; }
  .public-portal :is(#auth-form, #plan-sheet) .cmp-shared-head th { grid-column: 1 / -1; }
}
/* The desk's sheet: the same view over the dashboard, full screen on a phone. */
.public-portal #plan-sheet.plan-sheet { width: min(60rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--plan-line); border-radius: 16px; background: var(--plan-canvas); color: var(--plan-ink); overflow: auto; }
.public-portal #plan-sheet.plan-sheet::backdrop { background: rgba(5, 6, 8, .82); }
.yp-sheet-top { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.public-portal #plan-sheet .plan-sheet-close { min-height: 44px; padding: 0 .25rem; color: var(--plan-quiet); font-family: var(--plan-sans); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.public-portal #plan-sheet .plan-sheet-close:hover { color: var(--plan-ink); }
.public-portal #plan-sheet .gate-status { margin: 1rem 0 0; font-size: .85rem; }
.public-portal #plan-sheet .gate-status:empty { display: none; }
@container plan (max-width: 44rem) {
  .yp-card { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1.15rem; gap: .9rem; }
  .yp-fact { grid-template-columns: 8rem minmax(0, 1fr); }
  .yp-up-head { flex-direction: column; align-items: stretch; }
  .yp-offer.is-hero { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .yp-more { grid-template-columns: minmax(0, 1fr); }
  .yp-offer.is-second .yp-offer-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "save" "gains" "act"; }
  .yp-notice { padding: 1.1rem 1.15rem; }
  .yp-actions { flex-direction: column; align-items: stretch; }
  .public-portal :is(#auth-form, #plan-sheet) .yp-btn { width: 100%; white-space: normal; }
}
@media (max-width: 40rem) {
  .public-portal #plan-sheet.plan-sheet { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .public-portal #auth-form.door-card .yp-nav { justify-content: stretch; }
  .public-portal #auth-form.door-card .yp-tab { flex: 1; }
}
/* Read by screen readers only (the lifetime card's monthly price and its one-time price). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Flipping Monthly and Lifetime: the price and button slide in on the fresh render (the spotlight's sit one level down). */
@keyframes plan-flip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.plan-col.plan-flip :is(.plan-price, .plan-act) { animation: plan-flip .28s ease-out both; }
.plan-col.plan-flip .plan-act { animation-delay: .05s; }
@media (prefers-reduced-motion: reduce) { .plan-col.plan-flip * { animation: none; } }

/* The playground (/playground/): one sticky toolbar that names the demo, flags the sample data and sells the
   real thing, plus a closing note. The toolbar sits in the page flow (never over the dashboard), has a fixed
   height so the desk's sticky sidebar can start below it, and pads for the phone's safe areas. */
html[data-portal-mode="playground"] {
  --demo-ink: #f4f5f7; --demo-quiet: #a7acb8; --demo-line: #2a2d36; --demo-ground: #0b0c10;
  --demo-accent: #12e996; --demo-accent-ink: #082b1c; --demo-accent-hover: #4ff2b3; --demo-sim: #e7c769;
  --demo-bar-h: 56px; --demo-safe-top: env(safe-area-inset-top, 0px);
  /* Keyboard focus and in-page jumps stop below the toolbar, never beneath it. */
  scroll-padding-top: calc(var(--demo-bar-h) + var(--demo-safe-top) + 8px);
}
html[data-portal-mode="playground"] .demo-bar { position: sticky; top: 0; z-index: 30; box-sizing: border-box; height: calc(var(--demo-bar-h) + var(--demo-safe-top)); display: flex; align-items: center; gap: 1rem; padding: var(--demo-safe-top) max(clamp(.8rem, 2vw, 1.4rem), env(safe-area-inset-right, 0px)) 0 max(clamp(.8rem, 2vw, 1.4rem), env(safe-area-inset-left, 0px)); background: var(--demo-ground); border-bottom: 1px solid var(--demo-line); font-family: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; white-space: nowrap; }
html[data-portal-mode="playground"] .demo-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--demo-ink); letter-spacing: .01em; }
html[data-portal-mode="playground"] .demo-brand b { font-weight: 500; color: var(--demo-quiet); }
html[data-portal-mode="playground"] .demo-brand b::before { content: " · "; color: #6f7482; }
html[data-portal-mode="playground"] .demo-badge { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--demo-sim); border: 1px solid rgba(231, 199, 105, .5); border-radius: 999px; padding: .2rem .6rem; }
html[data-portal-mode="playground"] .demo-actions { flex: none; margin-left: auto; display: flex; gap: .4rem; align-items: center; }
html[data-portal-mode="playground"] .demo-back { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .7rem; border-radius: 9px; color: var(--demo-quiet); font-size: .9rem; font-weight: 600; text-decoration: none; }
html[data-portal-mode="playground"] .demo-back:hover { color: var(--demo-ink); background: rgba(255, 255, 255, .05); }
html[data-portal-mode="playground"] .demo-unlock { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.05rem; border-radius: 9px; background: var(--demo-accent); color: var(--demo-accent-ink); font-weight: 800; font-size: .9rem; text-decoration: none; }
html[data-portal-mode="playground"] .demo-unlock:hover { background: var(--demo-accent-hover); }
html[data-portal-mode="playground"] .demo-bar a:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; }
html[data-portal-mode="playground"] .demo-unlock:focus-visible { outline-color: var(--demo-ink); }
html[data-portal-mode="playground"] .demo-note { margin: 2rem 0 0; padding: .9rem 0 env(safe-area-inset-bottom, 0px); text-align: center; color: #6f7482; font-size: .8rem; border-top: 1px solid var(--demo-line); }
/* The desk's sidebar is sticky too: it starts under the toolbar instead of sliding beneath it. */
@media (min-width: 761px) {
  html[data-portal-mode="playground"] .sidebar { top: calc(var(--demo-bar-h) + var(--demo-safe-top)); height: calc(100vh - var(--demo-bar-h) - var(--demo-safe-top)); }
}
/* Phones: one compact row. The brand gives way first; the simulation flag and both actions stay. */
@media (max-width: 760px) {
  html[data-portal-mode="playground"] { --demo-bar-h: 52px; }
  html[data-portal-mode="playground"] .demo-bar { gap: .55rem; }
  html[data-portal-mode="playground"] .demo-brand b, html[data-portal-mode="playground"] .demo-wide { display: none; }
  html[data-portal-mode="playground"] .demo-back { padding: 0 .5rem; font-size: .85rem; }
  html[data-portal-mode="playground"] .demo-unlock { padding: 0 .85rem; font-size: .85rem; }
}
@media (max-width: 380px) {
  html[data-portal-mode="playground"] .demo-brand { display: none; }
  html[data-portal-mode="playground"] .demo-bar { gap: .4rem; }
  html[data-portal-mode="playground"] .demo-actions { gap: .2rem; }
  html[data-portal-mode="playground"] .demo-badge { padding: .2rem .5rem; font-size: .68rem; }
  html[data-portal-mode="playground"] .demo-back { padding: 0 .4rem; font-size: .8rem; }
  html[data-portal-mode="playground"] .demo-unlock { padding: 0 .7rem; font-size: .8rem; }
}
/* Embedded on the home page: a minimal strip, the simulation flag and the two actions; no closing note. */
html[data-portal-mode="playground"][data-embedded] { --demo-bar-h: 46px; --demo-safe-top: 0px; }
html[data-portal-mode="playground"][data-embedded] .demo-brand, html[data-portal-mode="playground"][data-embedded] .demo-wide { display: none; }
html[data-portal-mode="playground"][data-embedded] .demo-back, html[data-portal-mode="playground"][data-embedded] .demo-unlock { min-height: 34px; font-size: .82rem; }
html[data-portal-mode="playground"][data-embedded] .demo-note { display: none; }
/* An Analyst-role holder without the Live Dashboard: one line above the plan picker. */
.public-portal #auth-form.door-card .plan-analyst-role { margin: .25rem 0 .9rem; color: var(--plan-ink); font-family: var(--plan-sans); font-size: .95rem; font-weight: 500; }