/* Robotics as a Service series: ledger tables and source lists.
   Tokens only; colors come from main.css. */

.raas-ledger-wrap {
    overflow-x: auto;
    margin: var(--fh-space-lg) 0;
}

.raas-ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.45;
}

.raas-ledger caption {
    caption-side: top;
    text-align: left;
    font-family: var(--fh-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-muted);
    padding-bottom: var(--fh-space-sm);
}

.raas-ledger th {
    text-align: left;
    font-family: var(--fh-font-mono);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-text-secondary);
    border-bottom: 2px solid var(--fh-ink);
    padding: 0.5rem 0.75rem 0.5rem 0;
}

.raas-ledger td {
    padding: 0.55rem 0.75rem 0.55rem 0;
    border-bottom: 1px solid var(--fh-rule);
    vertical-align: top;
}

.raas-ledger th:last-child,
.raas-ledger td:last-child {
    padding-right: 0;
}

.raas-ledger .num {
    font-family: var(--fh-font-mono);
    font-size: 0.85rem;
    white-space: nowrap;
    text-align: right;
}

.raas-ledger th.num {
    text-align: right;
}

.raas-ledger tr.total td {
    font-weight: 600;
    border-top: 2px solid var(--fh-ink);
    border-bottom: 0;
}

.raas-ledger .note {
    color: var(--ed-text-secondary);
    font-size: 0.88rem;
}

.raas-sources {
    margin-top: var(--fh-space-2xl);
    padding-top: var(--fh-space-md);
    border-top: 1px solid var(--fh-rule);
    font-size: 0.82rem;
    color: var(--ed-text-secondary);
    line-height: 1.5;
}

.raas-sources h4 {
    font-family: var(--fh-font-mono);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 var(--fh-space-sm);
}

.raas-sources ul {
    margin: 0;
    padding-left: 1.1rem;
}

.raas-sources li {
    margin-bottom: 0.3rem;
}

.raas-next {
    display: block;
    margin-top: var(--fh-space-xl);
    padding: var(--fh-space-md) var(--fh-space-lg);
    border: 2px solid var(--fh-ink);
    border-radius: var(--fh-radius-sm);
    text-decoration: none;
    color: var(--fh-ink);
}

.raas-next:hover {
    background: var(--fh-tint);
}

.raas-next small {
    display: block;
    font-family: var(--fh-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fh-accent-text);
    margin-bottom: 0.25rem;
}

.raas-next strong {
    font-family: var(--fh-font-display);
    font-weight: 600;
    font-size: 1.15rem;
}

.raas-next span {
    display: block;
    color: var(--ed-text-secondary);
    font-size: 0.92rem;
    margin-top: 0.2rem;
}

/* Pinned watermark behind the article. The image is a public-domain patent
   drawing set per page via --raas-img; day and night opacity are per page too.
   main is clipped so the fixed layer stays behind this page's content only. */

.raas-page #main-content {
    position: relative;
    clip-path: inset(0);
}

.raas-page #main-content > .ed-container {
    position: relative;
    z-index: 1;
}

.raas-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--raas-img);
    background-repeat: no-repeat;
    background-position: right 4vw center;
    background-size: auto 92vh;
    opacity: var(--raas-op-day, 0.18);
}

html[data-theme="night"] .raas-bg {
    opacity: var(--raas-op-night, 0.11);
    filter: invert(1);
}

/* Photographic backgrounds fill the viewport instead of sitting beside the column. */
.raas-bg--cover {
    background-size: cover;
    background-position: center;
}

@media (max-width: 900px) {
    /* The drawing sits under the text column on a phone, so run it lighter. */
    .raas-bg {
        background-size: auto 70vh;
        background-position: center top 5rem;
        opacity: calc(var(--raas-op-day, 0.18) * 0.6);
    }

    .raas-bg--cover {
        background-size: cover;
        background-position: center;
    }

    html[data-theme="night"] .raas-bg {
        opacity: calc(var(--raas-op-night, 0.11) * 0.6);
    }
}

@media print {
    .raas-bg {
        display: none;
    }
}