/* ================================================================
   THERIOME BRAND FONTS
   ================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");

/* Futura PT fallback - using system fonts that closely match */
/* For production, replace with actual Futura PT web fonts */

/* ================================================================
   THERIOME BRAND COLORS (CSS Variables)
   ================================================================ */
:root {
    /* Primary Colors */
    --theriome-dark-lavender: #6c51a2;
    --theriome-royal-purple: #5b4b9f;
    /* Secondary Colors */
    --theriome-davys-gray: #4c4c51;
    --theriome-feather-weight: #E5E7E3;
    /* Accent Colors */
    --theriome-marian-blue: #29469d;
    /* Legacy color support */
    --theriome-primary: #653C9A; /* Keep for backward compatibility */
    --theriome-light-gray: #EAEAEA;
    /* Gradient */
    --theriome-gradient: linear-gradient(135deg, #6c51a2 0%, #29469d 100%);
}

/* ================================================================
   BASE STYLES
   ================================================================ */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--theriome-davys-gray);
}

/* Headings use Poppins Semibold */
h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--theriome-dark-lavender);
}
    /* Kill any weird outlines/boxes around main headings */
    h1.text-center.mb-4,
    h1.text-center.mb-4::before,
    h1.text-center.mb-4::after {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

/* Body text uses Poppins Regular */
p, span, div, label, input, button {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

/* ================================================================
   LAYOUT STRUCTURE
   ================================================================ */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ================================================================
   SHELL: THE ONE CONTENT-WIDTH STANDARD
   Every horizontal band of the app (nav inner, main content,
   footer inner) uses .shell so left/right edges always align.
   Do NOT add Bootstrap .container / .container-fluid inside pages;
   the layout already provides the shell.
   ================================================================ */
:root {
    --shell-max: 1400px;
    --shell-gutter: 24px;
}

.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--shell-gutter);
    padding-right: var(--shell-gutter);
}

@media (max-width: 768px) {
    :root {
        --shell-gutter: 16px;
    }
}

/* ================================================================
   PAGE HEADER: standard opening block for every page
   (rendered by the shared <PageHeader> component)
   ================================================================ */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--theriome-feather-weight);
}

.page-header-titles {
    min-width: 0;
}

.page-header-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--theriome-dark-lavender);
    line-height: 1.25;
}

.page-header-subtitle {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: #6c757d;
    max-width: 760px;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

.layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ================================================================
   TOP NAVIGATION
   ================================================================ */
.top-nav-theriome {
    background-color: var(--theriome-royal-purple);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border: none;
    box-shadow: none;
}

    .top-nav-theriome .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

/* Logo */
.logo-theriome {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 32px;
    margin-right: 0.5rem;
}

.logo-text {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Navigation Links */
.nav-center {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.center-link {
    color: #ffffff;
    font-size: 0.95rem;
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.5rem;  /* small padding, no pill */
    border-radius: 0;
}

    .center-link:hover {
        text-decoration: underline;
        color: #E0E0E0;
    }

.divider {
    color: white;
    font-weight: 500;
}

.navbar-brand {
    padding-left: 0;
    padding-right: 0;
}

/* Nav responsiveness: when window is narrower, reduce spacing and allow wrap */
@media (max-width: 992px) and (min-width: 769px) {
    .top-nav-theriome .nav-center {
        gap: 0.5rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .top-nav-theriome .navbar-links {
        white-space: normal;
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .top-nav-theriome .navbar-links .nav-link {
        font-size: 0.85rem;
        padding: 0 4px;
    }

    .top-nav-theriome .center-link {
        font-size: 0.85rem;
        padding: 0.25rem 4px;
    }

    .top-nav-theriome .divider {
        display: none; /* hide pipes when space is tight */
    }
}

@media (max-width: 576px) {
    .top-nav-theriome .nav-center {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .top-nav-theriome .navbar-links {
        text-align: center;
    }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.theriome-btn,
.login-btn {
    display: block;
    width: 100%;
    background: var(--theriome-gradient);
    border: 1px solid var(--theriome-dark-lavender);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: center;
    border-radius: 6px; /* Slightly rounded for modern look */
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

    .theriome-btn:hover,
    .login-btn:hover {
        background: var(--theriome-dark-lavender);
        border-color: var(--theriome-dark-lavender);
        text-decoration: underline;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(108, 81, 162, 0.3);
    }

.btn-icon {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .btn-icon:hover {
        background-color: rgba(76, 76, 81, 0.2);
        border-radius: 4px;
    }

        .btn-icon:hover i {
            color: #b5b5ba !important;
        }

/* ================================================================
   CARDS AND CONTAINERS
   ================================================================ */
.patient-card {
    background-color: var(--theriome-feather-weight);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    border: 1px solid #ddd;
    transition: all 0.15s ease;
}

    .patient-card:hover {
        box-shadow: 0 4px 12px rgba(108, 81, 162, 0.1);
    }

    .patient-card > strong {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--theriome-dark-lavender);
    }

    .patient-card ul {
        margin: 0;
        padding: 0;
    }

    .patient-card li {
        margin-bottom: 0.5rem;
    }

/* Response and Report Cards */
.response-card,
.report-card {
    background: var(--theriome-gradient);
    border: none;
    color: #fff;
    border-radius: 8px;
    transition: all 0.15s ease;
}

    .response-card:hover,
    .report-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(108, 81, 162, 0.3);
    }

    .response-card .file-info small,
    .report-card .file-info small,
    .file-info small {
        font-size: 0.85rem;
        opacity: 0.9;
    }

/* ================================================================
   PATIENT LINKS
   ================================================================ */
.patient-link {
    background: none;
    border: none;
    color: var(--theriome-davys-gray);
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .patient-link:hover {
        text-decoration: underline;
        color: var(--theriome-dark-lavender);
    }

    .patient-link.active {
        color: var(--theriome-dark-lavender);
        font-weight: 600;
    }

/* ================================================================
   TABLES
   ================================================================ */
.table-header-purple {
    background-color: var(--theriome-dark-lavender);
    color: white;
}

    .table-header-purple th,
    .table-header-purple td {
        background-color: var(--theriome-dark-lavender);
        color: white;
        font-weight: 600;
    }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(108, 81, 162, 0.05);
}

.progress-bar-theriome {
    background: var(--theriome-gradient);
}

/* ================================================================
   SEARCH BAR
   ================================================================ */
.search-bar-wrapper {
    background-color: var(--theriome-feather-weight);
    padding: 1rem;
}

    .search-bar-wrapper input {
        border-radius: 25px;
        padding-left: 1rem;
        font-size: 1rem;
        border: 2px solid transparent;
        transition: all 0.15s ease;
    }

        .search-bar-wrapper input:focus {
            border-color: var(--theriome-dark-lavender);
            box-shadow: 0 0 0 0.2rem rgba(108, 81, 162, 0.25);
        }

/* ================================================================
   LOGIN/AUTH STYLES
   ================================================================ */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem;
    background: var(--theriome-feather-weight);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(108, 81, 162, 0.15);
    border: 1px solid var(--theriome-feather-weight);
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer-theriome {
    background-color: var(--theriome-davys-gray);
    color: white;
    text-align: center;
    padding: 1rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Legal links row (NPP is legally required to be reachable from the site) */
.footer-legal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.footer-legal a {
    color: rgba(255,255,255,.85);
    font-size: 0.82rem;
    text-decoration: none;
}

.footer-legal a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ================================================================
   LEGAL DOCUMENT PAGES (/legal/*)
   ================================================================ */
.legal-doc {
    max-width: 820px;
}

.legal-doc h5 {
    margin-top: 22px;
}

.legal-doc p, .legal-doc li {
    font-size: 14.5px;
    line-height: 1.65;
    color: #374151;
}

.legal-effective {
    color: #6B7280;
    font-size: 13px !important;
}

.legal-banner {
    background: var(--theriome-feather-weight);
    border-left: 4px solid var(--theriome-dark-lavender);
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13.5px;
    border-radius: 6px;
    margin: 14px 0 6px;
}

.legal-also {
    margin-top: 26px;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
    font-size: 13px !important;
    color: #6B7280 !important;
}

/* ================================================================
   MAP PLACEHOLDER
   ================================================================ */
.fake-map-grid {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 200px;
    background-color: var(--theriome-feather-weight);
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
}

    .fake-map-grid::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(108, 81, 162, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 81, 162, 0.1) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none;
    }

.map-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--theriome-royal-purple);
}

/* ================================================================
   PROGRESS TIMELINE STYLES
   ================================================================ */
.progress-timeline {
    padding: 2rem 1rem;
    width: 100%;
}

.timeline-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: calc(100% / 7);
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    border: 3px solid var(--theriome-feather-weight);
    background-color: #F8F9FA;
    color: var(--theriome-davys-gray);
    transition: all 0.3s ease;
}

.timeline-step.completed .step-circle {
    background: var(--theriome-gradient);
    border-color: var(--theriome-dark-lavender);
    color: white;
}

.timeline-step.current .step-circle {
    background: var(--theriome-gradient);
    border-color: var(--theriome-dark-lavender);
    color: white;
    animation: pulse-timeline 2s infinite;
}
.step-subtitle {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}
@keyframes pulse-timeline {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 81, 162, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(108, 81, 162, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(108, 81, 162, 0);
    }
}

.step-content {
    text-align: center;
    width: 100%;
}

.step-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theriome-davys-gray);
    margin-bottom: 0.25rem;
    line-height: 1.2;
    word-wrap: break-word;
}

.step-date {
    font-size: 0.65rem;
    color: #666;
}

.timeline-connector {
    height: 3px;
    background-color: var(--theriome-feather-weight);
    flex: 1;
    margin: 0 -2px;
    margin-top: -20px;
    min-width: 15px;
    max-width: 60px;
    transition: all 0.3s ease;
}

    .timeline-connector.active {
        background: var(--theriome-gradient);
    }

/* Custom spinner colors */
.timeline-step.current .spinner-border {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

.spinner-purple {
    color: var(--theriome-dark-lavender) !important;
    border-color: rgba(108, 81, 162, 0.3);
    border-top-color: var(--theriome-dark-lavender);
}

/* ================================================================
   RESPONSIVE DESIGN
   ================================================================ */

/* ================================================================
   MOBILE-FIRST TABLE STYLES
   ================================================================ */

/* Make all tables responsive by default */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile card layout for tables */
.mobile-data-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mobile-data-card-header {
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--theriome-dark-lavender);
    color: var(--theriome-dark-lavender);
    word-break: break-word;
}

.mobile-data-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.5rem;
}

.mobile-data-row:last-child {
    border-bottom: none;
}

.mobile-data-label {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 500;
    flex-shrink: 0;
}

.mobile-data-value {
    text-align: right;
    word-break: break-word;
}

.mobile-data-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dee2e6;
}

.mobile-data-actions .btn {
    flex: 1;
    min-width: 100px;
}

/* Show/hide helpers */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
    
    /* Container padding adjustments */
    .container, .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Legacy: pages should no longer use .container, the shell handles gutters */
    .layout-content.container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Form improvements for mobile */
    .form-control, .form-select {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    /* Better touch targets */
    .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
    
    .btn-sm {
        min-height: 36px;
    }
    
    /* Cards stack better */
    .card {
        margin-bottom: 1rem;
    }
    
    /* Patient list adjustments */
    .patient-list {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 1rem;
    }
    
    .d-flex:has(.patient-list) {
        flex-direction: column;
    }
    
    /* Login card full width on mobile */
    .login-card {
        max-width: 100%;
        margin: 0 0.5rem;
        padding: 1.5rem;
    }
    
    .login-wrapper {
        padding: 2rem 0.5rem;
    }
    
    /* Jumbotron adjustments */
    .jumbotron {
        padding: 1.5rem !important;
    }
    
    .jumbotron .display-4 {
        font-size: 1.75rem;
    }
    
    .jumbotron .lead {
        font-size: 1rem;
    }
    
    /* Modal full-width on mobile */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    /* Page headings */
    h3 {
        font-size: 1.5rem;
    }
    
    /* Alert improvements */
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .timeline-container {
        flex-direction: column;
        gap: 1rem;
    }

    .timeline-connector {
        width: 3px;
        height: 30px;
        margin: -10px 0;
        max-width: none;
    }

    .timeline-step {
        max-width: none;
        flex: none;
    }

    .step-circle {
        width: 45px;
        height: 45px;
        font-size: 0.85rem;
    }

    .step-label {
        font-size: 0.8rem;
    }

    .step-date {
        font-size: 0.7rem;
    }

    .theriome-btn,
    .login-btn {
        font-size: 0.9rem;
        padding: 0.6rem 0.8rem;
    }
    
    .qr-image {
        width: 250px;
        height: 250px;
    }
    
    /* Extra small screen adjustments */
    .container, .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Stack columns on very small screens */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] {
        margin-bottom: 1rem;
    }
    
    /* Barcode scanner form adjustments */
    .row .col-md-3,
    .row .col-md-4 {
        margin-bottom: 1rem;
    }
    
    .row .col-md-3 .form-control,
    .row .col-md-4 .form-control {
        max-width: 100% !important;
    }
}

/* ================================================================
   GET STARTED (Connect page)
   Centered hero over a two-up card grid. Used only by /connect.
   ================================================================ */
.start-wrap {
    max-width: 940px;
    margin: 0 auto;
    padding: 2.5rem 0 3rem;
}

.start-title {
    text-align: center;
    margin: 0 0 0.5rem;
    font-size: 1.45rem;
}

.start-lede {
    text-align: center;
    max-width: 34rem;
    margin: 0 auto 2rem;
    color: #6c757d;
}

.start-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.start-card {
    background: #fff;
    border: 1px solid var(--theriome-light-gray);
    border-radius: 12px;
    padding: 1.5rem;
}

.start-card h5 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.start-card > p {
    margin: 0 0 1.25rem;
    color: #6c757d;
    font-size: 0.925rem;
}

.start-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.start-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--theriome-dark-lavender);
    border: 1px solid var(--theriome-dark-lavender);
    color: #fff;
    font-weight: 600;
    font-size: 0.925rem;
    text-decoration: none;
    transition: background 0.15s ease;
}

.start-btn:hover,
.start-btn:focus {
    background: var(--theriome-royal-purple);
    color: #fff;
}

.start-arrow {
    font-size: 0.85em;
}

.start-mark {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.start-url-row {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.start-url-row .start-url {
    flex: 1;
    min-width: 0;
}

.start-copy {
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--theriome-light-gray);
    background: #fff;
    color: #6c757d;
    font-size: 0.8rem;
}

.start-copy:hover {
    border-color: var(--theriome-dark-lavender);
    color: var(--theriome-dark-lavender);
}

.start-note {
    color: #6c757d;
    font-size: 0.85rem;
}

.start-url {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    background: var(--theriome-feather-weight);
    color: var(--theriome-davys-gray);
    font-size: 0.8rem;
    word-break: break-all;
}

.start-can {
    margin: 0 0 0.75rem;
    padding-left: 1.1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.start-can li {
    margin-bottom: 0.2rem;
}

.start-more {
    margin-bottom: 1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--theriome-dark-lavender);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
}

/* A notice rather than a card, built like .legal-banner but weighted to stop the eye before
   the connect buttons underneath it. Marian blue is the one accent this page does not use
   anywhere else, so the block does not read as another purple call to action. */
.start-caution {
    background: var(--theriome-feather-weight);
    border-left: 4px solid var(--theriome-marian-blue);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.start-caution strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--theriome-marian-blue);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.start-caution p {
    margin: 0 0 0.5rem;
    color: var(--theriome-davys-gray);
    font-size: 0.875rem;
    line-height: 1.55;
}

.start-caution a {
    color: var(--theriome-dark-lavender);
    font-size: 0.85rem;
    font-weight: 600;
}

.mcp-group {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theriome-dark-lavender);
}

.mcp-tool {
    padding: 0.6rem 0;
    border-top: 1px solid var(--theriome-light-gray);
}

.mcp-tool-name {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
    color: var(--theriome-davys-gray);
}

.mcp-tool-what {
    font-size: 0.925rem;
    margin-top: 0.15rem;
}

.mcp-tool-ask {
    margin-top: 0.25rem;
    color: #6c757d;
    font-size: 0.875rem;
    font-style: italic;
}

.mcp-always {
    margin: 0;
    padding-left: 1.1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.start-videos {
    margin-top: 2.5rem;
}

.start-videos h5 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

.start-video {
    margin: 0;
}

.start-video video {
    display: block;
    width: 100%;
    /* Reserve the 16:9 box before the poster paints so the page does not jump. */
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--theriome-light-gray);
    border-radius: 12px;
}

.start-video figcaption {
    margin-top: 0.4rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.start-connections {
    margin-top: 2.5rem;
}

.start-connections h5 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .start-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}