/* ============================================================
   Tapestry Table Builder
   ============================================================ */

/* --- Theme variables ----------------------------------------
   Colour tokens and design tokens all live here. Override any
   of these in the site theme (data repo) to re-colour or
   re-style the table. Structure and layout rules (display,
   position, overflow, flex mechanics) are not overrideable via
   variables.
   ----------------------------------------------------------- */

.tapestry-table-builder {

    /* Colours ------------------------------------------------ */
    --tb-border:                #dbdbdb;  /* all cell/row borders */
    --tb-stripe-bg:             #f7f7f7;  /* even-row fill in striped style */
    --tb-section-header-bg:     #f0f0f0;  /* section-header row background */
    --tb-section-header-color:  inherit;  /* section-header row text */
    --tb-highlighted-row-bg:    #fffbeb;  /* highlighted data row background */
    --tb-highlighted-col-bg:    #fff;     /* highlighted column cell background */
    --tb-minimal-bg:            #fff;     /* minimal style container background */
    --tb-minimal-header-bg:     #f0f0f0;  /* minimal style thead background */
    --tb-minimal-header-color:  inherit;  /* minimal style thead text */
    --tb-highlight:             currentColor; /* highlight column border/accent */
    --tb-highlight-badge-bg:    #000338;  /* highlight badge background */
    --tb-highlight-badge-color: #fff;     /* highlight badge text */
    --tb-check-color:           #23a94e;  /* checkmark icon */
    --tb-cross-color:           #cc3333;  /* cross icon */
    --tb-tag-bg:                #dbdbdb;  /* row label tag badge background */
    --tb-disclaimer-color:      #888;     /* disclaimer text */

    /* Spacing ------------------------------------------------ */
    --tb-cell-padding:          1.5rem 0.75rem;   /* body td padding */
    --tb-header-padding:        0.85rem 0.75rem;  /* thead th padding */

    /* Border widths ------------------------------------------ */
    --tb-header-border-width:            2px;  /* thead bottom border */
    --tb-highlight-border-width:         2px;  /* highlight column side/cap borders */
    --tb-section-header-border-width:    2px;  /* section-header top border */
    --tb-highlighted-row-border-width:   2px;  /* highlighted row top/bottom borders */

    /* Border radius ------------------------------------------ */
    --tb-minimal-radius:        25px;  /* minimal style outer corners */
    --tb-highlight-radius:      8px;   /* highlight column top/bottom corner cap */
    --tb-badge-radius:          4px;   /* highlight badge and row-tag pill */

    /* Typography --------------------------------------------- */
    --tb-header-font-weight:             700;        /* thead th */
    --tb-minimal-header-font-weight:     600;        /* minimal style thead */
    --tb-footer-font-weight:             600;        /* footer row */
    --tb-section-header-font-size:       0.85em;
    --tb-section-header-letter-spacing:  0.04em;
    --tb-section-header-text-transform:  uppercase;

    /* Opacity ------------------------------------------------ */
    --tb-subdued-opacity:       0.6;   /* subdued row de-emphasis */
    --tb-lighter-opacity:       0.7;   /* [lighter] muted text */

    /* Cell size markers -------------------------------------- */
    --tb-text-xl: clamp(0.85rem, 5cqw, 2.5rem);
    --tb-text-lg: clamp(0.75rem, 4cqw, 1.8rem);
    --tb-text-sm: clamp(0.6rem, 2cqw, 1rem);

    /* Badge -------------------------------------------------- */
    --tb-badge-padding:         0.5em 0.8em;
    --tb-badge-font-size:       0.72em;
    --tb-badge-letter-spacing:  0.04em;

    /* Alignment ---------------------------------------------- */
    --tb-header-text-align:     center;  /* thead th default alignment */
    --tb-cell-text-align:       left;    /* body td default alignment */
    --tb-first-col-text-align:  left;    /* first column override */

    /* First column style tokens ------------------------------ */
    --tb-first-col-font-weight: inherit;
    --tb-first-col-font-size:   inherit;
    --tb-first-col-opacity:     1;
    --tb-first-col-color:       inherit;
}

/* --- Wrapper ------------------------------------------------ */
.tapestry-table-builder .tb-table-container {
    margin-top: 1rem;
    container-type: inline-size;
}

.tapestry-table-builder .table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    table-layout: fixed;
}

/* --- Header ------------------------------------------------- */

.tapestry-table-builder .table thead th {
    vertical-align: bottom;
    text-align: var(--tb-header-text-align);
    padding: var(--tb-header-padding);
    font-weight: var(--tb-header-font-weight);
    border-bottom: var(--tb-header-border-width) solid var(--tb-border);
    overflow-wrap: break-word;
}

/* --- Cells -------------------------------------------------- */

.tapestry-table-builder .table td {
    vertical-align: middle;
    padding: var(--tb-cell-padding);
}

.tapestry-table-builder.tb-center-text {
    --tb-cell-text-align: center;
}

.tapestry-table-builder.tb-center-text .table th,
.tapestry-table-builder.tb-center-text .table td {
    text-align: center;
}

.tapestry-table-builder .table th:first-child,
.tapestry-table-builder .table td:first-child {
    text-align: var(--tb-first-col-text-align);
}

.tapestry-table-builder.tb-style--default td {
    border-bottom: 1px solid var(--tb-border);
}

/* --- Striped style ------------------------------------------ */

.tapestry-table-builder.tb-style--striped tbody tr:nth-child(even) {
    background-color: var(--tb-stripe-bg);
}

/* --- Minimal style ------------------------------------------ */

.tapestry-table-builder.tb-style--minimal .tb-table-container {
    outline: 1px solid var(--tb-border);
    border-radius: var(--tb-minimal-radius);
    background-color: var(--tb-minimal-bg);
}

.tapestry-table-builder.tb-style--minimal .table th,
.tapestry-table-builder.tb-style--minimal .table td {
    border-right: 1px solid var(--tb-border);
    border-bottom: 1px solid var(--tb-border);
}

.tapestry-table-builder.tb-style--minimal .table th:first-child,
.tapestry-table-builder.tb-style--minimal .table td:first-child {
    border-left: 1px solid var(--tb-border);
}

.tapestry-table-builder.tb-style--minimal .table thead tr:first-child th {
    border-top: 1px solid var(--tb-border);
}

/* Top corners */
.tapestry-table-builder.tb-style--minimal .table thead tr:first-child th:first-child {
    border-radius: var(--tb-minimal-radius) 0 0 0;
}

.tapestry-table-builder.tb-style--minimal .table thead tr:first-child th:last-child {
    border-radius: 0 var(--tb-minimal-radius) 0 0;
}

/* Bottom corners — tbody when no footer, tfoot when footer exists */
.tapestry-table-builder.tb-style--minimal .table tbody:last-child tr:last-child td:first-child,
.tapestry-table-builder.tb-style--minimal .table tfoot tr:last-child td:first-child {
    border-radius: 0 0 0 var(--tb-minimal-radius);
}

.tapestry-table-builder.tb-style--minimal .table tbody:last-child tr:last-child td:last-child,
.tapestry-table-builder.tb-style--minimal .table tfoot tr:last-child td:last-child {
    border-radius: 0 0 var(--tb-minimal-radius) 0;
}

.tapestry-table-builder.tb-style--minimal .table thead th {
    background-color: var(--tb-minimal-header-bg);
    color: var(--tb-minimal-header-color);
    border-bottom-color: var(--tb-border);
    font-weight: var(--tb-minimal-header-font-weight);
}

.tapestry-table-builder.tb-style--minimal .table th,
.tapestry-table-builder.tb-style--minimal .table td {
    text-align: var(--tb-cell-text-align);
}

/* --- Row style variants ------------------------------------- */

.tapestry-table-builder .table .tb-row--section-header td,
.tapestry-table-builder .table .tb-row--section-header th {
    background-color: var(--tb-section-header-bg);
    color: var(--tb-section-header-color);
    font-weight: 700;
    font-size: var(--tb-section-header-font-size);
    text-transform: var(--tb-section-header-text-transform);
    letter-spacing: var(--tb-section-header-letter-spacing);
    border-top: var(--tb-section-header-border-width) solid var(--tb-border);
}

.tapestry-table-builder .table .tb-row--highlighted td {
    background-color: var(--tb-highlighted-row-bg);
    font-weight: 600;
    border-top: var(--tb-highlighted-row-border-width) solid var(--tb-border);
    border-bottom: var(--tb-highlighted-row-border-width) solid var(--tb-border);
}

.tapestry-table-builder .table .tb-row--subdued td {
    opacity: var(--tb-subdued-opacity);
    font-size: 0.9em;
}

/* --- Footer row -------------------------------------------- */

.tapestry-table-builder .table .tb-row--footer td {
    font-weight: var(--tb-footer-font-weight);
    border-bottom: none;
}

.tapestry-table-builder.tb-style--minimal .table .tb-row--footer td {
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-top: none;
}

/* --- Row label column --------------------------------------- */

.tapestry-table-builder .table .tb-row-label {
    font-weight: 600;
    text-align: left;
    vertical-align: middle;
    font-size: 0.9em;
}

.tapestry-table-builder .table .tb-row-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1em 0.45em;
    border-radius: var(--tb-badge-radius);
    background-color: var(--tb-tag-bg);
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* --- First column styles ------------------------------------ */

.tapestry-table-builder .table tbody td:first-child {
    font-weight: var(--tb-first-col-font-weight);
    font-size:   var(--tb-first-col-font-size);
    opacity:     var(--tb-first-col-opacity);
    color:       var(--tb-first-col-color);
}

/* Alignment overrides — direct selectors at (0,4,2) beat site-theme hardcoded first-child
   rules that compile to (0,4,1). Also sets the variable for any theme rules that consume it. */
.tapestry-table-builder.tb-first-col--align-left   { --tb-first-col-text-align: left; }
.tapestry-table-builder.tb-first-col--align-center { --tb-first-col-text-align: center; }
.tapestry-table-builder.tb-first-col--align-right  { --tb-first-col-text-align: right; }

.tapestry-table-builder.tb-first-col--align-left .table thead th:first-child,
.tapestry-table-builder.tb-first-col--align-left .table tbody td:first-child,
.tapestry-table-builder.tb-first-col--align-left .table tfoot td:first-child   { text-align: left; }

.tapestry-table-builder.tb-first-col--align-center .table thead th:first-child,
.tapestry-table-builder.tb-first-col--align-center .table tbody td:first-child,
.tapestry-table-builder.tb-first-col--align-center .table tfoot td:first-child { text-align: center; }

.tapestry-table-builder.tb-first-col--align-right .table thead th:first-child,
.tapestry-table-builder.tb-first-col--align-right .table tbody td:first-child,
.tapestry-table-builder.tb-first-col--align-right .table tfoot td:first-child  { text-align: right; }

/* Style variants — set the first-col tokens; override per site in the theme */
.tapestry-table-builder.tb-first-col--bold    { --tb-first-col-font-weight: 700; }

.tapestry-table-builder.tb-first-col--label {
    --tb-first-col-font-weight: 600;
    --tb-first-col-font-size:   0.9em;
}

.tapestry-table-builder.tb-first-col--subdued { --tb-first-col-opacity: var(--tb-subdued-opacity); }

/* --- Badge colour overrides --------------------------------- */
/* Defined by the site theme. Set --tb-highlight-badge-bg and   */
/* --tb-highlight-badge-color on the wrapper class.             */
/*                                                              */
/* .tapestry-table-builder.tb-badge--colour-1 { ... }          */
/* .tapestry-table-builder.tb-badge--colour-2 { ... }          */
/* .tapestry-table-builder.tb-badge--colour-3 { ... }          */

/* --- Highlighted column ------------------------------------- */

.tapestry-table-builder .table .tb-col--highlighted,
.tapestry-table-builder .table .tb-cell--highlighted {
    border-left: var(--tb-highlight-border-width) solid var(--tb-highlight);
    border-right: var(--tb-highlight-border-width) solid var(--tb-highlight);
    background-color: var(--tb-highlighted-col-bg);
}

.tapestry-table-builder .table thead .tb-col--highlighted {
    border-top: var(--tb-highlight-border-width) solid var(--tb-highlight);
    border-radius: var(--tb-highlight-radius) var(--tb-highlight-radius) 0 0;
    position: relative;
    overflow: visible;
    padding-top: 1.5rem;
}

.tapestry-table-builder .table thead .tb-col--highlighted:has(img) {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Close the highlight column at the bottom — tfoot when present, last body row otherwise */
.tapestry-table-builder .table tfoot .tb-col--highlighted,
.tapestry-table-builder .table .tb-body--terminal tr:last-child .tb-cell--highlighted {
    border-bottom: var(--tb-highlight-border-width) solid var(--tb-highlight);
    border-radius: 0 0 var(--tb-highlight-radius) var(--tb-highlight-radius);
    position: relative;
}

.tapestry-table-builder .tb-highlight-badge {
    padding: var(--tb-badge-padding);
    border-radius: var(--tb-badge-radius);
    background-color: var(--tb-highlight-badge-bg);
    font-size: var(--tb-badge-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tb-badge-letter-spacing);
    color: var(--tb-highlight-badge-color);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

/* --- Cell customizations ------------------------------------ */

.tapestry-table-builder .tb-text--xl {
    font-size: var(--tb-text-xl);
    font-weight: 700;
}

.tapestry-table-builder .tb-text--lg {
    font-size: var(--tb-text-lg);
}

.tapestry-table-builder .tb-text--sm {
    font-size: var(--tb-text-sm);
}

.tapestry-table-builder .is-lighter {
    opacity: var(--tb-lighter-opacity);
}

/* --- Cell images ------------------------------------------- */

.tapestry-table-builder .table td img {
    display: inline-block;
    vertical-align: middle;
}

/* --- Cell lists -------------------------------------------- */

.tapestry-table-builder .table td ul {
    list-style: disc;
    padding-left: 1.25em;
    margin: 0;
}

.tapestry-table-builder .table td ul li {
    margin-bottom: 0.25em;
}

.tapestry-table-builder.tb-center-text .table td ul {
    display: inline-block;
    text-align: left;
}

/* --- Cell icons -------------------------------------------- */

.tapestry-table-builder .tb-icon {
    display: inline-block;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1;
}

.tapestry-table-builder .tb-icon--check {
    color: var(--tb-check-color);
}

.tapestry-table-builder .tb-icon--cross {
    color: var(--tb-cross-color);
}

/* --- Mobile CTA -------------------------------------------- */

.tapestry-table-builder .tb-mobile-cta {
    display: none;
}

/* --- Disclaimer -------------------------------------------- */

.tapestry-table-builder .tb-disclaimer {
    margin-top: 1rem;
    color: var(--tb-disclaimer-color);
}

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

@media screen and (max-width: 768px) {
    .tapestry-table-builder .container.shell-colour {
        padding-left: 0;
        padding-right: 0;
    }

    .tapestry-table-builder .table th,
    .tapestry-table-builder .table td {
        font-size: 0.78rem;
        width: auto !important;
    }

    /* --- Mobile stack layout ------------------------------------ */
    .tapestry-table-builder.tb-mobile-stack .table,
    .tapestry-table-builder.tb-mobile-stack .table thead,
    .tapestry-table-builder.tb-mobile-stack .table tbody,
    .tapestry-table-builder.tb-mobile-stack .table tfoot {
        display: block;
        width: 100%;
    }

    .tapestry-table-builder.tb-mobile-stack .table tr {
        display: flex;
        flex-wrap: wrap;
    }

    .tapestry-table-builder.tb-mobile-stack .table td:first-child,
    .tapestry-table-builder.tb-mobile-stack .table th:first-child {
        flex: 0 0 100%;
    }

    .tapestry-table-builder.tb-mobile-stack .table td:not(:first-child),
    .tapestry-table-builder.tb-mobile-stack .table th:not(:first-child) {
        flex: 1;
        min-width: 0;
    }

    .tapestry-table-builder.tb-mobile-stack .table .tb-row--section-header td,
    .tapestry-table-builder.tb-mobile-stack .table .tb-row--section-header th {
        flex: 0 0 100%;
    }

    .tapestry-table-builder.tb-mobile-stack .table thead th:first-child,
    .tapestry-table-builder.tb-mobile-stack .table tbody td:first-child,
    .tapestry-table-builder.tb-mobile-stack .table tfoot td:first-child {
        text-align: center;
    }

    .tapestry-table-builder.tb-style--minimal.tb-mobile-stack .table th:nth-child(2),
    .tapestry-table-builder.tb-style--minimal.tb-mobile-stack .table td:nth-child(2) {
        border-left: 1px solid var(--tb-border);
    }

    .tapestry-table-builder .table .tb-row-label {
        font-size: 0.75rem;
    }

    .tapestry-table-builder .table td .button {
        display: none;
    }

    .tapestry-table-builder .table td:has(.button) {
        padding-top: 0;
        padding-bottom: 0;
    }

    .tapestry-table-builder .table .tb-row--footer td {
        border-top: none;
    }

    .tapestry-table-builder .tb-mobile-cta {
        display: block;
        margin-top: 1.5rem;
        padding: 0 1rem;
    }

    .tapestry-table-builder .tb-mobile-cta .button {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}