/*
 * ============================================================================
 * TU Delft design tokens
 * ----------------------------------------------------------------------------
 * Single source of truth for the book's interactive-widget palette. Every
 * bespoke {raw} html widget, the progress checkboxes, and the rules below all
 * read these variables, so re-branding the whole book is a one-block edit here.
 * Values are the official TU Delft colours (cyan is the signature accent;
 * royal / dark blue are the contrast-safe workhorses for text and buttons).
 *
 * Widget cards are deliberately self-contained LIGHT panels in both light and
 * dark site themes (they carry their own background + text colour), so their
 * internal contrast holds regardless of the surrounding page theme.
 * ============================================================================
 */
:root {
    --abm-primary:        #00A6D6;  /* TU Delft cyan, signature accent, stat values, sliders, focus */
    --abm-primary-strong: #006BAE;  /* contrast-adjusted royal blue for text, links, and buttons      */
    --abm-primary-dark:   #0C2340;  /* dark blue, hover / active                                     */
    --abm-ink:            #0C2340;  /* headings / strong text                                         */
    --abm-body:           #1a2b38;  /* long-form body text inside widgets                             */
    --abm-muted:          #5C5C5C;  /* muted / secondary text (TU Delft dark grey)                    */
    --abm-surface:        #E6F6FA;  /* widget card background (TU Delft Blue-10%)                      */
    --abm-surface-2:      #ffffff;  /* inner panels / stat tiles                                      */
    --abm-panel:          #EAF4FB;  /* pale panel fills                                               */
    --abm-border:         #B3E0F2;  /* light cyan border                                              */
    --abm-empty:          #E7E7E7;  /* grid empty cells (TU Delft grey-15)                            */
    --abm-success:        #006B54;  /* contrast-safe green for correct / done states                   */
    --abm-success-bg:     #E1F3EE;
    --abm-danger:         #B3261E;  /* contrast-safe red for incorrect states                          */
    --abm-danger-bg:      #FDECEA;
    --abm-hint:           #A63D18;  /* contrast-safe orange for hint text and controls                 */
    --abm-hint-ink:       #7A3312;
    --abm-hint-bg:        #FDEEE7;
    --abm-groupA:         #006BAE;  /* Schelling group A (blue)                                       */
    --abm-groupB:         #A63D18;  /* Schelling group B (orange)                                     */
    --abm-accent-purple:  #6F1D77;  /* occasional accents                                             */
    --abm-accent-pink:    #AD2B68;
    --abm-accent-teal:    #006A73;
    /* Inherit the TU Delft theme's own base font so widgets match the chrome
       (no external font request). Falls back to Arial per the TU Delft brand. */
    --abm-font: var(--pst-font-family-base, Arial, "Helvetica Neue", Helvetica, sans-serif);
}

/*
 * Figures are numbered MANUALLY in every caption as "**Figure X.Y** …" (chapter-
 * based). Jupyter Book nonetheless injects an automatic sequential "Fig. N" span
 * (numfig can't be turned off from here), producing a double number like
 * "Fig. 18 Figure 2.4". Hide the auto span so only the manual chapter number shows.
 */
.bd-article .caption-number,
article .caption-number,
figcaption .caption-number {
    display: none;
}

/* Compact list styling for admonitions */
.admonition.compact-list p {
    margin-bottom: 0.3em !important;
    margin-top: 0.3em !important;
}

.admonition.compact-list ul {
    margin-top: 0.2em !important;
    margin-bottom: 0.5em !important;
}

.admonition.compact-list li {
    margin-bottom: 0.1em !important;
}

.admonition.compact-list h1,
.admonition.compact-list h2,
.admonition.compact-list h3,
.admonition.compact-list h4 {
    margin-top: 0.5em !important;
    margin-bottom: 0.3em !important;
}

/* Stronger visual styling for right-side pop-out sidebars */
.bd-content .sidebar,
article .sidebar {
    border: 1px solid var(--abm-border);
    border-left: 6px solid var(--abm-primary);
    border-radius: 10px;
    background: var(--abm-surface);
    box-shadow: 0 6px 18px rgba(12, 35, 64, 0.10);
    color: var(--abm-ink);
    padding: 0.85rem 1rem;
}

.bd-content .sidebar p,
article .sidebar p {
    color: var(--abm-ink);
}

.bd-content .sidebar .sidebar-title,
article .sidebar .sidebar-title {
    color: var(--abm-primary-strong);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Readable definition lists (used for glossaries / key-term lists) */
.bd-article dl.simple dt,
article dl.simple dt {
    font-weight: 700;
    color: var(--abm-ink);
    margin-top: 0.5em;
}

.bd-article dl.simple dd,
article dl.simple dd {
    margin-bottom: 0.35em;
}

/* Let a table opt into the full text width with :class: full-width */
.bd-article table.full-width,
article table.full-width {
    width: 100%;
    display: table;
}

/* Slightly tighter spacing inside sphinx-design card grids for a cleaner gallery */
.bd-article .sd-card .sd-card-body,
article .sd-card .sd-card-body {
    line-height: 1.45;
}

/*
 * Caption for a standalone {image} that is deliberately NOT a numbered {figure}
 * (e.g. the Schelling animation on the landing page, which should read as an
 * illustration rather than "Fig. 1"). Mimics a figure caption's look, minus the
 * number.
 */
.standalone-caption {
    text-align: center;
    font-size: 0.9em;
    color: var(--pst-color-text-muted, #6c757d);
    max-width: 480px;
    margin: 0.6em auto 1.4em;
    line-height: 1.5;
}

/*
 * Matplotlib to_jshtml() animation player.
 * The Chapter 4 model animations (and the Game of Life) use matplotlib's
 * JavaScript frame player, whose default controls are raw grey browser
 * buttons with oversized icons. The rules below restyle the slider, the
 * button row and the Once/Loop/Reflect radios into compact, flat controls
 * in the book palette. Selectors are scoped to the article and a couple of
 * properties use !important so they win over matplotlib's own inline
 * <style> block, which is injected after this file in the page.
 */
.anim-slider {
    width: 70% !important;
    max-width: 420px;
    accent-color: var(--abm-primary);
    cursor: pointer;
    vertical-align: middle;
}

.anim-buttons {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 6px !important;
}

.anim-buttons button {
    width: 34px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--abm-surface) !important;
    color: var(--abm-primary-strong) !important;
    border: 1px solid var(--abm-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 13px !important;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.anim-buttons button:hover {
    background: var(--abm-primary-strong) !important;
    color: #ffffff !important;
    border-color: var(--abm-primary-dark) !important;
}

.anim-buttons button:active {
    background: var(--abm-primary-dark) !important;
    color: #ffffff !important;
    border-color: var(--abm-primary-dark) !important;
}

.anim-buttons button .fa {
    font-size: 13px !important;
    color: inherit !important;
}

.anim-state {
    margin-top: 4px;
    font-size: 0.9em;
    color: var(--abm-muted);
}

.anim-state input {
    accent-color: var(--abm-primary);
}

/*
 * Wrap long lines inside static code-input cells so each cell grows to fit its
 * content vertically instead of producing a horizontal scrollbar. The theme
 * default (basic.css: pre{overflow:auto}) leaves long lines un-wrapped, which is
 * what makes code cells scroll sideways.
 *
 * MUST use the child combinator `> pre`: the static Pygments output is
 * `div.highlight > pre`, but once a reader clicks "Live Code" Thebe injects a
 * CodeMirror editor *inside* the same `div.highlight`, whose lines are also
 * `<pre>` (nested deeper). A descendant selector would force-wrap those editor
 * lines while CodeMirror still lays them out as unwrapped, breaking its height
 * maths. The live editor is grown to fit its content by the `.CodeMirror` rule
 * below, together with `thebe_config.codeMirrorConfig` in `_config.yml`.
 */
.bd-article div.highlight > pre,
article div.highlight > pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * Live-code (Thebe / CodeMirror 5) editors: grow to fit their content instead of
 * scrolling inside CodeMirror's default fixed 300px box with an inner scrollbar.
 * This is CodeMirror's own auto-height recipe, `height:auto` on the wrapper lets
 * the editor size to its content. `_config.yml`'s `thebe_config.codeMirrorConfig`
 * complements it by rendering every line (`viewportMargin`) so the measured
 * height is right, and wrapping long lines (`lineWrapping`) so they don't scroll
 * sideways. CodeMirror's stylesheet is injected by thebe-lite at runtime, so
 * `!important` is needed to win over its default `.CodeMirror{height:300px}`.
 */
.CodeMirror {
    height: auto !important;
}
.CodeMirror .CodeMirror-scroll {
    min-height: 0 !important;
    max-height: none !important;
}

/*
 * TeachBooks-Questions ({question} MCQ / short-answer) TU Delft accents.
 * The base styling ships in the external `teachbooks_questions` package; these
 * rules only re-tint its interactive colours to the TU Delft palette. Kept
 * defensive (broad, low-specificity) so a package markup change degrades
 * gracefully rather than breaking. Refined against the rendered DOM.
 */
.multiple-choice input[type="radio"],
.multiple-choice input[type="checkbox"],
.short-answer input {
    accent-color: var(--abm-primary);
}

/* End-of-model completion checklists: compact, persistent, and easy to scan. */
section.completion-checklist {
    background: linear-gradient(135deg, var(--abm-panel), var(--abm-surface));
    border: 1px solid var(--abm-border);
    border-left: 4px solid var(--abm-primary);
    border-radius: 0.75rem;
    margin-top: 2.5rem;
    padding: 1.35rem 1.5rem 1.45rem;
}

section.completion-checklist > h2 {
    color: var(--abm-ink);
    font-size: 1.6rem;
    margin: 0;
}

section.completion-checklist > h2 .headerlink {
    font-size: 0.9rem;
}

.completion-checklist__status {
    color: var(--abm-primary-strong);
    font-family: var(--abm-font);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0.25rem 0 1.1rem;
}

.completion-checklist.is-complete .completion-checklist__status {
    color: #157347;
}

.completion-checklist__intro {
    color: var(--abm-muted);
    margin: 0 0 0.85rem;
}

section.completion-checklist .contains-task-list {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

section.completion-checklist .task-list-item.enabled {
    background: var(--abm-surface);
    border: 1px solid var(--abm-border);
    border-radius: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0.65rem 0.8rem;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

section.completion-checklist .task-list-item.enabled:hover {
    border-color: var(--abm-primary);
    box-shadow: 0 2px 8px rgba(0, 106, 174, 0.10);
}

section.completion-checklist .task-list-item.enabled.is-complete {
    background: rgba(26, 135, 84, 0.08);
    border-color: rgba(26, 135, 84, 0.45);
}

section.completion-checklist .task-list-item.enabled p {
    margin: 0;
}

section.completion-checklist .task-list-item-checkbox {
    accent-color: #157347;
    cursor: pointer;
    height: 1.05rem;
    margin: 0 0.45rem 0 0;
    vertical-align: -0.14em;
    width: 1.05rem;
}

section.completion-checklist .task-list-item-label {
    cursor: pointer;
    line-height: 1.5;
}

section.completion-checklist .task-list-item.enabled.is-complete .task-list-item-label {
    color: #245c3a;
}

/* Other MyST task lists remain interactive without adopting the completion-card layout. */
.task-list-item.enabled .task-list-item-checkbox,
.task-list-item.enabled .task-list-item-label {
    cursor: pointer;
}

.multiple-choice .check-btn,
.short-answer .check-btn,
div.multiple-choice button,
div.short-answer button {
    background: var(--abm-primary-strong);
    border-color: var(--abm-primary-strong);
    color: #ffffff;
}

.multiple-choice .check-btn:hover,
.short-answer .check-btn:hover,
div.multiple-choice button:hover,
div.short-answer button:hover {
    background: var(--abm-primary-dark);
    border-color: var(--abm-primary-dark);
}

/*
 * Shared title treatment for externally stored Learning Activities. Legacy
 * activities can retain their widget-specific heading class while adding this
 * class, and newly extracted activities do not need private heading CSS.
 */
.la-title {
    margin: 0 0 6px;
    color: var(--abm-ink);
    font-family: var(--abm-font);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
}

/*
 * One-line objective shown directly under every "Learning Activity" title.
 * A small "OBJECTIVE" chip followed by the objective sentence, on a pale panel
 * with a cyan left rule. Global class so each activity only needs one line:
 *   <div class="la-objective">tell agents apart from the passive parts…</div>
 * Works inside the scoped #widget containers (custom properties cascade in).
 */
.la-objective {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0 0 13px;
    padding: 8px 13px;
    border-left: 3px solid var(--abm-primary);
    background: var(--abm-panel);
    border-radius: 0 9px 9px 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--abm-ink);
    font-family: var(--abm-font);
}
.la-objective::before {
    content: "OBJECTIVE";
    flex: 0 0 auto;
    min-width: 84px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--abm-primary-strong);
    background: var(--abm-surface-2);
    border: 1px solid var(--abm-border);
    border-radius: 5px;
    padding: 2px 6px;
    position: relative;
    top: -1px;
}
.la-objective b,
.la-objective strong {
    color: var(--abm-primary-strong);
}

/*
 * Structured activity brief. Every "Learning Activity" box opens with three
 * labelled rows in a fixed order, OBJECTIVE, WHAT IS THIS, WHAT TO DO, so the
 * reader always finds the same information in the same place. `.la-context` and
 * `.la-steps` mirror `.la-objective` above; only the chip label and the
 * left-rule colour differ (cyan = the goal, grey = the description, orange =
 * the action to take).
 */
.la-context,
.la-steps {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0 0 8px;
    padding: 8px 13px;
    border-left: 3px solid var(--abm-primary);
    background: var(--abm-panel);
    border-radius: 0 9px 9px 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--abm-ink);
    font-family: var(--abm-font);
}
.la-context::before,
.la-steps::before {
    flex: 0 0 auto;
    min-width: 84px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--abm-primary-strong);
    background: var(--abm-surface-2);
    border: 1px solid var(--abm-border);
    border-radius: 5px;
    padding: 2px 6px;
    position: relative;
    top: -1px;
}
.la-context::before { content: "WHAT IS THIS"; }
.la-steps::before   { content: "WHAT TO DO"; }
.la-context { border-left-color: var(--abm-muted); }
.la-steps   { border-left-color: var(--abm-hint); }
.la-steps::before { color: var(--abm-hint-ink); border-color: var(--abm-hint); }
.la-context b, .la-context strong,
.la-steps b, .la-steps strong {
    color: var(--abm-primary-strong);
}
.la-steps b, .la-steps strong { color: var(--abm-hint-ink); }
.la-context + .la-steps,
.la-objective + .la-context { margin-top: 0; }
/* Each row's body text is wrapped in a single <span> so that inline <b> (or a
   <span class="mono"> code term) cannot split the flex row into columns; this
   makes that span fill the remaining width and wrap normally. */
.la-objective > span,
.la-context > span,
.la-steps > span { flex: 1 1 auto; min-width: 0; }

/*
 * Auto-saving free-text answer box for discussion / write-up tasks. The
 * <textarea id="…"> persists by id via data-manager.js with no extra JS.
 */
.abm-answer {
    margin: 0.6rem 0 0.4rem;
}
.abm-answer > label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--abm-primary-strong);
    margin-bottom: 5px;
    font-family: var(--abm-font);
}
.abm-answer textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--abm-border);
    border-radius: 10px;
    background: var(--abm-surface-2);
    color: var(--abm-ink);
    font-family: var(--abm-font);
    font-size: 0.92rem;
    line-height: 1.5;
}
.abm-answer textarea:focus {
    outline: none;
    border-color: var(--abm-primary);
    box-shadow: 0 0 0 3px rgba(0, 166, 214, 0.15);
}

/* A visible keyboard focus ring for both native controls and scripted widgets. */
.bd-article :where(button, a, input, select, textarea, [role="button"], canvas):focus-visible,
article :where(button, a, input, select, textarea, [role="button"], canvas):focus-visible {
    outline: 3px solid var(--abm-primary-dark);
    outline-offset: 3px;
}

/* Keep all embedded media and wide tables inside the reading column. */
.bd-article :where(canvas, video, iframe, svg),
article :where(canvas, video, iframe, svg) {
    max-width: 100%;
}
.bd-article :where(canvas, video),
article :where(canvas, video) {
    height: auto;
}

/* Keep chapter-overview players centred within their admonition padding. */
.bd-article .chapter-overview-video,
article .chapter-overview-video {
    display: block;
    width: calc(100% - 2.8rem) !important;
    max-width: calc(100% - 2.8rem);
    height: auto;
    margin: 0.75rem auto 1rem !important;
    background: var(--abm-surface-2);
}
.bd-article .video-figure,
article .video-figure {
    padding: 10px;
    background: var(--abm-surface-2);
    border: 1px solid var(--abm-border);
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.30);
    margin-bottom: 1em;
}
.bd-article .video-figure figcaption,
article .video-figure figcaption {
    max-width: 520px;
    margin: 0.55rem auto 0;
    color: var(--abm-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}
.bd-article .table,
.bd-article .pst-scrollable-table-container,
article .table,
article .pst-scrollable-table-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Respect reduced-motion preferences for theme and widget CSS animations. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.abm-answer .abm-answer-hint {
    font-size: 0.76rem;
    color: var(--abm-muted);
    margin-top: 4px;
    font-family: var(--abm-font);
}

/*
 * Dark-mode fix for inline <code> inside the self-contained light widget cards.
 * The widget cards keep a light background in the dark site theme, but the theme
 * still recolours inline code to a light salmon (#ff7161) meant for a dark
 * background, which drops to ~2.4:1 on the widgets' pale surface. Widgets are
 * raw {raw} html blocks rendered as <div id="…">, so scope the override to inline
 * code inside an id'd div (this does not touch prose code in <section>s or the
 * <pre> inside live-code cells).
 */
html[data-theme="dark"] .bd-article div[id] code,
html[data-theme="dark"] article div[id] code {
    color: var(--abm-primary-dark);
    background-color: rgba(0, 118, 194, 0.10);
    border: 1px solid var(--abm-border);
}

/* Minimal cover / landing page (chapter_0_introduction/overview.md). */
/* Centre the title and hide its anchor only on the cover page. */
.bd-article:has(.landing-authors) > section > h1 {
    text-align: center;
    border-bottom: 0;
    margin: 0.5rem auto 1.3rem;
    max-width: 900px;
}
.bd-article:has(.landing-authors) > section > h1 > .headerlink {
    display: none;
}
.landing-cover {
    margin-top: 0.4rem !important;
}
.landing-authors {
    max-width: 680px;
    margin: 1.9rem auto 0.4rem;
    text-align: center;
}
.landing-authors .landing-authors-label {
    color: var(--abm-primary-strong);
    font-family: var(--abm-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}
/* All author names read the same: no bold, no highlight colour. */
.landing-authors .landing-authors-names {
    font-family: var(--abm-font);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--abm-ink);
    font-weight: 400;
    margin: 0 0 1rem;
}
.landing-authors .landing-authors-names a {
    color: var(--abm-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--abm-border);
    transition: color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}
.landing-authors .landing-authors-names a:hover {
    color: var(--abm-primary-strong);
    border-bottom-color: var(--abm-primary-strong);
}
.landing-authors .landing-authors-assistants {
    font-family: var(--abm-font);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--abm-ink);
    margin: 0 0 0.9rem;
}
.landing-authors .landing-authors-assistants a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--abm-border);
}
.landing-authors .landing-authors-assistants a:hover {
    color: var(--abm-primary-strong);
    border-bottom-color: var(--abm-primary-strong);
}
.landing-authors .landing-authors-affiliation {
    border-top: 1px solid var(--abm-border);
    margin: 0.1rem auto 0;
    max-width: 580px;
    padding-top: 0.75rem;
}
.landing-authors .landing-authors-sub {
    font-family: var(--abm-font);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--abm-muted);
    margin: 0 0 0.25rem;
}
.landing-authors .landing-authors-link {
    margin: 1rem 0 0;
    font-size: 0.9rem;
}
.landing-authors .landing-authors-link a {
    font-weight: 600;
}

/* Keep notebook media, tables, and long API names inside a phone viewport. */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .bd-article .output.text_html,
    .bd-article .output.text_html > div {
        max-width: 100%;
        overflow-x: auto;
    }

    .bd-article .output video {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tables without a generated wrapper remain readable instead of being clipped. */
    .bd-article table,
    .bd-article table.full-width,
    article table,
    article table.full-width {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .bd-article code.docutils.literal,
    .bd-article code.docutils.literal .pre {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}