/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Design tokens follow the Apple Human Interface Guidelines: semantic color
 * roles with light and dark values, a short type scale, a 44px touch target
 * and concentric radii. Components use the roles, never raw colors.
 */
:root {
    color-scheme: light dark;

    /* Labels */
    --label-primary: #0f172a;
    --label-secondary: #5b6474;
    --on-accent: #ffffff;

    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f2f2f7;
    --bg-grouped-row: #f8f8fb;

    /* Separators */
    --separator: #e2e2e8;
    --separator-strong: #c7c7cc;

    /* Accent: the current blue keeps 5.2:1 with white text; Apple's #007AFF
       would only reach 4.0:1. */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft: #e5edff;
    --accent-strong: #1e40af;
    /* Filled controls with white text (5.2:1 in both themes). */
    --accent-fill: #2563eb;
    --accent-fill-hover: #1d4ed8;

    /* Status */
    --positive: #15803d;
    --positive-bg: #e8f7ee;
    --positive-border: #b7e4c7;
    --negative: #b91c1c;
    --negative-bg: #fdeceb;
    --negative-border: #f5c2c0;
    --negative-fill: #b91c1c;
    --warning: #b45309;
    --warning-bg: #fff4e5;
    --neutral-bg: #eeeef2;

    --focus-ring-color: rgb(37 99 235 / 0.45);
    --focus-ring: 0 0 0 4px rgb(37 99 235 / 0.18);

    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-md: 0 1px 3px rgb(15 23 42 / 0.06), 0 4px 12px rgb(15 23 42 / 0.04);

    /* Type scale (px): 13 / 15 / 17 / 20 / 22 / 28 / 34 */
    --text-footnote: 0.8125rem;
    --text-subhead: 0.9375rem;
    --text-body: 1.0625rem;
    --text-title3: 1.25rem;
    --text-title2: 1.375rem;
    --text-title1: 1.75rem;
    --text-large-title: 2.125rem;
    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    /* Concentric radii */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 999px;

    --container-width: 1120px;
    /* Minimum touch target (Apple HIG: 44 x 44 pt). */
    --tap-target: 2.75rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --label-primary: #f5f5f7;
        --label-secondary: #a1a1aa;
        --on-accent: #ffffff;

        --bg-primary: #1c1c1e;
        --bg-secondary: #000000;
        --bg-grouped-row: #2c2c2e;

        --separator: #38383a;
        --separator-strong: #48484a;

        --accent: #4c8dff;
        --accent-hover: #6fa3ff;
        --accent-soft: #1d2a44;
        --accent-strong: #9cc0ff;
        --accent-fill: #2563eb;
        --accent-fill-hover: #1d4ed8;

        --positive: #30d158;
        --positive-bg: #12301c;
        --positive-border: #1f5c33;
        --negative: #ff6961;
        --negative-bg: #3a1614;
        --negative-border: #6b2a26;
        --negative-fill: #b91c1c;
        --warning: #ffb340;
        --warning-bg: #3a2a10;
        --neutral-bg: #2c2c2e;

        --focus-ring-color: rgb(76 141 255 / 0.6);
        --focus-ring: 0 0 0 4px rgb(76 141 255 / 0.3);

        --shadow-sm: none;
        --shadow-md: none;
    }
}

/* Visible keyboard focus everywhere; mouse clicks do not show it. */
:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg-secondary);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--label-primary);
    background: var(--bg-secondary);
    font-family: var(--font-system);
    font-size: var(--text-body);
    line-height: 1.47;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition:
            color 150ms ease,
            background-color 150ms ease,
            border-color 150ms ease,
            box-shadow 150ms ease;
}

a:hover {
    color: var(--accent-hover);
}

button,
input,
textarea,
select {
    font: inherit;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.75rem;
    padding: 0.5rem max(1rem, calc((100vw - var(--container-width)) / 2));
    background: var(--bg-primary);
    border-bottom: 1px solid var(--separator);
}

.site-nav a:not(.site-brand),
.site-nav span {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: 0.5rem 0.75rem;
    color: var(--label-secondary);
    font-size: var(--text-subhead);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.site-nav a:not(.site-brand):hover {
    color: var(--label-primary);
    background: var(--bg-grouped-row);
}

.site-nav a[aria-current="page"],
.site-nav a[aria-current="page"]:hover {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target);
    margin-right: 0.75rem;
    padding: 0 0.25rem;
    color: var(--label-primary);
    font-size: var(--text-title3);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-brand:hover {
    color: var(--accent);
}

.site-nav form {
    margin-left: auto;
}

.site-nav .link-button {
    padding: 0 0.75rem;
}

.page {
    width: min(var(--container-width), calc(100vw - 2rem));
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h1,
.page-header h2,
.page-header h3 {
    margin: 0;
    color: var(--label-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.page-header h1 {
    font-size: clamp(var(--text-title1), 4vw, var(--text-large-title));
}

.page-header h2 {
    font-size: var(--text-title2);
}

.page-header p {
    max-width: 64ch;
    margin: 0.4rem 0 0;
    color: var(--label-secondary);
    font-size: var(--text-subhead);
}

.button,
input[type="submit"].button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target);
    padding: 0.6rem 1.15rem;
    color: var(--on-accent);
    background: var(--accent-fill);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-subhead);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease;
}

.button:hover,
input[type="submit"].button:hover {
    color: var(--on-accent);
    background: var(--accent-fill-hover);
}

.button:active,
.link-button:active {
    transform: scale(0.98);
}

.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target);
    padding: 0 0.25rem;
    color: var(--accent);
    background: transparent;
    border: 0;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

.link-button:hover {
    color: var(--accent-hover);
}

.actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.actions form {
    margin: 0;
}

.notice,
.empty-state,
.form-errors {
    margin: 1rem 0;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-md);
}

.notice {
    color: var(--positive);
    background: var(--positive-bg);
    border: 1px solid var(--positive-border);
}

.form-errors {
    color: var(--negative);
    background: var(--negative-bg);
    border: 1px solid var(--negative-border);
}

.empty-state {
    color: var(--label-secondary);
    background: var(--bg-primary);
    border: 1px dashed var(--separator-strong);
    text-align: center;
}

.table-scroll {
    overflow-x: auto;
    background: var(--bg-primary);
    border: 1px solid var(--separator);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.asset-list {
    table-layout: fixed;
}

.asset-list__ticker-column {
    width: 14%;
}

.asset-list__name-column {
    width: 35%;
}

.asset-list__type-column {
    width: 16%;
}

.asset-list__currency-column,
.asset-list__country-column {
    width: 12%;
}

.asset-list__actions-column {
    width: 11%;
}

.asset-list__name {
    overflow-wrap: anywhere;
}

.asset-list__actions {
    text-align: right;
    white-space: nowrap;
}

th,
td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--separator);
    vertical-align: middle;
}

thead th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--label-secondary);
    background: var(--bg-grouped-row);
    font-size: var(--text-footnote);
    font-weight: 600;
}

tbody tr {
    transition: background-color 150ms ease;
}

tbody tr:hover {
    background: var(--bg-grouped-row);
}

tbody tr:last-child td {
    border-bottom: 0;
}

td a {
    font-weight: 600;
}

.details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
}

.details > div {
    padding: 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--separator);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.details dt {
    margin-bottom: 0.25rem;
    color: var(--label-secondary);
    font-size: var(--text-footnote);
    font-weight: 600;
}

.details dd {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 600;
}

.institution-form,
.auth-form {
    display: grid;
    gap: 1rem;
    width: min(100%, 680px);
    padding: 1.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--separator);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.field {
    display: grid;
    gap: 0.45rem;
}

.field label,
.field legend {
    color: var(--label-primary);
    font-size: var(--text-subhead);
    font-weight: 600;
}

.field > p {
    margin: 0;
    color: var(--label-secondary);
    font-size: var(--text-footnote);
}

fieldset.field {
    margin: 0;
    padding: 0;
    border: 0;
}

.field input:not([type="checkbox"]):not([type="color"]),
.field textarea,
.field select {
    width: 100%;
    min-height: var(--tap-target);
    padding: 0.6rem 0.85rem;
    color: var(--label-primary);
    background: var(--bg-primary);
    border: 1px solid var(--separator-strong);
    border-radius: var(--radius-md);
    outline: none;
    transition:
            border-color 150ms ease,
            box-shadow 150ms ease;
}

.date-picker {
    position: relative;
    display: flex;
}

.date-picker > input {
    padding-right: 3.25rem !important;
}

.date-picker__toggle {
    position: absolute;
    top: 50%;
    right: 0.1rem;
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    transform: translateY(-50%);
    color: var(--label-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.date-picker__toggle:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.date-picker__calendar {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.4rem);
    left: 0;
    width: min(20rem, 100%);
    padding: 0.85rem;
    background: var(--bg-primary);
    border: 1px solid var(--separator);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.date-picker__navigation,
.date-picker__weekdays,
.date-picker__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.date-picker__navigation {
    grid-template-columns: var(--tap-target) 1fr var(--tap-target);
    align-items: center;
    margin-bottom: 0.65rem;
    text-align: center;
}

.date-picker__navigation button,
.date-picker__days button {
    min-height: var(--tap-target);
    color: var(--label-primary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.date-picker__navigation button:hover,
.date-picker__days button:hover,
.date-picker__days button[aria-pressed="true"] {
    color: var(--accent);
    background: var(--accent-soft);
}

.date-picker__weekdays {
    margin-bottom: 0.25rem;
    color: var(--label-secondary);
    font-size: var(--text-footnote);
    font-weight: 600;
    text-align: center;
}

.date-picker__weekdays span {
    padding: 0.25rem 0;
}

.date-picker__days button {
    padding: 0;
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.field-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.field-checkbox input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent);
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.category-target-status {
    margin: 0.5rem 0 1rem;
    color: var(--label-secondary);
    font-weight: 600;
}

.category-target-status--valid {
    color: var(--positive);
}

.category-target-status--incomplete {
    color: var(--warning);
}

.category-color {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.35rem;
    border: 1px solid var(--separator-strong);
    border-radius: 50%;
    vertical-align: middle;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: 1rem;
}

.portfolio-card {
    min-width: 0;
    padding: 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--separator);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.portfolio-card__header,
.portfolio-card__section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.portfolio-card__header h2,
.portfolio-card__section-heading h3 {
    margin: 0;
}

.portfolio-card__header h2 {
    font-size: var(--text-title3);
    letter-spacing: -0.02em;
}

.portfolio-card__header p {
    margin: 0.35rem 0 0;
    color: var(--label-secondary);
}

.portfolio-card__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    color: var(--label-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.icon-button:hover,
.icon-button:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
}

.icon-button svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.portfolio-card__action-form {
    display: inline-flex;
    margin: 0;
}

.portfolio-card__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
    padding: 0.9rem 0;
    border-top: 1px solid var(--separator);
    border-bottom: 1px solid var(--separator);
}

.portfolio-card__details dt,
.portfolio-category__metric > span {
    color: var(--label-secondary);
    font-size: var(--text-footnote);
}

.portfolio-card__details dd {
    margin: 0.15rem 0 0;
    font-size: var(--text-subhead);
    font-weight: 600;
}

.portfolio-card__section-heading {
    align-items: center;
    margin-bottom: 0.5rem;
}

.portfolio-card__section-heading h3 {
    font-size: var(--text-body);
}

.portfolio-category-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-category {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(5.5rem, auto));
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--separator);
}

.portfolio-category__name {
    display: flex;
    min-width: 0;
    align-items: center;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.portfolio-category__name .category-color {
    flex: 0 0 auto;
}

.portfolio-category__metric {
    display: grid;
    justify-items: end;
}

.portfolio-category__metric strong {
    font-size: var(--text-subhead);
    font-weight: 600;
}

.portfolio-card__empty-categories {
    margin: 0;
    padding: 0.75rem 0;
    color: var(--label-secondary);
    border-top: 1px solid var(--separator);
}

.auth-page {
    display: grid;
    place-items: start center;
    padding-top: 4rem;
}

.auth-page h1 {
    width: min(100%, 680px);
    margin: 0 0 1rem;
    font-size: clamp(var(--text-title1), 4vw, var(--text-large-title));
    letter-spacing: -0.02em;
}

.auth-page > p {
    width: min(100%, 680px);
}

section {
    margin-top: 2rem;
}

@media (max-width: 820px) {
    .site-nav {
        position: static;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem 1rem;
    }

    .site-brand {
        margin-right: auto;
    }

    .page {
        width: min(100% - 1rem, var(--container-width));
        padding-top: 1rem;
    }

    .page-header {
        flex-direction: column;
    }

    .page-header .button,
    .page-header .actions {
        width: 100%;
    }

    .page-header .button {
        justify-content: center;
    }

    .actions {
        align-items: stretch;
    }

    .actions .button {
        flex: 1 1 auto;
    }

    .portfolio-card {
        padding: 1rem;
    }

    .portfolio-card__header {
        flex-wrap: wrap;
    }

    .portfolio-card__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .portfolio-category {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(4.5rem, auto));
        gap: 0.45rem;
    }

    .institution-form,
    .auth-form {
        padding: 1rem;
    }
}

/* Transaction correction and cancellation (DEC-017) */

.button--danger,
input[type="submit"].button--danger {
    color: var(--on-accent);
    background: var(--negative-fill);
}

.button--danger:hover,
input[type="submit"].button--danger:hover {
    color: var(--on-accent);
    background: var(--negative-fill);
    filter: brightness(0.92);
}

.danger-zone {
    margin: 2rem 0 1.5rem;
    padding: 0 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--separator);
    border-radius: var(--radius-lg);
}

.danger-zone summary {
    display: flex;
    align-items: center;
    min-height: var(--tap-target);
    color: var(--negative);
    font-weight: 600;
    cursor: pointer;
}

.danger-zone[open] {
    padding-bottom: 1.25rem;
}

.danger-zone form {
    display: grid;
    gap: 1rem;
    max-width: 40rem;
}

.cancelled-banner {
    margin: 0 0 1.5rem;
    padding: 1rem 1.125rem;
    color: var(--label-primary);
    background: var(--neutral-bg);
    border: 1px solid var(--separator-strong);
    border-radius: var(--radius-md);
}

.row--cancelled td {
    color: var(--label-secondary);
}

/* Portfolio detail page */

.button--secondary,
input[type="submit"].button--secondary {
    color: var(--label-primary);
    background: var(--bg-primary);
    border-color: var(--separator-strong);
    box-shadow: var(--shadow-sm);
}

.button--secondary:hover,
input[type="submit"].button--secondary:hover {
    color: var(--accent);
    background: var(--bg-primary);
    border-color: var(--accent);
}

.link-button--danger {
    color: var(--label-secondary);
    font-weight: 600;
}

.link-button--danger:hover {
    color: var(--negative);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--label-secondary);
    font-size: var(--text-subhead);
}

.breadcrumb a {
    font-weight: 600;
}

.breadcrumb [aria-current="page"] {
    overflow: hidden;
    color: var(--label-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-hero {
    --portfolio-color: var(--accent);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem 2rem;
    padding: 1.75rem 1.75rem 0;
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--separator);
    border-top: 6px solid var(--portfolio-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.portfolio-hero__identity {
    min-width: 0;
}

.portfolio-hero__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.portfolio-hero h1 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: clamp(var(--text-title1), 4vw, var(--text-large-title));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.portfolio-hero__description {
    max-width: 64ch;
    margin: 0.6rem 0 0;
    color: var(--label-secondary);
}

.portfolio-hero__actions {
    display: flex;
    align-items: center;
    align-self: start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.portfolio-hero__archive {
    display: inline-flex;
    margin: 0 0 0 0.4rem;
}

.portfolio-hero__summary {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 -1.75rem;
    background: var(--bg-grouped-row);
    border-top: 1px solid var(--separator);
}







.portfolio-stat {
    padding: 1.1rem 1.75rem 1.25rem;
}

.portfolio-stat + .portfolio-stat {
    border-left: 1px solid var(--separator);
}

.portfolio-stat__label {
    margin: 0 0 0.25rem;
    color: var(--label-secondary);
    font-size: var(--text-footnote);
    font-weight: 600;
}

.portfolio-stat__note {
    margin: 0.4rem 0 0;
    font-size: var(--text-footnote);
}

.portfolio-stat__note--positive {
    color: var(--positive);
    font-weight: 600;
}

.portfolio-stat__note--negative {
    color: var(--negative);
    font-weight: 600;
}

.portfolio-stat__amount--muted {
    color: var(--label-secondary);
}

.portfolio-stat__amount {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--text-title3);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.portfolio-stat__amount span {
    color: var(--label-secondary);
    font-size: var(--text-subhead);
    font-weight: 600;
    letter-spacing: 0;
}



.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    font-size: var(--text-footnote);
    font-weight: 600;
    border-radius: 999px;
}

.status-pill::before {
    width: 0.45rem;
    height: 0.45rem;
    background: currentColor;
    border-radius: 50%;
    content: "";
}

.status-pill--active {
    color: var(--positive);
    background: var(--positive-bg);
}

.status-pill--inactive {
    color: var(--label-secondary);
    background: var(--bg-grouped-row);
}

.portfolio-section {
    margin-top: 2.5rem;
}

.portfolio-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.portfolio-section__heading h2 {
    margin: 0;
    font-size: var(--text-title3);
    letter-spacing: -0.02em;
}

.portfolio-section__heading p {
    max-width: 64ch;
    margin: 0.3rem 0 0;
    color: var(--label-secondary);
    font-size: var(--text-subhead);
}

.portfolio-section__heading form {
    margin: 0;
}

.portfolio-section__heading > a {
    flex: 0 0 auto;
    font-weight: 700;
}

.portfolio-section__tools {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.portfolio-section__tools > a {
    font-weight: 700;
}

.list-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.transaction-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--label-secondary);
    font-size: var(--text-subhead);
}

.transaction-filter .field-checkbox {
    min-height: var(--tap-target);
    cursor: pointer;
}



.data-table th,
.data-table td {
    padding: 0.85rem 1rem;
}


.data-table .numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}













.type-tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: var(--text-footnote);
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.type-tag--inflow {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.type-tag--outflow {
    color: var(--warning);
    background: var(--warning-bg);
}

.type-tag--income {
    color: var(--positive);
    background: var(--positive-bg);
}

.type-tag--cost {
    color: var(--negative);
    background: var(--negative-bg);
}

.type-tag--neutral {
    color: var(--label-secondary);
    background: var(--bg-grouped-row);
}

.portfolio-show .empty-state {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.portfolio-show .empty-state p {
    margin: 0;
}

@media (max-width: 820px) {
    .portfolio-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.25rem 1.25rem 0;
    }

    .portfolio-hero__actions {
        justify-content: flex-start;
    }

    .portfolio-hero__summary {
        grid-template-columns: minmax(0, 1fr);
        margin: 0 -1.25rem;
    }

    .portfolio-stat {
        padding: 1rem 1.25rem;
    }

    .portfolio-stat + .portfolio-stat {
        border-top: 1px solid var(--separator);
        border-left: 0;
    }

    .portfolio-section__heading {
        flex-direction: column;
        align-items: stretch;
    }

    .portfolio-section__heading .button {
        width: 100%;
    }
}

/* Gain of a position in the portfolio positions table. */
.data-table .gain--positive {
    color: var(--positive);
    font-weight: 600;
}

.data-table .gain--negative {
    color: var(--negative);
    font-weight: 600;
}

.data-table .value--muted {
    color: var(--label-secondary);
}

/* Portfolio status shown as a dot next to the portfolio name. */
.portfolio-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.status-dot--active {
    background: var(--positive);
}

.status-dot--inactive {
    background: var(--label-secondary);
}

.portfolio-card__note {
    color: var(--label-secondary);
    font-size: var(--text-footnote);
}

/* Goal details fit on one line: each field takes the width of its content. */
.portfolio-card__details--goal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.portfolio-card__details--goal dt,
.portfolio-card__details--goal dd {
    white-space: nowrap;
}

.portfolio-card__details--goal .portfolio-card__note {
    display: block;
    font-weight: 400;
}

/* Privacy mode: financial values are masked while the user turns it on. */
.site-nav .privacy-toggle {
    margin-left: auto;
}

.site-nav .privacy-toggle ~ form {
    margin-left: 0;
}

.privacy-toggle__hidden,
.privacy-mode .privacy-toggle__visible {
    display: none;
}

.privacy-mode .privacy-toggle__hidden {
    display: block;
}

.privacy-mode .private-value__content {
    display: none;
}

.privacy-mode .private-value::after {
    content: "••••••";
    letter-spacing: 0.05em;
}