:root{
            --ink: rgb(47, 62, 58);
            --border: #e5e7eb;
            --muted: #64748b;
            --white: #ffffff;
        }

        /* Base sizing; page typography is defined below. */
        html { font-size: 75%; }

        .site-header{
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--white);
            border-bottom: 1px solid var(--border);
        }

        .header-inner{
            width: 100%;
            margin: 0;
            padding: 10px 12px; /* almost flush left */
            display: flex;
            align-items: center;
            gap: 18px;
        }

        /* Brand */
        .brand{
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: inherit;
            flex: 0 0 auto;
        }
        /* Brand mark */
        .brand img{
            height: 36px;
            width: auto;
            display: block;
        }
        .brand-title{
            font-family: Georgia, "Times New Roman", serif;
            font-weight: 700;
            font-size: 23.8px;
            line-height: 1;
            color: var(--ink);
            white-space: nowrap;
        }

        .tabs{
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: 18px;
            flex: 1 1 auto;
        }

        .tab{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 18px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--white);
            color: var(--muted);
            text-decoration: none;
            font-weight: 600;
            white-space: nowrap;
        }
        .tab.active{
            background: var(--ink);
            color: white;
            border-color: var(--ink);
        }
        .tab.disabled{
            opacity: 0.55;
            pointer-events: none;
        }

        .user-area{
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 16px;
            white-space: nowrap;
            padding-right: 8px;
        }
        .user-area .who{
            color: var(--muted);
            font-weight: 600;
        }
        .logout-btn{
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            color: #0f172a;
            font-weight: 700;
            cursor: pointer;
        }
        .logout-btn:hover{
            text-decoration: underline;
        }
    

/* Shared visual language, based on the Stallion Dashboard. */
:root { --portal-ink:#293f35; --portal-muted:#65766a; --portal-bg:#f7f8f4; --portal-line:#dde4d8; --portal-accent:#e5efcf; --portal-hover:#edf3e5; }
body.portal-ui,body.auth-ui { margin:0; background:var(--portal-bg); color:var(--portal-ink); font-family:Arial,Helvetica,sans-serif; }
.portal-ui { --ink:var(--portal-ink); --muted:var(--portal-muted); --border:var(--portal-line); --primary:var(--portal-ink); --primary-blue:var(--portal-ink); --bg-light:var(--portal-bg); --border-light:var(--portal-line); --text-dark:var(--portal-ink); }
.portal-ui *, .portal-ui *::before, .portal-ui *::after { box-sizing:border-box; }
.portal-ui .header-inner { max-width:1712px; margin:auto; padding:16px 26px; flex-wrap:wrap; gap:16px; }
.portal-ui .tabs { flex-wrap:wrap; gap:8px; margin-left:0; }
.portal-ui .tab { padding:10px 15px; border-color:var(--portal-line); color:var(--portal-ink); }
.portal-ui .tab.active { color:white; background:var(--portal-ink); }
.portal-ui .tab:not(.active):not(.disabled):hover { background:var(--portal-hover); }
.portal-ui .user-area { flex-wrap:wrap; gap:12px; font-size:13px; }
.portal-ui .user-area a,.portal-ui .logout-btn { color:var(--portal-ink); }
.portal-ui .who { color:var(--portal-muted); }
.portal-content { max-width:1560px; margin:auto; padding:48px 40px 80px; }
.portal-ui .portal-content .stallion-dashboard,.portal-ui .portal-content .rankings { max-width:none; margin:0; padding:0; }
.portal-ui .portal-content h1 { font:normal 42px/1.15 Georgia,'Times New Roman',serif; color:var(--portal-ink); margin:12px 0 24px; }
.portal-ui .portal-content h2 { font-family:Georgia,'Times New Roman',serif; font-weight:normal; color:var(--portal-ink); }
.portal-ui .portal-content p { line-height:1.7; }
.portal-ui .portal-content a:not(.btn-primary):not(.upgrade-button):not(.selected-mode) { color:var(--portal-ink); text-underline-offset:3px; }
.portal-ui .filter-form,.portal-ui .ranking-filters,.portal-ui .dashboard-filters { max-width:none; padding:24px 0; margin:28px 0 36px; background:transparent; border:0; border-top:1px solid var(--portal-line); border-bottom:1px solid var(--portal-line); border-radius:0; box-shadow:none; }
.portal-ui .filter-row { gap:16px; align-items:center; }
.portal-ui .portal-content label { color:var(--portal-ink); font-weight:600; font-size:13px; }
.portal-ui .portal-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.portal-ui .portal-content select,.portal-ui .portal-content textarea { padding:11px 14px; min-height:40px; max-width:100%; border:1px solid #cfd8c9; border-radius:4px; font:inherit; color:var(--portal-ink); background:white; }
.portal-ui .portal-content input[type=checkbox],.portal-ui .portal-content input[type=radio] { accent-color:var(--portal-ink); }
.portal-ui .btn-primary,.portal-ui .upgrade-button,.portal-ui .ranking-filters button,.portal-ui .dashboard-filters button { display:inline-flex; align-items:center; justify-content:center; padding:11px 18px; min-height:40px; border:1px solid var(--portal-ink); border-radius:4px; color:white; background:var(--portal-ink); font:600 13px Arial,sans-serif; text-decoration:none; cursor:pointer; }
.portal-ui .btn-primary:hover,.portal-ui .upgrade-button:hover,.portal-ui .ranking-filters button:hover,.portal-ui .dashboard-filters button:hover { background:#3d5948; }
.portal-ui .btn-ghost { padding:11px 18px; border:1px solid var(--portal-line); border-radius:4px; color:var(--portal-ink); background:white; }
.portal-ui :focus-visible,.auth-ui :focus-visible { outline:3px solid #78985a; outline-offset:3px; }
.portal-ui .table-wrapper,.portal-ui .ranking-table { max-width:100%; border:1px solid var(--portal-line); border-radius:6px; box-shadow:none; background:white; }
.portal-ui #sire-table thead th,.portal-ui #race-table thead th,.portal-ui .ranking-table th { background:var(--portal-ink); font:600 13px Arial,sans-serif; padding:17px 20px; }
.portal-ui #sire-table tbody td,.portal-ui #race-table tbody td,.portal-ui .ranking-table td { border-color:var(--portal-line); padding:16px 20px; font-size:14px; }
.portal-ui #sire-table tbody tr:nth-child(even),.portal-ui #race-table tbody tr:nth-child(even),.portal-ui .ranking-table tr:nth-child(even) { background:var(--portal-bg); }
.portal-ui #sire-table tbody tr:hover,.portal-ui #race-table tbody tr:hover { background:var(--portal-hover); }
.portal-ui .ranking-table tr.sire-highlight { background:#e5efcf; outline-color:#78985a; }
.portal-ui .ranking-table tr.sire-highlight td:first-child { border-left-color:#78985a; }
.portal-ui .ranking-bar { background:#adc38f; }
.portal-ui .horse-card { max-width:none; padding:22px; box-shadow:none; border-color:var(--portal-line); }
.portal-ui .horse-name { font:28px Georgia,serif; }
.portal-ui .auth-wrap,.portal-ui .card,.portal-ui .comparison-upgrade { width:100%; max-width:680px; margin:28px auto; padding:30px; background:white; border:1px solid var(--portal-line); border-radius:6px; box-shadow:none; }
.portal-ui .auth-wrap p,.portal-ui .card p,.portal-ui .helper,.portal-ui .scroll-hint,.portal-ui .helptext { color:var(--portal-muted); }
.portal-ui .auth-actions,.portal-ui .actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.portal-ui .card form { display:grid; gap:12px; }
.portal-ui .ranking-pages a { padding:10px 16px; border:1px solid var(--portal-line); border-radius:24px; background:white; text-decoration:none; }
.portal-ui .errorlist { color:#a5342a; }
/* Authentication shares the same palette, surfaces and controls. */
.auth-ui { --pine:var(--portal-ink); --ink:var(--portal-ink); --muted:var(--portal-muted); --line:var(--portal-line); --lime:#cbe891; }
.auth-ui .auth-story { background:#e9efdf; color:var(--portal-ink); border-right:1px solid var(--portal-line); }
.auth-ui .auth-brand img { filter:none; }
.auth-ui .auth-story .eyebrow,.auth-ui .brand-small,.auth-ui .story-footer,.auth-ui .story-content>p { color:var(--portal-muted); }
.auth-ui .story-content h1 em { color:#426c42; }
.auth-ui .insight-art { background:white; border-color:var(--portal-line); border-radius:6px; }
.auth-ui .art-label,.auth-ui .art-caption { color:var(--portal-muted); }
.auth-ui .art-line span { background:var(--portal-line); }
.auth-ui .auth-card { padding:30px; margin:auto; background:white; border:1px solid var(--portal-line); border-radius:6px; max-width:485px; }
.auth-ui .auth-card h2 { font:normal 42px/1.15 Georgia,serif; letter-spacing:normal; }
.auth-ui .primary-button,.auth-ui .social-button,.auth-ui .secondary-button,.auth-ui input { border-radius:4px; }
@media(max-width:900px) { .portal-ui .header-inner { gap:12px; } .portal-ui .tabs { order:3; flex-basis:100%; } .portal-ui .user-area { margin-left:0; } }
@media(max-width:700px) { .portal-content { padding:22px 14px 40px; } .portal-ui .header-inner { padding:14px; } .portal-ui .portal-content h1 { font-size:28px; } .portal-ui .brand-title { font-size:22px; } .portal-ui .filter-row { align-items:stretch; } .portal-ui .filter-form input { min-width:0; width:100%; } .portal-ui .auth-wrap,.portal-ui .card { padding:22px; margin:14px auto; } .auth-ui .auth-card { padding:24px; margin:30px auto; } }

/* Quiet navigation and a more legible research workspace. */
body.portal-ui { font-size:14px; line-height:1.5; }
.portal-ui .header-inner { max-width:1560px; padding:24px 40px 0; gap:0 28px; }
.portal-ui .brand-title { font-weight:normal; font-size:27px; letter-spacing:-.5px; }
.portal-ui .brand img { height:38px; }
.portal-ui .tabs { order:3; flex-basis:100%; gap:28px; margin-top:22px; }
.portal-ui .tabs .tab { position:relative; padding:14px 0 16px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--portal-muted); font-size:13px; font-weight:500; }
.portal-ui .tabs .tab.active { border-bottom-color:var(--portal-ink); color:var(--portal-ink); font-weight:700; }
.portal-ui .tabs .tab:not(.disabled):hover { background:transparent; color:var(--portal-ink); border-bottom-color:#9aad91; }
.portal-ui .user-area { margin-left:auto; gap:20px; padding:0; }
.portal-ui .user-area a { text-decoration:none; }
.portal-ui .user-area a:hover { text-decoration:underline; }
.portal-ui .user-area .who { font-weight:normal; }
.portal-ui .logout-btn { font-size:13px; font-weight:normal; }
.portal-ui .portal-content h1 { letter-spacing:-.8px; }
.portal-ui .portal-content p { max-width:100ch; }
.portal-ui .table-wrapper,.portal-ui .ranking-table { border:0; border-radius:0; }
.portal-ui #sire-table,.portal-ui #race-table,.portal-ui .ranking-table { font-variant-numeric:tabular-nums lining-nums; }
.portal-ui #sire-table tbody td,.portal-ui #race-table tbody td { line-height:1.5; }
.portal-ui .ranking-table tr:nth-child(even) { background:#f3f5ef; }
.portal-ui .distribution-card { border-radius:4px; box-shadow:none; border-color:var(--portal-line); }
.portal-ui .comparison-upgrade,.portal-ui .auth-wrap,.portal-ui .card { padding:40px; }
@media(max-width:700px) {
  .portal-ui .header-inner { padding:20px 18px 0; gap:16px; }
  .portal-ui .brand-title { font-size:25px; }
  .portal-ui .user-area { margin-left:0; gap:16px; font-size:12px; }
  .portal-ui .user-area .who { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  .portal-ui .tabs { gap:0 22px; margin-top:0; }
  .portal-ui .tabs .tab { padding:10px 0; font-size:12px; }
  .portal-content { padding:30px 18px 50px; }
  .portal-ui .portal-content h1 { font-size:32px; }
  .portal-ui .filter-form,.portal-ui .ranking-filters,.portal-ui .dashboard-filters { padding:20px 0; margin:24px 0 30px; }
  .portal-ui .comparison-upgrade,.portal-ui .auth-wrap,.portal-ui .card { padding:24px; }
}

.portal-ui #sire-table,.portal-ui #race-table { border-radius:0; }
.portal-ui #sire-table th:not(:first-child) { text-align:right; }
@media(max-width:700px) {
  .portal-ui .filter-row { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:center; gap:16px; }
  .portal-ui .filter-row button { grid-column:2; justify-self:start; }
  .portal-ui .filter-row select,.portal-ui .filter-row input { width:100%; min-width:0; }
}
.portal-ui .filter-row > small { grid-column:1 / -1; }

.portal-ui .list-return { display:inline-block; margin-bottom:24px; font-size:13px; }
.portal-ui .sire-dashboard-link { text-decoration:underline; text-decoration-color:#a7b6a0; text-underline-offset:4px; }
.portal-ui .sire-dashboard-link:hover { text-decoration-color:currentColor; }

/* Warm accents retain the portal's pine and cream foundation. */
:root { --portal-gold:#b99a50; --portal-amber:#a9652a; --portal-amber-hover:#8b501f; --portal-warm:#fbf3e3; }
.portal-ui .site-header { border-top:3px solid var(--portal-gold); }
.portal-ui .tabs .tab.active { border-bottom-color:var(--portal-gold); }
.portal-ui .tabs .tab:not(.disabled):hover { border-bottom-color:var(--portal-gold); color:var(--portal-amber-hover); }
.portal-ui .btn-primary,.portal-ui .upgrade-button,.portal-ui .ranking-filters button,.portal-ui .dashboard-filters button {
  background:var(--portal-amber); border-color:var(--portal-amber); color:#fff;
}
.portal-ui .btn-primary:hover,.portal-ui .upgrade-button:hover,.portal-ui .ranking-filters button:hover,.portal-ui .dashboard-filters button:hover {
  background:var(--portal-amber-hover); border-color:var(--portal-amber-hover);
}
.portal-ui :focus-visible,.auth-ui :focus-visible { outline-color:var(--portal-amber); }
.portal-ui .dashboard-eyebrow { color:var(--portal-amber-hover); }
.portal-ui .filter-form,.portal-ui .ranking-filters,.portal-ui .dashboard-filters { border-top-color:var(--portal-gold); }
.portal-ui .fee-group { border-top-color:var(--portal-gold); }
.portal-ui .fee-step { color:var(--portal-amber-hover); }
.portal-ui .fee-access { border-left:3px solid var(--portal-gold); background:var(--portal-warm); }
.portal-ui .fee-summary section { border-top-color:var(--portal-gold); }
.portal-ui .fee-method { border-top-color:var(--portal-gold); }
.portal-ui .fee-form .fee-add { background:var(--portal-warm); border-color:var(--portal-gold); color:var(--portal-amber-hover); }
.portal-ui .fee-form .fee-add:not(:disabled):hover,.portal-ui .btn-ghost:hover,.portal-ui .ranking-pages a:hover { background:#f3e5c9; border-color:var(--portal-gold); }
.portal-ui .sire-dashboard-link:hover { color:var(--portal-amber-hover)!important; text-decoration-color:var(--portal-gold); }
.auth-ui .primary-button { background:var(--portal-amber); border-color:var(--portal-amber); color:#fff; }
.auth-ui .primary-button:hover { background:var(--portal-amber-hover); }
.auth-ui .auth-card { border-top:3px solid var(--portal-gold); }

/* Three workspaces, with compact tool menus. */
.workspace-menu{position:relative}
.workspace-menu>summary{cursor:pointer;list-style:none;gap:8px}
.workspace-menu>summary::-webkit-details-marker{display:none}
.workspace-menu>summary::after{content:'\25be';font-size:11px}
.workspace-menu-links{position:absolute;top:calc(100% + 8px);left:0;min-width:245px;padding:8px;background:white;border:1px solid var(--portal-line);border-radius:12px;box-shadow:0 8px 24px #293f351a;z-index:60}
.workspace-menu-links a{display:block;padding:11px 14px;border-radius:7px;color:var(--portal-ink);text-decoration:none}
.workspace-menu-links a:hover,.workspace-menu-links a[aria-current=page]{background:var(--portal-hover)}
.workspace-home{max-width:1200px;margin:24px auto;padding:24px}
.workspace-home h1{font-family:Georgia,serif;font-size:32px}
.workspace-home>p{color:var(--portal-muted);font-size:16px}
.workspace-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:28px}
.workspace-tool{display:block;padding:28px;background:white;border:1px solid var(--portal-line);border-radius:12px;color:var(--portal-ink);text-decoration:none}
.workspace-tool:hover{border-color:var(--portal-ink);background:var(--portal-hover)}
.workspace-tool h2{font-family:Georgia,serif;margin-top:0;font-size:23px}
.workspace-tool p{color:var(--portal-muted);line-height:1.6;min-height:50px}
.workspace-tool span{font-weight:600}
@media(max-width:600px){.workspace-navigation{width:100%}.workspace-menu-links{min-width:220px;max-width:calc(100vw - 40px)}.workspace-home{padding:12px}}

.portal-ui .stable-nav{font-weight:700;border-color:#78985a}