/* =========================================================
   T2E - New Additions cards
   ========================================================= */

.t2e-new-additions {
    margin-top: 30px;
    margin-bottom: 30px;
}


/* Card */

.t2e-new-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: rgba(5, 28, 42, .94);

    border: 1px solid #294f60;
    border-radius: 8px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .18);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.t2e-new-card:hover {
    transform: translateY(-4px);

    border-color: #3f8096;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .28);
}


/* Image */

.t2e-new-card-image {
    width: 100%;
    height: 210px;

    overflow: hidden;

    background: #071d28;
}


.t2e-new-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .35s ease;
}


.t2e-new-card:hover
.t2e-new-card-image img {
    transform: scale(1.025);
}


/* Content */

.t2e-new-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 25px 26px 26px;
}


.t2e-new-card-type {
    margin-bottom: 10px;

    color: #49c9ed;

    font-size: .76rem;
    font-weight: 700;

    letter-spacing: .12em;
}


.t2e-new-card-title {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}


.t2e-new-card-text {
    margin: 0 0 24px;

    color: #a7bdc6;

    font-size: .95rem;
    line-height: 1.65;
}


/* Keeps buttons aligned even when text lengths differ */

.t2e-new-card-action {
    margin-top: auto;
    display: flex;
    justify-content: center;
}


/* Button */

.t2e-new-card-button {
    padding: 10px 20px;

    background: #033342;

    border: 1px solid #547784;
    border-radius: 5px;

    color: #ffffff !important;

    font-size: .9rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.t2e-new-card-button:hover,
.t2e-new-card-button:focus {
    background: #075069;

    border-color: #6fa1b2;

    color: #ffffff !important;
}


/* Mobile */

@media (max-width: 767px) {

    .t2e-new-card {
        margin-bottom: 24px;
    }

    .t2e-new-card-image {
        height: 200px;
    }

}

/* =========================================================
   T2E READING TOOLBAR
   ========================================================= */

.t2eReadingToolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    width: 100%;

    gap: 6px;

    margin: 18px 0 28px;
}


/* =========================================================
   READING TOOLBAR
   ========================================================= */

.t2eReadingToolbar {
    display: flex;
    align-items: center;
    gap: 6px;

    margin: 0 0 12px 0;
    padding: 0;

    width: 100%;
}


/* ---------------------------------------------------------
   ALL BUTTONS
   --------------------------------------------------------- */

.t2eReadingToolbar .t2eReadingButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 34px;

    margin: 0;
    padding: 5px 9px;

    /* Quiet translucent control rather than solid block */
    background: rgba(255, 255, 255, 0.42);

    border: 1px solid rgba(3, 51, 66, 0.30);
    border-radius: 6px;

    color: #033342;

    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;

    white-space: nowrap;

    cursor: pointer;
    box-sizing: border-box;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}


/* Icons */

.t2eReadingToolbar .t2eReadingButton i {
    margin-right: 6px;
    color: #075069;
    font-size: 0.9rem;
}


/* The A up/down buttons don't need a gap after the icon */

#t2eTextSmaller i,
#t2eTextLarger i {
    margin-right: 0;
}


/* ---------------------------------------------------------
   WIDTHS
   --------------------------------------------------------- */

#t2eListenArticle,
#t2eListenSection {
    flex: 1.15 1 0;
}

#t2eTextSmaller,
#t2eTextLarger {
    flex: 0.48 1 0;
}

#t2eDyslexiaFont,
#t2eRelaxedSpacing {
    flex: 1.3 1 0;
}

#t2eReadingReset {
    flex: 0.7 1 0;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.t2eReadingToolbar .t2eReadingButton:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: #075069;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}


/* ---------------------------------------------------------
   KEYBOARD FOCUS
   --------------------------------------------------------- */

.t2eReadingToolbar .t2eReadingButton:focus-visible {
    outline: 2px solid #49c9ed;
    outline-offset: 2px;
}


/* ---------------------------------------------------------
   CLICK
   --------------------------------------------------------- */

.t2eReadingToolbar .t2eReadingButton:active {
    transform: translateY(1px);
    box-shadow: none;
}


/* ---------------------------------------------------------
   SELECTED ACCESSIBILITY OPTION
   --------------------------------------------------------- */

.t2eReadingToolbar .t2eReadingButton[aria-pressed="true"] {
    background: #075069;
    border-color: #075069;
    color: #ffffff;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.t2eReadingToolbar
.t2eReadingButton[aria-pressed="true"] i {
    color: #ffffff;
}


/* =========================================================
   SMALLER SCREENS
   ========================================================= */

@media (max-width: 900px) {

    .t2eReadingToolbar {
        flex-wrap: wrap;
    }

    #t2eListenArticle,
    #t2eListenSection {
        flex: 1 1 calc(50% - 3px);
    }

    #t2eTextSmaller,
    #t2eTextLarger {
        flex: 1 1 calc(25% - 6px);
    }

    #t2eDyslexiaFont,
    #t2eRelaxedSpacing {
        flex: 1 1 calc(50% - 3px);
    }

    #t2eReadingReset {
        flex: 1 1 calc(50% - 3px);
    }

}


@media (max-width: 550px) {

    #t2eListenArticle,
    #t2eListenSection,
    #t2eDyslexiaFont,
    #t2eRelaxedSpacing {
        flex: 1 1 100%;
    }

    #t2eTextSmaller,
    #t2eTextLarger,
    #t2eReadingReset {
        flex: 1 1 30%;
    }

}

/* =========================================================
   ARTICLE READING OPTIONS — TEXT SIZE
   ========================================================= */

.t2eTextLarge p,
.t2eTextLarge li {
    font-size: 1.25rem !important;
}

.t2eTextSmall p,
.t2eTextSmall li {
    font-size: 0.8rem !important;
}

/* =========================================================
 ARTICLE READING OPTIONS — RELAXED SPACING
 ========================================================= */

.t2eRelaxedText p,
.t2eRelaxedText li {
  letter-spacing: 0.04em !important;
  word-spacing: 0.08em !important;
  line-height: 1.7 !important;
}

/* =========================================================
ARTICLE READING OPTIONS — DYSLEXIA-FRIENDLY
========================================================= */

.t2eDyslexiaText p,
.t2eDyslexiaText li,
.t2eDyslexiaText h2,
.t2eDyslexiaText h3,
.t2eDyslexiaText h4 {
font-family: "OpenDyslexic" !important;
}



/* =========================================================
OPENDYSLEXIC
========================================================= */

@font-face {
 font-family: "OpenDyslexic";
 src: url("https://train2enable.com/fonts/opendyslexic/OpenDyslexic-Regular.otf")
      format("opentype");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: "OpenDyslexic";
 src: url("https://train2enable.com/fonts/opendyslexic/OpenDyslexic-Bold.otf")
      format("opentype");
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: "OpenDyslexic";
 src: url("https://train2enable.com/fonts/opendyslexic/OpenDyslexic-Italic.otf")
      format("opentype");
 font-weight: normal;
 font-style: italic;
}

@font-face {
 font-family: "OpenDyslexic";
 src: url("https://train2enable.com/fonts/opendyslexic/OpenDyslexic-BoldItalic.otf")
      format("opentype");
 font-weight: bold;
 font-style: italic;
}

/* =========================================================
   Train2Enable Footer
   ========================================================= */

.t2e-footer {
    margin-top: 0;
    padding: 2.5rem 0 1.25rem;
    background: linear-gradient(180deg, #10243a 0%, #091725 100%);
    border-top: 1px solid rgba(76, 190, 220, 0.55);
    color: #d8e5ee;
}

.t2e-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.t2e-footer-brand {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.t2e-footer-logo {
    width: 120px;
    height: auto;
}

.t2e-footer-brand p {
    margin: 0;
    max-width: 420px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #b9cad6;
}

.t2e-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid rgba(76, 190, 220, 0.7);
    border-radius: 5px;
    color: #dff7ff;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.t2e-footer-contact a:hover {
    background: rgba(76, 190, 220, 0.12);
    border-color: #6edcf5;
    color: #ffffff;
    text-decoration: none;
}

.t2e-footer-bottom {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    font-size: 0.8rem;
    color: #8195a5;
}


/* Mobile */

@media (max-width: 767px) {

    .t2e-footer-content,
    .t2e-footer-brand {
        flex-direction: column;
        text-align: center;
    }

    .t2e-footer-content {
        gap: 1.5rem;
    }

    .t2e-footer-brand {
        gap: 1rem;
    }

    .t2e-footer-logo {
        width: 105px;
    }

}

/* =========================================================
   AI Terminology Resource
   ========================================================= */

.t2e-term-intro {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* Search */

.t2e-term-search {
    position: relative;
    max-width: 650px;
    margin: 2rem auto 1.5rem;
}

.t2e-term-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #4fbdd8;
    font-size: 1.1rem;
}

.t2e-term-search input {
    width: 100%;
    padding: 0.9rem 1rem 0.9rem 3rem;
    border: 1px solid #4b9eb5;
    border-radius: 6px;
    background: #0d2638;
    color: #ffffff;
    font-size: 1rem;
    outline: none;
}

.t2e-term-search input::placeholder {
    color: #9db7c5;
}

.t2e-term-search input:focus {
    border-color: #6edcf5;
    box-shadow: 0 0 0 2px rgba(110, 220, 245, 0.12);
}


/* Alphabet navigation */

.t2e-term-alphabet {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: 0 auto 2rem;
}

.t2e-term-alphabet button {
    min-width: 36px;
    height: 36px;
    padding: 0 0.65rem;
    border: 1px solid #5a9db1;
    border-radius: 4px;
    background: #102c40;
    color: #dff7ff;
    cursor: pointer;
    font-weight: 600;
}

.t2e-term-alphabet button:hover,
.t2e-term-alphabet button.active {
    background: #167894;
    border-color: #70d8ef;
    color: #ffffff;
}


/* Glossary */

.t2e-term-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.t2e-term-card {
    padding: 1.35rem 1.5rem;
    background: linear-gradient(145deg, #102c40, #0b2233);
    border: 1px solid rgba(75, 174, 200, 0.55);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.t2e-term-card h3 {
    margin: 0 0 0.65rem;
    color: #70d8ef;
    font-size: 1.2rem;
    font-weight: 600;
}

.t2e-term-card p {
    margin: 0;
    color: #e0ebf1;
    font-size: 0.95rem;
    line-height: 1.6;
}


/* No search results */

.t2e-term-no-results {
    display: none;
    margin: 2rem auto;
    padding: 1.5rem;
    text-align: center;
    color: #476473;
    font-size: 1rem;
}

.t2e-term-no-results i {
    margin-right: 0.5rem;
}


/* Mobile */

@media (max-width: 767px) {

    .t2e-term-list {
        grid-template-columns: 1fr;
    }

    .t2e-term-card {
        padding: 1.15rem;
    }

    .t2e-term-alphabet {
        gap: 0.3rem;
    }

}

/* Terminology categories */

.t2e-term-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 auto 1.25rem;
}

.t2e-term-categories button {
    padding: 0.5rem 0.85rem;
    border: 1px solid #5a9db1;
    border-radius: 5px;
    background: #102c40;
    color: #dff7ff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
}

.t2e-term-categories button:hover,
.t2e-term-categories button.active {
    background: #167894;
    border-color: #70d8ef;
    color: #ffffff;
}

.t2e-term-type {
    display: block;
    margin-bottom: 0.35rem;
    color: #7fa8b8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* =========================================================
   T2E PROFESSIONAL TOOLS
   Decision Table Generator
   ========================================================= */


/* Main tool area */

.t2e-tool-intro {
    max-width: 820px;
    margin: 3rem auto 2.5rem;
    text-align: center;
}

.t2e-tool-intro h1 {
    margin-bottom: 1rem;
    color: #173f59;
    font-size: 2.2rem;
    font-weight: 600;
}

.t2e-tool-lead {
    margin: 0 auto 1.25rem;
    color: #405d6d;
    font-size: 1.05rem;
    line-height: 1.7;
}

.t2e-tool-privacy {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .55rem .9rem;

    border: 1px solid #b9d9e3;
    border-radius: 5px;

    background: #f4fafc;
    color: #476978;

    font-size: .82rem;
}

.t2e-tool-privacy i {
    color: #2589a5;
}


/* ---------------------------------------------------------
   Professional / Learning mode
   --------------------------------------------------------- */

.t2e-tool-mode {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;

    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;

    border: 1px solid #c9dbe3;
    border-radius: 8px;

    background: #f7fafc;
}

.t2e-tool-mode-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.t2e-tool-mode-text strong {
    color: #173f59;
    font-size: .95rem;
}

.t2e-tool-mode-text span {
    color: #6a808c;
    font-size: .82rem;
}

.t2e-mode-switch {
    display: flex;
    flex-shrink: 0;
}

.t2e-mode-button {
    padding: .65rem 1rem;

    border: 1px solid #8fb7c5;
    background: #ffffff;
    color: #466878;

    font-size: .84rem;
    font-weight: 600;

    cursor: pointer;
    transition: all .2s ease;
}

.t2e-mode-button:first-child {
    border-radius: 5px 0 0 5px;
}

.t2e-mode-button:last-child {
    margin-left: -1px;
    border-radius: 0 5px 5px 0;
}

.t2e-mode-button i {
    margin-right: .4rem;
}

.t2e-mode-button:hover {
    background: #edf7fa;
}

.t2e-mode-button.active {
    position: relative;
    z-index: 1;

    border-color: #167894;
    background: #167894;
    color: #ffffff;
}


/* ---------------------------------------------------------
   Main panels
   --------------------------------------------------------- */

.t2e-tool-panel {
    margin-bottom: 1.5rem;
    padding: 1.5rem;

    border: 1px solid #c5d8e0;
    border-radius: 8px;

    background: #ffffff;

    box-shadow: 0 3px 12px rgba(16, 54, 74, .08);
}

.t2e-tool-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    margin-bottom: 1.4rem;
}

.t2e-tool-step {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #167894;
    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;
}

.t2e-tool-panel-heading h2 {
    margin: 0 0 .25rem;

    color: #173f59;

    font-size: 1.2rem;
    font-weight: 600;
}

.t2e-tool-panel-heading p {
    margin: 0;

    color: #6b818d;

    font-size: .86rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Form fields
   --------------------------------------------------------- */

.t2e-tool-field {
    margin-bottom: 1rem;
}

.t2e-tool-field:last-child {
    margin-bottom: 0;
}

.t2e-tool-field label {
    display: block;

    margin-bottom: .4rem;

    color: #294f64;

    font-size: .86rem;
    font-weight: 600;
}

.t2e-tool-field label span {
    color: #8397a1;
    font-weight: 400;
}

.t2e-tool-field input,
.t2e-tool-field textarea,
.t2e-definition-item input {
    width: 100%;

    padding: .7rem .8rem;

    border: 1px solid #adc7d2;
    border-radius: 5px;

    background: #fbfdfe;
    color: #263e4b;

    font-family: inherit;
    font-size: .92rem;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.t2e-tool-field textarea {
    resize: vertical;
}

.t2e-tool-field input:focus,
.t2e-tool-field textarea:focus,
.t2e-definition-item input:focus {
    border-color: #269bb8;

    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(38, 155, 184, .10);
}


/* ---------------------------------------------------------
   Conditions / Actions grid
   --------------------------------------------------------- */

.t2e-definition-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1.25rem;
}

.t2e-definition-grid .t2e-tool-panel {
    margin-bottom: 1.5rem;
}


/* Individual condition/action */

.t2e-definition-list {
    display: flex;
    flex-direction: column;

    gap: .65rem;

    margin-bottom: 1rem;
}

.t2e-definition-item {
    display: grid;

    grid-template-columns:
        30px minmax(0, 1fr) 36px;

    align-items: center;

    gap: .55rem;
}

.t2e-definition-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #e5f2f6;
    color: #23758d;

    font-size: .76rem;
    font-weight: 700;
}


/* Delete */

.t2e-delete-definition {
    width: 34px;
    height: 34px;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 4px;

    background: transparent;
    color: #9aaab2;

    cursor: pointer;

    transition: all .2s ease;
}

.t2e-delete-definition:hover {
    border-color: #e2b6b6;

    background: #fff4f4;
    color: #b64b4b;
}


/* Add */

.t2e-add-definition {
    padding: .55rem .85rem;

    border: 1px solid #75afc0;
    border-radius: 5px;

    background: #ffffff;
    color: #26758c;

    font-size: .82rem;
    font-weight: 600;

    cursor: pointer;

    transition: all .2s ease;
}

.t2e-add-definition i {
    margin-right: .4rem;
}

.t2e-add-definition:hover {
    border-color: #269bb8;

    background: #edf8fb;
    color: #155e73;
}


/* ---------------------------------------------------------
   Learning help
   --------------------------------------------------------- */

.t2e-learning-help {
    display: flex;
    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1.5rem;
    padding: 1.15rem 1.3rem;

    border: 1px solid #8fc8d8;
    border-left: 4px solid #269bb8;
    border-radius: 6px;

    background: #eff9fc;
    color: #345968;
}

.t2e-learning-help > i {
    margin-top: .15rem;

    color: #2589a5;
    font-size: 1.3rem;
}

.t2e-learning-help strong {
    color: #175e74;
}

.t2e-learning-help p {
    margin: .25rem 0 0;

    font-size: .88rem;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   Primary action
   --------------------------------------------------------- */

.t2e-tool-next {
    margin: .5rem 0 3rem;

    text-align: right;
}

.t2e-primary-action {
    padding: .8rem 1.3rem;

    border: 1px solid #126d87;
    border-radius: 5px;

    background: #167894;
    color: #ffffff;

    font-size: .9rem;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 3px 8px rgba(16, 87, 108, .18);

    transition: all .2s ease;
}

.t2e-primary-action i {
    margin-left: .55rem;
}

.t2e-primary-action:hover {
    border-color: #105f76;

    background: #126b83;

    box-shadow: 0 4px 10px rgba(16, 87, 108, .25);
}


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

@media (max-width: 767px) {

    .t2e-tool-intro {
        margin-top: 2rem;
    }

    .t2e-tool-intro h1 {
        font-size: 1.7rem;
    }

    .t2e-tool-mode {
        flex-direction: column;
        align-items: stretch;

        gap: 1rem;
    }

    .t2e-mode-switch {
        width: 100%;
    }

    .t2e-mode-button {
        flex: 1;
    }

    .t2e-definition-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .t2e-tool-panel {
        padding: 1.2rem;
    }

    .t2e-tool-panel-heading {
        gap: .75rem;
    }

    .t2e-tool-next {
        text-align: center;
    }

    .t2e-primary-action {
        width: 100%;
    }

}

/* =========================================================
   DECISION TABLE WORKSPACE
   ========================================================= */

.t2e-decision-workspace {
    margin: 2rem 0 4rem;
    padding: 2rem;

    border: 1px solid #d2e0e6;
    border-radius: 10px;

    background: #ffffff;

    box-shadow: 0 4px 16px rgba(16, 54, 74, .06);
}


/* Decision title */

.t2e-decision-summary {
    display: flex;
    flex-direction: column;

    gap: .35rem;

    margin: 0 0 2rem;
    padding: 1rem 1.25rem;

    border-left: 3px solid #269bb8;

    background: #f5f9fb;
}

.t2e-decision-summary strong {
    color: #254e63;
    font-size: 1rem;
    font-weight: 600;
}

.t2e-decision-summary span {
    color: #718690;
    font-size: .85rem;
    line-height: 1.5;
}


/* Table container */

.t2e-table-scroll {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #d7e2e7;
    border-radius: 8px;

    background: #ffffff;
}


/* Table */

.t2e-decision-table {
    width: 100%;

    min-width: 700px;

    border-collapse: separate;
    border-spacing: 0;

    background: #ffffff;
}


/* General cells */

.t2e-decision-table th,
.t2e-decision-table td {
    padding: .9rem .8rem;

    border: 0;
    border-bottom: 1px solid #e4ecef;

    text-align: center;
}


/* Rule headings */

.t2e-decision-table thead th {
    padding-top: 1rem;
    padding-bottom: 1rem;

    background: #f1f6f8;
    color: #456776;

    font-size: .8rem;
    font-weight: 600;
}

.t2e-decision-table thead th:first-child {
    padding-left: 1.25rem;

    color: #718791;

    text-align: left;
    font-weight: 500;
}


/* Condition and action descriptions */

.t2e-decision-table tbody th {
    min-width: 280px;

    padding-left: 1.25rem;
    padding-right: 2rem;

    background: #ffffff;
    color: #405f6d;

    text-align: left;

    font-size: .88rem;
    font-weight: 400;
    line-height: 1.45;
}


/* Give each rule some horizontal breathing room */

.t2e-decision-table tbody td,
.t2e-decision-table thead th:not(:first-child) {
    min-width: 72px;
}


/* ---------------------------------------------------------
   Actions divider
   --------------------------------------------------------- */

.t2e-action-divider td {
    padding: 1.4rem 1.25rem .7rem;

    border-bottom: 1px solid #dce7eb;

    background: #ffffff;
    color: #63818e;

    text-align: left;

    font-size: .7rem;
    font-weight: 600;

    letter-spacing: .12em;
}


/* ---------------------------------------------------------
   Interactive rule cells
   --------------------------------------------------------- */

.t2e-rule-cell {
    width: 44px;
    height: 40px;

    padding: 0;

    border: 1px solid #c7d8df;
    border-radius: 6px;

    background: #f9fbfc;
    color: #3d6e81;

    font-size: .9rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.t2e-rule-cell:hover {
    border-color: #58a9bd;

    background: #f0f8fa;

    box-shadow: 0 0 0 2px rgba(38, 155, 184, .08);
}


/* Condition values */

.t2e-condition-cell {
    color: #34758a;
}


/* Action values */

.t2e-action-cell {
    color: #38765b;
}


/* ---------------------------------------------------------
   Add Rule
   --------------------------------------------------------- */

.t2e-rule-controls {
    margin-top: 1.5rem;
}


/* ---------------------------------------------------------
   Key
   --------------------------------------------------------- */

.t2e-rule-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: .75rem 1.25rem;

    margin-top: 1.5rem;
    padding: 1rem 0 0;

    border-top: 1px solid #e1e9ed;

    color: #748791;

    font-size: .76rem;
}

.t2e-rule-key strong {
    color: #506c79;
    font-weight: 600;
}

.t2e-rule-key span b {
    display: inline-block;

    min-width: 20px;

    color: #34758a;

    text-align: center;
    font-weight: 600;
}


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

@media (max-width: 767px) {

    .t2e-decision-workspace {
        margin-top: 1.5rem;
        padding: 1.2rem;
    }

    .t2e-decision-summary {
        margin-bottom: 1.5rem;
    }

    .t2e-decision-table {
        min-width: 620px;
    }

    .t2e-decision-table tbody th {
        min-width: 220px;
        padding-left: 1rem;
        padding-right: 1.25rem;
    }

    .t2e-decision-table tbody td,
    .t2e-decision-table thead th:not(:first-child) {
        min-width: 66px;
    }

}

/* =========================================================
   LIMITED-ENTRY DECISION TABLE
   ========================================================= */

.t2e-limited-table {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);

    width: 100%;
    margin-top: 1.5rem;

    border: 1px solid #cbdbe2;
    border-radius: 8px;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   LEFT-HAND STUB QUADRANTS
   ========================================================= */

.t2e-stub-area {
    border-right: 2px solid #9dbbc7;

    background: #ffffff;
}

.t2e-quadrant-heading,
.t2e-entry-heading {
    height: 44px;

    display: flex;
    align-items: center;

    padding: 0 1rem;

    background: #edf5f8;
    color: #315d70;

    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;

    border-bottom: 1px solid #cbdbe2;
}

.t2e-stub-row {
    height: 44px;

    display: flex;
    align-items: center;

    padding: 0 1rem;

    border-bottom: 1px solid #e0e9ed;

    color: #405f6d;

    font-size: .86rem;
    font-weight: 400;

    white-space: nowrap;
}


/* =========================================================
   SEPARATION BETWEEN CONDITIONS AND ACTIONS
   ========================================================= */

.t2e-quadrant-separator,
.t2e-entry-separator {
    height: 14px;

    background: #f7fafb;

    border-top: 1px solid #cbdbe2;
    border-bottom: 1px solid #cbdbe2;
}


/* =========================================================
   RIGHT-HAND SCROLLABLE AREA
   ========================================================= */

.t2e-entry-viewport {
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    background: #ffffff;
}

.t2e-entry-table {
    width: max-content;
    min-width: 100%;
}


/* =========================================================
   RULE ROWS
   ========================================================= */

.t2e-entry-row {
    display: flex;

    height: 44px;

    border-bottom: 1px solid #e0e9ed;
}

.t2e-entry-cell {
    flex: 0 0 58px;

    width: 58px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 0;
    border-right: 1px solid #e0e9ed;

    background: #ffffff;
    color: #405f6d;

    font-family: inherit;
    font-size: .84rem;
    font-weight: 400;
}


/* =========================================================
   RULE NUMBERS
   ========================================================= */

.t2e-rule-number-row {
    background: #f8fafb;
}

.t2e-rule-number-row .t2e-entry-cell {
    background: #f8fafb;

    color: #65808c;

    font-size: .72rem;
    font-weight: 600;
}


/* =========================================================
   CONDITION ENTRIES
   ========================================================= */

.t2e-condition-entry {
    color: #315f72;
}


/* =========================================================
   ACTION ENTRIES
   ========================================================= */

.t2e-action-entry {
    cursor: pointer;

    color: #39745a;

    transition:
        background .15s ease,
        color .15s ease;
}

.t2e-action-entry:hover {
    background: #edf8fa;
}

.t2e-action-entry:focus {
    position: relative;
    z-index: 1;

    outline: 2px solid #58a9bd;
    outline-offset: -2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .t2e-limited-table {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .t2e-stub-row {
        padding: 0 .75rem;

        font-size: .78rem;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    .t2e-quadrant-heading,
    .t2e-entry-heading {
        padding: 0 .75rem;
    }

    .t2e-entry-cell {
        flex-basis: 52px;
        width: 52px;
    }

}

/* =========================================================
   FOUR-QUADRANT LIMITED-ENTRY DECISION TABLE
   ========================================================= */

.t2e-dt-shell {
    display: grid;

    grid-template-columns:
        290px minmax(0, 1fr);

    width: 100%;

    margin-top: 1.5rem;

    border: 1px solid #c8d9e0;
    border-radius: 8px;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   FIXED LEFT-HAND SIDE
   ========================================================= */

.t2e-dt-stubs {
    position: relative;
    z-index: 2;

    border-right: 2px solid #9dbbc7;

    background: #ffffff;
}


/* blank row opposite Condition Entries / Action Entries */

.t2e-dt-left-section-title-blank {
    height: 42px;

    box-sizing: border-box;

    background: #f3f7f9;

    border-bottom: 1px solid #cfdee4;
}


/* Condition Stubs / Action Stubs */

.t2e-dt-stub-heading {
    height: 44px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: 0 1rem;

    background: #e9f2f5;

    border-bottom: 1px solid #c8d9e0;

    color: #315d70;

    font-size: .78rem;
    font-weight: 600;

    letter-spacing: .03em;
}

.t2e-dt-action-stub-heading {
    height: 42px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: 0 1rem;

    background: #e9f2f5;

    border-bottom: 1px solid #c8d9e0;

    color: #315d70;

    font-size: .78rem;
    font-weight: 600;

    letter-spacing: .03em;
}

/* individual condition/action stubs */

.t2e-dt-stub-row {
    height: 44px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: 0 1rem;

    border-bottom: 1px solid #dfe9ed;

    background: #ffffff;

    color: #405f6d;

    font-size: .85rem;
    font-weight: 400;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   SHARED SCROLLABLE RIGHT-HAND SIDE
   ========================================================= */

.t2e-dt-entry-viewport {
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    background: #ffffff;
}


/*
   This contains BOTH Condition Entries and Action Entries.

   Therefore one horizontal scrollbar moves both quadrants
   together.
*/

.t2e-dt-entries {
    min-width: 100%;

    background: #ffffff;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.t2e-dt-section-title {

    min-width: 100%;
    min-width: max-content;

    height: 42px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: 0 1rem;

    background: #f3f7f9;

    border-bottom: 1px solid #cfdee4;

    color: #315d70;

    font-size: .78rem;
    font-weight: 600;

    letter-spacing: .03em;
}


/* =========================================================
   RIGHT-HAND RULE ROWS
   ========================================================= */

   .t2e-dt-entry-row {
       display: flex;

       width: 100%;
       min-width: max-content;

       height: 44px;
   }


/* Rule headings R1, R2, R3... */

.t2e-dt-rule-heading,
.t2e-dt-action-heading-cell,
.t2e-dt-condition-entry,
.t2e-dt-action-entry {

    flex: 1 0 56px;

    min-width: 56px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 0;
    border-right: 1px solid #dfe9ed;
    border-bottom: 1px solid #dfe9ed;

    font-family: inherit;
}


/* R1 R2 R3... */

.t2e-dt-rule-heading {
    background: #e9f2f5;

    color: #526f7d;

    font-size: .72rem;
    font-weight: 600;
}


/* blank cells opposite Action Stubs */

.t2e-dt-action-heading-cell {
    background: #e9f2f5;
}


/* =========================================================
   CONDITION ENTRIES
   ========================================================= */

.t2e-dt-condition-entry {
    background: #ffffff;

    color: #315f72;

    font-size: .84rem;
    font-weight: 500;
}


/* =========================================================
   ACTION ENTRIES
   ========================================================= */

.t2e-dt-action-entry {
    padding: 0;

    background: #ffffff;

    color: #367358;

    font-size: .88rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}


.t2e-dt-action-entry:hover {
    background: #eef8fa;
}


.t2e-dt-action-entry:focus {
    position: relative;

    z-index: 1;

    outline: 2px solid #58a9bd;
    outline-offset: -2px;
}


/* =========================================================
   CONDITION / ACTION DIVIDER
   ========================================================= */

.t2e-dt-divider {
    height: 12px;

    box-sizing: border-box;

    background: #f8fafb;

    border-top: 1px solid #c8d9e0;
    border-bottom: 1px solid #c8d9e0;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.t2e-dt-entry-viewport::-webkit-scrollbar {
    height: 12px;
}

.t2e-dt-entry-viewport::-webkit-scrollbar-track {
    background: #edf2f4;
}

.t2e-dt-entry-viewport::-webkit-scrollbar-thumb {
    background: #aac0c9;
    border-radius: 6px;
}

.t2e-dt-entry-viewport::-webkit-scrollbar-thumb:hover {
    background: #8caab6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .t2e-dt-shell {
        grid-template-columns:
            190px minmax(0, 1fr);
    }

    .t2e-dt-stub-heading,
    .t2e-dt-stub-row {
        padding-left: .7rem;
        padding-right: .7rem;
    }

    .t2e-dt-stub-row {
        font-size: .76rem;
    }

}

/* Rule heading with exclusion control */

.t2e-dt-rule-heading {
    position: relative;
    flex-direction: column;
    gap: 2px;
}

.t2e-dt-rule-label {
    line-height: 1;
}

.t2e-dt-rule-exclude {
    position: absolute;
    top: 2px;
    right: 2px;

    width: 15px;
    height: 15px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #8ba0aa;

    font-size: 9px;
    line-height: 1;

    cursor: pointer;
}

.t2e-dt-rule-exclude:hover {
    background: #f4dddd;
    color: #9b4141;
}

.t2e-dt-rule-exclude:focus {
    outline: 1px solid #9b4141;
    outline-offset: 1px;
}

.t2e-dt-rule-controls {
    margin-top: 1rem;
    padding: .65rem .85rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #f7fafb;
    border: 1px solid #d7e3e8;
    border-radius: 6px;

    color: #526f7d;
    font-size: .8rem;
}

.t2e-dt-restore-rules {
    padding: .35rem .7rem;

    border: 1px solid #b8ccd4;
    border-radius: 4px;

    background: #ffffff;
    color: #315d70;

    font-family: inherit;
    font-size: .78rem;

    cursor: pointer;
}

.t2e-dt-restore-rules:hover {
    background: #e9f2f5;
}

.t2e-dt-restore-rules i {
    margin-right: .3rem;
}

.t2e-dt-exclude-choice {
    margin-top: 1rem;
    padding: .85rem 1rem;

    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    background: #f7fafb;
    border: 1px solid #d7e3e8;
    border-radius: 6px;

    color: #405f6d;
    font-size: .82rem;
}

.t2e-dt-exclude-choice-text {
    flex: 1;
}

.t2e-dt-exclude-choice-buttons {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.t2e-dt-exclude-reason,
.t2e-dt-exclude-cancel {
    padding: .38rem .7rem;

    border: 1px solid #b8ccd4;
    border-radius: 4px;

    background: #ffffff;
    color: #315d70;

    font-family: inherit;
    font-size: .78rem;

    cursor: pointer;
}

.t2e-dt-exclude-reason:hover {
    background: #e9f2f5;
}

.t2e-dt-exclude-cancel {
    color: #687f89;
}

.t2e-dt-exclude-cancel:hover {
    background: #f0f3f4;
}

@media (max-width: 767px) {

    .t2e-dt-exclude-choice {
        flex-direction: column;
        align-items: flex-start;
    }

    .t2e-dt-exclude-choice-buttons {
        flex-wrap: wrap;
    }
}

.t2e-dt-analysis-action {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.t2e-dt-analysis {
    margin-top: 1rem;
    padding: 1rem 1.1rem;

    background: #f7fafb;
    border: 1px solid #d7e3e8;
    border-radius: 6px;

    color: #405f6d;
}

.t2e-dt-analysis-heading {
    margin-bottom: .35rem;

    color: #315d70;
    font-size: .95rem;
    font-weight: 600;
}

.t2e-dt-analysis-intro {
    margin: 0;

    color: #617985;
    font-size: .82rem;
    line-height: 1.5;
}

/* =========================================================
   AI ARTICLE CALLOUT
   Subtle emphasis for key observations
   ========================================================= */

.t2eArticleCallout {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(73, 201, 237, 0.18);
    border-left: 4px solid rgba(73, 201, 237, 0.75);
    border-radius: 6px;

    color: inherit;

    line-height: 1.6;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08);
}

.t2eArticleCallout strong {
    color: #ffffff;
    font-weight: 600;
}


/* Slightly tighter on phones */

@media (max-width: 550px) {

    .t2eArticleCallout {
        margin: 1.25rem 0;
        padding: 0.85rem 1rem;
        border-left-width: 3px;
    }

}

/* =========================================================
   AI ARTICLE PULL QUOTE
   ========================================================= */

.t2eArticlePullQuote {
    max-width: 880px;

    margin: 2.25rem auto;
    padding: 1.4rem 2rem;

    background: #073b4c;

    border: 1px solid rgba(73, 201, 237, 0.45);
    border-left: 5px solid #49c9ed;
    border-radius: 7px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);

    box-sizing: border-box;
}


/* Remove browser's normal blockquote styling */

.t2eArticlePullQuote p {
    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 1.05rem;
    line-height: 1.55;
    font-style: normal;
}


/* Space between the two questions */

.t2eArticlePullQuote p + p {
    margin-top: 0.85rem;
}


/* The questions themselves */

.t2eArticlePullQuote strong {
    color: #ffffff;
    font-weight: 600;
}


/* Make the bias-testing question the key takeaway */

.t2eArticlePullQuote p:last-child strong {
    color: #49c9ed;
}


/* ---------------------------------------------------------
   SMALL SCREENS
   --------------------------------------------------------- */

@media (max-width: 550px) {

    .t2eArticlePullQuote {
        margin: 1.5rem 0;
        padding: 1.1rem 1.2rem;

        border-left-width: 4px;
    }

    .t2eArticlePullQuote p {
        font-size: 0.98rem;
    }

}

/* =========================================================
   ARTICLE CLOSING QUESTION
   Final takeaway at the end of an article
   ========================================================= */

.t2eArticleClosingQuestion {
    max-width: 880px;

    margin: 2.5rem auto 1.5rem auto;
    padding: 1.5rem 2rem;

    background: #073b4c;

    border: 1px solid rgba(73, 201, 237, 0.45);
    border-radius: 7px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);

    text-align: center;

    box-sizing: border-box;
}


/* Introductory line */

.t2eArticleClosingQuestion span {
    display: block;

    margin-bottom: 0.45rem;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
}


/* The question itself */

.t2eArticleClosingQuestion strong {
    display: block;

    color: #49c9ed;

    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.3;
}


/* Small cyan finishing rule */

.t2eArticleClosingQuestion::after {
    content: "";

    display: block;

    width: 60px;
    height: 2px;

    margin: 0.9rem auto 0 auto;

    background: rgba(73, 201, 237, 0.7);

    border-radius: 2px;
}

.t2eArticleClosingQuestion p {
    color: rgba(255, 255, 255, 0.22);
}


/* ---------------------------------------------------------
   SMALL SCREENS
   --------------------------------------------------------- */

@media (max-width: 550px) {

    .article-closing-question {
        margin: 2rem 0 1.25rem 0;
        padding: 1.25rem 1rem;
    }

    .article-closing-question span {
        font-size: 0.9rem;
    }

    .article-closing-question strong {
        font-size: 1.3rem;
    }

}

.t2e-resource-access {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.65rem;
    border-radius: 4px;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.t2e-resource-access-member {
    display: inline-block;

    color: #102b38;
    background: #8ed9e8;
    border: 1px solid #b5edf5;

    padding: 0.32rem 0.75rem;
    margin-bottom: 1.15rem;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    line-height: 1;
    text-transform: uppercase;
}

.t2e-resource-access-premium {
    display: inline-block;

    color: #102b38;
    background: #e6c56a;
    border: 1px solid #f3d98b;

    padding: 0.32rem 0.75rem;
    margin-bottom: 1.15rem;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    line-height: 1;
    text-transform: uppercase;
}

.t2e-register-marketing {
    margin: 5px 0 24px 0;
    padding: 16px 18px;

    background: rgba(3, 18, 30, 0.42);

    border: 1px solid rgba(84, 119, 132, 0.65);
    border-radius: 6px;
}

.t2e-register-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin: 0;

    color: #d2dde3;
    font-size: 0.94rem;
    line-height: 1.5;

    cursor: pointer;
}

.t2e-register-checkbox input {
    margin-top: 5px;
    flex: 0 0 auto;
}

.t2e-register-success {
    margin: 0 0 26px 0;
    padding: 15px 18px;

    background: rgba(25, 105, 75, 0.28);

    border: 1px solid rgba(90, 205, 155, 0.55);
    border-left: 5px solid #58c998;
    border-radius: 5px;

    color: #ffffff;
}