@layer reset, base, components, page;

@layer reset {
    *, ::before, ::after {
        box-sizing: border-box;
    }

    :any-link {
        color: LinkText;
    }

    :is(input, select, button) {
        font-family: inherit;
        font-size: inherit;
    }

    select {
        field-sizing: content;
    }

    @supports not (field-sizing: content) {
        select {
            inline-size: clamp(6rem, 60cqi, 12rem);
        }
    }
}

@layer base {
    :root {
        /* ── On the Trail colour palette ── */
        --color-bg:           #f4f1ed;   /* warm greige page background */
        --color-surface:      #faf8f5;   /* card / widget surface */
        --color-surface-alt:  #ede9e3;   /* slightly deeper surface */
        --color-border:       #ddd8d0;   /* subtle warm border */
        --color-border-light: #ece8e1;
        --color-text:         #1a1410;   /* near-black warm ink */
        --color-text-muted:   #6b6460;   /* warm mid-tone muted text */
        --color-text-faint:   #9c9490;

        /* Pink-purple accent palette (On the Trail highlighting) */
        --color-accent:       #c4589a;   /* primary pink-magenta */
        --color-accent-light: #f0d4e8;   /* pale pink tint */
        --color-accent-mid:   #9b4f8a;   /* deeper magenta-purple */
        --color-accent-purple:#7c4d9e;   /* purple end of gradient */
        --color-accent-grad:  linear-gradient(135deg, #c4589a 0%, #9b4f8a 50%, #7c4d9e 100%);

        /* Highlight / mark colour (mimics the site's inline pink highlights) */
        --color-highlight:    #f3c6e0;
        --color-highlight-strong: #e8a0cf;

        /* Link colour */
        --color-link:         #a03d88;
        --color-link-hover:   #7c4d9e;

        font-family: "Georgia", "Times New Roman", serif;
        --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
        --font-mono: "Atkinson Hyperlegible Mono", "Courier New", monospace;

        background-color: var(--color-bg);
        color: var(--color-text);

        scrollbar-gutter: stable both-edges;
    }

    body {
        background-color: var(--color-bg);
        color: var(--color-text);
    }

    :any-link {
        color: var(--color-link);
        text-underline-offset: 0.2em;
    }

    :any-link:hover {
        color: var(--color-link-hover);
    }

    /* ── Header ── */
    header {
      margin-block-end: 0;
      margin-block-start: 0;
      border-bottom: 1px solid var(--color-border);
      padding: 0.75rem 0;
      padding-left: 0.5em;
      padding-right: 0.5em;
      border-radius: 1em;
      background-color: var(--color-surface);
    }

    header nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }

    .nav-left {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex: 1;
        min-width: 0;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        flex-shrink: 0;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
    }

    .site-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text);
        font-family: Georgia, serif;
        letter-spacing: -0.01em;
        text-decoration: none;
        margin-inline-end: 0.5rem;
    }

    .site-title::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 0.9em;
        background: var(--color-border);
        margin-inline-start: 1.25rem;
        vertical-align: middle;
        opacity: 0.7;
    }

    header nav :any-link:not(.site-title):not(.btn-signin):not(.btn-signout):not(.back-to-province) {
        font-family: var(--font-sans);
        font-size: 0.825rem;
        font-weight: 500;
        color: var(--color-text-muted);
        text-decoration: none;
        letter-spacing: 0.01em;
        transition: color 120ms ease;
    }

    header nav :any-link:not(.site-title):not(.btn-signin):not(.btn-signout):not(.back-to-province):hover {
        color: var(--color-text);
    }

    header nav [aria-current="page"]:not(.site-title) {
        color: var(--color-accent);
        text-decoration: none;
    }

    .language-switcher {
        display: flex;
        justify-content: center;
        gap: 0.35em;
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        padding-block: 0.35rem;
        border-bottom: 1px solid var(--color-border-light);
    }

    .language-switcher :any-link {
        color: var(--color-text-muted);
        text-decoration: none;
        transition: color 120ms ease;
    }

    .language-switcher :any-link:hover,
    .language-switcher [aria-current="page"] {
        color: var(--color-accent);
        text-decoration: none;
    }

    .back-to-province {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--color-text-muted);
        text-decoration: none;
        transition: color 120ms ease;
    }

    .back-to-province:hover {
        color: var(--color-accent);
    }

    @media (max-width: 600px) {
        header nav {
            flex-wrap: wrap;
        }

        .nav-left {
            flex-wrap: wrap;
            gap: 0;
        }

        .site-title::after {
            display: none;
        }

        .nav-links {
            width: 100%;
            padding-top: 0.5rem;
            border-top: 1px solid var(--color-border-light);
            margin-top: 0.4rem;
            gap: 1rem;
        }

        .member-name {
            display: none;
        }

        header {
            padding: 0.5rem 0.5rem;
        }
    }

    .switch-language {
        position: absolute;
        inset-block-start: 1rem;
        inset-inline-end: 1rem;
    }

    .skip-to-content:focus {
        position: absolute;
        inset-block-start: 1rem;
        inset-inline-start: 1rem;
    }

    a[aria-current="page"] {
        text-decoration: none;
        color: var(--color-accent);
    }

    footer {
        margin-block-start: 3rem;
        border-top: 1px solid var(--color-border);
        padding-top: 1.5rem;
        color: var(--color-text-muted);
        font-family: var(--font-sans);
        font-size: 0.85rem;
    }
}

@layer components {
    .site-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text);
        font-family: Georgia, serif;
        letter-spacing: -0.01em;
    }

    @media screen and (min-width: 40rem) {
        .site-title {
            font-size: 1rem;
        }
    }

    .language-switcher {
        display: flex;
        justify-content: center;
        gap: 0.5em;
    }

    .language-switcher :any-link {
        color: var(--color-text);
        font-weight: 500;
        font-family: var(--font-sans);
    }

    nav-overlay:not(:defined) {
        display: contents;

    }
    nav-overlay:not(:defined) :where([slot], .federal-mps) {
        display: none;
    }

    nav-overlay:defined {
        display: inline-block;
    }

    @media screen and (min-width: 40rem) {
        nav-overlay:defined {
            margin-inline-start: 0;
        }
    }

    :root:has(nav-overlay:state(open)) {
        overflow: hidden;
        opacity: 0;
        transition: opacity 200ms ease-in;
    }

    nav-overlay::part(overlay) {
        transition:
            opacity 300ms ease-in-out,
            overlay 0s ease-in-out allow-discrete;
        background-color: var(--color-bg);
    }

    nav-overlay :any-link {
        transition: opacity 200ms ease-in-out;
        transition-delay: 300ms;
        transition-delay: calc(100ms + 50ms * sibling-index());
    }

    nav-overlay::part(overlay):modal {
        justify-content: center;
        justify-items: center;
        align-items: center;
        box-sizing: border-box;
        display: grid;
        align-content: safe center;
        grid-gap: 8px;
        padding: 36px;
        inset: 0;
        max-block-size: 100%;
        max-inline-size: 100%;
        block-size: 100%;
        inline-size: 100%;
        border: 0;
    }

    nav-overlay::part(button) {
        font: inherit;
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: 0.85rem;
        background: var(--color-accent-grad);
        color: #fff;
        padding-block: 5px;
        padding-inline: 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        letter-spacing: 0.02em;

        transition-property: opacity, box-shadow;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
    }

    nav-overlay::part(button):hover {
        opacity: 0.88;
        box-shadow: 0 2px 8px rgb(196 88 154 / 0.35);
    }

    nav-overlay::part(button):focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }


    nav-overlay::part(close-button) {
        position: fixed;
        inset-block-start: 48px;
        inset-inline-end: 48px;

        transition:
            opacity 150ms,
            opacity 200ms 300ms;
        transition-timing-function: ease-in-out;
    }

    nav-overlay:defined :any-link {
        font-weight: 600;
        font-size: 1.25rem;
        font-family: Georgia, serif;
        color: var(--color-text);
    }

    @starting-style {
        nav-overlay::part(close-button),
        nav-overlay::part(overlay):modal,
        nav-overlay :any-link {
            opacity: 0;
        }
    }

    .member-cards-grid {
        display: grid;
        list-style: none;
        padding-inline-start: 0;
        column-gap: 24px;
        row-gap: 16px;
        justify-content: center;
        grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
    }

    .member-card {
        grid-template-columns: [portrait-start] max(125px, 35%) [portrait-end content-start] auto [content-end];
        column-gap: 8px;
        background-color: var(--color-surface);
        font-family: var(--font-mono);
        position: relative;
        border-block-end: 10px solid var(--party-color, #c0bab4);
        box-shadow: 0 0 15px rgb(0 0 0 / 0.08);
        inline-size: 100%;
        border-radius: 2px 2px 0 0;
    }

    .member-card:not([hidden]) {
        display: grid;
    }

    .member-card:where([data-party="Bloc Québécois"]) { --party-color: #0088ce; }
    .member-card:where([data-party="Conservative"], [data-party="UC"]) { --party-color: #002395; }
    .member-card:where([data-party="Green"]) { --party-color: #427a26; }
    .member-card:where([data-party="Liberal"]) { --party-color: #d71920; }
    .member-card:where([data-party="NDP"], [data-party="New Democrat"]) { --party-color: #ff5800; }
    .member-card:where([data-party="PTP"], [data-party="Progressive Tory Party"]) { --party-color: rgb(0,155,233); }

    .member-card-content {
        display: grid;
        justify-items: start;
        row-gap: 8px;
        padding: 16px;
        block-size: 100%;
    }

    .member-card-title {
        margin-block: 0;
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--color-text);
        font-family: Georgia, serif;
    }

    .member-card-cta {
        align-self: end;
        text-underline-offset: 0.3em;
        font-weight: 700;
        color: var(--color-accent);
    }

    .member-card-cta::after {
        inset: 0;
        position: absolute;
        content: "";
    }

    .member-card-content :not(.member-card-cta) {
        z-index: 1;
    }

    .member-card-details {
        display: grid;
        justify-items: start;
        row-gap: 16px;
        margin-block: 0;
    }

    .member-card-details :where(dt, dd) {
        margin-inline-start: 0;
    }

    .member-additional-details {
        display: grid;
        row-gap: 4px;
    }

    .member-portrait {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: top 0 left 50%;
    }
}

@layer utilities {
    .visually-hidden:not(:focus-within, :active) {
        clip-path: inset(50%);
        white-space: nowrap;
        user-select: none;
        border: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        position: absolute;
        overflow: hidden;
    }
}
.back-to-province {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--color-accent-mid);
    text-decoration: none;
    font-size: 0.875rem;
}
.back-to-province:hover {
    text-decoration: underline;
    color: var(--color-accent);
}

  .member-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
  }

  /* ── Hero ── */
  .member-hero {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2rem 0 3rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2.5rem;
  }

  .member-hero-portrait {
    flex-shrink: 0;
    width: 140px;
    height: 175px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
  }

  .member-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }

  .member-hero-info {
    flex: 1;
    min-width: 0;
  }

  .member-hero-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    font-family: Georgia, serif;
    color: var(--color-text);
  }

  .member-hero-role {
    font-size: 1.25rem;
    font-weight: 350;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    font-family: Georgia, serif;
    color: var(--color-text);
  }

  .party-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2em 0.75em;
    border-radius: 2px;
    margin-bottom: 1.25rem;
    color: #fff;
    background: #8a7e78;
    font-family: var(--font-sans);
  }

  .party--bloc-québécois, .party--coalition-avenir-québec { background: #0088ce; }
  .party--conservative, .party--uc, .party--parti-québécois, .party--pc, .party--conservative-party-of-british-columbia, .party--progressive-conservative-party-of-ontario, .party--progressive-conservative-party, .party--progressive-conservative { background: #002395; }
  .party--ptp { background: linear-gradient(rgb(0,155,233), rgb(105, 180, 64), rgb(249, 199, 1)); }
  .party--saskatchewan-party { background: #005941; }
  .party--green, .party--green-party, .party--bc-green-party, .party--bc-green-party-of-ontario { background: #427a26; }
  .party--liberal, .party--liberal-party, .party--ind-lib, .party--ontario-liberal-party, .party--parti-libéral-du-québec { background: #d71920; }
  .party--ndp, .party--new-democrat, .party--bc-ndp, .party--new-democratic-party-of-ontario, .party--québec-solidaire { background: #ff5800; }

  .member-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .member-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .padding-top {
    padding-top: 1.0rem;
  }

  .meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .meta-value {
    font-size: 0.95rem;
    font-weight: 500;
    font-family: var(--font-mono);
  }

  /* ── Widgets ── */
  .member-widgets {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .widget-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
  }

  .widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 0.06);
    overflow: hidden;
  }

  .widget-header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface-alt);
  }

  .widget-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 0 0 0.2rem;
    text-transform: uppercase;
    color: var(--color-text);
  }

  .widget-subtitle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
  }

  .widget-body {
    padding: 1.5rem;
  }

  .widget-more {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.75rem 0 0;
    text-align: center;
    font-style: italic;
  }

  /* ── Tables ── */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }

  .data-table th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    text-align: left;
  }

  .data-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
  }

  .data-table tbody tr:last-child td {
    border-bottom: none;
  }

  .data-table tbody tr:hover td {
    background: var(--color-surface-alt);
  }

  .data-table a {
    color: var(--color-link);
    text-decoration: none;
    font-weight: 500;
  }

  .data-table a:hover {
    text-decoration: underline;
  }

  .text-right { text-align: right; }
  .mono { font-family: var(--font-mono); }

  /* ── Donation chart inline ── */
  .widget-chart-row {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  .widget-chart-small {
    width: 200px;
    height: 200px;
  }

  /* ── Disclosures ── */
  .disclosure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
  }

  .disclosure-category {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
  }

  .disclosure-category-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
  }

  .disclosure-entries {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .disclosure-entry p {
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: var(--color-text);
    margin: 0;
    line-height: 1.5;
  }

  /* ── Responsive ── */
  @media (max-width: 600px) {
    .member-hero {
      flex-direction: column;
      gap: 1rem;
    }

    .member-hero-portrait {
      width: 100px;
      height: 125px;
    }

    .member-hero-name {
      font-size: 1.5rem;
    }

    .widget-body {
      padding: 1rem;
    }

    .disclosure-grid {
      grid-template-columns: 1fr;
    }
    
    .data-table {
      font-size: 0.75rem;
    }
    
    .widget-body {
      overflow-x: auto;
    }
  }

  /* Organization Stuff */
  
    .org-page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 1.5rem 4rem;
    }

    /* ── Hero ── */
    .org-hero {
      padding: 2rem 0 3rem;
      border-bottom: 1px solid var(--color-border);
      margin-bottom: 2.5rem;
    }

    .org-hero-name {
      font-size: 2rem;
      font-weight: 700;
      margin: 0 0 1.25rem;
      line-height: 1.2;
      font-family: Georgia, serif;
      color: var(--color-text);
    }

    .org-hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .org-meta-item {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    .meta-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .meta-value {
      font-size: 0.95rem;
      font-weight: 500;
    }

    .ticker-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.85rem;
      font-weight: 700;
      background: var(--color-accent-light);
      color: var(--color-accent-purple);
      padding: 0.15em 0.6em;
      border-radius: 3px;
      letter-spacing: 0.05em;
    }

    /* ── Widgets ── */
    .org-widgets {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .widget {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      box-shadow: 0 1px 8px rgb(0 0 0 / 0.06);
      overflow: hidden;
    }

    .widget-header {
      padding: 1.25rem 1.5rem 1rem;
      border-bottom: 1px solid var(--color-border-light);
      background: var(--color-surface-alt);
    }

    .widget-title {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      margin: 0 0 0.2rem;
      text-transform: uppercase;
      color: var(--color-text);
      font-family: var(--font-sans);
    }

    .widget-subtitle {
      font-size: 0.8rem;
      color: var(--color-text-muted);
      margin: 0;
      font-family: var(--font-sans);
    }

    .widget-body {
      padding: 1.5rem;
    }

    .widget-more {
      font-size: 0.8rem;
      color: var(--color-text-muted);
      margin: 0.75rem 0 0;
      text-align: center;
      font-style: italic;
    }

    /* ── Tables ── */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
      font-family: var(--font-sans);
    }

    .data-table th {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      padding: 0.5rem 0.75rem;
      border-bottom: 2px solid var(--color-border);
      text-align: left;
    }

    .data-table td {
      padding: 0.6rem 0.75rem;
      border-bottom: 1px solid var(--color-border-light);
      vertical-align: middle;
    }

    .data-table tbody tr:last-child td {
      border-bottom: none;
    }

    .data-table tbody tr:hover td {
      background: var(--color-surface-alt);
    }

    .data-table a {
      color: var(--color-link);
      text-decoration: none;
      font-weight: 500;
    }

    .data-table a:hover {
      text-decoration: underline;
      color: var(--color-link-hover);
    }

    .text-right { text-align: right; }
    .mono { font-family: var(--font-mono); }

    /* ── Related orgs ── */
    .related-orgs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
    }

    .related-orgs-subtitle {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text);
      margin: 0 0 0.75rem;
    }

    .related-orgs-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .related-orgs-list li {
      font-size: 0.875rem;
      padding: 0.4rem 0;
      border-bottom: 1px solid var(--color-border-light);
    }

    .related-orgs-list li:last-child {
      border-bottom: none;
    }

    .related-orgs-list a {
      color: var(--color-link);
      text-decoration: none;
      font-weight: 500;
    }

    .related-orgs-list a:hover {
      text-decoration: underline;
    }

    .related-org-meta {
      color: var(--color-text-faint);
      font-size: 0.8rem;
      font-family: var(--font-mono);
    }

    /* ── Responsive ── */
    @media (max-width: 600px) {
      .org-hero-name {
        font-size: 1.5rem;
      }

      .widget-body {
        padding: 1rem;
      }

      .related-orgs-grid {
        grid-template-columns: 1fr;
      }
    }

    .widget-title-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .perf-badge {
      font-size: 0.875rem;
      font-weight: 600;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
    }

    .perf-badge--up {
      background: #dcfce7;
      color: #1a6b3a;
    }

    .perf-badge--down {
      background: #fce8e8;
      color: #a01c1c;
    }
/* ══════════════════════════════════════════════════════════════════
   On the Trail — additional theme overrides
   Matches onthetrailmtl.ca: warm greige bg, pink-purple accents
   ══════════════════════════════════════════════════════════════════ */

/* Highlighted / marked text — inline pink wash like the Substack */
mark,
.highlight {
  background: var(--color-highlight);
  color: var(--color-text);
  padding: 0.05em 0.2em;
  border-radius: 2px;
}

/* Org / member hero border bottom */
.org-hero,
.member-hero {
  border-bottom: 1px solid var(--color-border);
}

/* Widget accent top-bar — thin pink line on widget header */
.widget-header {
  border-top: 3px solid var(--color-accent);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
}

/* Disclosure category header — warm tinted background */
.disclosure-category {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.disclosure-category-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-mid);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
}

/* Meta labels in pink-purple */
.meta-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-mid);
  font-family: var(--font-sans);
}

.meta-value {
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--color-text);
}

/* Related orgs subtitle */
.related-orgs-subtitle {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-mid);
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
}

.related-orgs-list a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
}

.related-orgs-list a:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}

.related-orgs-list li {
  border-bottom: 1px solid var(--color-border-light);
}

/* Ticker badge in pink-purple instead of blue */
.ticker-badge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--color-accent-light);
  color: var(--color-accent-mid);
  padding: 0.15em 0.6em;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

/* Perf badges with correct background (sed didn't catch these) */
.perf-badge--up {
  background: #e6f7ec;
  color: #1a6b3a;
}

.perf-badge--down {
  background: #fce8e8;
  color: #a01c1c;
}

/* Related org meta text */
.related-org-meta {
  color: var(--color-text-faint);
  font-size: 0.8rem;
  font-family: var(--font-mono);
}