/* ON-Time — app-specific layer on top of the shared house style.css.
   Kept as a separate file so www/css/style.css stays byte-identical to the
   other thebiohub apps (Benchmarking, Coverage, sotk1, sotk2). */

/* Single-panel app: keep the house navbar, drop the lone tab item and the
   mobile toggle that would otherwise open an empty menu. */
.navbar .navbar-nav {
        display: none;
}

.navbar .navbar-toggle {
        display: none;
}

/* Centred brand (wordmark or logo) now that nothing competes for the bar. */
.navbar .navbar-header {
        float: none;
}

.navbar .navbar-brand {
        float: none;
        display: block;
        height: auto;
        padding: 8px 15px;
        text-align: center;
}

/* Logo ships at 519x120 (~2.8x at this size) so it stays sharp on Retina. */
.navbar .navbar-brand img {
        display: inline-block;
        height: 43px;
        width: auto;
}

/* Rhythm — one column width governs both the prose and the cards, so their
   left and right edges line up. 820px is ~78 characters per line at 18px. */
.page-content {
        max-width: 820px;
        padding-top: 8px;
        padding-bottom: 48px;
}

.lede h2 {
        margin-top: 8px;
        margin-bottom: 4px;
        font-size: 34px;
}

.lede .tagline {
        color: #00ADB5;
        font-weight: 500;
        font-size: 19px;
        margin-bottom: 18px;
}

.lede p {
        margin-bottom: 14px;
}

/* Custom teal bullets rather than the browser default discs. */
.lede ul {
        list-style: none;
        margin: 0 0 18px 0;
        padding-left: 0;
}

.lede li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 7px;
}

.lede li:before {
        content: "";
        position: absolute;
        left: 2px;
        top: .62em;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #00ADB5;
}

/* Cards */
.panel-card {
        background: #FFFFFF;
        border-top: 3px solid #00ADB5;
        padding: 22px 26px 26px 26px;
        margin-top: 24px;
        box-shadow: 0 1px 3px rgba(34, 40, 49, .10);
}

.panel-card h3 {
        margin-top: 0;
        margin-bottom: 18px;
        font-size: 15px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #393E46;
}

.panel-card .form-group {
        margin-bottom: 12px;
}

.panel-card label {
        font-size: 15px;
        color: #393E46;
}

/* Buttons — one accent colour, three weights of emphasis */
.actions {
        margin-top: 10px;
}

.actions .btn {
        margin: 6px 8px 0 0;
}

.btn-ontime,
.btn-ontime:focus {
        background: #00ADB5;
        border: 2px solid #00ADB5;
        color: #FFFFFF;
        font-weight: 700;
        padding: 8px 20px;
}

.btn-ontime:hover {
        background: #393E46;
        border-color: #393E46;
        color: #FFFFFF;
}

.btn-ontime-ghost,
.btn-ontime-ghost:focus {
        background: transparent;
        border: 2px solid #00ADB5;
        color: #00ADB5;
        font-weight: 700;
        padding: 8px 20px;
}

.btn-ontime-ghost:hover {
        background: #00ADB5;
        color: #FFFFFF;
}

.btn-ontime-quiet,
.btn-ontime-quiet:focus {
        background: transparent;
        border: none;
        box-shadow: none;
        color: #393E46;
        font-weight: 400;
        text-decoration: underline;
        padding: 8px 4px;
}

.btn-ontime-quiet:hover {
        background: transparent;
        color: #00ADB5;
}

/* Run locally */
.code-block {
        background: #222831;
        color: #EEEEEE;
        border-left: 3px solid #00ADB5;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        /* Keep "--rm" as two visible hyphens; some monospace faces ligate them. */
        font-variant-ligatures: none;
        font-size: 14px;
        line-height: 1.6;
        padding: 12px 16px;
        margin: 12px 0 14px 0;
        white-space: pre;
        overflow-x: auto;
        -webkit-user-select: all;
        user-select: all;
}

/* Citation */
.cite-lead {
        margin-bottom: 10px;
}

.cite-ref {
        border-left: 3px solid #00ADB5;
        padding-left: 14px;
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 160%;
        color: #393E46;
}

.cite-meta {
        margin-bottom: 0;
        font-size: 14px;
        color: #8A9098;
}

/* Result */
.risk-call {
        display: flex;
        align-items: baseline;
        gap: 14px;
        padding: 16px 20px;
        margin-bottom: 22px;
        border-left: 6px solid #00ADB5;
        background: #F4FBFB;
}

.risk-call.risk-high {
        border-left-color: #EF767A;
        background: #FDF3F3;
}

.risk-label {
        font-size: 13px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #393E46;
}

.risk-value {
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-size: 30px;
        line-height: 1.1;
        color: #00ADB5;
}

.risk-call.risk-high .risk-value {
        color: #EF767A;
}

.metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
}

.metric {
        display: flex;
        flex-direction: column;
}

.metric-value {
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-size: 26px;
        line-height: 1.2;
        color: #222831;
}

.metric-name {
        font-size: 15px;
        color: #393E46;
}

.metric-note {
        font-size: 13px;
        color: #8A9098;
}

@media (max-width: 700px) {
        .risk-call {
                flex-direction: column;
                gap: 4px;
        }

        .metrics {
                gap: 24px;
        }
}