/* css styles */

/* Timer customization - smaller and right-aligned */
.base-timer {
    width: 120px;
    height: 120px;
    margin-left: auto;
    margin-right: 0;
}

.base-timer__label {
    font-size: 1.5rem;
}

/* Prompt callout - copyable text for chatbots */
.callout-prompt .callout-body {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Copy button styling */
.prompt-copy-btn {
    background-color: #495057;
    color: white;
    border: none;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.prompt-copy-btn:hover {
    background-color: #343a40;
}

.prompt-copy-btn.copied {
    background-color: #198754;
}

.prompt-copy-btn i {
    font-size: 0.85rem;
}

/* open-sans-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('..fonts/open-sans-v34-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('..fonts/open-sans-v34-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local(''),
        url('..fonts/open-sans-v34-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('..fonts/open-sans-v34-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Callouts: Magenta for actions, Gold for insights
   NOTE: Keep colors in sync with _brand.yml and custom.scss
   - Gold: #D4A03E (insight callouts)
   - Magenta: #A3195B (action callouts)
*/

/* Magenta callouts (experiment, individual, group, warning) */
.callout.callout-experiment .callout-icon,
.callout.callout-individual .callout-icon,
.callout.callout-group .callout-icon,
.callout.callout-warning .callout-icon {
    background-color: rgba(163, 25, 91, 0.12);
    color: #A3195B;
}

.callout.callout-experiment > .callout-body,
.callout.callout-individual > .callout-body,
.callout.callout-group > .callout-body,
.callout.callout-warning > .callout-body {
    background-color: rgba(163, 25, 91, 0.05);
}

/* Gold callouts (reflect, key-point, pro-tip, source-check) */
.callout.callout-reflect .callout-icon,
.callout.callout-key-point .callout-icon,
.callout.callout-pro-tip .callout-icon,
.callout.callout-source-check .callout-icon {
    background-color: rgba(212, 160, 62, 0.15);
    color: #D4A03E;
}

.callout.callout-reflect > .callout-body,
.callout.callout-key-point > .callout-body,
.callout.callout-pro-tip > .callout-body,
.callout.callout-source-check > .callout-body {
    background-color: rgba(212, 160, 62, 0.06);
}

/* Neutral callouts (demonstration, scenario, prompt) */
.callout.callout-demonstration .callout-icon,
.callout.callout-scenario .callout-icon,
.callout.callout-prompt .callout-icon {
    background-color: rgba(51, 51, 51, 0.10);
    color: #333333;
}

.callout.callout-demonstration > .callout-body,
.callout.callout-scenario > .callout-body,
.callout.callout-prompt > .callout-body {
    background-color: rgba(51, 51, 51, 0.03);
}

/* Tables: striped, readable, left-aligned */
.quarto-table-container table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.quarto-table-container table th,
.quarto-table-container table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
}

.quarto-table-container table thead th {
    background-color: #f3f4f6;
    color: #1f2933;
    font-weight: 700;
    border-bottom: 2px solid #e5e7eb;
}

.quarto-table-container table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

.quarto-table-container table tbody tr:hover {
    background-color: #f1f5f9;
}