/* =====================================================================
   Tremhost client area — templates/tremhost/css/custom.css
   Loaded by includes/head.tpl (versioned). This file REPLACES Nexus's own
   css/custom.css, which is where Nexus defines all its semantic variables
   (verified: templates-nexus v9.0.4 css/custom.css). Section 1 therefore
   re-declares every Nexus variable, mapped to Tremhost brand values read
   from the live tremhost.com on 2026-11-03 (docs/tokens.md). Sections 2+
   are component styling on top.
   ===================================================================== */

/* ---------- 0. Fonts (self-hosted; same files tremhost.com preloads) --- */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- 1. Nexus semantic variables → Tremhost brand -------------- */
:root {
    --white: #fff;

    /* Tremhost brand tokens (tremhost.com /brand/tremhost-brand.css) */
    --th-navy: #13223a;
    --th-deep: #0b1526;
    --th-coral: #ff6f6f;
    --th-coral-hover: #ff8585;
    --th-coral-ink: #b8343a;
    --th-ink: #13223a;
    --th-body: #4f5b6e;
    --th-muted: #5b6777;
    --th-line: #dfe3ea;
    --th-line-strong: #b9c1cd;
    --th-soft: #f4f6f9;
    --th-on-navy: #c9d1de;
    --th-star: #ffb648;
    --th-success: #1fa855;
    --th-font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --th-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --th-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    --th-radius-s: 6px;
    --th-radius-m: 10px;
    --th-radius-l: 18px;
    --th-wrap: 1240px;
    --th-header-h: 68px;
    --th-shadow-panel: 0 18px 40px -18px rgba(11, 21, 38, .35), 0 2px 6px rgba(11, 21, 38, .06);
    --th-ease: cubic-bezier(.2, .7, .2, 1);

    /* Neutral scale — navy-tinted greys built around the brand text/line values */
    --neutral-50:  #f8f9fb;
    --neutral-100: #f4f6f9;   /* --th-soft */
    --neutral-200: #e3e7ee;
    --neutral-300: #dfe3ea;   /* --th-line */
    --neutral-400: #b9c1cd;   /* input borders */
    --neutral-500: #5b6777;   /* --th-muted */
    --neutral-600: #4f5b6e;   /* --th-body */
    --neutral-700: #2c3a52;
    --neutral-800: #13223a;   /* --th-navy */
    --neutral-900: #0b1526;   /* --th-deep */
    --neutral-950: #060b14;

    --primary-50: #fff1f1; --primary-100: #ffe1e1; --primary-200: #ffc7c7; --primary-300: #ffa3a3;
    --primary-400: #ff8585; --primary-500: #ff6f6f; --primary-600: #e05555; --primary-700: #b8343a;
    --primary-800: #8f2a2e; --primary-900: #6e2225; --primary-950: #3d1012;

    /* Primary = navy (buttons, links, active states in Nexus use --primary) */
    --primary: var(--th-navy);
    --primary-lifted: var(--neutral-700);
    --primary-accented: var(--th-deep);

    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success: #1fa855;  --success-lifted: #178a45;  --success-accented: #136b36;
    --info: #1d4f8c;     --info-lifted: #173f70;     --info-accented: #123258;
    --notice: #6d4fc2;   --notice-lifted: #5a3fa6;   --notice-accented: #47318a;
    --warning: #d97a00;  --warning-lifted: #b36400;  --warning-accented: #8a4d00;
    --error: #b8343a;    --error-lifted: #9c2a2f;    --error-accented: #7d2126;

    --grayscale: var(--th-navy);
    --grayscale-lifted: var(--neutral-700);
    --grayscale-accented: var(--th-deep);

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--th-ink);

    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--th-deep);

    --yellow-200: #fff085; --yellow-300: #ffb648; --teal-300: #46edd5; --teal-400: #00d5be; --emerald-300: #5ee9b5; --pink-400: #ff8585;

    --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-lg: 1rem;
    --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px;
    --rounding-sm: 6px; --rounding-md: 10px; --rounding-lg: 18px;
    --letter-spacing: -0.01em;
    --disabled-opacity: 40%;

    /* Bootstrap 4 vars Nexus compiled in */
    --font-family-sans-serif: var(--th-font-body);
    --danger: var(--error);
    --dark: var(--th-deep);
    --light: var(--th-soft);
}

/* ---------- 2. Base ---------------------------------------------------- */
html, body { background-color: var(--bg); }
body { font-family: var(--th-font-body); color: var(--th-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--th-font-display); color: var(--th-ink); letter-spacing: -0.02em; font-weight: 600; }
h1, .h1 { font-weight: 700; }
a { color: var(--th-navy); }
a:hover { color: var(--th-coral-ink); }
.th-skip { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--th-navy); color: #fff; padding: 10px 16px; border-radius: var(--th-radius-s); font-weight: 600; }
.th-skip:focus { left: 8px; color: #fff; }
:is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid rgba(255, 111, 111, .6); outline-offset: 2px; }
@media (min-width: 1300px) { .container { max-width: var(--th-wrap); } }

/* ---------- 3. Buttons -------------------------------------------------- */
.btn { border-radius: var(--th-radius-s); font-weight: 600; transition: background-color .15s var(--th-ease), color .15s var(--th-ease), border-color .15s var(--th-ease); }
.btn-primary, .btn-primary:focus, .btn-order-now, #btnCompleteOrder, .btn-checkout, .btn-resend-verify-email {
    background: var(--th-coral) !important; border-color: var(--th-coral) !important; color: var(--th-navy) !important;
}
.btn-primary:hover, .btn-primary:not(:disabled):active, .btn-order-now:hover, #btnCompleteOrder:hover, .btn-checkout:hover {
    background: var(--th-coral-hover) !important; border-color: var(--th-coral-hover) !important; color: var(--th-navy) !important;
}
.btn-default, .btn-secondary { background: var(--th-navy); border-color: var(--th-navy); color: #fff; }
.btn-default:hover, .btn-secondary:hover, .btn-default:focus { background: var(--th-deep); border-color: var(--th-deep); color: #fff; }
.btn-outline-primary { color: var(--th-navy); border-color: var(--th-navy); }
.btn-outline-primary:hover { background: var(--th-navy); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-link { color: var(--th-navy); font-weight: 500; }

/* ---------- 4. Forms ---------------------------------------------------- */
.form-control, .custom-select { border-radius: var(--th-radius-s); border: 1px solid var(--th-line-strong); font-size: 16px; color: var(--th-ink); }
.form-control:focus, .custom-select:focus { border-color: var(--th-navy); box-shadow: 0 0 0 3px rgba(19, 34, 58, .12); }
label { color: var(--th-ink); font-weight: 500; }

/* ---------- 5. Header --------------------------------------------------- */
header.header.th-header { background: var(--bg); border-bottom: 1px solid var(--th-line); position: sticky; top: 0; z-index: 1030; }
header.header .th-navbar { min-height: var(--th-header-h); }
header.header .th-navbar__inner { display: flex; align-items: center; gap: 24px; min-height: var(--th-header-h); }
header.header .th-brand { display: flex; align-items: center; margin-right: 8px; }
header.header .logo-img { height: 32px; width: auto; max-height: 32px; }
header.header .th-navbar__collapse { flex: 1 1 auto; }
header.header .navbar-nav { margin: 0; gap: 2px; }
header.header .navbar-nav a, header.header .navbar-nav .nav-link { font-size: 15px; font-weight: 500; color: var(--th-ink); padding: 10px 12px; border-radius: var(--th-radius-s); }
header.header .navbar-nav .nav-link:hover, header.header .navbar-nav .nav-link:focus, header.header .navbar-nav .show > .nav-link { background: var(--th-soft); color: var(--th-navy); }
header.header .navbar-nav .active > .nav-link, header.header .navbar-nav .nav-link.active { color: var(--th-coral-ink); }
header.header .dropdown-menu { border: 1px solid var(--th-line); border-radius: var(--th-radius-m); box-shadow: var(--th-shadow-panel); padding: 6px; margin-top: 6px; }
header.header .dropdown-item { border-radius: var(--th-radius-s); padding: 8px 12px; font-size: 14px; color: var(--th-ink); }
header.header .dropdown-item:hover, header.header .dropdown-item:focus { background: var(--th-soft); color: var(--th-navy); }
header.header .dropdown-item.active, header.header .dropdown-item:active { background: var(--th-navy); color: #fff; }
header.header .dropdown-divider { border-color: var(--th-line); }
header.header .th-toolbar { margin-left: auto; align-items: center; gap: 6px; }
header.header .toolbar .nav-link.th-icon-btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--th-line); border-radius: var(--th-radius-s); color: var(--th-ink); background: var(--bg); }
header.header .toolbar .nav-link.th-icon-btn:hover { background: var(--th-soft); color: var(--th-navy); }
header.header .toolbar .nav-link .th-badge { position: absolute; right: -6px; top: -6px; background: var(--th-coral); color: var(--th-navy); font-size: 11px; font-weight: 700; padding: 3px 6px; min-width: 18px; }
header.header .toolbar .nav-link .th-badge--zero { display: none; }
@media (max-width: 1199.98px) {
    header.header .th-navbar__collapse { order: 10; flex-basis: 100%; padding: 8px 0 12px; }
    header.header .navbar-nav { flex-direction: column; gap: 0; }
    header.header .navbar-nav .dropdown-menu { box-shadow: none; border: 0; padding-left: 12px; margin: 0; }
}

/* breadcrumb & banners */
.master-breadcrumb.th-breadcrumb, .master-breadcrumb .breadcrumb { background: transparent; }
.master-breadcrumb .breadcrumb { padding: 12px 0 0; font-size: 13px; }
.master-breadcrumb .breadcrumb a { color: var(--th-muted); }
.verification-banner { background: #fff8e6; border-bottom: 1px solid #ffe3a3; color: #6b4a00; padding: 6px 0; font-size: 14px; font-weight: 400; }
.verification-banner .text { padding: 4px 0; }
.verification-banner .btn-resend-verify-email { font-size: 13px; padding: 4px 12px; }

/* ---------- 6. Cards, sidebar, tables ---------------------------------- */
.card { border: 1px solid var(--th-line); border-radius: var(--th-radius-m); box-shadow: none; }
.card-header { background: var(--bg); border-bottom: 1px solid var(--th-line); font-family: var(--th-font-display); color: var(--th-ink); font-weight: 600; }
.sidebar .card-header { font-family: var(--th-font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--th-muted); }
.sidebar .list-group-item { font-size: 14px; color: var(--th-ink); }
.sidebar .list-group-item.active { background: var(--th-soft); color: var(--th-navy); border-left: 3px solid var(--th-coral); }
.panel.panel-default { border: 1px solid var(--th-line); border-radius: var(--th-radius-m); }
.table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--th-muted); border-top: 0; }
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--th-soft); }

/* status pills — text always present, colour only reinforces */
.status, .label { border-radius: 999px; font-weight: 600; font-size: 12px; padding: 3px 10px; letter-spacing: .01em; }
.status-active, .label-success, .status-paid, .status-completed { background: #e6f6ec; color: #136b36; }
.status-pending, .label-warning, .status-pendingtransfer, .status-redemption { background: #fff4e0; color: #8a5a00; }
.status-suspended, .status-terminated, .status-cancelled, .label-danger, .status-unpaid, .status-overdue, .status-fraud, .status-expired { background: #fde9e9; color: var(--th-coral-ink); }
.status-closed, .label-default, .status-draft { background: var(--th-soft); color: var(--th-muted); }

/* ---------- 7. Footer --------------------------------------------------- */
footer.footer.th-footer { background: var(--th-deep); color: var(--th-on-navy); padding: 40px 0 24px; font-size: 14px; }
.th-footer a { color: var(--th-on-navy); }
.th-footer a:hover { color: #fff; }
.th-footer__grid { row-gap: 24px; }
.th-footer__lede { color: #fff; font-size: 15px; max-width: 36ch; }
.th-footer__addr, .th-footer__support { font-size: 13px; margin-bottom: 6px; }
.th-footer__h { font-family: var(--th-font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 10px; }
.th-footer__list { list-style: none; padding: 0; margin: 0; }
.th-footer__list li { margin-bottom: 6px; }
.th-footer__bottom { border-top: 1px solid rgba(201, 209, 222, .18); margin-top: 28px; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 13px; }
.th-footer__legal { gap: 4px; }
.th-footer__legal .nav-link { padding: 0 8px 0 0; }
.th-footer__tools { margin: 0 0 0 auto; }
.th-locale-btn { border-color: rgba(201, 209, 222, .35); color: var(--th-on-navy); }

/* ---------- 8. Dashboard (clientareahome.tpl) ------------------------- */
.th-dash { margin: 4px 0 20px; }
.th-dash__attention { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.th-attn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--th-radius-m); border: 1px solid var(--th-line); color: var(--th-ink); text-decoration: none; font-size: 15px; }
.th-attn:hover { text-decoration: none; color: var(--th-ink); }
.th-attn--due { background: #fde9e9; border-color: #ffc7c7; }
.th-attn--ok { background: #e6f6ec; border-color: #bfe8cd; }
.th-attn--info { background: var(--th-soft); }
.th-attn__icon { font-size: 18px; width: 24px; text-align: center; color: var(--th-coral-ink); }
.th-attn--ok .th-attn__icon { color: #136b36; }
.th-attn--info .th-attn__icon { color: var(--th-navy); }
.th-attn__text { flex: 1; }
.th-attn__btn { white-space: nowrap; }
.th-dash__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.th-qa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border: 1px solid var(--th-line); border-radius: var(--th-radius-m); background: var(--bg); color: var(--th-ink); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s var(--th-ease); }
.th-qa:hover { background: var(--th-soft); color: var(--th-navy); text-decoration: none; }
.th-qa i { color: var(--th-coral-ink); }
@media (max-width: 767.98px) { .th-dash__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .th-qa { font-size: 13px; padding: 10px 8px; } }
.th-tiles .tile { padding: 14px 16px; border: 1px solid var(--th-line); border-radius: var(--th-radius-m); margin: 0 4px 8px; background: var(--bg); min-height: 0; }
.th-tiles .tile .stat { font-family: var(--th-font-display); font-size: 26px; font-weight: 700; color: var(--th-ink); }
.th-tiles .tile .title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--th-muted); }
.th-tiles .tile i { color: var(--th-line-strong); font-size: 22px; }
.th-tiles .tile:hover { border-color: var(--th-navy); }
.th-cards .card { margin-bottom: 12px; }
.th-cards .card-header { padding: 12px 16px; font-size: 15px; }
.th-cards .card-header .btn-xs { font-size: 12px; padding: 3px 10px; background: var(--th-navy) !important; color: #fff !important; border-radius: var(--th-radius-s); }
.th-cards .card-body { padding: 14px 16px; font-size: 14px; }
.th-cards .card-footer { background: var(--th-soft); border-top: 1px solid var(--th-line); font-size: 13px; }
.th-cards .list-group-item { font-size: 14px; }
/* accent strip Nexus paints via card-accent-*; keep it, brand the colours */
.th-cards .card-accent-green { border-top: 3px solid var(--th-success); }
.th-cards .card-accent-blue, .th-cards .card-accent-midnight-blue { border-top: 3px solid var(--th-navy); }
.th-cards .card-accent-gold { border-top: 3px solid var(--th-star); }
.th-cards .card-accent-emerald { border-top: 3px solid var(--th-success); }
.th-cards .card-accent-asbestos { border-top: 3px solid var(--th-line-strong); }
.th-cards .card-accent-red, .th-cards .card-accent-pomegranate { border-top: 3px solid var(--th-coral); }

/* ---------- 9. Services list ------------------------------------------ */
.th-services__name { display: block; color: var(--th-ink); }
.th-services__domain { display: block; font-size: 13px; color: var(--th-muted); font-family: var(--th-mono); }
.th-services__status { white-space: nowrap; }
.th-services__manage { margin-left: 10px; font-size: 12px; padding: 3px 10px; }
@media (max-width: 767.98px) { .th-services__manage { display: block; margin: 6px auto 0; width: max-content; } }

/* ---------- 10. Support: department picker ---------------------------- */
.th-depts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 575.98px) { .th-depts__grid { grid-template-columns: 1fr; } }
.th-dept { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 14px; border: 1px solid var(--th-line); border-radius: var(--th-radius-m); color: var(--th-ink); text-decoration: none; transition: border-color .15s var(--th-ease), background .15s var(--th-ease); }
.th-dept:hover { border-color: var(--th-navy); background: var(--th-soft); text-decoration: none; color: var(--th-ink); }
.th-dept__icon { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 999px; background: var(--th-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--th-navy); }
.th-dept__name { font-weight: 600; font-size: 15px; }
.th-dept__desc { font-size: 13px; color: var(--th-muted); }
.th-depts__critical { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--th-radius-m); background: #fff4e0; border: 1px solid #ffe3a3; color: #6b4a00; font-size: 14px; }
.th-depts__critical i { margin-top: 3px; }

/* dashboard: no left column (Your Info / Contacts / Shortcuts) — AUDIT B-11 */
body.th-page-clientareahome .th-sidebar-col { display: none; }
body.th-page-clientareahome .primary-content { flex: 0 0 100%; max-width: 100%; }
/* Nexus priority-nav leaves an empty "More" item when everything fits */
header.header .th-nav-primary > li:has(> .dropdown-menu:empty) { display: none; }

/* ---------- 11. Service details hero ---------------------------------- */
.th-svc-hero { margin-bottom: 12px; }
.th-svc-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.th-svc-hero__group { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--th-muted); }
.th-svc-hero__name { margin: 2px 0; font-size: 24px; }
.th-svc-hero__domain { font-family: var(--th-mono); font-size: 14px; color: var(--th-body); }
.th-svc-hero__status { font-size: 13px; padding: 5px 12px; }
.th-svc-hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 0; padding: 14px 0; border-top: 1px solid var(--th-line); border-bottom: 1px solid var(--th-line); }
.th-svc-hero__facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--th-muted); font-weight: 500; }
.th-svc-hero__facts dd { margin: 2px 0 0; font-weight: 600; color: var(--th-ink); font-size: 15px; }
.th-svc-hero__fact--warn dd { color: var(--th-coral-ink); }
.th-svc-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 14px; }
.th-svc-hero__cancel { margin-left: auto; color: var(--th-muted); font-weight: 500; font-size: 13px; }
.th-svc-hero__cancel:hover { color: var(--th-coral-ink); }

/* ---------- 12. Invoice page (standalone layout) ---------------------- */
.th-invoice { font-family: var(--th-font-body); }
.th-invoice__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 14px; }
.th-invoice__back { font-weight: 600; color: var(--th-navy); }
.th-invoice .invoice-status span { font-family: var(--th-font-display); letter-spacing: -0.02em; }
.th-invoice .invoice-status .unpaid { color: var(--th-coral-ink); }
.th-invoice .invoice-status .paid { color: #136b36; }
.th-invoice .payment-btn-container .btn { background: var(--th-coral); border-color: var(--th-coral); color: var(--th-navy); font-weight: 700; padding: 10px 22px; font-size: 16px; }
.th-invoice .payment-btn-container .btn:hover { background: var(--th-coral-hover); border-color: var(--th-coral-hover); }
.th-invoice .card.bg-success, .th-invoice .card-header.bg-success, .th-invoice .bg-success { background: var(--th-soft) !important; color: var(--th-ink) !important; }
.th-invoice .card-subtitle { font-size: 16px; }
.th-invoice #btnInvoiceAddCreditApply { background: var(--th-navy); border-color: var(--th-navy); color: #fff; }
.th-invoice .table thead th { background: var(--th-soft); }
.th-invoice .total-row, .th-invoice tr.total td { font-weight: 700; color: var(--th-ink); }

/* ---------- 13. Portal Home (index.php) ------------------------------- */
.th-portal__hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 28px 0 20px; border-bottom: 1px solid var(--th-line); margin-bottom: 24px; }
.th-portal__h1 { font-size: 30px; margin: 0 0 6px; }
.th-portal__p { color: var(--th-body); margin: 0; max-width: 60ch; font-size: 16px; }
.th-portal__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.th-portal__h2 { font-size: 22px; margin: 0 0 14px; }
.th-portal__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 991.98px) { .th-portal__cols { grid-template-columns: 1fr; } }
.th-portal__h3 { font-family: var(--th-font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--th-muted); margin: 0 0 6px; }
.th-portal__h3--gap { margin-top: 18px; }
.th-portal__row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 10px 12px; margin: 0 -12px; border-radius: var(--th-radius-s); color: var(--th-ink); text-decoration: none; transition: background .15s var(--th-ease); }
.th-portal__row:hover { background: var(--th-soft); color: var(--th-navy); text-decoration: none; }
.th-portal__name { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 15px; text-align: left; }
.th-portal__tag { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--th-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
.th-portal__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; color: var(--th-line-strong); }
.th-portal__row:hover .th-portal__go { color: var(--th-coral-ink); }
.th-portal__help { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--th-line); }
.th-portal__help a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--th-line); border-radius: 999px; color: var(--th-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.th-portal__help a:hover { background: var(--th-soft); color: var(--th-navy); text-decoration: none; }
/* domain search strip above the portal (Nexus include): tighten */
body.th-page-homepage .domain-search-container, body.th-page-homepage .home-domain-search { padding: 20px 0; }