/*
 * Base styles, transcribed from Maui.PreventionApp/Resources/Styles/Styles.xaml.
 * Class names mirror the XAML x:Key values so the two can be diffed by eye.
 *
 * Mobile-first: the app is designed for smartphones and the layout is capped at a
 * phone-ish width on larger screens rather than stretching, which would not match
 * the approved design.
 */

/*
 * Not @import. An @import is only discovered once the importing sheet has been fetched and
 * parsed, so these three used to load in series behind app.css -- four blocking round
 * trips before first paint, with tokens.css (which carries the @font-face rules) found
 * last. They are <link>ed from index.html instead, which lets the browser request all four
 * at once; the order there preserves the cascade.
 */

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

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-flowing-text);
    line-height: var(--sg-line-height-flowing);
    color: var(--sg-primary);
    background-color: var(--sg-default-background);

    /* Native-app feel: no rubber-band scroll of the page itself, no tap highlight,
       no accidental text selection on controls. */
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
}

/* The app is phone-shaped. On a desktop browser it is centred rather than stretched,
   because every screen was laid out and signed off at phone width. */
#app {
    max-width: var(--sg-app-width);
    margin: 0 auto;
    min-height: 100%;
    /* 53 of the 56 native pages set BackgroundColor to SGSurface; the two that differ are the stress level page
       (LightBackgroundColor, below) and the buffer page. DefaultBackgroundColor is not a page background at all. */
    background-color: var(--sg-surface);
    position: relative;
}

#app:has(.page-light) {
    background-color: var(--sg-light-background);
}

/* ---------- Typography ---------- */

.page-title {
    font-size: var(--sg-size-flowing-16);
    font-family: var(--sg-font-body);
    color: var(--sg-dark-blue);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.page-title--centered {
    justify-content: center;
}

/*
 * LabelTitle in the native app: the large dark heading used on the standalone form
 * screens -- login, registration, password reset, privacy, consents.
 */
.label-title {
    color: var(--sg-primary);
    font-size: var(--sg-size-label-title);
    font-weight: 700;
    margin: 0 0 20px 0;
}

/*
 * PageTitle in the native app, which is a different thing from LabelTitle and is what
 * every in-shell screen opens with: a 15px icon beside a small bold blue label, not a
 * large dark heading. Reproducing the pair is what keeps those screens recognisable
 * against the versions the stakeholders approved.
 */
.page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    /* The title is dark blue (#002B5B), not the blue of the controls. */
    color: var(--sg-dark-blue);
    font-size: var(--sg-size-page-title);
    font-weight: 700;
    margin: 0 0 20px 0;
}

/* Centred on the title with the rest of the row: the arrow, the icon and the title share one vertical middle, so the icon has no
   offset of its own. */
.page-title__icon {
    height: 15px;
    width: auto;
    flex: none;
}

/*
 * FocusOnNavigate moves focus to the heading on every route change so a screen reader
 * announces the new screen. The heading carries tabindex="-1", so it is never reachable
 * by tabbing and a focus ring on it signals an affordance that does not exist -- it just
 * draws a box around the title of every page, which no native screen has. Interactive
 * controls keep their rings; this only covers the heading styles. The h1[tabindex="-1"]
 * selector is what FocusOnNavigate actually focuses, so headings with a style of their own
 * (the login title, for one) lose the ring too without being listed one by one.
 */
.label-title:focus,
.page-title:focus,
h1[tabindex="-1"]:focus {
    outline: none;
}

.label-header {
    color: var(--sg-primary);
    font-size: var(--sg-size-label-header);
    font-weight: 700;
    margin: 0 0 10px 0;
}

.label-flowing-text {
    color: var(--sg-primary);
    font-size: var(--sg-size-flowing-text);
    line-height: var(--sg-line-height-flowing);
    font-family: var(--sg-font-body);
}

.label-flowing-text--m10 { margin: 0 0 10px 0; }
.label-flowing-text--bold { font-weight: 700; }
.label-flowing-text--italic { font-style: italic; }
.label-flowing-text--18 { font-size: var(--sg-size-flowing-18); }
.label-flowing-text--16 { font-size: var(--sg-size-flowing-16); }

.label-form { font-size: var(--sg-size-form-label); }
.label-form-description { font-size: var(--sg-size-form-description); }

/* ---------- Layout ---------- */

.page {
    padding: var(--sg-page-padding);
    padding-top: calc(var(--sg-page-padding) + var(--sg-safe-top));
    /* Clear the fixed tab bar and the iOS home indicator. */
    padding-bottom: calc(var(--sg-tabbar-height) + var(--sg-safe-bottom) + var(--sg-page-padding));
}

/* Pre-authentication screens have no tab bar to clear. */
.page--no-tabbar {
    padding-bottom: calc(var(--sg-safe-bottom) + var(--sg-page-padding));
}

.login {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0 20px 24px;
    background-color: var(--sg-surface);
}

/* The brand at the top left: the logo at 32 x 32 and the name beside it. */
.login__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: #002B5B;
    font-size: 16px;
    font-weight: 700;
}

.login__brand img {
    width: 32px;
    height: 32px;
}

/* 48px below the brand; the description 36px below the title. */
.login__title {
    margin: 48px 0 0;
    color: #002B5B;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--sg-font-alt);
}
.login__nickname{
    margin: 0 0 32px 0;
}
.login__password {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
}

.login__password .sg-input {
    min-width: 0;
}

.login__description {
    margin: 36px 0 36px 0;
    font-size: var(--sg-size-flowing-16);
}

.login__description .sg-content{
    padding: 0;
    margin: 0;
}

.login label {
    display: block;
    margin: 14px 0 14px 0;
    font-size: 12px;
    color: #001A37;
}

.login .sg-input {
    border: 1px solid #B8B8B8;
    border-radius: 8px;
}

/* Right-aligned under the password field. */
.login__forgot {
    display: block;
    margin: 8px 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #0056A4;
}

.login__submit {
    margin-top: 24px;
    margin-bottom: 32px;
}

/* ---------- Buttons ---------- */

.btn-base {
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-flowing-16);
    border: none;
    cursor: pointer;
    text-transform: none; /* TextTransform=None throughout Styles.xaml */
    -webkit-appearance: none;
    appearance: none;
}

.btn-base:disabled {
    opacity: 0.5;
    cursor: default;
}

/* TextButton */
.btn-text {
    color: var(--sg-primary);
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    font-weight: 700;
    font-size: var(--sg-size-flowing-16);
    border: none;
    cursor: pointer;
    font-family: var(--sg-font-body);
}

/* SaveButton: white text on Primary */
.btn-save {
    color: var(--sg-white);
    background-color: var(--sg-primary);
    border: none;
    border-radius: var(--sg-radius-close);
    padding: 10px 16px;
    font-size: var(--sg-size-flowing-16);
    font-family: var(--sg-font-body);
    cursor: pointer;
}

/* CloseButton */
.btn-close-sg {
    color: var(--sg-default-background);
    background-color: var(--sg-primary);
    padding: 5px 10px;
    border-radius: var(--sg-radius-close);
    height: 40px;
    width: 100%;
    border: none;
    font-size: var(--sg-size-flowing-16);
    font-family: var(--sg-font-body);
    cursor: pointer;
}

/* ---------- Forms ---------- */

.sg-input {
    width: 100%;
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-flowing-16);
    color: var(--sg-primary);
    background-color: var(--sg-white);
    border: 1px solid var(--sg-gray-primary-default);
    border-radius: var(--sg-radius-close);
    padding: 10px;
}

.sg-input:focus {
    outline: 2px solid var(--sg-blue);
    outline-offset: -2px;
}

.sg-error {
    color: var(--sg-text-error-default);
    font-size: var(--sg-size-form-label);
}

/* ---------- Backend-authored HTML ----------
   Styles live in content.css, transcribed from HTMLFormatter's stylesheet and scoped
   under .sg-content so the content's bare selectors cannot reach the rest of the app. */

/* ---------- Loading ---------- */

/* The one spinner: a ring in the brand blue with a quarter that runs round it. Drawn on the box it is given, so it stays round and
   centred at any size (--sg-spinner-size). */
.sg-spinner,
.sg-loading::before {
    content: "";
    display: block;
    flex: none;
    box-sizing: border-box;
    width: var(--sg-spinner-size, 40px);
    height: var(--sg-spinner-size, 40px);
    border: calc(var(--sg-spinner-size, 40px) / 10) solid rgba(20, 105, 196, 0.2);
    border-top-color: var(--sg-blue);
    border-radius: 50%;
    animation: sg-spin 0.9s linear infinite;
}

@keyframes sg-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sg-spinner,
    .sg-loading::before { animation-duration: 3s; }
}

/* What the page is when the app starts, until the app has drawn its first screen: the spinner alone, in the middle of the window. */
.app-splash {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-splash .sg-spinner {
    --sg-spinner-size: 48px;
}

/* A screen that is waiting for what it shows: the spinner over its words, in the middle of the space the screen will fill. */
.sg-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50vh;
    color: var(--sg-primary);
    text-align: center;
}

/* Blazor's built-in error UI, restyled to match rather than the stock yellow bar. */
#blazor-error-ui {
    background: var(--sg-light-red);
    color: var(--sg-text-error-default);
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---------- Education ---------- */

.education-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.education-list__item {
    margin-bottom: 10px;
}

.education-list__button {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    background-color: var(--sg-white);
    border: none;
    border-radius: var(--sg-radius-answer);
    padding: 14px;
    font-family: var(--sg-font-body);
    color: var(--sg-primary);
    cursor: pointer;
}

/* Locked entries stay visible, as in the app: the programme is sequential and the list
   shows what is still to come. They are not interactive. */
.education-list__item--locked .education-list__button {
    background-color: var(--sg-gray-90);
    color: var(--sg-gray-darker);
    cursor: default;
}

.education-list__title {
    font-size: var(--sg-size-flowing-16);
    font-weight: 700;
}

.education-list__meta {
    font-size: var(--sg-size-form-label);
    color: var(--sg-gray-darker);
}

.education-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.education-detail__progress {
    font-size: var(--sg-size-form-label);
    color: var(--sg-gray-darker);
}

.education-detail__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

/* ---------- Content pager (education + exercise) ---------- */

.content-pager__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.content-pager__progress {
    font-size: var(--sg-size-form-label);
    color: var(--sg-gray-darker);
}

.content-pager__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.discover-sections {
    margin-bottom: 20px;
}

/* ---------- Secondary actions on pre-auth screens ---------- */

.login__secondary {
    margin-top: 20px;
    align-self: center;
}

/* ---------- Alerts ---------- */

.alert-card {
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-answer);
    padding: 14px;
    margin-bottom: 14px;
}

.alert-card--done {
    opacity: 0.6;
}

/* ---------- Profile ---------- */

.profile-section {
    margin-bottom: 28px;
}

.consent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.consent-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-answer);
    padding: 12px 14px;
    margin-bottom: 10px;
}

/* ---------- Patient-authored entries ---------- */

.sg-input--multiline {
    min-height: 90px;
    resize: vertical;
    font-family: var(--sg-font-body);
}

.journal-list {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}

.journal-card {
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-answer);
    padding: 14px;
    margin-bottom: 12px;
}

.journal-card__title {
    margin-top: 0;
}

.journal-card__delete {
    margin-top: 10px;
}

.journal-fields {
    margin: 0;
}

.journal-fields dt {
    font-size: var(--sg-size-form-label);
    color: var(--sg-gray-darker);
    margin-top: 10px;
}

.journal-fields dd {
    margin: 2px 0 0 0;
    font-size: var(--sg-size-flowing-16);
    white-space: pre-wrap;
}

.journal-form label {
    display: block;
    margin: 14px 0 4px 0;
}

.journal-add {
    width: 100%;
}

/* ---------- Progress ---------- */

.progress-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--sg-blue);
    margin: 0;
    line-height: 1;
}

.progress-value__unit {
    font-size: 24px;
    margin-left: 2px;
}

.progress-bar {
    height: 10px;
    background-color: var(--sg-gray-90);
    border-radius: 5px;
    overflow: hidden;
    margin: 12px 0;
}

.progress-bar__fill {
    height: 100%;
    background-color: var(--sg-blue);
}

/* ---------- Stress scale ---------- */

.stress-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.stress-scale__item {
    background-color: var(--sg-white);
    border: none;
    border-radius: var(--sg-radius-answer);
    padding: 12px 0;
    font-size: var(--sg-size-flowing-16);
    font-family: var(--sg-font-body);
    color: var(--sg-primary);
    cursor: pointer;
}

.stress-scale__item--active {
    background-color: var(--sg-blue);
    color: var(--sg-white);
    font-weight: 700;
}

.today-progress {
    margin-bottom: 20px;
}

/* ---------- Screen-reader only ---------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Eisenhower ---------- */

.quadrant {
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-answer);
    padding: 14px;
    margin-bottom: 14px;
    border-left: 5px solid var(--sg-gray-primary-default);
}

.quadrant--a { border-left-color: var(--sg-red-muted); }
.quadrant--b { border-left-color: var(--sg-blue); }
.quadrant--c { border-left-color: var(--sg-orange-primary); }
.quadrant--d { border-left-color: var(--sg-gray); }

.quadrant__title {
    margin: 0;
    font-size: var(--sg-size-flowing-16);
}

.quadrant__hint {
    font-size: var(--sg-size-form-label);
    color: var(--sg-gray-darker);
    margin: 2px 0 10px 0;
}

.quadrant__tasks {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}

.quadrant__task label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: var(--sg-size-flowing-16);
    cursor: pointer;
}

.quadrant__task--done span {
    text-decoration: line-through;
    color: var(--sg-gray-darker);
}

.quadrant__empty {
    font-size: var(--sg-size-form-label);
    color: var(--sg-gray-darker);
}

.quadrant__add {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---------- Coping strategies ---------- */

.journal-card--done { opacity: 0.7; }

.coping__exercises {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
}

.coping__exercise {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sg-divider-primary);
    font-size: var(--sg-size-flowing-16);
}

.coping__change {
    font-size: var(--sg-size-form-label);
    color: var(--sg-gray-darker);
}

.coping__change--down { color: var(--sg-text-success-default); }
.coping__change--up { color: var(--sg-text-error-default); }

/* ---------- App tour ---------- */

.tour {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 26, 55, 0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 200;
    padding: var(--sg-page-padding);
    padding-bottom: calc(var(--sg-tabbar-height) + var(--sg-safe-bottom) + var(--sg-page-padding));
}

.tour__panel {
    background-color: var(--sg-white);
    border-radius: var(--sg-radius-answer);
    padding: 18px;
    width: 100%;
    max-width: 540px;
    max-height: 70vh;
    overflow-y: auto;
}

.tour__progress {
    font-size: var(--sg-size-form-label);
    color: var(--sg-gray-darker);
    margin: 10px 0 0 0;
}

/* A read-only field is clearly not an input the user is expected to fill. */
.sg-input[readonly] {
    background-color: var(--sg-gray-90);
    color: var(--sg-gray-darker);
}

/* ---------- Modal dialog ---------- */

/*
 * The native app stacks these as Mopups pages over the shell. One inline dialog does the
 * same job: a scrim that blocks the content behind it and a panel that cannot be scrolled
 * past. Constrained to the shell width so it sits over the app rather than the page on a
 * wide window.
 */

.sg-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.45);
}

.sg-modal__panel {
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: 16px;
    background: var(--sg-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.sg-modal__title {
    margin: 0 0 12px 0;
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-label-header);
    font-weight: 700;
    color: var(--sg-primary);
}

.sg-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

/* ---------- Action button ----------
   The wide rounded button the native screens build from a Border with the shared card
   shadow (Shadow Brush="#80000000" Offset="0,2" Radius="3" Opacity="0.6") around an icon
   and a bold 16px label. Used by the rating, reflection and stress screens. */

.sg-action {
    display: flex;
    align-items: center;
    width: calc(100% - 40px);
    min-height: 60px;
    margin: 0 20px;
    padding: 12px;
    border: none;
    border-radius: 10px;
    color: var(--sg-default-background);
    font-family: var(--sg-font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.sg-action--todo,
.sg-action--primary {
    background-color: var(--sg-primary);
}

.sg-action--done {
    background-color: var(--sg-primary-dark-gray);
    cursor: default;
}

.sg-action:disabled {
    cursor: progress;
}

.sg-action:active:not(:disabled):not(.sg-action--done) {
    transform: scale(0.97);
}

.sg-action__icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    flex: none;
}

.sg-action__icon--end {
    margin: 0 0 0 10px;
}

.sg-action__label {
    flex: 1;
    text-align: center;
}

/* ---------- Rating screen ---------- */

.rate__exercise {
    padding: 10px;
}

.rate__band {
    padding: 20px;
}

.rate__band--rating {
    background-color: var(--sg-default-light);
}

.rate__centre {
    text-align: center;
}

.rate__stars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 10px 40px 0;
    height: 50px;
}

.rate__star {
    padding: 0 5px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.rate__star img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- Points badge ---------- */

.points-notice {
    position: fixed;
    right: 0;
    bottom: 50px;
    z-index: 900;
    width: 100px;
    height: 100px;
    pointer-events: none;
    overflow: visible;
}

.points-notice__badge {
    position: relative;
    width: 100px;
    height: 100px;
    transform-origin: center;
    animation: points-badge 3.6s ease-out forwards;
}

.points-notice__bg {
    width: 100px;
    height: 100px;
}

.points-notice__leaf {
    position: absolute;
    top: 50%;
    opacity: 0.6;
    transform: translateY(-50%);
    animation: points-leaf 3.6s ease-out forwards;
}

.points-notice__leaf--left {
    left: 18px;
    transform: translateY(-50%) scaleX(-1);
}

.points-notice__leaf--right {
    left: 40px;
    margin-top: 2px;
}

.points-notice__value {
    position: absolute;
    left: 22px;
    top: 50%;
    margin-top: -18px;
    color: #C5EFE1;
    font-size: 26px;
    font-weight: 700;
    opacity: 0;
    animation: points-value 3.6s ease-out forwards;
}

/* The native badge sits at a right margin of -100 off the screen and slides to -40, so it comes to rest with 40px of
   it past the edge and 60px showing; it turns from 60 degrees to upright on the way in and back on the way out. */
@keyframes points-badge {
    0%   { transform: translateX(100px) rotate(60deg); opacity: 0; }
    10%  { transform: translateX(40px) rotate(0); opacity: 1; }
    88%  { transform: translateX(40px) rotate(0); opacity: 1; }
    100% { transform: translateX(100px) rotate(60deg); opacity: 0; }
}

@keyframes points-leaf {
    0%, 12% { width: 1px; }
    30%     { width: 10px; }
    60%, 100% { width: 20px; }
}

@keyframes points-value {
    0%, 12% { opacity: 0; }
    30%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

/* No sliding or growing for anyone who asked for less motion: the badge fades in and out in
   place with its final state shown throughout, so the points are still seen. */
@keyframes points-fade {
    0%, 100% { opacity: 0; transform: translateX(40px); }
    10%, 88% { opacity: 1; transform: translateX(40px); }
}

@media (prefers-reduced-motion: reduce) {
    .points-notice__badge {
        animation: points-fade 3.6s linear forwards;
    }

    .points-notice__leaf {
        animation: none;
        width: 20px;
    }

    .points-notice__leaf--left {
        width: 10px;
    }

    .points-notice__value {
        animation: none;
        opacity: 1;
    }
}

/* ---------- Immediate-help replacement ---------- */

.help-replace {
    padding: 20px;
}

.help-replace__intro {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 15px;
    align-items: start;
}

.help-replace__icon {
    width: 60px;
}

.help-replace__already {
    color: var(--sg-green);
}

.help-replace__selected {
    display: flex;
    align-items: center;
    margin: 20px 0 8px;
    padding: 10px 10px 10px 0;
    color: var(--sg-primary);
    font-weight: 700;
}

.help-replace__plus {
    margin-right: 10px;
    color: var(--sg-primary-blue-dark);
    font-size: 26px;
}

.help-replace__rule {
    height: 2px;
    margin: 0 0 15px;
    border: none;
    background-color: var(--sg-primary-blue-dark);
}

.help-replace__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.help-replace__item {
    display: flex;
    width: 100%;
    padding: 10px 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.help-replace__item:disabled {
    cursor: default;
}

.help-replace__marker {
    flex: none;
    width: 20px;
}

.help-replace__new {
    color: var(--sg-primary);
    font-weight: 700;
}

.help-replace__save {
    margin-top: 20px;
    width: 100%;
}

/* EntryLabel */
.entry-label {
    margin: 0 0 4px;
    color: var(--sg-dark-blue);
    font-size: 16px;
    font-weight: 700;
}

/* ---------- Usage alert ----------
   PopUpPage: a dimmed scrim, a close button above the panel, a 30px-radius panel of authored
   text that fades out at its foot, and the assistant standing at the right edge with a speech
   bubble tail. The panel sits at the bottom of the screen, above the tab bar. */

.usage-alert {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: var(--sg-app-width);
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.5);
    animation: usage-alert-in 0.3s ease-out both;
}

.usage-alert__close {
    align-self: flex-end;
    margin: 0 10px 0 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.usage-alert__close img {
    width: 100%;
    height: 100%;
}

.usage-alert__panel {
    position: relative;
    margin: 5px 30px 40px;
    padding: 35px 35px 20px;
    border-radius: 30px;
    background-color: var(--sg-surface);
    outline: none;
}

.usage-alert__body {
    max-height: min(450px, 55vh);
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}

.usage-alert__disable {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
}

.usage-alert__disable input {
    width: 22px;
    height: 22px;
    accent-color: var(--sg-primary);
}

.usage-alert__disable .entry-label {
    margin: 0;
}

.usage-alert__tail {
    position: absolute;
    right: 98px;
    bottom: 22px;
    width: 30px;
    fill: var(--sg-light-background);
}

.usage-alert__assistant {
    position: absolute;
    right: -85px;
    bottom: -10px;
    width: 171px;
    height: 314px;
    pointer-events: none;
}

@keyframes usage-alert-in {
    from { opacity: 0; transform: scale(1.1); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .usage-alert {
        animation: none;
    }
}

.page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px 0;
}

.page-title-row .page-title {
    margin: 0;
    /* Takes what the back arrow and the controls leave, so the controls stay at the right. */
    flex: 1;
    min-width: 0;
}

/* The back arrow at the left of the title, as the Shell has it. A 44px target around a 24px chevron. */
.page-title__back {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -6px 4px -6px -12px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.page-title__back img {
    width: 24px;
    height: 24px;
}

.page-title__back:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: -3px;
    border-radius: 8px;
}

.page-title-row__trailing {
    display: flex;
    align-items: center;
}

.info-button {
    width: 26px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.info-button img {
    width: 100%;
    display: block;
}

/* ---------- Soforthilfe (StressPage) ---------- */

.stress {
    padding: 0;
}

.stress__description {
    margin: 0 0 10px;
}

.stress__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stress__list > li {
    padding-bottom: 10px;
}

/* The shared card: Primary fill, 10px radius, the card shadow. */
.stress__card,
.stress__all {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-flowing-16);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.stress__card {
    background-color: var(--sg-primary);
    color: var(--sg-primary-blue);
}

.stress__card-icon {
    width: 20px;
    margin-right: 10px;
    flex: none;
}

.stress__card-title {
    flex: 1;
}

.stress__card-stars {
    width: 30px;
    margin-left: 10px;
    flex: none;
}

.stress__all {
    margin: 10px 0 20px;
    background-color: var(--sg-primary-blue);
    color: var(--sg-primary);
}

.stress__all-icon {
    width: 20px;
    margin-right: 20px;
    flex: none;
}

.stress__rule {
    margin: 10px 0 10px;
    height: 2px;
    border: none;
    background-color: var(--sg-default-background);
}

.sg-loading--inline {
    --sg-spinner-size: 28px;
    min-height: 0;
    padding: 20px 0;
}

/* ---------- CustomButton ---------- */

.custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border: none;
    border-radius: 30px;
    font-family: var(--sg-font-body);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.custom-button--dark {
    background-color: var(--sg-blue);
    color: var(--sg-surface);
}

.custom-button--light {
    background-color: var(--sg-surface);
    color: var(--sg-blue);
}

.custom-button--fill {
    width: 100%;
}

.custom-button:disabled,
.custom-button--dimmed {
    opacity: 0.5;
}

.custom-button:disabled {
    cursor: default;
}

.custom-button:active:not(:disabled) {
    transform: scale(0.97);
}

.custom-button__icon {
    width: 30px;
    height: 30px;
    margin: 0 10px 0 0;
    flex: none;
    /* An icon that is not square keeps its proportions inside the 30px box. */
    object-fit: contain;
}

.custom-button__label {
    flex: 1;
    text-align: center;
}

/* ---------- Stress level thermometer ----------
   An 80px column centred on the page: a 50px smiley, a 10px cap, eleven bars (the ends 30px,
   the rest 40px) with the number laid over each, and a closing cap. Bars are stretched
   artwork, not CSS, which is why they are images. */

.thermo__question {
    margin: 10px;
    text-align: center;
}

.thermo {
    width: 80px;
    margin: 0 auto;
}

.thermo__smiley {
    height: 60px;
}

.thermo__smiley img {
    width: 50px;
    height: 50px;
    display: block;
    /* Centred over the column of bars, not at its left edge; the compact column of the coping exercise shares this. */
    margin: 0 auto;
}

.thermo__cap {
    display: flex;
    width: 80px;
}

.thermo__cap img {
    width: 80px;
    height: 10px;
    object-fit: fill;
    display: block;
}

.thermo__cap--top {
    height: 15px;
    align-items: flex-end;
}

.thermo__cap--bottom {
    height: 15px;
    align-items: flex-start;
}

.thermo__row {
    position: relative;
    height: 40px;
}

.thermo__row--end {
    height: 30px;
}

.thermo__row img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.thermo__button {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

/* The narrower column of the coping exercise: 60 wide, rows of 36 and 26. */
.thermo--compact {
    width: 60px;
}

.thermo--compact .thermo__smiley {
    height: 50px;
}

.thermo--compact .thermo__smiley img {
    width: 40px;
    height: 40px;
}

.thermo--compact .thermo__cap {
    width: 60px;
}

.thermo--compact .thermo__cap img {
    width: 60px;
}

.thermo--compact .thermo__cap--top,
.thermo--compact .thermo__cap--bottom {
    height: 10px;
}

.thermo--compact .thermo__row {
    height: 36px;
}

.thermo--compact .thermo__row--end {
    height: 26px;
}

.thermo__save {
    display: flex;
    justify-content: center;
    margin: 20px;
}

.thermo__error {
    text-align: center;
}

.thermo__save--wide {
    margin: 5px 5px 15px;
}

/* ---------- Stress level popup ---------- */

.level-popup {
    position: fixed;
    inset: 0;
    z-index: 250;
    max-width: var(--sg-app-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--sg-surface);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    animation: usage-alert-in 0.3s ease-out both;
}

.level-popup__close {
    align-self: flex-end;
    margin: 36px 18px 0 0;
    padding: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.level-popup__close img {
    width: 100%;
    height: 100%;
}

.level-popup__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px 15px;
}

@media (prefers-reduced-motion: reduce) {
    .level-popup {
        animation: none;
    }
}

/* ---------- Expandable article groups ---------- */

.article-groups,
.article-groups__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-groups__group {
    padding: 5px 0 5px;
}

.article-groups__header {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 66px;
    padding: 10px 20px 15px;
    border: none;
    border-radius: 10px;
    background-color: rgba(157, 198, 235, 0.7);
    color: var(--sg-primary-dimmed);
    font-family: var(--sg-font-body);
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.article-groups__header--open {
    background-color: rgba(108, 148, 189, 0.7);
    color: var(--sg-white-blue);
}

.article-groups__header--single {
    background-color: rgba(157, 198, 235, 0.7);
    color: var(--sg-primary);
    font-size: 20px;
}

.article-groups__name,
.article-groups__single-title {
    flex: 1;
    overflow-wrap: anywhere;
}

.article-groups__arrow {
    width: 20px;
    height: 20px;
    flex: none;
}

.article-groups__items > li {
    padding: 5px 5px 0;
}

/* ---------- Quiz list card ---------- */

.quiz-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background-color: #6b94bc;
    color: var(--sg-white-blue);
    font-family: var(--sg-font-body);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.quiz-card--available {
    background-color: #4772a6;
}

.quiz-card:not(.quiz-card--available) {
    opacity: 0.6;
}

.quiz-card__icon {
    grid-row: 1 / 3;
    width: 30px;
}

.quiz-card__heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.quiz-card__kind {
    font-size: 20px;
    font-weight: 700;
}

.quiz-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.quiz-card__belongs {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--sg-aqua-blue);
    font-size: 12px;
}

.quiz-card__belongs img {
    width: 10px;
}

.quiz-card__state {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 25px;
}

/* ---------- Quiz summary ---------- */

.quiz-done {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70vh;
    padding: 0 10px;
}

.quiz-done__art {
    position: relative;
    margin: 0 auto 20px;
    padding: 0 20px;
    max-width: 390px;
}

/* All four layers are as wide as the first one, 350px at most, so they lie exactly over one another. */
.quiz-done__layer {
    display: block;
    width: 100%;
    max-width: 350px;
}

/* The others are laid over the first. A width of 100% there would be the width of the padded box, 40px more than the first
   layer has -- and would win over the two insets -- so the width is taken from the same 20px on each side. */
.quiz-done__layer:not(:first-child) {
    position: absolute;
    top: 0;
    left: 20px;
    width: calc(100% - 40px);
    height: 100%;
    object-fit: contain;
}

.quiz-done__layer--2 {
    animation: quiz-slide-from-right 0.35s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

/* The native timing: the second layer 0.4s after the page, the third 0.3s after that one has landed, the fourth 0.3s after
   the third, each 0.35s long and the last 0.25s. */
.quiz-done__layer--3 {
    animation: quiz-slide-from-left 0.35s 1.05s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.quiz-done__layer--4 {
    animation: quiz-fade-in 0.25s 1.7s ease-out both;
}

/* QuizDoneLabel: 28px bold dark blue at a line height of 1.5. */
.quiz-done__label {
    margin: 0 0 20px;
    text-align: center;
    font-family: var(--sg-font-alt);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sg-dark-blue);
}

.quiz-done__action {
    display: flex;
    justify-content: center;
    margin: 10px;
}

@keyframes quiz-slide-from-right {
    from { transform: translateX(700px); }
    to   { transform: translateX(0); }
}

@keyframes quiz-slide-from-left {
    from { transform: translateX(-700px); }
    to   { transform: translateX(0); }
}

@keyframes quiz-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-done__layer--2,
    .quiz-done__layer--3,
    .quiz-done__layer--4 {
        animation: none;
    }
}

/* ---------- Discover menu cards ----------
   MoreNavigationPage: a WhiteBlue card per entry with the card shadow, an 80px illustration at
   the left at 80% opacity, a 20px icon in the top-right corner and a centred 24px bold caption. */

.menu-cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-cards__item {
    padding: 10px 20px;
}

.menu-cards__item--disabled {
    opacity: 0.5;
}

.menu-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 120px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background-color: var(--sg-white-blue);
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.menu-card__illustration {
    position: absolute;
    left: 20px;
    top: 50%;
    height: 80px;
    transform: translateY(-50%);
    opacity: 0.8;
}

.menu-card__icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
}

.menu-card__title {
    flex: 1;
    padding: 0 20px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    z-index: 10;
}

/* ---------- Phase exercise list (applying phase, relapse prevention) ---------- */

.phase-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.phase-list > li {
    padding: 5px 15px 10px;
}

.phase-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 25px 35px 35px;
    border: none;
    border-radius: 10px;
    background-color: var(--sg-white-blue);
    font-family: var(--sg-font-body);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.phase-card--subdued {
    background-color: rgba(245, 252, 255, 0.7);
}

.phase-card__icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
}

.phase-card__title {
    display: block;
    color: var(--sg-primary);
    font-size: 18px;
    font-weight: 700;
}

.phase-card__description {
    display: block;
    margin-top: 10px;
    color: var(--sg-primary-dimmed);
    font-size: 16px;
    line-height: 1.2;
}

/* ---------- Settings hub ---------- */

.settings {
    padding: 20px 20px 10px;
}

.settings__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-bottom: 10px;
}

.settings__row--dim {
    opacity: 0.5;
}

.settings__label {
    flex: 1;
    color: var(--sg-primary);
    font-size: var(--sg-size-flowing-text);
    font-weight: 700;
}

.sg-switch {
    appearance: none;
    flex: none;
    width: 50px;
    height: 28px;
    border-radius: 14px;
    background: var(--sg-gray-primary-default);
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s;
}

.sg-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sg-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s;
}

.sg-switch:checked {
    background: var(--sg-blue);
}

.sg-switch:checked::after {
    transform: translateX(22px);
}

.sg-switch:disabled {
    cursor: default;
}

.sg-switch:focus-visible {
    outline: 2px solid var(--sg-blue);
    outline-offset: 2px;
}

.settings__time,
.settings__select {
    flex: none;
    border: none;
    background: transparent;
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    font-size: 20px;
    font-weight: 700;
}

.settings__time--dim {
    opacity: 0.5;
}

.settings-cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-cards > li {
    padding: 5px 10px;
}

.settings-card {
    display: block;
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 10px;
    background-color: var(--sg-white-blue);
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.settings-card__title {
    display: block;
    font-size: var(--sg-size-flowing-text);
    font-weight: 700;
}

.settings-card__value {
    display: block;
    font-size: var(--sg-size-flowing-text);
}

.settings__version {
    margin: 20px 10px;
    color: var(--sg-primary);
    text-align: center;
}

.settings__centre {
    text-align: center;
}

/* ---------- Status strip (UserMessageView) ---------- */

.user-message {
    display: flex;
    align-items: stretch;
    height: 50px;
    margin: 10px 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #A5C6D3;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    animation: user-message-show 5s ease-in-out both;
}

.user-message__assistant {
    display: flex;
    align-items: flex-end;
    flex: none;
    width: 50px;
    background-color: var(--sg-primary);
}

.user-message__assistant img {
    width: 50px;
    height: 50px;
    display: block;
}

.user-message__body {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 20px 0 15px;
    color: var(--sg-primary);
    font-size: 12px;
    font-weight: 700;
}

.user-message__icon {
    width: 15px;
    margin-right: 5px;
    flex: none;
}

@keyframes user-message-show {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .user-message {
        animation-duration: 5s;
    }
}

/* ---------- Form screens (contact, data-protection request, profile) ---------- */

.form-page {
    padding: 0 0 10px;
}

.form-page__intro,
.form-page__para {
    margin: 0 0 10px;
}

.form-page__note {
    margin: 0;
    font-style: italic;
}

.form-page__item {
    margin: 0 0 0 20px;
    font-style: italic;
}

.form-page__item--last {
    margin-bottom: 10px;
}

.form-page__actions {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

/* DiaryEntryFrame: the rounded card an editor or a picker sits in. */
.entry-card {
    margin: 10px 0 0;
    padding: 20px;
    border-radius: 5px;
    background-color: var(--sg-white-blue);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.entry-card--tinted {
    padding: 0 10px;
    background-color: var(--sg-primary-blue-dark);
}

.entry-card__editor {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-flowing-16);
    resize: vertical;
}

.entry-card__editor--tall {
    min-height: 300px;
}

.entry-card__editor:focus,
.entry-card__select:focus {
    outline: 2px solid var(--sg-blue);
    outline-offset: 2px;
}

.entry-card__select {
    display: block;
    width: 100%;
    min-height: 48px;
    border: none;
    background: transparent;
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-flowing-16);
}

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

/* ---------- FAQ questions ---------- */

.faq-question {
    position: relative;
    margin: 0 0 5px;
    border-radius: 10px;
    background-color: var(--sg-white-blue);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.faq-question__header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 10px 10px 20px;
    border: none;
    background: transparent;
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    text-align: left;
    cursor: pointer;
}

.faq-question__title {
    flex: 1;
    padding-right: 10px;
    font-size: 18px;
    font-weight: 700;
}

.faq-question__answer {
    padding: 0 15px 15px 20px;
    color: var(--sg-primary-dimmed);
    font-size: 16px;
    line-height: 1.2;
}

.faq-question__answer .sg-content{
    background-color: transparent;
}
/* ---------- Consents ---------- */
.consents {
    padding: 10px 20px 20px;
}

.consents__title {
    text-align: center;
}

.consents__document {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 10px 0 0;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--sg-default-light);
    color: var(--sg-primary);
    text-decoration: none;
}

.consents__document img {
    height: 20px;
    margin: 0 15px 0 10px;
}

.consents__document-name {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.consents__document-type {
    margin: 0 10px;
    color: var(--sg-primary-disabled);
    font-size: 16px;
}

.consent {
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--sg-default-light);
}

.consent__statement {
    margin: 0 0 10px;
    font-size: 16px;
}

.consent__row {
    display: flex;
    gap: 10px;
}

.consent__media {
    width: 50px;
    height: 50px;
    flex: none;
}

.consent__body {
    flex: 1;
}

.consent__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.consent__title {
    flex: 1;
    font-weight: 700;
    font-size: var(--sg-size-flowing-16);
    color: var(--sg-primary);
}

.consent__title--missing {
    color: var(--sg-red);
}

.consent__required {
    margin-left: 4px;
    color: var(--sg-red);
}

.consent__description {
    margin: 8px 0 0;
    font-size: 18px;
}

.consent__note {
    margin: 10px 0 0;
    color: var(--sg-primary-dimmed);
    font-size: 16px;
}

.consent__note--text {
    margin-top: 0;
    font-style: italic;
}

.consents__actions {
    margin: 20px 0 0;
}

/* ---------- Assistant choice ---------- */

.assistant-page {
    padding: 20px 20px 0;
}

.assistant-page__list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.assistant-page__option {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.assistant-page__option--selected {
    background-color: var(--sg-default-light);
}

.assistant-page__action {
    display: flex;
    justify-content: center;
    padding: 10px 40px;
}

.assistant-page__figures {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 10px;
}

.assistant-page__figures img {
    height: 270px;
}

/* ---------- Insurance selection ---------- */

.insurance-sheet {
    position: fixed;
    inset: 0;
    z-index: 260;
    max-width: var(--sg-app-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--sg-surface);
    animation: usage-alert-in 0.3s ease-out both;
}

.insurance-sheet__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 10px;
    align-items: center;
    padding: 20px 15px 10px;
}

.insurance-sheet__search {
    grid-column: 1;
}

.insurance-sheet__close {
    grid-column: 2;
    grid-row: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.insurance-sheet__close img {
    width: 100%;
    height: 100%;
}

.insurance-sheet__private {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--sg-primary);
    font-weight: 700;
}

.insurance-sheet__list {
    flex: 1;
    margin: 0;
    padding: 0 15px 15px;
    list-style: none;
    overflow-y: auto;
}

.insurance-sheet__item {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 12px 5px;
    border: none;
    border-bottom: 1px solid var(--sg-default-light);
    background: transparent;
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .insurance-sheet {
        animation: none;
    }
}

/* ---------- Profile ---------- */

.profile-page {
    padding: 0 20px 20px;
}

.profile-page__field {
    margin: 0 0 20px;
}

.profile-page__label {
    display: block;
    margin: 0 0 6px;
    color: var(--sg-primary);
    font-size: var(--sg-size-flowing-text);
    font-weight: 700;
}

.profile-page__readonly {
    margin: 0;
    padding: 10px;
    border-radius: var(--sg-radius-close);
    background-color: var(--sg-gray-90);
    color: var(--sg-gray-darker);
    font-size: var(--sg-size-flowing-16);
}

.profile-page__password {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-page__square {
    width: 50px;
    height: 50px;
    flex: none;
    padding: 5px;
    border: none;
    border-radius: 10px;
    background-color: var(--sg-primary);
    cursor: pointer;
}

.profile-page__square img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile-page__passwords {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    align-items: start;
    margin: 10px 0 0;
}

.profile-page__passwords .profile-page__small {
    grid-column: 1;
}

.profile-page__passwords .profile-page__square {
    grid-column: 2;
    grid-row: 1 / 3;
}

.profile-page__small {
    color: var(--sg-primary);
    font-size: var(--sg-size-form-label);
}

.profile-page__pronoun {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-page__registered {
    margin: 0 0 10px;
    color: var(--sg-primary);
    font-size: var(--sg-size-form-label);
}

.profile-page__save {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.profile-page__insurance {
    display: block;
    min-height: 44px;
    text-align: left;
    cursor: pointer;
}

/* ---------- Dashboard (MainPage) ---------- */

.dash {
    padding: 15px 0 0;
}

.dash__milestones {
    margin: 0 16px 20px;
}

/* WhiteBox: the rounded outlined panel the dashboard's boxes share. */
.white-box {
    margin: 0 15px 25px;
    padding: 25px 25px 20px;
    border: 1px solid var(--sg-gray);
    border-radius: 24px;
    background-color: var(--sg-white);
}

.white-box--motivation {
    padding: 20px 40px 25px;
}

.white-box__icon {
    display: block;
    height: 24px;
    margin: 0 0 10px;
}

.white-box__text {
    margin: 0 10px;
    color: var(--sg-dark-blue);
    font-size: 17px;
    line-height: 1.3;
}

.dash__title {
    margin: 0;
    padding: 20px 15px 18px;
    color: var(--sg-dark-blue);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
}

.dash__goals {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--sg-font-body);
    text-align: left;
    cursor: pointer;
}

.dash__goals .white-box {
    padding: 32px;
}

.dash__goals-text {
    display: block;
    margin: 0 0 24px;
    color: var(--sg-dark-blue);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.dash__goals-next {
    display: block;
    color: var(--sg-blue-shadow);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.dash__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash__items > li {
    margin: 0 0 5px;
}

.dash-item {
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    align-items: center;
    width: 100%;
    height: 100px;
    padding: 0 15px;
    border: none;
    background-color: rgba(245, 252, 255, 0.6);
    font-family: var(--sg-font-body);
    text-align: left;
    cursor: pointer;
}

.dash-item--gamification {
    background-color: rgba(224, 255, 236, 0.6);
}

.dash-item__image {
    height: 60px;
    justify-self: start;
}

.dash-item__body {
    display: flex;
    flex-direction: column;
    color: var(--sg-primary);
}

.dash-item__title {
    font-size: var(--sg-size-flowing-text);
    font-weight: 700;
}

.dash-item__date {
    color: var(--sg-primary-blue);
    font-weight: 700;
}

.dash-item__icon {
    justify-self: end;
    max-width: 60px;
    max-height: 60px;
}

.dash__empty {
    margin: 60px;
    color: var(--sg-dark-blue);
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
}

/* ---------- Weekly reflection ---------- */

.reflection {
    margin: 0 0 12px;
}

.reflection__title {
    margin: 0 15px 18px;
    color: var(--sg-dark-blue);
    font-size: 24px;
    font-weight: 400;
}

.reflection__description {
    margin: 0 15px 24px;
    color: var(--sg-darker-blue);
    font-size: 14px;
    line-height: 1.3;
}

.reflection__info {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 0 12px 15px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.reflection__info img {
    width: 100%;
    height: 100%;
}

.reflection__hint {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin: 0 15px 18px;
    font-size: 14px;
    color: var(--sg-darker-blue);
}

.reflection__swipe {
    display: inline-flex;
    flex: 1;
    align-items: center;
    color: var(--sg-blue-shadow);
}

.reflection__swipe img {
    height: 24px;
}

.reflection__box {
    margin: 0 15px 25px;
    border: 1px solid var(--sg-gray);
    border-radius: 24px;
    background-color: var(--sg-white);
    overflow: hidden;
}

.reflection__strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.reflection__strip::-webkit-scrollbar {
    display: none;
}

.reflection__item {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 40px 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.reflection__question {
    margin: 0;
    color: var(--sg-dark-blue);
    font-size: 24px;
    text-align: center;
}

.reflection__done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    color: var(--sg-dark-blue);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.reflection__done input {
    width: 22px;
    height: 22px;
    accent-color: var(--sg-dark-blue);
}

.reflection__dots {
    display: flex;
    justify-content: center;
    padding: 0 0 40px;
}

/* One question left: no dots, but the space under the checkbox stays about the same. */
.reflection__dots--none {
    padding-bottom: 20px;
}

.reflection__strip {
    user-select: none;
}

.reflection__dot {
    width: 4px;
    height: 4px;
    margin: 0 4px;
    border-radius: 4px;
    background-color: var(--sg-gray);
}

.reflection__dot--current {
    background-color: var(--sg-blue);
}

/* ---------- Toggle button (CustomToggleButtonView) ---------- */

.toggle-button {
    position: relative;
    display: block;
    min-width: 80px;
    height: 62px;
    padding: 0;
    border: none;
    border-radius: 24px;
    /* the base: slightly taller than the face, so it shows beneath it */
    background-color: var(--sg-shadow-blue);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.toggle-button__face {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 24px;
    background-color: var(--sg-blue);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    transition: background-color 0.1s, transform 0.1s;
}

.toggle-button__face img {
    width: 30px;
    height: 30px;
}

/* Pressed in: the face takes the base's colour and drops onto it. */
.toggle-button--selected {
    height: 56px;
}

.toggle-button--selected .toggle-button__face {
    background-color: var(--sg-shadow-blue);
    box-shadow: none;
}

.toggle-button:focus-visible {
    outline: 2px solid var(--sg-blue);
    outline-offset: 3px;
}

/* ---------- Goal selection ---------- */

.goal-select {
    margin: 0 16px;
    padding: 20px;
    border: 1px solid var(--sg-gray-primary-default);
    border-radius: 8px;
    background-color: var(--sg-surface);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    /* the card sits in the middle of the screen, as the native three-row grid centres it */
    margin-top: 12vh;
}

.goal-select__title {
    margin: 42px 0 0;
    color: var(--sg-blue-shadow);
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}

.goal-select__description {
    margin: 30px 0;
    color: var(--sg-dark-blue);
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
}

.goal-select__choices {
    display: flex;
    justify-content: center;
    gap: 36px;
}

.goal-select__choice {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goal-select__label {
    margin-top: 18px;
    color: var(--sg-dark-blue);
    font-size: 20px;
    font-weight: 700;
}

.goal-select__action {
    display: flex;
    justify-content: center;
    margin: 32px 0 42px;
}

.goal-select__error {
    text-align: center;
}

/* ---------- Storyline ---------- */

.storyline {
    position: fixed;
    inset: 0;
    z-index: 280;
    max-width: var(--sg-app-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 30px 0 20px;
    background-color: var(--sg-surface);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    outline: none;
    animation: usage-alert-in 0.3s ease-out both;
}

.storyline__close {
    align-self: flex-end;
    margin: 20px 10px 0 0;
    padding: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.storyline__close img {
    width: 100%;
    height: 100%;
}

.storyline__page {
    flex: 1;
    overflow-y: auto;
    padding: 0 60px;
    text-align: center;
    /* Vertical movement scrolls a tall page; sideways movement is the swipe to the next or previous page. */
    touch-action: pan-y;
}

.storyline__picture {
    display: block;
    height: 180px;
    max-width: 100%;
    margin: 0 auto 16px;
    object-fit: contain;
}

.storyline__title {
    margin: 0 0 8px;
    color: var(--sg-dark-blue);
    font-size: 28px;
    font-weight: 700;
}

.storyline__action {
    display: flex;
    justify-content: center;
    margin: 10px 40px;
}

.storyline__nav {
    display: grid;
    grid-template-columns: 54px 1fr 54px;
    align-items: center;
    margin: 0 0 40px;
}

.storyline__arrow {
    width: 54px;
    height: 54px;
    padding: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.storyline__arrow:disabled {
    visibility: hidden;
}

.storyline__arrow img {
    width: 100%;
    height: 100%;
}

.storyline__dots {
    display: flex;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .storyline {
        animation: none;
    }

    .toggle-button__face {
        transition: none;
    }
}

/* ---------- ABC model: wizard and summary ---------- */

.abc {
    padding: 10px;
}

.abc__name {
    margin: 0 0 24px;
}

.abc__name-note {
    margin: 4px 0 10px;
    color: #95a7c4;
    font-size: var(--sg-size-form-description);
}

.abc__step {
    margin: 0 0 24px;
    padding: 10px;
    border-radius: 10px;
}

.abc__step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 0 10px;
}

.abc__letter,
.abc-card__letter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 23px;
    background-color: var(--sg-white);
    color: var(--sg-dark-blue);
    font-size: 24px;
    font-weight: 700;
}

.abc__step-text {
    flex: 1;
    text-align: center;
}

.abc__header,
.abc-card__header {
    margin: 0;
    color: var(--sg-dark-blue);
    font-size: var(--sg-size-label-header);
    font-weight: 700;
}

.abc__description,
.abc-card__kind {
    margin: 0;
    color: var(--sg-dark-blue);
    font-size: 14px;
    font-weight: 700;
}

.abc__help {
    margin: 24px 0 18px 0;
    font-size: 18px;
}

.abc__example {
    display: flex;
    gap: 4px;
    margin: 4px 0 18px;
    font-size: 16px;
}

.abc__editor {
    display: block;
    width: 100%;
    min-height: 200px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-flowing-18);
    resize: vertical;
}

.abc__nav {
    /* Two columns of one half each, minus the gap: the buttons are as wide as that and no wider, whatever their label says. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 10px 0;
}

/* A label too long for its half wraps, in the middle of a word if it has to, and the button keeps its width. */
.abc__nav .custom-button {
    min-width: 0;
}

.abc__nav .custom-button__label {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.abc__summary-title {
    text-align: center;
    margin: 0 0 15px;
}

.abc__summary-name {
    margin: 0 0 15px;
    text-align: center;
}

.abc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
}

.abc-card__body {
    flex: 1;
    text-align: center;
}

.abc-card__text {
    margin: 0;
    padding: 10px 20px;
    font-style: italic;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.abc__save {
    margin: 24px 0 0 0;
}

/* ---------- Chapter list (education and exercise overviews) ---------- */

.article-groups__row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.article-groups__row .article-groups__header {
    flex: 1;
}

.article-groups__bonus {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    flex: none;
}

.article-groups__info {
    flex: none;
    width: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.article-groups__info img {
    width: 30px;
    height: 30px;
}

.chapter-card {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 25px 35px 40px 25px;
    border: none;
    border-radius: 10px;
    background-color: var(--sg-white-blue);
    font-family: var(--sg-font-body);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

.chapter-card--locked {
    cursor: default;
}

/* The veil: the page's surface at 40%, over the whole card. */
.chapter-card--locked::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background-color: var(--sg-surface);
    opacity: 0.4;
    pointer-events: none;
}

.chapter-card__icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
}

.chapter-card__title {
    display: block;
    color: var(--sg-primary);
    font-size: 18px;
    font-weight: 700;
}

.chapter-card__description {
    display: block;
    margin-top: 10px;
    color: var(--sg-primary-dimmed);
    font-size: 16px;
    line-height: 1.2;
}

.chapter-card__marks {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.chapter-card__marks img {
    width: auto;
    height: 20px;
}

.quiz-card--inline {
    margin: 5px 0 20px;
}

/* ---------- Grace period ---------- */

.grace {
    padding: 0 10px 10px;
}

.grace > .label-header,
.grace > .label-flowing-text {
    padding: 0 10px;
}

.grace__timeline {
    position: relative;
    margin: 0 10px 15px;
    padding: 0;
}

.grace__timeline svg {
    display: block;
    width: 100%;
    height: 60px;
}

.grace__label {
    position: absolute;
    bottom: -4px;
    font-size: 16px;
    font-weight: 700;
}

.grace__label--ninety {
    right: 25%;
    color: #E0E0E0;
}

.grace__label--plus {
    right: 0;
    color: #688292;
}

/* ---------- Results (ResultPage) ---------- */

.result {
    padding: 0;
}

.result__today {
    padding: 10px;
}

.result__centre {
    text-align: center;
}

.result__smiley {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.result__action {
    margin-top: 15px;
    text-align: center;
}

.result__rule {
    height: 1px;
    margin: 30px 0 15px;
    border: 0;
    background: var(--sg-light-background);
}

.result__chart-title {
    margin: 0 10px;
}

/* The period picker: a dark pill with the calendar in front of the choice. */
.result__range {
    display: flex;
    justify-content: center;
}

.result__picker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--sg-primary);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.result__picker img {
    height: 20px;
}

.result__picker select {
    min-height: 32px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--sg-white-blue);
    font: inherit;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

/* The list is drawn by the browser on its own background, dark in a dark scheme; the text colour alone
   left the options unreadable until highlighted. Give them both colours, and keep the list light. */
.result__picker select {
    color-scheme: light;
}

.result__picker select option {
    background: var(--sg-white-blue);
    color: var(--sg-primary);
}

.result__dates {
    margin: 10px 0 0;
    text-align: center;
    font-size: var(--sg-size-form-label);
    color: var(--sg-primary);
}

.result__chart {
    margin-top: 0;
}

/* The chart: a column of faces beside the plot, both on the same eleven rows. */
.result-chart {
    display: grid;
    grid-template-columns: auto 1fr;
}

.result-chart__faces {
    display: grid;
    grid-auto-rows: 19.5px;
    margin: 17px 0 0 5px;
}

.result-chart__faces img {
    width: 16px;
    align-self: center;
}

.result-chart__plot {
    position: relative;
    min-height: 280px;
}

.result-chart__area {
    position: relative;
    height: 214.5px;
    margin: 17px 10px 0 24px;
}

.result-chart__band {
    position: absolute;
    left: 0;
    right: 0;
}

.result-chart__band--green { background: rgba(211, 245, 211, 0.59); }
.result-chart__band--orange { background: rgba(255, 230, 222, 0.59); }
.result-chart__band--red { background: rgba(255, 209, 225, 0.59); }

.result-chart__grid {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #E0F0F5;
}

.result-chart__vgrid {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #E0F0F5;
}

.result-chart__scale {
    position: absolute;
    left: -22px;
    width: 16px;
    transform: translateY(-50%);
    text-align: right;
    font-size: 10px;
    color: #232323;
}

.result-chart__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.result-chart__stroke {
    fill: none;
    stroke: rgba(47, 48, 61, 0.39);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.result-chart__fill {
    fill: rgba(47, 48, 61, 0.12);
    stroke: none;
}

.result-chart__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.result-chart__dot--collected { background: var(--sg-orange-primary); }
.result-chart__dot--average { background: #A0A0A0; }
.result-chart__dot--outside { background: rgba(160, 160, 160, 0.39); }

.result-chart__tick {
    position: absolute;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    font-size: 10px;
    color: #232323;
    white-space: nowrap;
}

.result-chart__axis-name {
    position: absolute;
    top: calc(100% + 24px);
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: var(--sg-primary-dark-gray);
}

.result-chart__empty {
    margin: 85px 25px 0 50px;
    padding: 25px 50px;
    border: 1px solid var(--sg-primary-light);
    background: var(--sg-white-blue);
    color: var(--sg-primary);
    text-align: center;
}

/* Paging back and forward through weeks and months. */
.result__pager {
    display: flex;
    justify-content: space-between;
    margin: 0 10px;
}

.result__page {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.result__page[hidden] {
    display: block;
    visibility: hidden;
}

.result__page img {
    width: 100%;
    height: 100%;
}

.result__explanation {
    margin: 15px 25px 15px 50px;
    border: 1px solid var(--sg-primary-light);
    border-radius: 10px;
    overflow: hidden;
}

.result__explanation p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--sg-primary);
}

.result__zone {
    padding: 10px 15px;
}

.result__zone--red { background: var(--sg-light-red); }
.result__zone--orange { background: var(--sg-light-orange); }
.result__zone--green { background: var(--sg-light-green); }

.result__legend {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px 0;
}

.result__legend:last-child {
    padding-bottom: 10px;
}

.result__key {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.result__key--collected { background: var(--sg-orange-primary); }
.result__key--average { background: #A0A0A0; }
.result__key--outside { background: rgba(160, 160, 160, 0.5); }

/* Each line sits at the right-hand end, as a label with its own width would, and reads from the left. */
.result__feedback {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 15px 10px 10px;
}

.result__feedback p {
    margin: 0 0 10px;
    text-align: left;
}

/* ---------- Quiz question (QuizViewPage) ---------- */

.quiz {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--sg-tabbar-height) - var(--sg-safe-bottom) - 150px);
}

.quiz__question {
    margin: 30px;
    font-family: var(--sg-font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sg-dark-blue);
}

/* The answers sit in the middle of the space between the question and the buttons. */
.quiz__answers {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    margin: 0 30px;
    padding: 0;
}

.quiz__item {
    margin: 0;
}

.quiz__answer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    margin: 5px 0;
    padding: 20px 15px 20px 20px;
    border: 1px solid var(--sg-gray);
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 16px;
    text-align: left;
    color: var(--sg-darker-blue);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.quiz__answer:active {
    transform: scale(0.97);
}

.quiz__answer[aria-disabled="true"] {
    cursor: default;
}

.quiz__answer--chosen { border-color: var(--sg-blue); }
.quiz__answer--right { border-color: #017755; color: #017755; }
.quiz__answer--wrong { border-color: #BD6C6C; color: #BD6C6C; }

.quiz__answer-text {
    flex: 1;
    /* A flex item is as wide as its longest word unless told otherwise; let it shrink to the button. */
    min-width: 0;
    /* Normal wrapping at spaces; a single word is broken only if it is wider than the button. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* A ring that fills when the answer is chosen, then the right or wrong mark once confirmed. */
.quiz__radio {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid var(--sg-blue);
    border-radius: 50%;
}

.quiz__radio--on::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--sg-blue);
}

.quiz__mark {
    flex: none;
    width: 20px;
    height: 20px;
}

.quiz__status {
    margin: 0 0 0 5px;
    font-size: 16px;
}

.quiz__status--right { color: #017755; }
.quiz__status--wrong { color: #BD6C6C; }

.quiz__why {
    margin: 10px 0 15px;
    padding: 20px 15px 20px 20px;
    border-radius: 8px;
    background: #017755;
    color: #fff;
    font-size: 16px;
}

.quiz__why p {
    margin: 0;
}

.quiz__why .quiz__why-title {
    margin-bottom: 5px;
    font-weight: 700;
}

.quiz__action {
    margin: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .quiz__answer { transition: none; }
}

/* ---------- Workbook ---------- */

.workbook-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 12px 12px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--sg-primary-blue-dark);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    text-align: left;
    cursor: pointer;
}

.workbook-item:active {
    transform: scale(0.97);
}

.workbook-item__name {
    font-family: var(--sg-font-body);
    font-size: 14px;
    line-height: 1;
    color: var(--sg-white-blue);
}

.workbook__empty {
    margin: 120px 50px 50px;
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
    color: var(--sg-primary-blue-dark);
}

@media (prefers-reduced-motion: reduce) {
    .workbook-item:active { transform: none; }
}

/* ---------- Ranked lists (goals, stressors, inner images, warning signals) ---------- */

.ranked {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--sg-tabbar-height) - var(--sg-safe-bottom) - 110px);
    margin: 0 calc(-1 * var(--sg-page-padding));
}

/* A picture behind the whole screen, stretched to cover it. */
.ranked--art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--ranked-art) center / cover no-repeat;
    pointer-events: none;
}

.ranked > * {
    position: relative;
    z-index: 1;
}

.ranked__intro {
    margin: 5px 10px;
}

.ranked__add {
    display: flex;
    align-items: center;
    padding: 15px 10px 10px;
}

.ranked__new {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--sg-primary);
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--sg-primary);
}

.ranked__new::placeholder {
    color: var(--sg-primary);
    opacity: 1;
}

.ranked__add-button {
    flex: none;
    width: 50px;
    height: 50px;
    margin-left: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ranked__add-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.ranked__add-button img {
    width: 100%;
    height: 100%;
}

.ranked__message {
    margin: 0 10px 10px;
}

.ranked__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One item: tick box (goals), rank, handle, wording, then the buttons. The fade is the native row's gradient. */
.ranked__row {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 5px;
    background: linear-gradient(to bottom, whitesmoke 10%, transparent 100%);
}

.ranked__row--end {
    min-height: 40px;
    background: none;
}

.ranked__row--dragging {
    background: lightgray;
}

/* Where a dragged item would land: a bar of 20px in front of the row, centred on its top edge. An overlay, so nothing moves
   under the pointer while it is dragged. */
.ranked__row {
    position: relative;
}

.ranked__row--over::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 20px;
    border-radius: 4px;
    background: #D0E1F3;
    pointer-events: none;
    z-index: 1;
}

.ranked__check {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    accent-color: var(--sg-blue);
}

.ranked__rank {
    flex: none;
    width: 35px;
    text-align: center;
    color: var(--sg-primary);
}

.ranked__handle {
    flex: none;
    width: 25px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
    /* Held down with a finger, the handle is dragged and is not to offer anything else: no callout, no text or image selection. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.ranked__handle img {
    width: 20px;
    height: 20px;
    /* The touch lands on the button and not on the picture, so the browser's "inspect image" and save menu have no image to
       come up for. */
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.ranked__title {
    flex: 1;
    min-width: 0;
    margin-left: 10px;
    font-size: 20px;
    color: var(--sg-primary);
    overflow-wrap: anywhere;
}

.ranked__edit {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    margin-left: 10px;
    font-family: var(--sg-font-body);
    font-size: 20px;
    color: var(--sg-primary);
}

.ranked__icon {
    flex: none;
    width: 36px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ranked__icon img {
    width: 25px;
    height: 25px;
}

.ranked__save {
    margin: 15px 10px;
}

/* ---------- Positive self-instruction ---------- */

.psi p,
.psi label {
    margin: 0;
}

.psi__headline {
    padding: 10px;
}

.psi__card {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
}

.psi__card--situation { background: #D1D5E0; }
.psi__card--thoughts { background: #B5BDE2; }
.psi__card--care { background: #E8CFC4; }

.psi__card label {
    display: block;
}

.psi__spaced {
    margin-bottom: 10px !important;
}

.psi__described {
    margin-bottom: 15px !important;
}

.psi__entry,
.psi__editor {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 18px;
    color: var(--sg-primary);
}

.psi__entry {
    min-height: 44px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--sg-primary);
}

.psi__editor {
    min-height: 200px;
    resize: vertical;
}

/* The summary: each card overlaps the foot of the one before, so they read as one stack. */
.psi__summary {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.psi__card--summary {
    margin: 0 10px;
    padding-bottom: 30px;
}

.psi__card--summary + .psi__card--summary {
    margin-top: -20px;
}

.psi__card--summary:last-child {
    padding-bottom: 10px;
}

.psi__card--summary p:nth-child(odd) {
    margin-bottom: 5px;
}

.psi__card--summary p:nth-child(even) {
    margin-bottom: 10px;
}

.psi__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.psi__button {
    margin-top: 10px;
    padding: 10px;
}

.psi__button--next {
    grid-column: 2;
}

.psi__button--save {
    grid-column: 1 / -1;
}

/* ---------- Goal visualisation ---------- */

.gv p,
.gv label {
    margin: 0;
}

.gv__panel {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    background: var(--sg-white-blue);
}

.gv__panel label {
    display: block;
}

.gv__spaced {
    margin-bottom: 10px !important;
}

.gv__hint {
    font-size: 13px;
    line-height: 1.35;
    color: var(--sg-primary-dark-gray);
}

.gv__hint--spaced {
    margin-bottom: 15px !important;
}

.gv__entry,
.gv__editor {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 18px;
    color: var(--sg-primary);
}

.gv__entry {
    min-height: 44px;
    border-bottom: 1px solid var(--sg-primary);
}

.gv__editor {
    min-height: 200px;
    resize: vertical;
}

.gv__goal-heading {
    margin-bottom: 15px !important;
}

.gv__goals {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gv__goal {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 15px;
    border: 0;
    border-radius: 10px;
    background: #afd0d8;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    text-align: left;
    cursor: pointer;
}

.gv__goal:active {
    transform: scale(0.97);
}

.gv__goal--selected {
    background: #BAC4E5;
}

.gv__goal-rank {
    flex: none;
    width: 30px;
    font-weight: 700;
    color: #7E8CA3;
}

.gv__goal-name {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--sg-primary);
}

/* The name and the chosen goal stay on show from the second step on. */
.gv__chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    font-size: 16px;
    font-weight: 700;
    color: var(--sg-primary);
}

.gv__chip--name { background: var(--sg-primary-light); }
.gv__chip--goal { background: #BAC4E5; }

.gv__chip img {
    height: 25px;
}

.gv__part {
    padding: 10px;
}

.gv__part-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.gv__part-text {
    color: var(--sg-primary);
}

@media (prefers-reduced-motion: reduce) {
    .gv__goal:active { transform: none; }
}

/* ---------- Warning signals (selection) ---------- */

.ws {
    padding: 10px;
}

.ws__list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

/* One signal: its wording and a round tick, over a rule in the text colour. */
.ws__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--sg-primary);
}

.ws__text {
    flex: 1;
    margin: 10px 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: var(--sg-size-flowing-text);
    line-height: var(--sg-line-height-flowing);
    color: var(--sg-primary);
    text-align: left;
    cursor: pointer;
}

.ws__mark {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sg-primary);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.ws__mark-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sg-light-background);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.ws__mark--on .ws__mark-inner {
    background: var(--sg-primary);
    box-shadow: none;
}

.ws__mark-inner img {
    width: 30px;
    height: 30px;
}

.ws__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

/* ---------- Eisenhower matrix ---------- */

.em p,
.em label {
    margin: 0;
}

.em__top {
    padding: 10px;
}

.em__headline {
    margin-bottom: 15px !important;
}

/* The four quadrants as a key, two by two. */
.em__legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 30px;
}

.em__quadrant {
    display: grid;
    grid-template-columns: 4fr 6fr;
    align-items: center;
    padding: 15px;
    color: #fff;
}

.em__letter {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
}

.em__meaning {
    font-size: 12px;
}

.em__edit {
    padding: 10px;
}

.em__entry {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid var(--sg-primary);
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 18px;
    color: var(--sg-primary);
}

.em__hint {
    margin: 0 0 10px 10px !important;
    font-size: 13px;
    line-height: 1.35;
    color: #95a7c4;
}

.em__columns {
    display: grid;
    grid-template-columns: 1fr 80px;
    margin-bottom: 10px;
}

.em__columns span:first-child {
    margin-left: 10px;
}

.em__tasks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.em__task {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #D1D5E0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.em__task-name {
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid var(--sg-primary-dimmed);
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 18px;
    color: var(--sg-primary);
}

.em__task-name::placeholder {
    color: var(--sg-primary-dimmed);
}

.em__category {
    min-height: 44px;
    border: 0;
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    appearance: none;
}

.em__category option {
    color: var(--sg-primary);
}

.em__add {
    width: 66.6%;
}

/* The overview: a bar for each quadrant with its tasks beneath, ticked off when done. */
.em__overview {
    padding: 0 10px;
}

.em__bar {
    display: grid;
    grid-template-columns: 2fr 10fr;
    align-items: center;
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
}

.em__bar-letter {
    margin: 0 0 5px 15px;
    font-size: 30px;
    font-weight: 700;
}

.em__bar-text {
    font-size: 14px;
}

.em__done {
    display: grid;
    grid-template-columns: 1fr 50px;
    align-items: center;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 15px;
    border: 0;
    border-radius: 10px;
    background: var(--sg-white-blue);
    text-align: left;
    cursor: pointer;
}

.em__done:active {
    transform: scale(0.97);
}

.em__done-name {
    font-size: 18px;
    color: var(--sg-primary);
}

.em__done-box {
    width: 22px;
    height: 22px;
    margin: 0 auto;
    accent-color: var(--sg-primary);
    pointer-events: none;
}

.em__save--dim {
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    .em__done:active { transform: none; }
}

/* ---------- Coping strategy ---------- */

.cs p {
    margin: 0;
}

.cs__step {
    padding: 10px;
}

.cs__lead {
    margin-bottom: 15px !important;
}

.cs__centre {
    text-align: center;
}

/* The stressor and strategy chosen so far, kept in view above the steps that follow. */
.cs__chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 10px 0;
    padding: 10px 5px;
    border-radius: 10px;
    background: #BAC4E5;
    font-size: 16px;
    font-weight: 700;
    color: var(--sg-primary);
}

.cs__chip img {
    height: 25px;
    margin-left: 5px;
}

.cs__chip--exercise img {
    height: 15px;
    margin-left: 10px;
}

.cs__chip--exercise {
    margin-bottom: 15px;
    background: #EAA98C;
}

.cs__choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.cs__list {
    margin: 32px 0 0 0;
    padding: 0;
    list-style: none;
}

.cs__card {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 15px;
    border: 0;
    border-radius: 10px;
    background: #afd0d8;
    text-align: left;
    cursor: pointer;
}

.cs__card--chosen { background: #BAC4E5; }
.cs__card--locked { opacity: 0.6; cursor: default; }

.cs__rank {
    flex: none;
    width: 30px;
    font-weight: 700;
    color: #7E8CA3;
}

.cs__name {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--sg-primary);
}

.cs__done {
    flex: none;
    height: 30px;
}

.cs__exercise {
    margin: 0 0 10px;
    padding: 10px 0 10px 15px;
    border-radius: 10px;
    background: #afd0d8;
}

.cs__exercise--chosen { background: #EAA98C; }

.cs__exercise-head {
    display: flex;
    align-items: center;
}

.cs__exercise-pick {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.cs__exercise-pick img {
    height: 15px;
}

.cs__expand {
    flex: none;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.cs__expand img {
    width: 20px;
    height: 20px;
}

/* The same arrow open and shut: pointing down shut, turned half a circle -- up -- open. */
.cs__arrow--open {
    transform: rotate(180deg);
}

.cs__summary {
    margin-top: 5px !important;
    padding-right: 10px;
    font-size: 16px;
    color: var(--sg-primary);
}

.cs__bullet {
    position: relative;
    margin-bottom: 15px !important;
    padding-left: 35px;
    font-size: 18px;
    line-height: 1.3;
    color: var(--sg-primary);
}

.cs__bullet::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #BAC4E5;
}

.cs__step--level {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cs__open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0 20px;
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: var(--sg-primary-blue);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    font-family: var(--sg-font-body);
    font-size: 16px;
    color: var(--sg-white-blue);
    text-align: left;
    cursor: pointer;
}

.cs__open img {
    width: 20px;
}

.cs__step--content {
    padding: 0 10px;
}

/* How the stress level changed: the before and after side by side on a tinted card. */
.cs__result {
    position: relative;
    margin: 24px 0;
    padding: 10px 20px 10px;
    min-height: 200px;
}

.cs__scale {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    z-index: 1;
    height: 215px;
}

.cs__result-title {
    margin-bottom: 24px !important;
    text-align: center;
    padding-top: 24px;
}

.cs__figures {
    display: grid;
    grid-template-columns: 4fr 2fr 4fr;
    align-items: center;
}

.cs__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cs__value {
    font-size: 36px;
    font-weight: 700;
    color: var(--sg-primary);
}

.cs__figure img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.cs__trend {
    width: 40px;
    margin: 0 auto 30px;
}

.cs__verdict {
    margin: 18px 10px 32px !important;
}

.cs__finish {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
}

/* ---------- Read-aloud button ---------- */

.audio-button {
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.audio-button img {
    width: 100%;
    height: 100%;
}

.audio-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.usage-alert__audio {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* ---------- Password reset ---------- */

.reset {
    max-width: var(--sg-app-width);
    margin: 0 auto;
    padding: 20px;
}

.reset__intro {
    margin: 0 0 30px;
}

.reset__who {
    margin: 0 0 40px;
    text-align: center;
}

.reset__entry {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 0 10px;
    border: 0;
    border-bottom: 1px solid var(--sg-primary);
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 18px;
    color: var(--sg-primary);
}

.reset__entry::placeholder {
    color: var(--sg-primary);
    opacity: 0.7;
}

.reset__action {
    margin-top: 10px;
}

.reset__back {
    display: block;
    margin: 20px auto 0;
}

/* The five boxes of the code, each one digit on a light card. */
.reset__code {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 0 0 40px;
}

.reset__digit {
    padding: 5px 10px;
    background: var(--sg-white-blue);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.reset__digit-input {
    width: 1.1em;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 30px;
    text-align: center;
    color: var(--sg-primary);
}

.reset__passwords {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.reset__fields {
    flex: 1;
    min-width: 0;
}

.reset__eye {
    flex: none;
    width: 50px;
    height: 50px;
    padding: 5px;
    border: 0;
    border-radius: 10px;
    background: var(--sg-primary);
    cursor: pointer;
}

.reset__eye img {
    width: 100%;
    height: 100%;
}

/* ---------- Alert history ---------- */

.alerts {
    padding: 20px;
}

.alerts__card {
    margin: 10px;
    padding: 0 0 30px 20px;
    border-radius: 20px;
    background: #A5C6D3;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.alerts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 35px;
}

.alerts__date {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.alerts__close {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
}

.alerts__close img {
    width: 100%;
    height: 100%;
}

.alerts__text {
    margin: 10px 20px 0 0;
}

.alerts__pager {
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    align-items: center;
    height: 50px;
    margin: 10px 0;
}

.alerts__arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
}

.alerts__arrow:first-child { justify-self: start; }
.alerts__arrow:last-child { justify-self: end; }

.alerts__arrow[hidden] {
    display: block;
    visibility: hidden;
}

.alerts__arrow img {
    width: 100%;
    height: 100%;
}

.alerts__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.alerts__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sg-primary);
}

.alerts__dot--current {
    background: var(--sg-orange-primary);
}

/* ---------- Registration code (RegisterCodePage) ---------- */

.regcode {
    padding: 0 10px;
}

.regcode__brand {
    display: flex;
    align-items: center;
    margin: 60px 0 30px 0;
    color: var(--sg-dark-blue);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.regcode__brand img {
    width: 32px;
    height: 32px;
    margin: 0 10px 0 20px;
}

.regcode__title {
    margin: 0 0 30px 0;
    color: var(--sg-dark-blue);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.regcode__description {
    margin: 0 10px 24px 10px;
    color: var(--sg-darker-blue);
    font-size: 14px;
    line-height: 1.8;
}

/* The bordered entry: the colour of the border and of the text follows the state of the code. */
.regcode__entry {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--sg-divider-primary);
    border-radius: 8px;
    background: transparent;
}

.regcode__entry input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--sg-darker-blue);
    font-family: var(--sg-font-body);
    font-size: 16px;
    font-weight: 700;
}

.regcode__entry input::placeholder {
    color: var(--sg-darker-blue);
    opacity: 1;
}

.regcode__entry input:focus {
    outline: none;
}

.regcode__entry:focus-within {
    outline: 2px solid var(--sg-blue);
    outline-offset: 1px;
}

.regcode__entry > img {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0 10px;
}

.regcode__entry--valid {
    border-color: var(--sg-text-success-default);
}

.regcode__entry--valid input,
.regcode__entry--valid input::placeholder {
    color: var(--sg-text-success-default);
}

.regcode__entry--invalid {
    border-color: var(--sg-text-error-default);
}

.regcode__entry--invalid input,
.regcode__entry--invalid input::placeholder {
    color: var(--sg-text-error-default);
}

.regcode__note {
    display: flex;
    align-items: center;
    margin: 16px 10px;
    color: var(--sg-blue-shadow);
    font-size: 12px;
    line-height: 1;
}

.regcode__note img {
    flex: none;
    width: 14px;
    height: 14px;
    margin: 6px 10px 6px 0;
}

.regcode__note--error {
    color: var(--sg-text-error-default);
}

.regcode__next {
    margin-top: 10px;
}

.regcode__help {
    margin: 40px 10px 0 10px;
    min-height: 150px;
}


/* The code page fills the screen, as the native page does. */
main.page:has(> .regcode) {
    min-height: 100vh;
}

/* ---------- Gamification popups ---------- */

/* The frame the popups share: surface card, 20px radius, 20px padding, 10px from each screen edge, centred over a dimmed
   screen. Below the dialogs (200) so a notice raised from inside one stays on top, above the tab bar (100). */
.gpop {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.45);
}

.gpop__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--sg-app-width) - 20px);
    max-height: 85vh;
    padding: 20px;
    border-radius: 20px;
    background: var(--sg-surface);
    outline: none;
    animation: gpop-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gpop-in {
    from { opacity: 0; transform: translateY(500px); }
    to { opacity: 1; transform: none; }
}

.gpop__close {
    flex: none;
    align-self: flex-end;
    width: 24px;
    height: 24px;
    margin: 10px 10px 0 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
}

.gpop__close--start {
    align-self: flex-start;
    margin: 10px 0 28px 0;
}

.gpop__close img {
    display: block;
    width: 24px;
    height: 24px;
}

.gpop__close:active {
    transform: scale(0.97);
}

.gpop__close:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: 2px;
}

.gpop__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.gpop__footer {
    flex: none;
}

/* The authored markup inside a popup takes the popup's own type rather than the content stylesheet's. */
.gpop .sg-content {
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.gpop .sg-content p {
    margin: 0 0 8px 0;
}

/* The phase popups: picture, headline, description, text, and sometimes a button. */
.gphase {
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
}

.gphase__picture {
    display: block;
    width: calc(100% - 200px);
    min-width: 100px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 40px auto;
}

.gphase__headline {
    margin: 0 10px 20px 10px;
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.gphase__subheadline {
    margin: 0 10px 10px 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.gphase__content {
    margin: 0 10px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.gphase__button {
    display: flex;
    justify-content: center;
    margin: 10px 40px 30px 40px;
}

/* The 80% and 100% popups. */
.greached {
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
}

.greached__picture {
    display: block;
    width: calc(100% - 200px);
    min-width: 100px;
    height: 180px;
    margin: 0 auto 20px auto;
    object-fit: contain;
}

.greached__text {
    font-size: 18px;
    line-height: 1.4;
}

.greached__assistant {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    color: #000;
    font-size: 16px;
}

.greached__assistant img {
    width: 80px;
    height: 80px;
    margin-right: 20px;
}

.greached__audio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-body);
    font-size: 18px;
    font-weight: 700;
}

.greached__button {
    margin: 10px 0 20px 0;
}

.greached__encouragement {
    margin: 10px 0 30px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

/* The milestone popup: four layers of artwork that arrive one after the other. */
.gmile {
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
}

.gmile__art {
    display: grid;
    place-items: center;
    margin: 20px 0;
    overflow: hidden;
}

.gmile__layer {
    grid-area: 1 / 1;
    width: 100%;
    max-width: 280px;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
}

.gmile__layer--2 { animation: gmile-from-right 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }
.gmile__layer--3 { animation: gmile-from-left 0.35s cubic-bezier(0.22, 1, 0.36, 1) 1.55s both; }
.gmile__layer--4 { animation: gmile-fade 0.25s ease-out 2.2s both; }

@keyframes gmile-from-right {
    from { transform: translateX(700px); }
    to { transform: none; }
}

@keyframes gmile-from-left {
    from { transform: translateX(-700px); }
    to { transform: none; }
}

@keyframes gmile-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gmile__headline {
    margin: 0 0 20px 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.gmile__content {
    margin: 0 0 30px 0;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.gmile__button {
    margin: 10px 10px 20px 10px;
}

/* The chapter list. */
.gchapter {
    font-family: var(--sg-font-alt);
}

.gchapter__loading {
    display: flex;
    justify-content: center;
    margin: 10px 0 40px 0;
}

.gchapter__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(20, 105, 196, 0.25);
    border-top-color: var(--sg-blue);
    border-radius: 50%;
    animation: gchapter-spin 0.9s linear infinite;
}

@keyframes gchapter-spin {
    to { transform: rotate(360deg); }
}

.gchapter__header {
    display: flex;
    align-items: center;
    margin: 0 0 10px 0;
}

.gchapter__header img {
    flex: none;
    width: 24px;
    height: 24px;
    margin-right: 16px;
}

.gchapter__header h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 10px 0 0;
    color: var(--sg-dark-blue);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.gchapter__count {
    flex: none;
    color: var(--sg-dark-blue);
    font-size: 14px;
}

.gchapter__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gchapter__list li {
    border-bottom: 1px solid var(--sg-divider-primary);
}

.gchapter__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 24px 0 10px 0;
    border: 0;
    background: none;
    color: var(--sg-dark-blue);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gchapter__item--done {
    color: var(--sg-darker-blue);
}

.gchapter__item--locked {
    padding: 24px 10px 12px 0;
    color: var(--sg-dark-gray);
    cursor: default;
}

.gchapter__dot {
    flex: none;
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

.gchapter__name {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.gchapter__item--locked .gchapter__name {
    font-weight: 400;
}

.gchapter__state {
    flex: none;
    width: 20px;
}

/* In the place of the tick, for the education that is being worked on. */
.gchapter__progress {
    flex: none;
    color: var(--sg-blue-shadow);
    font-size: 12px;
    font-weight: 600;
}

.gchapter__item:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .gpop__frame,
    .gmile__layer--2,
    .gmile__layer--3,
    .gmile__layer--4,
    .gtut__bubble {
        animation: none;
    }

    .gchapter__spinner {
        animation-duration: 3s;
    }
}

/* ---------- The tutorial of the path ---------- */

.gtut {
    position: fixed;
    inset: 0;
    z-index: 160;
    box-sizing: border-box;
    max-width: var(--sg-app-width);
    margin: 0 auto;
    padding-top: 30px;
    background: var(--sg-gray-bg);
    outline: none;
}

.gtut__scroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 40px;
}

.gtut__topbar {
    position: relative;
    height: 65px;
    border-bottom: 1px solid #fff;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}

.gtut__close {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
}

.gtut__close img {
    display: block;
    width: 24px;
    height: 24px;
}

.gtut__close:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: 2px;
}

.gtut__milestones {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: end;
    margin-top: 60px;
    padding: 0 12px;
}

.gtut__milestones-title {
    align-self: start;
    color: var(--sg-dark-blue);
    font-size: 24px;
    font-weight: 700;
}

.gtut__milestones-now {
    color: var(--sg-blue-shadow);
    font-size: 24px;
    font-weight: 700;
}

.gtut__milestones-max {
    color: var(--sg-blue-shadow);
    font-size: 18px;
}

.gtut__milestones-bar {
    grid-column: 1 / 4;
    width: 100%;
    margin-top: 18px;
}

.gtut__row {
    position: relative;
}

.gtut__row--path {
    padding-top: 540px;
}

.gtut__row--phase {
    padding-bottom: 100px;
}

.gtut__row--certificate {
    margin-top: 10px;
}

.gtut__row--goal {
    padding-bottom: 300px;
}

.gtut__chapter {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    margin: 10px 12px 0 12px;
    padding: 20px;
    border-radius: 8px;
    background: var(--sg-surface);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}

.gtut__chapter img {
    width: 25px;
    height: 25px;
    margin-right: 20px;
}

.gtut__chapter-title {
    color: var(--sg-dark-blue);
    font-size: 20px;
    font-weight: 700;
}

.gtut__chapter-meter {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-left: 12px;
    color: var(--sg-dark-blue);
    font-size: 12px;
}

.gtut__chapter-meter > span:first-child {
    margin-right: 6px;
}

.gtut__chapter-meter > span:last-child {
    margin: 0 12px 0 6px;
}

.gtut__chapter-track {
    position: relative;
    height: 10px;
    margin-top: 2px;
    border-radius: 10px;
    background: var(--sg-gray-primary-default);
}

.gtut__chapter-track > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: var(--sg-blue);
}

/* The certificate and the goal as the tutorial draws them: a blue pill on its lip. */
.gtut__pill {
    margin: 0 12px;
}

.gtut__pill-face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    min-width: 80px;
    height: 74px;
    padding: 6px;
    border-radius: 40px;
    background: var(--sg-blue);
    box-shadow: 0 6px 0 var(--sg-shadow-blue), 0 8px 3px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-weight: 700;
}

.gtut__pill-face--certificate { font-size: 16px; }
.gtut__pill-face--certificate img { width: 30px; height: 30px; }
.gtut__pill-face--goal { font-size: 24px; }
.gtut__pill-face--goal img { width: 48px; height: 48px; }

.gtut__dashline {
    display: block;
    width: 0;
    height: 30px;
    margin: 10px auto 0 auto;
    border-left: 2px dashed var(--sg-gray);
}

/* The speech bubbles. Each sits at a fixed distance below the top of its row, as in the native view. */
.gtut__bubble {
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--sg-gray-bg);
    border-radius: 12px;
    background: var(--sg-surface);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    animation: gtut-pop 0.3s ease-out both;
}

@keyframes gtut-pop {
    0% { opacity: 0; transform: scale(1.2); }
    15% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: none; }
}

.gtut__bubble-close {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.gtut__bubble-close img {
    display: block;
    width: 24px;
    height: 24px;
}

.gtut__bubble-close:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: 2px;
}

.gtut__bubble-title {
    margin: 0 0 6px 0;
    color: var(--sg-blue);
    font-size: 16px;
}

.gtut__bubble-text {
    margin: 0;
    color: var(--sg-dark-blue);
    font-size: 14px;
    line-height: 1.2;
}

.gtut__bubble--milestones { top: 0; left: 10px; width: 200px; min-height: 150px; }
.gtut__bubble--chapters { top: 24px; right: 42px; width: 224px; min-height: 120px; }
.gtut__bubble--progressbar { top: 52px; right: 36px; width: 224px; min-height: 120px; }
.gtut__bubble--lesson { top: 584px; left: 0; right: 0; margin: 0 auto; width: 210px; min-height: 140px; }
.gtut__bubble--start { top: 680px; left: 0; right: 0; margin: 0 auto; width: 210px; min-height: 156px; }
.gtut__bubble--nextstep { top: 770px; left: 0; right: 0; margin: 0 auto; width: 236px; min-height: 140px; }
.gtut__bubble--quiz { top: 836px; right: 36px; width: 210px; min-height: 160px; }
.gtut__bubble--newphase { top: 72px; left: 0; right: 0; margin: 0 auto; width: 210px; min-height: 138px; }
.gtut__bubble--certificate { top: 96px; left: 0; right: 0; margin: 0 auto; width: 210px; min-height: 200px; }
.gtut__bubble--goal { top: 66px; left: 0; right: 0; margin: 0 auto; width: 200px; min-height: 180px; }


/* Controls that carry the card look of the elements they replaced. */
.chapter-progress__card { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.chapter-progress__card:focus-visible { outline: 3px solid var(--sg-blue-shadow); outline-offset: 3px; }
.gend__kicker, .gend__name, .gend__status { display: block; }


/* Authored paragraphs inside the popups take the popup's own type; the content stylesheet would otherwise set them smaller. */
.gpop .sg-content p,
.gpop .sg-content li {
    margin: 0 0 8px 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.gphase__subheadline .sg-content p { margin: 0; }

.gchapter__dot { object-fit: contain; }

/* ---------- Registration form (RegisterView) ---------- */

.regform {
    overflow-anchor: none; /* the page is kept in place by hand when the wording changes; see stablelayout.js */
    padding: 10px 0;
}

.regform__title {
    text-align: center;
}

.regform__label {
    display: block;
    margin: 32px 0 0 0;
    font-weight: 500;
    font-size: var(--sg-size-flowing-16);
}

.regform__hint {
    margin: 0 0 4px 0;
    color: var(--sg-primary-dark-gray);
    font-size: 13px;
    line-height: 1.5;
}

/* The entries are 18px bold, in the primary colour; a value that was rejected turns red until it is edited. */
.regform__entry {
    font-size: 18px;
    font-weight: 700;
}

.regform__entry::placeholder {
    color: var(--sg-primary);
    opacity: 1;
}

.regform__entry--invalid {
    color: var(--sg-red);
    border-color: var(--sg-red);
}

.regform__passwords {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
}

.regform__passwords-fields {
    min-width: 0;
}

.regform__passwords-fields .regform__label {
    margin: 10px 0 4px 0;
}

.regform__eye {
    width: 50px;
    height: 50px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: var(--sg-primary);
    cursor: pointer;
}

.regform__eye:active {
    background: #1F202B;
    transform: scale(0.97);
}

.regform__eye img {
    display: block;
    width: 100%;
    height: 100%;
}

.regform__eye:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: 2px;
}

.regform__pronoun {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 10px 0;
}

.regform__pronoun .regform__label {
    margin: 0;
}

.regform__field {
    margin: 0 0 20px 0;
}

.regform__field .entry-card {
    margin-top: 4px;
}

/* The year and gender selects look like the insurance field: white, with its border and radius. */
.regform__field .entry-card--tinted {
    background-color: var(--sg-white);
    border: 1px solid var(--sg-gray-primary-default);
    border-radius: var(--sg-radius-close);
    box-shadow: none;
}

/* No blue frame while the list is open. */
.regform__field .entry-card__select:focus {
    outline: none;
}

.regform__field .entry-card__select--placeholder {
    color: #757575;
}

/* The options of the open list keep the normal text colour. */
.regform__field .entry-card__select option {
    color: var(--sg-primary);
}

.regform__field .regform__entry[readonly] {
    margin-top: 4px;
    cursor: pointer;
}

.regform__message {
    margin: 0 0 10px 0;
}

.regform__busy {
    position: fixed;
    inset: 0;
    z-index: 170;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--sg-app-width);
    margin: 0 auto;
    background: rgba(248, 250, 252, 0.5);
}

.regform__spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(233, 78, 27, 0.25);
    border-top-color: var(--sg-orange-primary);
    border-radius: 50%;
    animation: gchapter-spin 0.9s linear infinite;
}

/* ---------- The introductory tour (AppTour popups) ---------- */

.tour__title {
    margin: 0;
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.tour__close {
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
}

.tour__close img {
    display: block;
    width: 24px;
    height: 24px;
}

.tour__later {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.tour__close:focus-visible,
.tour__later:focus-visible,
.tour-phases__all:focus-visible,
.tour-full__back:focus-visible,
.tour-all__back:focus-visible,
.tour-screens__arrow:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: 2px;
}

/* The welcome: a sheet from the foot of the screen, about the lower half of it. */
.tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 165;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.tour-sheet {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--sg-app-width);
    min-height: 55vh;
    padding: 20px;
    border-radius: 20px 20px 0 0;
    background: var(--sg-surface);
    outline: none;
    animation: gpop-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The handle: 32 by 4, with a larger hold around it so a finger can find it. */
.tour-sheet__handle {
    width: 32px;
    height: 4px;
    margin: 10px auto 0 auto;
    border-radius: 2px;
    background: #445B84;
    box-sizing: content-box;
    border: 12px solid transparent;
    background-clip: padding-box;
    touch-action: none;
    cursor: grab;
}

.tour-sheet .tour__close {
    margin: 10px 10px 0 auto;
}

.tour-sheet__title {
    margin: 24px 10px 20px 10px;
}

.tour-sheet__description {
    margin: 0 10px 30px 10px;
    color: var(--sg-darker-blue);
    font-size: 16px;
    line-height: 1.5;
}

.tour-sheet__button {
    margin: 10px;
}

.tour-sheet__later {
    padding: 30px 30px 50px 30px;
    width: auto;
    margin: 0 auto;
}

/* The full-screen pages. */
.tour-full {
    position: fixed;
    inset: 0;
    z-index: 165;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-width: var(--sg-app-width);
    margin: 0 auto;
    padding-top: var(--sg-safe-top, 0px);
    /* On an iPhone the home indicator sits over the foot of a full-screen view (viewport-fit=cover), which is where the
       closing button of the tour is. */
    padding-bottom: var(--sg-safe-bottom, 0px);
    background: var(--sg-surface);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    outline: none;
    animation: gpop-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tour-full--scroll {
    display: block;
    overflow-y: auto;
}

.tour-full__close {
    flex: none;
    margin: 10px 10px 0 auto;
}

.tour-phases__intro {
    flex: none;
    padding: 0 16px 30px 16px;
}

.tour-phases__intro .tour__title {
    margin-bottom: 15px;
}

.tour-phases__description {
    margin: 0 0 13px 0;
    color: var(--sg-darker-blue);
    font-size: 16px;
    line-height: 1.5;
}

.tour-phases__usage {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--sg-blue-shadow);
    font-size: 14px;
}

.tour-phases__usage img {
    height: 24px;
}

/* A strip of pages that snaps one at a time; the browser does the swiping. */
.tour-strip {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    outline: none;
}

.tour-strip::-webkit-scrollbar {
    display: none;
}

/* Dragging with the mouse must turn the page, not select the text or pick up the picture. */
.tour-strip {
    user-select: none;
    -webkit-user-select: none;
}

.tour-strip img {
    -webkit-user-drag: none;
}

/*
 * The phases: the strip is as tall as its tallest card instead of filling the screen, and every
 * card takes that height. The strip is a flex row, so its pages already stretch to the tallest;
 * each page passes that height on to its card, which is never lower than 380px.
 */
.tour-full--phases {
    overflow-y: auto;
}

.tour-strip--phases {
    flex: none;
    min-height: auto;
    margin-bottom: 16px;
}

.tour-strip--phases .tour-strip__page {
    display: flex;
}

.tour-strip--phases .tour-card {
    flex: 1 1 auto;
    height: auto;
    min-height: 380px;
}

.tour-strip__page {
    flex: 0 0 100%;
    box-sizing: border-box;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.tour-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 36px 24px;
    border: 1px solid var(--sg-blue-shadow);
    border-radius: 24px;
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
}

.tour-all .tour-card {
    height: auto;
    margin: 0 0 12px 0;
}

.tour-card__head {
    display: flex;
    gap: 10px;
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 700;
}

.tour-card__text {
    font-size: 16px;
    line-height: 24px;
}

.tour-card__picture {
    align-self: flex-end;
    height: 80px;
    margin-top: auto;
    padding-top: 12px;
}

.tour-phases__all {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    align-self: flex-end;
    margin: 0 16px 30px 0;
    border: 0;
    background: transparent;
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.tour-phases__all img {
    width: 24px;
    height: 24px;
}

.tour-full__button {
    flex: none;
    margin: 10px 40px;
}

.tour-full__later {
    flex: none;
    width: auto;
    margin: 0 auto 50px auto;
    padding: 30px;
}

/* All three phases on one page. */
.tour-full__back {
    display: block;
    width: 36px;
    height: 36px;
    margin: 24px 0 30px 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.tour-full__back img {
    display: block;
    width: 100%;
    height: 100%;
}

.tour-all {
    margin: 0 16px;
}

.tour-all__back {
    display: block;
    margin: 16px 0 0 auto;
    padding: 20px;
    border: 0;
    background: transparent;
    color: var(--sg-blue-shadow);
    font-family: var(--sg-font-alt);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

/* The screens of the app, a page at a time. */
.tour-screens__close {
    flex: none;
    margin: 36px 18px 0 auto;
}

.tour-screens__strip {
    margin: 36px 32px 16px 32px;
}

.tour-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--sg-dark-blue);
    font-family: var(--sg-font-alt);
}

.tour-screen__title {
    margin: 0 0 16px 0;
}

.tour-screen__description {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.tour-screen__text {
    margin: 0 0 48px 0;
    font-size: 14px;
    line-height: 1.3;
}

.tour-screen__picture {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    object-fit: contain;
}

.tour-screens__nav {
    display: grid;
    flex: none;
    grid-template-columns: 54px 1fr 54px;
    align-items: center;
}

.tour-screens__arrow {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    padding: 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.tour-screens__arrow:first-child {
    margin-left: 30px;
}

.tour-screens__arrow:last-child {
    margin-right: 30px;
}

.tour-screens__arrow[hidden] {
    display: block;
    visibility: hidden;
}

.tour-screens__arrow img {
    display: block;
    width: 100%;
    height: 100%;
}

.tour-screens__dots {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tour-screens__foot {
    flex: none;
    min-height: 80px;
    margin: 0 0 10px 0;
}

.tour-screens__foot .custom-button {
    box-sizing: border-box;
    width: calc(100% - 80px);
    margin: 0 40px 24px 40px;
}

.tour-screens__hide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 0 42px 0;
    color: var(--sg-dark-blue);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.tour-screens__hide input {
    width: 20px;
    height: 20px;
    accent-color: var(--sg-gray-dark, #3B3B3B);
}

@media (prefers-reduced-motion: reduce) {
    .tour-sheet,
    .tour-full {
        animation: none;
    }
}


/* The arrows are 24 points wide inside a 54 point column with a 30 point margin on the outer side, as natively. */
.tour-screens__arrow {
    width: 24px;
    height: 24px;
    padding: 0;
    margin-bottom: 20px;
}
.tour-screens__arrow:first-child { margin-left: 30px; }
.tour-screens__arrow:last-child { margin-right: 30px; justify-self: end; }


/* Two screens were wider than the phone, which makes a phone zoom out or wobble sideways: the chapter header would not shrink
   below its own content next to the info button, and the reminder time was fixed at the width of a time field in 20px type. */
.article-groups__row .article-groups__header { min-width: 0; }
.settings__time { flex: 0 1 auto; min-width: 0; max-width: 9em; }

/* ---------- Pull to refresh (PullToRefresh) ---------- */

.ptr {
    position: fixed;
    top: calc(var(--sg-safe-top, 0px) + 8px);
    left: 50%;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sg-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translate(-50%, -48px);
    pointer-events: none;
}

.ptr__spinner {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 3px solid var(--sg-light-gray);
    border-top-color: var(--sg-blue);
    border-radius: 50%;
}

.ptr--busy .ptr__spinner {
    animation: ptr-spin 0.8s linear infinite;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ptr--busy .ptr__spinner { animation: none; }
}
/* The reminder time keeps the width of its own text (it was squeezed to a few pixels and showed only part of the time). When the
   phone is too narrow for label, switch and time on one line, the row wraps and the switch and time go below the label. */
.settings__row { flex-wrap: wrap; }
.settings__row .settings__label { flex: 1 1 10em; min-width: 0; overflow-wrap: break-word; }
.settings__time { flex: none; margin-left: auto; }

/* ---------- Audio player bar (AudioPlayerBar) ----------
   A slim strip above the tab bar: the play button, the slider and the time, and a close button, with a line of text above the
   slider when there is one. Colours as natively: the slider and the time in SGAudioPlayer (#206AAE), the track in SGGrayBg (#D9D9D9). */

.audio-bar {
    --audio-player: #206AAE;
    --audio-track: #D9D9D9;

    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--sg-tabbar-height) + var(--sg-safe-bottom));
    z-index: 110;
    max-width: var(--sg-app-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 8px;
    padding: 8px 12px;
    background: var(--sg-surface);
    border: 1px solid var(--audio-track);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.25);
}

/* Without a tab bar the bar sits on the bottom edge, clear of the home indicator. */
.audio-bar--low {
    bottom: 0;
    padding-bottom: calc(8px + var(--sg-safe-bottom));
}

.audio-bar__play,
.audio-bar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.audio-bar__play {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.audio-bar__play img { width: 40px; height: 40px; }

/* One row: the play button, the slider and the time, and the close button, all on one middle. With a line of text above the
   slider there are two, and the buttons span them. */
.audio-bar--titled .audio-bar__play,
.audio-bar--titled .audio-bar__close {
    grid-row: 1 / span 2;
}

.audio-bar__title {
    grid-column: 2 / span 2;
    grid-row: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: var(--sg-dark-blue);
}

/* The line of text is optional: without it the slider and the time take the whole height, and the other rows fall away. */
.audio-bar__slider {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0;
    accent-color: var(--audio-player);
    cursor: pointer;
}

.audio-bar__slider:disabled { cursor: default; }

.audio-bar__time {
    grid-column: 3;
    grid-row: 1;
    font-size: 12px;
    color: var(--audio-player);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.audio-bar__close {
    grid-column: 4;
    grid-row: 1;
    width: 28px;
    height: 28px;
}

.audio-bar--titled .audio-bar__slider,
.audio-bar--titled .audio-bar__time {
    grid-row: 2;
}

.audio-bar__close img { width: 28px; height: 28px; }

.audio-bar__play:focus-visible,
.audio-bar__close:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: 2px;
}

/* The page makes room for the bar, so it does not cover the end of the text. */
.page--audio-bar {
    padding-bottom: calc(var(--sg-tabbar-height) + var(--sg-safe-bottom) + var(--sg-page-padding) + 76px);
}

.page--no-tabbar.page--audio-bar {
    padding-bottom: calc(var(--sg-safe-bottom) + var(--sg-page-padding) + 76px);
}