@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================================
   OSID Model Index
   ========================================================= */


/* ---------------------------------------------------------
   Design tokens
   --------------------------------------------------------- */

:root {

    /* Typography */
    --font:         system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

    /* Backgrounds — alternating blue / green by depth */
    --bg:           #f4f8f7;  /* neutral ward page background */
    --surface:      #ffffff;
    --surface-th:   #eef3f0;  /* table heading — neutral, not depth-coloured */
    --surface-d1:   #ddeaf4;  /* depth 1 — pale blue */
    --surface-d2:   #e4f2ea;  /* depth 2 — pale green */
    --surface-d3:   #cfdeed;  /* depth 3 — medium blue */
    --surface-d4:   #d8ecdf;  /* depth 4 — medium green */
    --surface-d5:   #c0d4e4;  /* depth 5 — deeper blue */

    /* Borders */
    --line:         #bccdd8;  /* blue-gray — neutral between green and blue */

    /* Text */
    --t1:           #1a2c34;  /* deep blue-gray */
    --t2:           #3a5464;  /* mid blue-gray */
    --t3:           #7a96a4;  /* muted blue-gray */
    --t-name:       #1a4060;  /* deep blue */
    --t-code:       #2a5e7a;  /* code blue */

    /* Accent */
    --accent:       #2a7a6a;  /* teal */
    --accent-bg:    #ddeaf4;  /* pale blue — toggle hover highlight */
    --chevron:      #7a96a4;

    /* Depth bars — alternating blue / green */
    --bar-1:        #7ab8d8;
    --bar-2:        #6aaa88;
    --bar-3:        #5090b8;
    --bar-4:        #4e9068;
    --bar-5:        #3a7098;

    /* Layout */
    --col-toggle:   2.25rem;
    --col-name:     13.75rem;
    --row-v:        0.5625rem;
    --row-h:        1.25rem;
    --indent:       1.25rem;
    --radius:       0.625rem;

    /* Animation */
    --ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --t-expand:     500ms;
    --t-ui:         160ms;
}


/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */

html {
    font-size: 220%;
}

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    background: var(--bg);
    color: var(--t1);
    -webkit-font-smoothing: antialiased;
}

p + p {
    margin-top: 1.25rem;
}


/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */

.site-header {
    background: #ddeaf4;
    border-bottom: 1px solid var(--line);
    top: 0;
    z-index: 20;
    box-shadow:
        0 1px 0 var(--line),
        0 2px 8px rgba(26, 44, 52, 0.06);
}

.top-bar {
    padding: 0.15rem var(--row-h);
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
}

.page-logo {
    display: block;
    height: 3rem;
    flex-shrink: 0;
}

.site-nav ul {
    display: flex;
    flex-flow: row;
}

.site-nav ul li {
    list-style-type: none;
    margin-left: 1.25rem;
}

.site-nav a {
    margin-top: .2rem;
    font-family: 'Urbanist', var(--font);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--t2);
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color var(--t-ui) var(--ease);
}

.site-nav a:hover {
    color: var(--accent);
}


/* ---------------------------------------------------------
   Title band
   --------------------------------------------------------- */

.title-band {
    background: var(--bg);
    padding: 1.5rem 0 1rem 0;
    display: flex;
    justify-content: flex-start;
}

.title-logo {
    height: 5rem;
    margin-right: 0;
    flex-shrink: 0;
}

.title-band-inner {
    max-width: 65rem;
    margin-top: 0.5rem;
}

.title-band h1 {
    font-family: 'Urbanist', var(--font);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--t1);
}

.title-band .subtitle {
    margin-left: .2em;
    font-size: 0.75rem;
    color: var(--t-code);
}

.title-band .subtitle b {
    color: var(--accent);
    font-weight: 500;
}


/* ---------------------------------------------------------
   Page layout
   --------------------------------------------------------- */

.index-wrap {
    max-width: 65rem;
    margin: 0 auto;
    padding: 1.25rem var(--row-h) 4rem;
}


/* ---------------------------------------------------------
   Main table
   --------------------------------------------------------- */

.model-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 20px rgba(0, 0, 0, 0.04);
    table-layout: fixed;
}

col.col-toggle { width: var(--col-toggle); }
col.col-name   { width: var(--col-name); }
col.col-desc   { width: auto; }


/* ---------------------------------------------------------
   Table header row
   --------------------------------------------------------- */

.table-head th {
    background: var(--surface-th);
    border-bottom: 1px solid var(--line);
    border-right: none;
    border-left: none;
    padding: 0.4375rem 0;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t3);
}

.table-head th:nth-child(2) { padding-left: calc(var(--row-h) + 1.40625rem + 0.5rem); }
.table-head th:nth-child(3) { padding-left: 0; }


/* ---------------------------------------------------------
   Data cells
   --------------------------------------------------------- */

td {
    border-bottom: 1px solid var(--line);
    border-right: none;
    border-left: none;
    border-top: none;
    vertical-align: center;
    padding: var(--row-v) 0;
    background: var(--surface);
}

tr:last-child td {
    border-bottom: none;
}


/* ---------------------------------------------------------
   Depth backgrounds
   --------------------------------------------------------- */

.depth-0 td { background: var(--surface); }
.depth-1 td { background: var(--surface-d1); }
.depth-2 td { background: var(--surface-d2); }
.depth-3 td { background: var(--surface-d3); }
.depth-4 td { background: var(--surface-d4); }
.depth-5 td { background: var(--surface-d5); }

.depth-1 .children-cell { border-left: 3px solid var(--bar-1); }
.depth-2 .children-cell { border-left: 3px solid var(--bar-2); }
.depth-3 .children-cell { border-left: 3px solid var(--bar-3); }
.depth-4 .children-cell { border-left: 3px solid var(--bar-4); }
.depth-5 .children-cell { border-left: 3px solid var(--bar-5); }


/* ---------------------------------------------------------
   Toggle cell
   --------------------------------------------------------- */

td.col-toggle {
    width: var(--col-toggle);
    padding: 0;
    position: relative;
    text-align: center;
}

.expandable td.col-toggle:hover {
    background: var(--accent-bg) !important;
    cursor: pointer;
}

.toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* ---------------------------------------------------------
   Chevron
   --------------------------------------------------------- */

.chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.25rem 0 0.25rem 0.375rem;
    border-color: transparent transparent transparent var(--chevron);
    transition:
        transform var(--t-expand) var(--ease),
        border-left-color var(--t-ui) var(--ease);
}

.toggle:checked ~ .toggle-label .chevron {
    transform: rotate(90deg);
    border-left-color: var(--accent);
}

.toggle-label:hover .chevron {
    border-left-color: var(--accent);
}


/* ---------------------------------------------------------
   Top-level model numbering
   --------------------------------------------------------- */

tbody {
    counter-reset: model-counter;
}

.depth-0.model-row:not(.pinned) .name::before {
    counter-increment: model-counter;
    content: counter(model-counter) ".";
    color: var(--t3);
    font-size: 0.75em;
    display: inline-block;
    width: 2em;
    text-align: right;
    margin-right: 0.5rem;
}

.depth-0.model-row.pinned .name::before,
.depth-1.model-row .name::before {
    content: "";
    display: inline-block;
    font-size: 0.75em;
    width: 2em;
    margin-right: 0.5rem;
}

.toc-sep td {
    padding: 0;
    height: 1.5rem;
    border-bottom: 2px solid var(--line);
    background: var(--surface-th) !important;
}


/* ---------------------------------------------------------
   Name cell
   --------------------------------------------------------- */

td.col-name {
    padding-left: var(--row-h);
    padding-right: 1rem;
}

.name {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--t-name);
    text-decoration: none;
    word-break: break-word;
    display: block;
}

.name:hover {
    text-decoration: underline;
    color: var(--accent);
}


/* ---------------------------------------------------------
   Description cell
   --------------------------------------------------------- */

td.col-desc {
    padding-right: var(--row-h);
    text-align: left;
    color: var(--t2);
    font-size: 0.9375rem;
    line-height: 1.55;
}

td.col-desc em {
    color: var(--t3);
    font-style: normal;
}

td.col-desc code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--t-code);
    border: 1px solid #a8c4d8;
    border-radius: 3px;
    padding: 0.0625rem 0.25rem;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Expand / collapse animation
   --------------------------------------------------------- */

.children-row {
    display: table-row;
}

.expand-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-inner {
    overflow: hidden;
}

.expandable:has(.toggle:checked) + .children-row > td.children-cell > .expand-wrap {
    grid-template-rows: 1fr;
}


/* ---------------------------------------------------------
   Children cell and nested table
   --------------------------------------------------------- */

.children-cell {
    padding: 0 !important;
    border-bottom: none;
}

.child-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 1rem;
}

.child-table td.col-toggle { width: var(--col-toggle); }
.child-table td.col-name   { width: var(--col-name); }


/* ---------------------------------------------------------
   Page footer
   --------------------------------------------------------- */

.page-footer {
    text-align: center;
    padding: 1.25rem;
    font-size: 0.75rem;
    color: var(--t3);
    margin-top: 1.5rem;
}


/* ---------------------------------------------------------
   TOC page
   --------------------------------------------------------- */

.toc {
    max-width: 65rem;
    margin: 0 auto;
    padding: 1.25rem var(--row-h) 4rem;
}

.toc table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 20px rgba(0, 0, 0, 0.04);
    table-layout: auto;
}

.toc table td {
    padding: var(--row-v) var(--row-h);
    border-bottom: 1px solid var(--line);
    border-top: none;
    border-right: none;
    border-left: none;
    font-size: 0.9375rem;
    vertical-align: middle;
    background: none;
}

.toc table tr:last-child td {
    border-bottom: none;
}

.toc table td.arrow {
    width: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
    text-align: center;
    cursor: default;
}

.toc table td.arrow[onclick] {
    cursor: pointer;
}

.toc table td.arrow[onclick]:hover {
    background: var(--accent-bg) !important;
}

.toc-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.3rem 0 0.3rem 0.45rem;
    border-color: transparent transparent transparent var(--chevron);
    transition:
        transform 300ms var(--ease),
        border-left-color var(--t-ui) var(--ease);
}

.toc table td.arrow.showing .toc-chevron {
    transform: rotate(90deg);
    border-left-color: var(--accent);
}

.toc table td.arrow[onclick]:hover .toc-chevron {
    border-left-color: var(--accent);
}

.toc table tr.top td {
    background: var(--surface);
    color: var(--t2);
}

.toc table tr.sub {
    display: none;
}

.toc table tr.sub td {
    background: var(--surface-d1);
    color: var(--t2);
}

.toc table td a.name {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--t-name);
    text-decoration: none;
    display: block;
}

.toc table tr.top:hover:not(:has(td.arrow:hover)) td:not(.arrow),
.toc table tr.sub:hover:not(:has(td.arrow:hover)) td:not(.arrow) {
    background: var(--accent-bg) !important;
    cursor: pointer;
}

.toc table tr.sub td:nth-child(3) {
    color: var(--t3);
}

.toc .table-head th:nth-child(3) { padding-left: var(--row-h); }


/* ---------------------------------------------------------
   TOC page — header bar
   --------------------------------------------------------- */

body > header:not(.site-header) {
    background: #ddeaf4;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--line), 0 2px 8px rgba(26, 44, 52, 0.06);
    padding: 0.15rem var(--row-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
}

body > header:not(.site-header) .left {
    flex-shrink: 0;
}

body > header:not(.site-header) .left img {
    display: block;
    height: 3rem;
}

body > header:not(.site-header) .right {
    font-size: 0.6875rem;
    color: var(--t2);
    text-align: right;
    line-height: 1.6;
    margin-left: auto;
}

body > header:not(.site-header) nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

body > header:not(.site-header) nav ul {
    display: flex;
    list-style: none;
}

body > header:not(.site-header) nav a {
    font-family: 'Urbanist', var(--font);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--t2);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color var(--t-ui) var(--ease);
}

body > header:not(.site-header) nav a:hover {
    color: var(--accent);
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .model-table {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    col.col-name {
        width: 8.75rem;
    }

    td.col-desc {
        font-size: 0.8125rem;
    }

    section.toc table {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}