/* Opt-in portal components. Geometry and badge rules follow the approved report. */
.portal-page {
    --portal-surface: #fff;
    --portal-pink: #a52d70;
    --portal-gold: #856000;
    --portal-positive: #167366;
    --portal-danger: #ad293d;
    --portal-info: #235e9b;
    --portal-purple: #7036a5;
    --portal-neutral: #596579;
}
[data-theme="dark"] .portal-page {
    --portal-surface: #0f141b;
    --portal-pink: #f29acb;
    --portal-gold: #f5d76e;
    --portal-positive: #7cddc7;
    --portal-danger: #ff9cab;
    --portal-info: #99cbff;
    --portal-purple: #d3a5ff;
    --portal-neutral: var(--app-muted);
}
body.app-shell.portal-page { background: var(--app-bg); }
.portal-page .portal-content { overflow-wrap: anywhere; }
.portal-page-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.portal-page-header > div { min-width: 0; }
.portal-page-header h1 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.portal-page-header p { font-size: .9375rem; line-height: 1.6; }
.portal-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: 8px;
    font-size: 1.4rem;
    color: var(--portal-pink);
    border: 1px solid color-mix(in srgb, var(--portal-pink) 25%, transparent);
    background: color-mix(in srgb, var(--portal-pink) 8%, transparent);
}
.portal-page-icon--gold { color: var(--portal-gold); border-color: color-mix(in srgb, var(--portal-gold) 25%, transparent); background: color-mix(in srgb, var(--portal-gold) 8%, transparent); }
.portal-page .app-card {
    min-width: 0;
    border: 1px solid var(--app-border);
    border-radius: 9px;
    background: var(--portal-surface);
    box-shadow: none;
}
.portal-page .app-card > .card-body { padding: 1rem; min-width: 0; }
.portal-page .app-card > .card-body.p-0 { padding: 0 !important; }
.portal-page .app-card h2 { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.portal-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.portal-empty { padding: .75rem 0; color: var(--app-muted); font-size: .9375rem; line-height: 1.6; }
.portal-page .btn {
    min-height: 2.75rem;
    border-radius: 6px;
    padding: .55rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.portal-page .btn-primary {
    --bs-btn-color: #201622;
    --bs-btn-bg: var(--app-pink);
    --bs-btn-border-color: var(--app-pink);
    --bs-btn-hover-color: #201622;
    --bs-btn-hover-bg: #ef91c1;
    --bs-btn-hover-border-color: #ef91c1;
    --bs-btn-active-color: #201622;
    --bs-btn-active-bg: #ef91c1;
    --bs-btn-active-border-color: #ef91c1;
}
.portal-page .btn-gold {
    --bs-btn-bg: var(--app-gold);
    --bs-btn-border-color: var(--app-gold);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-gold) 80%, #fff);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-gold) 80%, #fff);
    --bs-btn-active-bg: var(--app-gold);
    --bs-btn-active-border-color: var(--app-gold);
    --bs-btn-disabled-bg: var(--app-gold);
    --bs-btn-disabled-border-color: var(--app-gold);
}
.portal-page :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-bp-pink) {
    --bs-btn-color: var(--app-text);
    --bs-btn-border-color: var(--app-border-strong);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-surface-soft);
    --bs-btn-hover-border-color: var(--app-border-strong);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-surface-soft);
    --bs-btn-active-border-color: var(--app-border-strong);
    --bs-btn-disabled-color: var(--app-muted);
    --bs-btn-disabled-border-color: var(--app-border);
}
.portal-page :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--portal-pink);
    outline-offset: 2px;
    box-shadow: none;
}
.portal-page :is(.table-responsive, .bp-tabulator-wrap, .tabulator-tableholder):focus-visible { outline-offset: -3px; }
.portal-page .finding-badge { --badge-tone: var(--portal-neutral); display: inline-block; font-weight: 400; white-space: normal; text-align: left; }
.portal-page .portal-tone-positive { --badge-tone: var(--portal-positive); }
.portal-page .portal-tone-danger { --badge-tone: var(--portal-danger); }
.portal-page .portal-tone-info { --badge-tone: var(--portal-info); }
.portal-text-positive { color: var(--portal-positive); }
.portal-text-danger { color: var(--portal-danger); }

/* Review tables retain all columns and local sorting/filtering/pagination. */
/* Keep the frame outside Tabulator's scrolling content and pagination footer. */
.portal-page .bp-tabulator-wrap { border: 1px solid var(--app-border); border-radius: 6px; }
.portal-page .bp-review-table.tabulator { min-width: 0; border: 0; border-radius: 5px; background: var(--portal-surface); font-size: .85rem; }
.portal-page .bp-review-table .tabulator-tableholder { overflow: auto; max-height: 65vh; }
.portal-page .bp-review-table .tabulator-row { background: var(--portal-surface); }
.portal-page .bp-review-table .tabulator-row.tabulator-row-even { background: var(--portal-surface); }
.portal-page .bp-review-table .tabulator-row:hover { background: var(--app-surface-soft); }
.portal-page .bp-review-table .tabulator-cell { padding: .75rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
.portal-page .bp-review-table .tabulator-header .tabulator-col-content { padding: .5rem .65rem; }
.portal-page .bp-review-table .tabulator-col-title-holder { min-height: 2.75rem; }
.portal-page .bp-review-table .tabulator-header .tabulator-col-title { font-size: .75rem; font-weight: 700; }
.portal-page .bp-review-table .tabulator-header-popup-button { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.portal-page .bp-review-table .tabulator-footer { padding: .5rem; background: var(--portal-surface); }
.portal-page .bp-review-table .tabulator-footer-contents { flex-wrap: wrap; gap: .5rem; }
.portal-page .bp-review-table .tabulator-paginator { white-space: normal; }
.portal-page .bp-review-table :is(.tabulator-page, .tabulator-page-size) { min-height: 2.75rem; min-width: 2.75rem; border: 1px solid var(--app-border); border-radius: 6px; font-size: .8rem; }
.portal-page .bp-review-table .tabulator-page.active { color: var(--portal-pink); border-color: var(--portal-pink); background: color-mix(in srgb, var(--portal-pink) 8%, var(--portal-surface)); }
.portal-page .bp-filter-icon.is-active { color: var(--portal-pink); }
.portal-page button.bp-filter-icon { min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: 6px; background: transparent; }
.portal-page button.bp-filter-icon:hover { background: color-mix(in srgb, var(--app-muted) 12%, transparent); }
.portal-page .bp-table-filter-popup.tabulator-popup-container {
    width: 16rem;
    min-width: 0;
    max-width: calc(100vw - 2rem);
    padding: .75rem;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--portal-surface);
    box-shadow: none;
}
.portal-page :is(.bp-character-name, .bp-character-meta, .bp-encounter-cell span) { white-space: normal; overflow-wrap: anywhere; }
.portal-page .bp-character-meta { font-size: .75rem; }
.portal-page .bp-review-table .wow-class-text { color: color-mix(in srgb, var(--wow-class-color, var(--app-text)) 35%, #172033); }
[data-theme="dark"] .portal-page .bp-review-table .wow-class-text { color: color-mix(in srgb, var(--wow-class-color, var(--app-text)) 75%, #fff); }
.portal-page .bp-review-table .bp-character-meta { color: var(--app-muted); }
.portal-page .bp-review-table .js-local-datetime { font-variant-numeric: tabular-nums; }

/* Ledger: fixed readable column minima with scrolling contained in the card. */
.portal-page .table.portal-transactions { min-width: 54rem; font-size: .875rem; --bs-table-bg: var(--portal-surface); --bs-table-accent-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-hover-bg: var(--app-surface-soft); --bs-table-hover-color: var(--app-text); }
.portal-page .table-responsive { padding-bottom: 1px; }
.portal-page .portal-transactions > :not(caption) > * > * { padding: .35rem .65rem; color: inherit; background-color: var(--portal-surface); border-color: var(--app-border); }
.portal-page .portal-transactions thead th { background: var(--app-surface-soft); color: var(--app-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.portal-transactions time { display: block; min-width: 9rem; font-variant-numeric: tabular-nums; }
.portal-transactions td:nth-child(2) { min-width: 9rem; }
.portal-transactions .portal-transaction-description { min-width: 14rem; max-width: 30rem; overflow-wrap: anywhere; }
.portal-transactions td:nth-child(4), .portal-transactions td:nth-child(5) { font-variant-numeric: tabular-nums; }
.portal-page .portal-transactions .portal-text-positive { color: var(--portal-positive); }
.portal-page .portal-transactions .portal-text-danger { color: var(--portal-danger); }
.portal-transactions .portal-report-link { display: inline-flex; align-items: center; min-height: 1.5rem; text-decoration: underline; }

/* Forms, feedback, and pricing use the same neutral card shell. */
.portal-form-page { max-width: 64rem; }
.portal-page .form-label { font-size: .875rem; font-weight: 600; margin-bottom: .4rem; }
.portal-page :is(.form-control, .form-select) { min-height: 2.75rem; border-radius: 6px; border-color: var(--app-border-strong); font-size: .9375rem; }
.portal-page .form-select { padding-right: 2.5rem; text-overflow: ellipsis; }
[data-theme="dark"] .portal-page .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5b4c5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.portal-page .form-text { color: var(--app-muted); font-size: .8125rem; line-height: 1.55; }
.portal-form-actions { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--app-border); }
.portal-page .alert { --feedback-tone: var(--portal-info); padding: .8rem 1rem; border: 1px solid var(--app-border); border-left: 2px solid var(--feedback-tone); border-radius: 0 6px 6px 0; color: var(--app-text); background: color-mix(in srgb, var(--feedback-tone) 6%, var(--portal-surface)); font-size: .875rem; line-height: 1.6; }
.portal-page .alert-danger { --feedback-tone: var(--portal-danger); }
.portal-page .alert-warning { --feedback-tone: var(--portal-gold); }
.portal-page .alert-success { --feedback-tone: var(--portal-positive); }
.portal-page .alert-link { color: var(--app-link); }
.portal-page .support-success-icon { width: 2.5rem; height: 2.5rem; border-radius: 8px; color: var(--portal-positive); background: color-mix(in srgb, var(--portal-positive) 12%, transparent); box-shadow: none; }
.portal-page .support-success-card .flex-grow-1 { min-width: 0; }
.portal-page .support-analysis-context { border-radius: 6px !important; background: var(--portal-surface); }
.portal-page .support-analysis-context dt { color: var(--app-muted); font-weight: 500; }
.portal-page .support-analysis-context dd { overflow-wrap: anywhere; }
.portal-credit-balance { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .8rem 1rem; margin-bottom: .75rem; font-size: .875rem; }
.portal-credit-balance i { color: var(--portal-gold); }
.portal-package-grid { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
.portal-package-credits { font-size: 2rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.portal-package-price { font-size: 1.25rem; font-weight: 600; padding-top: .75rem; border-top: 1px solid var(--app-border); font-variant-numeric: tabular-nums; }

/* Log text keeps its exact whitespace; only the individual code region scrolls. */
.portal-log-nav { gap: .5rem; border-bottom: 1px solid var(--app-border); }
.portal-log-nav .nav-link { padding: .65rem .8rem; min-height: 2.75rem; color: var(--app-muted); border-bottom: 2px solid transparent; font-size: .875rem; border-radius: 0; }
.portal-log-nav .nav-link.active { color: var(--portal-pink); border-bottom-color: var(--portal-pink); }
.portal-log-entry { padding: 1rem 0; border-top: 1px solid var(--app-border); min-width: 0; }
.portal-log-entry:last-child { padding-bottom: 0; }
.portal-log-date { display: block; margin-bottom: .5rem; color: var(--app-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.portal-log-message { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.portal-page .portal-log-details { margin: .75rem 0 0; max-width: 100%; max-height: 32rem; overflow: auto; white-space: pre; overflow-wrap: normal; padding: .75rem; border: 1px solid var(--app-border); border-radius: 6px; background: var(--app-surface-soft); color: var(--app-text); font-size: .8125rem; line-height: 1.6; tab-size: 4; }
.portal-log-details .json-key { color: var(--portal-info); }
.portal-log-details .json-string { color: var(--portal-positive); }
.portal-log-details .json-error-message { color: var(--portal-danger); font-weight: 700; }
.portal-log-details .json-number { color: var(--portal-gold); }
.portal-log-details .json-boolean { color: var(--portal-purple); }
.portal-log-details .json-null { color: var(--portal-pink); }

/* Analysis preparation: neutral reading surfaces with explicit status accents. */
.analyze-page { --sources-surface: var(--portal-surface); }
.analyze-page .portal-content { container: analyze-page / inline-size; }
.analyze-page-header { flex-wrap: wrap; }
.analyze-page-header > .flex-grow-1 { flex-basis: 12rem; }
.analyze-page #analysis-root { display: grid; gap: 1.5rem; align-items: start; }
.analyze-card-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.analyze-page .analyze-card-heading h2 { margin: 0; }
.analyze-page .app-card p { font-size: .875rem; line-height: 1.6; }
.analyze-page .app-card { container: analyze-card / inline-size; }
.analyze-page dl { font-size: .875rem; line-height: 1.6; }
.analyze-page dt { color: var(--app-muted); font-weight: 500; }
.analyze-page dd { min-width: 0; overflow-wrap: anywhere; }
.analyze-page code { overflow-wrap: anywhere; }
.analyze-page .analysis-loading-list { gap: 0; border-top: 1px solid var(--app-border); }
.analyze-page .analysis-loading-item {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .65rem 0;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    border-radius: 0;
    background: transparent;
    color: var(--app-text);
    font-size: .85rem;
    line-height: 1.6;
}
.analyze-page .analysis-loading-item:last-child { border-bottom: 0; }
.analyze-page .analysis-loading-item .status-icon { color: var(--app-muted); text-align: center; line-height: 1rem; }
.analyze-page .analysis-loading-item.is-complete .status-icon { color: var(--portal-positive); }
.analyze-page .analysis-loading-item.is-error .status-icon { color: var(--portal-danger); }
.analyze-page .is-complete .analysis-step-status { --badge-tone: var(--portal-positive); }
.analyze-page .is-error .analysis-step-status { --badge-tone: var(--portal-danger); }
.analyze-loading-state { display: flex; align-items: center; font-size: .875rem; line-height: 1.6; }
.analyze-loading-state .spinner-border { flex-shrink: 0; }
.analyze-page #analysis-support-action { padding-top: 1rem; border-top: 1px solid var(--app-border); }
@container analyze-page (min-width: 960px) {
    .analyze-page #analysis-root { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .analyze-selection { grid-column: 1 / -1; }
}
@container analyze-card (max-width: 480px) {
    .analyze-page dl > :is(dt, dd) { width: 100%; }
    .analyze-page .analysis-loading-item { grid-template-columns: 1rem minmax(0, 1fr); gap: .35rem .75rem; }
    .analyze-page .analysis-step-status { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .analyze-page .spinner-border { animation: none; }
    .analyze-page :is(.btn, .report-action-btn) { transition: none; }
}

/* Fight preparation uses the report's quiet cards and shared status badges. */
.choose-fight-header { flex-wrap: wrap; }
.choose-fight-header > .flex-grow-1 { flex-basis: 12rem; }
.choose-fight-page code { overflow-wrap: anywhere; }
.choose-fight-step { margin-bottom: 1.75rem; scroll-margin-top: 1rem; }
.choose-fight-step-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.choose-fight-step-header > div { min-width: 0; }
.choose-fight-step h2 { margin: 0 0 .25rem; font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.choose-fight-step-header p { font-size: .875rem; line-height: 1.6; }
.choose-fight-boss + .choose-fight-boss { margin-top: 1.5rem; }
.choose-fight-boss h3 { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.choose-fight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .75rem; }
.choose-fight-grid > * { min-width: 0; }
.choose-fight-page .select-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    height: 100%;
    padding: .85rem 1rem;
    background: var(--portal-surface);
    border: 1px solid var(--app-border);
    border-radius: 9px;
    color: var(--app-text);
    font-size: .875rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    transform: none;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.choose-fight-page .select-card:hover { border-color: var(--app-border-strong); background: color-mix(in srgb, var(--app-muted) 4%, var(--portal-surface)); }
.choose-fight-page .select-card.is-selected { border-color: var(--portal-pink); background: color-mix(in srgb, var(--portal-pink) 6%, var(--portal-surface)); box-shadow: none; }
.choose-fight-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.choose-fight-label { color: var(--app-muted); font-size: .7rem; font-weight: 700; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
.choose-fight-duration { font-weight: 600; font-variant-numeric: tabular-nums; }
.choose-fight-duration i { margin-right: .2rem; color: var(--app-muted); }
.choose-fight-meta { color: var(--app-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.choose-fight-selection { margin-top: auto; padding-top: .35rem; color: var(--portal-pink); font-size: .75rem; font-weight: 600; visibility: hidden; }
.is-selected > .choose-fight-selection { visibility: visible; }
.choose-fight-page .character-name { margin-bottom: .15rem; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
/* Keep small class names readable on both white and selected tinted cards. */
[data-theme="light"] .choose-fight-page .character-card[data-class="Hunter"] .character-name { color: #3f6212; }
[data-theme="light"] .choose-fight-page .character-card[data-class="Mage"] .character-name { color: #0369a1; }
[data-theme="light"] .choose-fight-page .character-card[data-class="Monk"] .character-name { color: #047857; }
[data-theme="light"] .choose-fight-page .character-card[data-class="Paladin"] .character-name { color: #be185d; }
[data-theme="light"] .choose-fight-page .character-card[data-class="Rogue"] .character-name { color: #854d0e; }
[data-theme="light"] .choose-fight-page .character-card[data-class="Warlock"] .character-name { color: #4f46e5; }
.choose-fight-loading { padding: .8rem 1rem; border: 1px solid var(--app-border); border-radius: 9px; background: var(--portal-surface); font-size: .875rem; }
.choose-fight-confirmation { padding: 1rem; }
.choose-fight-page .confirmation-list { margin-bottom: 0 !important; font-size: .875rem; line-height: 1.6; }
.choose-fight-page .confirmation-list dt { color: var(--app-muted); font-weight: 500; }
.choose-fight-page .confirmation-list dd { overflow-wrap: anywhere; }
.choose-fight-consent { display: flex; align-items: flex-start; gap: .65rem; padding-left: 0; margin-bottom: .75rem; }
.choose-fight-consent .form-check-input { float: none; flex: 0 0 1rem; margin: .85rem 0 0; }
.choose-fight-consent .form-check-label { padding: .65rem 0; min-height: 2.75rem; font-size: .875rem; line-height: 1.6; cursor: pointer; }
.choose-fight-consent .form-check-input:checked { background-color: var(--portal-pink); border-color: var(--portal-pink); }
.choose-fight-page .btn-gold { --bs-btn-disabled-color: #201622; }
@media (prefers-reduced-motion: reduce) {
    .choose-fight-page .select-card, .choose-fight-page .btn { transition: none; }
}
@media (max-width: 575.98px) {
    .portal-page-header { align-items: flex-start; }
    .portal-page .bp-review-table .tabulator-footer-contents { justify-content: flex-start; }
}