/*
 * Trainingsplatform 123Moos.
 *
 * Plain CSS on purpose: no framework, no build step. The platform is a quiet
 * place to practise difficult conversations in, so the styling stays out of the
 * way where the conversation is, and carries the brand everywhere else.
 *
 * The palette is the logo, which holds exactly two colours: indigo #252350 and
 * turquoise #6cc4cd. They are not interchangeable. Turquoise on white is a
 * 2:1 contrast ratio, so it can never carry text or be a button behind white
 * text; it is a fill. Indigo on white is 14.5:1 and indigo on turquoise is
 * 7.2:1, so indigo is what everything interactive is made of.
 *
 *   indigo acts, turquoise fills.
 */

/* Raleway, self-hosted, already in webroot/font. Display face only: it gives
   the headings the roundness the logo's script has, while long transcripts stay
   in the system face, which is easier on the eye at reading length. */

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/raleway-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/raleway-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/raleway-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/raleway-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    /* The two colours in the logo, and what is mixed from them. */
    --brand-indigo: #252350;
    --brand-indigo-dark: #17162f;
    --brand-indigo-tint: #eae8f3;
    --brand-turquoise: #6cc4cd;
    --brand-turquoise-dark: #3f9aa4;
    --brand-turquoise-tint: #e6f5f7;
    --brand-turquoise-line: #bde2e7;

    --colour-ink: #1c1b33;
    --colour-ink-soft: #5f5d7a;
    --colour-line: #e3e5ef;
    --colour-page: #f2f7f8;
    --colour-surface: #ffffff;

    /* Everything interactive. Indigo, never turquoise: see the note above. */
    --colour-accent: var(--brand-indigo);
    --colour-accent-dark: var(--brand-indigo-dark);

    --colour-warning-bg: #fdf6e6;
    --colour-warning-line: #e6d3a3;
    --colour-danger: #a4342b;

    --font-display: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(37, 35, 80, .05), 0 6px 20px -6px rgba(37, 35, 80, .10);
    --shadow-lift: 0 2px 4px rgba(37, 35, 80, .06), 0 14px 30px -10px rgba(37, 35, 80, .18);
}

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

/* normalize hides [hidden] with an attribute selector, which any class rule
   here that sets display then beats on source order alone — that is how the
   typing indicator, a .chat-status with display:flex, stayed on screen for the
   whole sessie. Hidden means hidden. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--colour-page);
    color: var(--colour-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--colour-accent); }
a:hover { color: var(--colour-accent-dark); }

:focus-visible {
    outline: 2px solid var(--colour-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header and menu */

/* Sticky, so the way out of a sessie is always in reach. The turquoise line
   rides along at the top of the viewport and reads as the brand edge of the
   page rather than as a stray rule. The background has to stay opaque: chat
   bubbles scroll underneath it. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--colour-surface);
    border-top: 3px solid var(--brand-turquoise);
    border-bottom: 1px solid var(--colour-line);
    box-shadow: 0 1px 12px -4px rgba(37, 35, 80, .18);
}

.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 2rem;
    min-height: 72px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--brand-indigo);
    text-decoration: none;
    letter-spacing: -.015em;
}

.site-brand:hover { color: var(--brand-indigo); }

.site-logo {
    width: 34px;
    height: 34px;
    display: block;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-right: auto;
}

.site-nav a {
    color: var(--colour-ink-soft);
    text-decoration: none;
    font-size: .9375rem;
    padding: .375rem .75rem;
    border-radius: 999px;
}

.site-nav a:hover {
    color: var(--brand-indigo);
    background: var(--brand-turquoise-tint);
}

.site-nav a.is-current {
    color: var(--brand-indigo);
    background: var(--brand-turquoise);
    font-weight: 600;
}

.site-account {
    display: flex;
    align-items: center;
    gap: .875rem;
    font-size: .9375rem;
    color: var(--colour-ink-soft);
}

.site-account-name {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--colour-ink);
}

/* Content */

.main { padding: 2.5rem 0 4rem; }

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--brand-indigo);
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 .5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

h2 {
    font-size: 1.3125rem;
    line-height: 1.3;
    margin: 2rem 0 .5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.page-intro {
    color: var(--colour-ink-soft);
    max-width: 62ch;
    margin: 0 0 2rem;
    font-size: 1.0625rem;
}

.card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.card h2 { margin-top: 0; }

/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--colour-accent);
    color: #fff;
    border: 1px solid var(--colour-accent);
    border-radius: 999px;
    padding: .625rem 1.375rem;
    font-size: .9375rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.button:hover {
    background: var(--colour-accent-dark);
    border-color: var(--colour-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
}

.button:active { transform: none; box-shadow: none; }
.button:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.button--secondary {
    background: var(--colour-surface);
    color: var(--brand-indigo);
    border-color: var(--colour-line);
}

.button--secondary:hover {
    background: var(--brand-turquoise-tint);
    border-color: var(--brand-turquoise-line);
    color: var(--brand-indigo);
}

.button--danger { background: var(--colour-danger); border-color: var(--colour-danger); }
.button--danger:hover { background: #8b2b23; border-color: #8b2b23; }

.button--large { padding: .8125rem 1.75rem; font-size: 1rem; }

/* Avatars: a name as a circle of initials, or the scene as a mark */

.avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1;
    letter-spacing: .02em;
    user-select: none;
}

.avatar--scene { background: var(--brand-turquoise); color: var(--brand-indigo); }
.avatar--player { background: var(--brand-indigo); color: #fff; }

.avatar--cast {
    width: 2rem;
    height: 2rem;
    font-size: .75rem;
    background: var(--brand-turquoise-tint);
    color: var(--brand-indigo);
    box-shadow: 0 0 0 2px var(--colour-surface);
}

.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-stack .avatar + .avatar { margin-left: -.5rem; }

/* Notices */

.notice {
    border: 1px solid var(--brand-turquoise-line);
    border-left-width: 4px;
    border-left-color: var(--brand-turquoise);
    border-radius: var(--radius-sm);
    background: var(--brand-turquoise-tint);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.notice--privacy,
.notice--warning {
    background: var(--colour-warning-bg);
    border-color: var(--colour-warning-line);
    border-left-color: #c99a2e;
}

.notice p:first-child { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }

/* Flash messages */

.message {
    border-radius: var(--radius-sm);
    padding: .875rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--colour-line);
    border-left: 4px solid var(--brand-indigo);
    background: var(--colour-surface);
    box-shadow: var(--shadow);
}

.message.success { border-color: #b6d8c8; border-left-color: #2f8f68; background: #f0f9f4; }
.message.error   { border-color: #e2b9b4; border-left-color: var(--colour-danger); background: #fbf0ef; }
.message.warning { border-color: var(--colour-warning-line); border-left-color: #c99a2e; background: var(--colour-warning-bg); }

/* Footer */

.site-footer {
    border-top: 1px solid var(--colour-line);
    padding: 1.75rem 0;
    color: var(--colour-ink-soft);
    font-size: .875rem;
}

.site-footer .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.site-footer-mark {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--brand-turquoise);
}

/* Page headings with an action on the right */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
}

.page-head .page-intro { margin-bottom: 0; }

.page-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Forms */

.field { margin-bottom: 1.25rem; }

.field label {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    margin-bottom: .375rem;
    color: var(--brand-indigo);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    max-width: 28rem;
    padding: .625rem .75rem;
    font: inherit;
    color: inherit;
    background: var(--colour-surface);
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea { max-width: 100%; line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand-indigo);
    box-shadow: 0 0 0 3px rgba(108, 196, 205, .45);
}

.field-help {
    margin: .375rem 0 0;
    font-size: .875rem;
    color: var(--colour-ink-soft);
    max-width: 48ch;
}

.field .error-message {
    margin-top: .375rem;
    font-size: .875rem;
    color: var(--colour-danger);
}

.field input.form-error,
.field select.form-error,
.field textarea.form-error { border-color: #c46a60; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* Checkbox rows read better with the label beside the box */

.field--check label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    color: var(--colour-ink);
    margin: 0;
}

.field--check input[type="checkbox"] {
    margin: 0;
    width: 1.0625rem;
    height: 1.0625rem;
    accent-color: var(--brand-indigo);
}

.field--narrow input[type="number"] { max-width: 8rem; }

/* Tables */

.table-wrap {
    overflow-x: auto;
    background: var(--colour-surface);
    border: 1px solid var(--colour-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.table th,
.table td {
    text-align: left;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--colour-line);
    vertical-align: top;
}

.table thead th { background: var(--brand-turquoise-tint); }

.table th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand-indigo);
    font-weight: 700;
}

.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--brand-turquoise-tint); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.is-inactive td { color: var(--colour-ink-soft); }

.row-actions {
    white-space: nowrap;
    text-align: right;
}

.row-actions a + a,
.row-actions a + form { margin-left: 1rem; }
.row-actions form { display: inline; }

.row-actions form button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--colour-accent);
    cursor: pointer;
    text-decoration: underline;
}

/* Tags */

.tag {
    display: inline-block;
    margin-left: .5rem;
    padding: .125rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--brand-indigo-tint);
    color: var(--brand-indigo);
}

.tag--active { background: var(--brand-turquoise); color: var(--brand-indigo); }
.tag--warning { background: var(--colour-warning-bg); border: 1px solid var(--colour-warning-line); color: #7a5b13; }

/* Learning goals: one line each, marked rather than bulleted, so a long goal
   wraps under itself instead of under the marker. */

.goal-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
}

.goal-list li {
    position: relative;
    padding-left: 1.375rem;
    color: var(--colour-ink);
}

.goal-list li + li { margin-top: .375rem; }

.goal-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--brand-turquoise);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Login screen */

.login-page {
    margin: 0;
    min-height: 100vh;
    background: var(--colour-surface);
}

.login-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

.login-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 3rem 2rem;
    background:
        radial-gradient(120% 90% at 15% 0%, #33306a 0%, transparent 55%),
        var(--brand-indigo);
    color: #fff;
}

.login-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    padding: .625rem;
    border-radius: 50%;
    background: #fff;
}

.login-brand-mark img { width: 100%; height: auto; display: block; }

.login-brand h1 {
    font-size: 2rem;
    color: #fff;
    margin: 0;
    max-width: 16ch;
}

.login-brand p {
    margin: 0;
    max-width: 34ch;
    color: rgba(255, 255, 255, .8);
    font-size: 1.0625rem;
}

.login-brand strong { color: var(--brand-turquoise); font-weight: 600; }

.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.login-panel {
    width: 100%;
    max-width: 24rem;
}

.login-panel h2 {
    margin: 0 0 .375rem;
    font-size: 1.5rem;
}

.login-panel .card {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
}

.login-panel .field input { max-width: 100%; }
.login-panel .button { width: 100%; }
.login-panel .field--check { margin-bottom: 1.5rem; }
.login-panel .field--check .field-help { margin-left: 1.5625rem; }

.login-footnote {
    margin: 1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--colour-line);
    font-size: .875rem;
    color: var(--colour-ink-soft);
}

@media (min-width: 56rem) {
    .login-layout { grid-template-columns: 1.1fr 1fr; }
    .login-brand { padding: 4rem; }
}

/* Detail pages */

.card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 2rem;
    margin-bottom: 1rem;
}

.card-head h3 { margin: 0; font-size: 1.0625rem; }

.detail + .detail { margin-top: 1.5rem; }

.detail h3 {
    margin: 0 0 .375rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--colour-ink-soft);
    font-family: var(--font-body);
    font-weight: 700;
}

.detail .field-help { margin: 0 0 .5rem; }

.detail-body {
    max-width: 70ch;
    white-space: normal;
}

.detail-empty {
    margin: 0;
    color: var(--colour-ink-soft);
    font-style: italic;
}

.cell-note {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: var(--colour-ink-soft);
    max-width: 60ch;
}

/* Empty states */

.empty-state {
    background: var(--colour-surface);
    border: 1px dashed var(--brand-turquoise-line);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--brand-turquoise-tint);
    color: var(--brand-turquoise-dark);
}

.empty-state h2 { margin: 0 0 .5rem; font-size: 1.1875rem; }

.empty-state p {
    margin: 0 auto 1.25rem;
    max-width: 46ch;
    color: var(--colour-ink-soft);
}

.empty-state p:last-child { margin-bottom: 0; }

/* Resume: the sessie you walked away from */

.resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    background:
        radial-gradient(120% 140% at 0% 0%, #33306a 0%, transparent 60%),
        var(--brand-indigo);
    color: #fff;
    box-shadow: var(--shadow-lift);
}

.resume-label {
    margin: 0 0 .125rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand-turquoise);
    font-weight: 700;
}

.resume h2 {
    margin: 0;
    font-size: 1.1875rem;
    color: #fff;
}

.resume p { margin: .25rem 0 0; color: rgba(255, 255, 255, .75); font-size: .9375rem; }

.resume .button {
    background: var(--brand-turquoise);
    border-color: var(--brand-turquoise);
    color: var(--brand-indigo);
}

.resume .button:hover {
    background: #fff;
    border-color: #fff;
    color: var(--brand-indigo);
}

/* Scenario picker */

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 1.25rem;
}

.scenario-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.scenario-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.scenario-card-band {
    height: .375rem;
    background: linear-gradient(90deg, var(--brand-turquoise), var(--brand-indigo));
}

.scenario-card-body {
    flex: 1 1 auto;
    padding: 1.5rem;
}

.scenario-card-body h2 {
    margin: 0 0 .5rem;
    font-size: 1.1875rem;
}

.scenario-card-body > p { margin: 0 0 1.25rem; color: var(--colour-ink-soft); }

.goals { margin-bottom: 1.25rem; }

.goals h3 {
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--colour-ink-soft);
}

.briefing-body .goals { margin-bottom: 0; }

.scenario-card-cast {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .875rem;
    color: var(--colour-ink-soft);
}

.scenario-card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--colour-line);
    background: #fbfdfd;
}

/* Briefing: the collapsible reference above the chat */

.briefing {
    background: var(--colour-surface);
    border: 1px solid var(--colour-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.briefing > summary {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--brand-indigo);
    list-style: none;
}

.briefing > summary::-webkit-details-marker { display: none; }

.briefing > summary::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--brand-turquoise-dark);
    border-bottom: 2px solid var(--brand-turquoise-dark);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.briefing[open] > summary::before { transform: rotate(45deg); }

.briefing > summary:focus-visible {
    outline: 2px solid var(--colour-accent);
    outline-offset: -2px;
}

.briefing-body {
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid var(--colour-line);
}

.cast {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
}

.cast li {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.cast-role {
    display: block;
    font-size: .8125rem;
    color: var(--colour-ink-soft);
}

/* Chat */

.chat-log {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 44rem;
}

.chat-message--player {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message-main {
    border-radius: var(--radius);
    padding: .9375rem 1.25rem;
}

.chat-message--scene .chat-message-main {
    background: var(--colour-surface);
    border: 1px solid var(--colour-line);
    border-top-left-radius: 4px;
    box-shadow: var(--shadow);
}

/* Both sides of the conversation carry the same weight: the begeleider's turn
   is a tint rather than a filled block, so reading back a sessie is one even
   exchange instead of a column of shouting. Who is speaking is carried by the
   avatar, the side and the label, which is enough. */
.chat-message--player .chat-message-main {
    background: var(--brand-indigo-tint);
    border: 1px solid #dbd8ea;
    border-top-right-radius: 4px;
}

.chat-message-who {
    margin: 0 0 .375rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--colour-ink-soft);
}

.chat-message-body p { margin: 0 0 .75rem; }
.chat-message-body p:last-child { margin-bottom: 0; }

/* The model puts actions, events and surroundings between asterisks; those are
   the stage directions, and they should read as a different voice than speech.

   A whole paragraph of direction gets the marked-off treatment. A `*zo*` inside
   a spoken line stays plain italics: it is emphasis, not a stage direction, and
   a bordered block in the middle of a sentence reads as a rendering fault. */
.chat-message-body em {
    font-style: italic;
    color: var(--colour-ink-soft);
}

.chat-message-body p > em:only-child {
    display: block;
    font-style: normal;
    border-left: 2px solid var(--brand-turquoise);
    padding-left: .75rem;
}


.chat-message--is-new { animation: chat-appear .25s ease-out; }

@keyframes chat-appear {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: none; }
}

/* Typing indicator */

.chat-status {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: var(--colour-ink-soft);
    font-size: .9375rem;
    margin-bottom: 1rem;
}

.chat-typing { display: inline-flex; gap: .25rem; }

.chat-typing span {
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
    background: var(--brand-turquoise-dark);
    animation: chat-typing 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes chat-typing {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-.1875rem); }
}

/* Composer */

.chat-error {
    border: 1px solid #e2b9b4;
    border-left: 4px solid var(--colour-danger);
    background: #fbf0ef;
    border-radius: var(--radius-sm);
    padding: .875rem 1.25rem;
    margin-bottom: 1rem;
}

/* Sticky, so the box you type in is always in reach: a transcript grows long
   and nobody should have to scroll to the bottom to answer. */
.chat-composer {
    position: sticky;
    bottom: 0;
    padding: 1rem 0 1.25rem;
    background: var(--colour-page);
}

.chat-composer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.5rem;
    background: linear-gradient(to top, var(--colour-page), transparent);
    pointer-events: none;
}

.chat-composer-box {
    background: var(--colour-surface);
    border: 1px solid var(--colour-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.chat-composer-box:focus-within {
    border-color: var(--brand-indigo);
    box-shadow: 0 0 0 3px rgba(108, 196, 205, .45);
}

.chat-composer textarea {
    display: block;
    width: 100%;
    max-height: 40vh;
    padding: .375rem .5rem;
    font: inherit;
    line-height: 1.6;
    color: inherit;
    background: none;
    border: 0;
    resize: none;
    overflow-y: auto;
}

.chat-composer textarea:focus { outline: none; }
.chat-composer textarea:disabled { opacity: .6; }

.chat-composer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .5rem;
    padding: 0 .5rem;
}

.chat-composer-actions .field-help { margin: 0; }

.chat-closed {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--colour-line);
    color: var(--colour-ink-soft);
    font-style: italic;
    text-align: center;
}

/* Error pages */

.error-container { max-width: 44rem; }
.error-container h2 { margin-top: 0; font-size: 1.5rem; }
.error-container p { max-width: 62ch; }

@media (max-width: 40rem) {
    /* The menu wraps to two or three rows down here, and a sticky bar that deep
       eats the screen someone is trying to read a sessie on. It scrolls away
       instead. */
    .site-header { position: static; }

    h1 { font-size: 1.625rem; }
    .main { padding: 1.75rem 0 3rem; }
    .site-header .container { min-height: 64px; padding-top: .75rem; padding-bottom: .75rem; }
    .site-account { font-size: .875rem; }
    .chat-message { max-width: 100%; }
    .page-head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .chat-typing span { opacity: .6; }
}