/* https://stackoverflow.com/a/14455993 */
.mirrored {
     transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

/* required for calibration (keyboard): */
select:focus-visible{
    outline: var(--kst-focusvisible-outline) !important;
}

/* Context-menu button on dark chat bubbles: inherit the bubble's text color
 * so the three-dots icon is visible (default .btn-inline grey vanishes on
 * the blue --kst-support-msg-dark-bg). */
.msg-assistance .btn-inline {
    color: inherit;
}
.msg-assistance .btn-inline:not(:disabled):hover,
.msg-assistance .btn-inline:not(:disabled):focus,
.msg-assistance .btn-inline:not(:disabled):active {
    color: var(--kst-support-msg-dark-link-fontcolor-highlight);
}

/* Chat-bubble context-menu (3-dots): hide unless hovered/focused on
 * pointer devices to reduce visual clutter. On touch devices (hover:
 * none) the button stays visible since long-press isn't wired up yet
 * (see CLAUDE.md TODO). */
@media (hover: hover) {
    .support-msg .btn-inline.dropdown-toggle {
        opacity: 0;
        transition: opacity 0.15s;
    }
    .support-msg:hover .btn-inline.dropdown-toggle,
    .support-msg .btn-inline.dropdown-toggle.show,
    .support-msg .btn-inline.dropdown-toggle:focus-visible {
        opacity: 1;
    }
}

/* On touch devices the dots stay permanently visible (no hover). Hide them
   when the menu would only show the "ask support" info text — keeps the
   chat clean for past-window own messages. */
@media (hover: none) {
    .support-msg .btn-inline.dropdown-toggle.contextmenu-info-only {
        display: none;
    }
}

/* editorjs custom styles */
.ce-fcArrowDown {
    padding-left: 24px;
}
.ce-fcArrowDown::before {
    content: '🡇'; /* downwards heavy array, 🡇 */
    position: absolute;
    left: 0;
}

.ce-flowchart {
    padding-left: 36px;
}
.ce-flowchart::before {
    content: '⑃'; /* 0x2443 */
    position: absolute;
    left: 0;
}

.ce-carousel {
    padding-left: 36px;
}
.ce-carousel::before {
    content: '🎠'; /* 0x1F3A0 = 🎠 */
    position: absolute;
    left: 0;
}

.ce-accordion {
    padding-left: 36px;
}
.ce-accordion::before {
    content: '🪗'; /* 0x1FA97 */
    position: absolute;
    left: 0;
}

.ce-infobox {
    padding-left: 36px;
}
.ce-infobox::before {
    content: '💡'; /* 0x1F4A1 */
    position: absolute;
    left: 0;
}

.ce-quiz {
    padding-left: 36px;
}
.ce-quiz::before {
    content: '❓'; /* BLACK QUESTION MARK ORNAMENT, U+2753 */
    position: absolute;
    left: 0;
}

.ce-twoColumns {
    padding-left: 36px;
}
.ce-twoColumns::before {
    content: '⎅'; /* 0x2385 */
    position: absolute;
    left: 0;
}

.ce-autoColumns {
    padding-left: 36px;
}
.ce-autoColumns::before {
    content: '◫'; /* 0x25EB */
    position: absolute;
    left: 0;
}

.ce-layoutTable {
    padding-left: 36px;
}
.ce-layoutTable::before {
    content: '▤'; /* 0x25A4' */
    position: absolute;
    left: 0;
}

/* prevent EditorJS content appearing above EditorJS context menu */
.tc-row {
    z-index: 0;
}

/* exercise in app has more layers using z-index than prototype */
.toast-container {
    z-index: 10;
}

.kst-table-no-border-bottom {
    border-bottom-width: 0px !important;
}

/* if accordion with invalid feedback is collapsed, display feedback outside */
.accordion:has(.accordion-button.collapsed):has(.is-invalid) > .outer-feedback {
    color: var(--kst-form-validation-fail);
    display: block !important;
}

/* context menu should be on top of header, otherwise sometimes parts of contents hidden */
.dropdown-menu {
    z-index: 1050;
}

/* line-options with h1 */
.line-options:has(>h1) > *:not(h1) {
    margin-top: 2rem !important;
}

/* disabled text input should dim its label the same way checkboxes do */
.form-control:disabled ~ label {
    opacity: 0.65;
}

/* inactive rows (text-secondary) get a subtle background tint so inactivity
   is visible at a glance without affecting link or text colours.
   Set --bs-table-bg on the <tr> — CSS variables cascade from the nearest ancestor.
   Card backgrounds are explicit white, so a slightly stronger tint is needed there. */
.kst-table .text-secondary {
    --bs-table-bg: rgba(0, 0, 0, 0.03);
}
.card .kst-table .text-secondary {
    --bs-table-bg: rgba(0, 0, 0, 0.06);
}

/* btn-inline inside kst-table header: inherit white text so the icon is visible on the blue background */
.kst-table thead .btn-inline {
    color: inherit;
}

/* flex-shrink: 0 prevents narrow icons (e.g. fa-info) from being squeezed when inside a flex row with a long h1 */
.btn-icon {
    flex-shrink: 0;
}

/* Truncate overlong table cells with an ellipsis */
.td-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* When a _blank link is inside a truncated cell, move truncation to the <a> itself
   and pin the ::after icon at right:0 so it is never clipped by the cell's overflow:hidden.
   inline-block + max-width:100% makes the element shrink-wrap its text so the icon lands
   directly after the text (not at the far right of the cell) when text is short. */
.td-truncate [target='_blank']:not(.suppress-target-blank-icon) {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    vertical-align: middle;
}
.td-truncate [target='_blank']:not(.suppress-target-blank-icon)::after {
    right: 0;
    left: auto;
    margin-left: 0;
}

/* highlight newly created table rows with an amber fade */
@keyframes highlight-fade {
    0%   { background-color: #ffc107; }
    20%  { background-color: #ffc107; }
    100% { background-color: transparent; }
}

.highlight-new td {
    animation: highlight-fade 5s ease-out forwards;
}

/* Dashboard weeks card: pending modifier (current week) signals via dashed
   border that the value may still flip; underlying red/green still applies. */
.db-slider-box .week > .pending {
    border-style: dashed;
}

/* Constrained-height scrollable table: horizontal scrollbar stays visible
   at the bottom of the viewport-sized box instead of at the very end of
   a potentially very long table.  Pair with sticky thead. */
.table-scroll-container {
    overflow: auto;
    width: fit-content;
    max-width: 100%;
    /* max-height set dynamically via JS to fill remaining viewport */
}
/* Remove parent bottom margin so the table fills the viewport exactly */
.kst-main:has(.table-scroll-container) {
    margin-bottom: 0;
}
.table-scroll-container thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--kst-table-head-bg);
    color: var(--kst-table-head-fontcolor);
}

/* Image upload drop zone (used in admin-section) */
.image-upload-zone {
    position: relative;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s, background-color 0.15s;
    background-color: var(--bs-body-bg);
}
.image-upload-zone.dragover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}
.image-upload-zone .image-preview {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    border-radius: 14px;
    box-shadow: var(--kst-dropshadow);
    background-color: var(--kst-dashboard-iconflipside-bg);
}
.image-upload-zone .image-upload-label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    color: var(--bs-secondary-color);
    user-select: none;
}
.image-upload-zone .image-remove-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
}
.image-upload-zone .image-change-btn {
    position: absolute;
    top: 0.4rem;
    right: 3rem;
    cursor: pointer;
    margin: 0;
}

/* Allow Bootstrap dropdowns to escape the overflow clip in book-group tables */
.book-group .table-responsive,
.book-group table {
    overflow-y: visible;
}

/* Allow Bootstrap dropdowns to escape the overflow clip in the exercise pool table */
.exercise-pool-table,
.exercise-pool-table table {
    overflow: visible;
}

/* Same for the /my-clients row-action dropdown; table is short and never needs
   horizontal scroll, so dropping the overflow clip is safe. */
.my-clients-table {
    overflow: visible;
}

/* Unified image library panel — sticks to viewport while scrolling type-specific content */
.image-library-panel {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}

/* whatFits item image drop target */
.item-img-drop {
    min-width: 52px;
    min-height: 52px;
    outline: 2px dashed var(--bs-border-color);
    outline-offset: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    transition: outline-color 0.15s, background-color 0.15s;
}
.item-img-drop.drag-active {
    outline-color: var(--bs-primary);
    outline-style: solid;
    background-color: var(--bs-primary-bg-subtle);
    animation: drop-zone-pulse 0.7s ease-in-out infinite alternate;
}
.item-img-drop.drag-active > img {
    animation: drop-zone-img-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes drop-zone-pulse {
    from { outline-color: var(--bs-primary); }
    to   { outline-color: rgba(var(--bs-primary-rgb), 0.3); }
}
@keyframes drop-zone-img-pulse {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}
.item-img-drop.drag-over {
    outline-color: var(--bs-primary);
    outline-style: solid;
    background-color: rgba(var(--bs-primary-rgb), 0.18);
    animation: none;
}
.item-img-drop-placeholder {
    color: var(--bs-border-color);
    font-size: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.item-img-drop-hint {
    font-size: 0.6rem;
    white-space: nowrap;
}
/* prevent child elements from intercepting dragenter/dragleave */
.item-img-drop > * {
    pointer-events: none;
}

/* Edit button overlay on exercise player page (editors only) */
.exercise-edit-link {
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 11;
    opacity: 0.15;
    transition: opacity 0.2s;
}
.exercise-edit-link:hover,
.exercise-edit-link:focus-visible {
    opacity: 1;
}

/* exercise type create dropdown: wider to fit descriptions */
.dropdown-menu-exercise-types {
    min-width: 22rem;
}

/* dual-range slider for days-per-week thresholds */
.dual-range-slider {
    max-width: 28rem;
    margin-bottom: 1rem;
}

.dual-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    padding: 0 2px;
    margin-bottom: 0.25rem;
}

.dual-range-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--bs-border-color);
    margin-bottom: 0.5rem;
}

.dual-range-zone {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 4px;
}

.dual-range-bad  { background: #f8d7da; }
.dual-range-ok   { background: #fff3cd; }
.dual-range-good { background: #d1e7dd; }

.dual-range-input {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.dual-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
    pointer-events: auto;
}

.dual-range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
    pointer-events: auto;
}

.dual-range-input::-moz-range-track {
    background: transparent;
    border: none;
}

.dual-range-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.dual-range-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dual-range-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Crop editor in admin-image */
.crop-editor-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.crop-editor-img {
    max-height: 300px;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.crop-overlay {
    position: absolute;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    border: 1.5px solid var(--bs-primary);
    cursor: move;
    user-select: none;
}
.crop-overlay:hover .dropzone-handle,
.crop-overlay:active .dropzone-handle {
    opacity: 1;
}

/* Editable dropzones in admin-exercise (drag & drop exercise type) */
.dropzone-editable {
    cursor: move;
    user-select: none;
}
.dropzone-editable:hover, .dropzone-active {
    border-color: var(--bs-primary) !important;
    border-style: solid !important;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.dropzone-label {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.65rem;
    color: var(--bs-secondary);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 8px);
}
.dropzone-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--bs-primary);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s;
}
.dropzone-editable:hover .dropzone-handle,
.dropzone-active .dropzone-handle {
    opacity: 1;
}
.dropzone-handle-se { bottom: -4px; right: -4px; cursor: se-resize; }
.dropzone-handle-sw { bottom: -4px; left: -4px; cursor: sw-resize; }
.dropzone-handle-ne { top: -4px; right: -4px; cursor: ne-resize; }
.dropzone-handle-nw { top: -4px; left: -4px; cursor: nw-resize; }
.dropzone-edge {
    position: absolute;
    opacity: 0;
}
.dropzone-edge-n { top: -3px; left: 4px; right: 4px; height: 6px; cursor: n-resize; }
.dropzone-edge-s { bottom: -3px; left: 4px; right: 4px; height: 6px; cursor: s-resize; }
.dropzone-edge-e { right: -3px; top: 4px; bottom: 4px; width: 6px; cursor: e-resize; }
.dropzone-edge-w { left: -3px; top: 4px; bottom: 4px; width: 6px; cursor: w-resize; }



/* ===========================================================
   VARIANT OVERRIDES
   Scope all rules here under html[data-variant="<name>"] {}.
   The variant is set at startup from VITE_APP_VARIANT.
   =========================================================== */

/* --- speakstar --- */

/*
 * HOW TO REGENERATE THE SPEAKSTAR LOGO TEXT PATHS
 *
 * The "Speakstar" lettering is Palanquin Regular extracted as SVG paths
 * so it renders identically in all browsers without font loading.
 *
 * To regenerate (e.g. if the text or weight changes), run the script
 * below from the repo root with /usr/bin/python3.14:
 *
 *   /usr/bin/python3.14 frontend/tools/gen-logo-paths.py \
 *       "NewText" Regular
 *
 * The script prints the URL-encoded background-image value ready to
 * paste here. Font files live at:
 *   frontend/public/fonts/palanquin/Palanquin-<Weight>.woff
 *
 * Key metrics (must match the default .icon_logo SVG in kst-general.css):
 *   viewBox:    0 0 239 32
 *   baseline:   y = 28
 *   cap top:    y = 17  (cap_height_svg = 11 units)
 *   text start: x = 136 (right of "KST" letterforms)
 *   font scale: 11 / font['OS/2'].sCapHeight
 *
 * You can also ask Claude Code to regenerate it — say:
 *   "Regenerate the speakstar logo paths for text '<text>' in
 *    Palanquin <Weight> using the script in frontend/tools/gen-logo-paths.py"
 */

@media (min-width: 1200px) {
    html[data-variant="speakstar"] .icon_logo {
        /* KST-logo large — figurative mark + KST + Speakstar (Palanquin Regular) */
        background-image: url("data:image/svg+xml,%3Csvg width='239' height='32' viewBox='0 0 239 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M61.649 0.251648V27.4279H56.8647V0.251648H61.649ZM62.0404 13.3947L72.7277 0.251648H78.0967L67.5015 13.3947L78.8749 27.4279H73.2112L62.0312 13.3947H62.0404Z' fill='white'/%3E%3Cpath d='M92.5001 4.54879C90.8424 4.54879 89.5393 4.84707 88.5953 5.43897C87.6514 6.03088 87.1771 6.83717 87.1771 7.85785C87.1771 8.71541 87.61 9.3912 88.471 9.88523C89.3321 10.3793 90.6905 10.9246 92.5461 11.5165C94.434 12.1084 95.9858 12.6863 97.206 13.2456C98.4263 13.8048 99.4761 14.6298 100.356 15.7157C101.235 16.8016 101.673 18.1858 101.673 19.8683C101.673 21.2525 101.3 22.5435 100.549 23.746C99.7984 24.9484 98.5874 25.9365 96.9113 26.7102C95.2352 27.4838 93.0941 27.8707 90.4925 27.8707C88.9637 27.8707 87.5639 27.7122 86.293 27.3999C85.0221 27.0877 83.5441 26.603 81.8496 25.9412L81.2141 25.6429L82.8257 21.2432L83.5579 21.5415C86.5187 22.6601 88.9591 23.2193 90.8793 23.2193C92.6382 23.2193 94.0519 22.9164 95.1247 22.3059C96.1976 21.6953 96.7364 20.8797 96.7364 19.859C96.7686 18.871 96.345 18.1206 95.4655 17.6126C94.586 17.1046 93.1724 16.55 91.22 15.9581C89.3643 15.3661 87.8356 14.7882 86.6292 14.229C85.4228 13.6697 84.4005 12.8541 83.5533 11.7821C82.706 10.7102 82.2824 9.33527 82.2824 7.65744C82.2824 6.17536 82.6876 4.85639 83.5026 3.70521C84.3176 2.55403 85.4872 1.64521 87.016 0.988057C88.5447 0.330906 90.3175 0 92.3389 0C94.0657 0 95.5299 0.139819 96.7318 0.419458C97.9336 0.699097 99.1077 1.03932 100.245 1.43082L100.784 1.62657L99.2229 6.02622C97.9842 5.53219 96.8377 5.164 95.7832 4.91698C94.7241 4.66997 93.6282 4.54413 92.4863 4.54413L92.5001 4.54879Z' fill='white'/%3E%3Cpath d='M104.072 0.251648H126.432V4.60003H117.646V27.4279H112.862V4.60003H104.076V0.251648H104.072Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.853797 18.54C0.844587 18.568 0.830773 18.5913 0.821564 18.6193C3.7363 9.9458 10.74 0.00463867 23.3106 0.00463867C48.8157 0.00463867 50.0544 23.2053 50.0544 27.2974C48.9953 27.2974 44.1742 27.302 38.9157 27.3114C38.9434 26.9012 38.9157 26.4818 38.9157 26.0623C38.9157 15.2356 31.1247 6.44565 20.4097 6.44565C13.8343 6.44565 7.67327 9.75471 3.89286 14.8162C4.91969 14.2056 6.1123 13.8561 7.38778 13.8561C11.2096 13.8561 14.3086 16.9974 14.3086 20.861C14.3086 24.7247 11.205 27.866 7.38778 27.866C3.57053 27.866 0.462402 24.734 0.462402 20.8657C0.462402 20.0501 0.600542 19.2671 0.853797 18.5354V18.54Z' fill='white'/%3E%3Cpath d='M137.294 26.463Q137.731 26.674 138.467 26.9Q139.203 27.126 139.996 27.126Q141.274 27.126 141.953 26.633Q142.632 26.14 142.632 25.347Q142.632 23.6 139.721 22.807Q136.809 22.015 136.809 19.524Q136.809 18.359 137.747 17.55Q138.685 16.741 140.319 16.741Q141.144 16.741 141.88 16.951Q142.616 17.162 143.134 17.421Q143.037 17.679 142.924 17.922Q142.81 18.165 142.697 18.424Q142.276 18.213 141.743 18.035Q141.209 17.857 140.4 17.857Q139.381 17.857 138.718 18.278Q138.054 18.699 138.054 19.491Q138.054 21.287 140.974 22.096Q143.894 22.904 143.894 25.315Q143.894 26.576 142.883 27.393Q141.872 28.21 140.012 28.21Q139.316 28.21 138.305 27.968Q137.294 27.725 136.987 27.466Q137.051 27.224 137.132 26.973Q137.213 26.722 137.294 26.463Z M147.275 26.301Q147.728 26.706 148.237 26.916Q148.747 27.126 149.2 27.126Q150.462 27.126 150.996 26.237Q151.529 25.347 151.529 24.085Q151.529 22.775 151.012 21.893Q150.494 21.012 149.2 21.012Q148.747 21.012 148.237 21.23Q147.728 21.449 147.275 21.853ZM145.997 31.543V20.154H146.757L147.049 20.85Q147.55 20.462 148.189 20.195Q148.828 19.928 149.394 19.928Q151.125 19.928 151.966 21.109Q152.807 22.29 152.807 24.069Q152.807 25.865 151.958 27.029Q151.109 28.194 149.394 28.194Q148.876 28.194 148.31 27.992Q147.744 27.79 147.275 27.434V31.365Z M161.446 24.279H155.751Q155.8 25.525 156.415 26.342Q157.029 27.159 158.356 27.159Q159.149 27.159 159.642 26.989Q160.135 26.819 160.588 26.609L160.993 27.547Q160.491 27.887 159.682 28.04Q158.874 28.194 158.388 28.194Q156.431 28.194 155.428 27.038Q154.425 25.881 154.425 24.053Q154.441 22.274 155.387 21.109Q156.334 19.944 158.081 19.944Q159.909 19.944 160.677 21.23Q161.446 22.516 161.446 24.279ZM160.184 23.406Q160.054 22.354 159.553 21.691Q159.051 21.028 158.032 21.028Q157.013 21.028 156.455 21.691Q155.897 22.354 155.784 23.406Z M164.179 25.768Q164.179 26.269 164.527 26.722Q164.875 27.175 165.651 27.175Q166.331 27.175 166.897 26.835Q167.463 26.496 167.868 26.026V24.231H165.797Q165.004 24.231 164.592 24.692Q164.179 25.153 164.179 25.768ZM163.5 20.64Q163.953 20.332 164.778 20.138Q165.603 19.944 166.088 19.944Q167.447 19.944 168.296 20.68Q169.146 21.416 169.146 22.597V28H168.369L168.029 27.207Q167.625 27.579 166.978 27.887Q166.331 28.194 165.684 28.194Q164.325 28.194 163.662 27.507Q162.999 26.819 162.999 25.768Q162.999 24.603 163.783 23.996Q164.568 23.39 165.829 23.39H167.851Q167.851 22.419 167.544 21.74Q167.237 21.06 166.137 21.06Q165.344 21.06 164.826 21.238Q164.309 21.416 163.872 21.61Q163.791 21.368 163.694 21.125Q163.597 20.882 163.5 20.64Z M172.899 25.056V28H171.621V16.757L172.899 16.579V23.535L176.457 19.944L177.234 20.769L174.84 23.147Q175.632 24.36 176.457 25.574Q177.282 26.787 178.075 28H176.571Q175.924 26.997 175.276 25.986Q174.629 24.975 173.982 23.972Z M184.028 21.578Q183.64 21.384 183.138 21.206Q182.637 21.028 181.941 21.028Q181.229 21.028 180.801 21.319Q180.372 21.61 180.372 22.112Q180.372 22.565 180.865 22.88Q181.359 23.196 182.135 23.454Q183.09 23.794 183.923 24.376Q184.756 24.959 184.756 25.929Q184.756 26.997 183.955 27.604Q183.154 28.21 181.618 28.21Q181.116 28.21 180.356 28.04Q179.596 27.871 179.11 27.547L179.499 26.576Q179.951 26.803 180.51 26.965Q181.068 27.126 181.634 27.126Q182.507 27.126 182.993 26.851Q183.478 26.576 183.478 26.01Q183.478 25.509 182.944 25.129Q182.41 24.749 181.618 24.49Q180.696 24.182 179.879 23.64Q179.062 23.099 179.062 22.176Q179.062 21.125 179.846 20.535Q180.631 19.944 181.974 19.944Q182.475 19.944 183.219 20.13Q183.963 20.316 184.416 20.64Z M190.337 27.968Q190.159 28.049 189.827 28.146Q189.496 28.243 189.14 28.243Q188.137 28.243 187.53 27.66Q186.924 27.078 186.924 25.962V21.254H185.807L185.791 20.284H186.924V18.294L188.218 17.922V20.284H189.641L190.062 21.254H188.218V25.784Q188.218 26.382 188.476 26.762Q188.735 27.143 189.334 27.143Q189.512 27.143 189.722 27.086Q189.932 27.029 190.046 26.981Z M192.779 25.768Q192.779 26.269 193.127 26.722Q193.475 27.175 194.251 27.175Q194.931 27.175 195.497 26.835Q196.063 26.496 196.468 26.026V24.231H194.397Q193.604 24.231 193.192 24.692Q192.779 25.153 192.779 25.768ZM192.1 20.64Q192.553 20.332 193.378 20.138Q194.203 19.944 194.688 19.944Q196.047 19.944 196.896 20.68Q197.746 21.416 197.746 22.597V28H196.969L196.629 27.207Q196.225 27.579 195.578 27.887Q194.931 28.194 194.284 28.194Q192.925 28.194 192.262 27.507Q191.599 26.819 191.599 25.768Q191.599 24.603 192.383 23.996Q193.168 23.39 194.429 23.39H196.451Q196.451 22.419 196.144 21.74Q195.837 21.06 194.737 21.06Q193.944 21.06 193.426 21.238Q192.909 21.416 192.472 21.61Q192.391 21.368 192.294 21.125Q192.197 20.882 192.1 20.64Z M200.188 28V20.154H200.965L201.353 21.254Q201.79 20.882 202.477 20.518Q203.165 20.154 203.796 20.154Q203.86 20.413 203.941 20.664Q204.022 20.915 204.103 21.174Q203.407 21.174 202.696 21.554Q201.984 21.934 201.466 22.451V28Z' fill='white'/%3E%3C/svg%3E");
    }
}

/* Soften negative goals feedback icon — less stern than full-opacity orange */
i.goals-meh,
.goals-meh > i {
    opacity: 0.75;
}

/* Admin-only section in /review-settings — visually set apart from
 * client-facing settings without competing with content colours. */
.admin-only-section {
    border: 1px dashed var(--kst-grey-light3);
    border-radius: 0.5rem;
    background: var(--kst-grey-light6);
}
.admin-only-section > h3 .fa-user-shield {
    margin-right: 0.3em;
    opacity: 0.7;
}

.admin-faq-supersection {
    margin-bottom: 2rem;
}

/* === Dashboard severity card slider — mobile/touch improvements === */

.history-range {
    position: relative;
}

/* Tick labels replacing the <datalist> (iOS Safari ignores datalist
 * tick labels on range inputs). Positioned outside the rotated track
 * on the right, matching the previous datalist visual. */
.history-range .range-tick {
    position: absolute;
    left: calc(100% + 0.1rem);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--kst-grey-light1);
    pointer-events: none;
}
.history-range .range-tick-top { top: 0; }
.history-range .range-tick-bot { bottom: 0; }

/* On touch devices: slightly bigger hit area + reserve the gesture so
 * the page doesn't scroll and the card swiper doesn't fire while the
 * user is trying to drag the slider. Wrapper width equals the input's
 * (post-rotation visual) width so the thumb sits centered. */
@media (pointer: coarse) {
    .history-container {
        --range-height: 2rem;
    }
    .history-range .form-range {
        height: 2rem;
        touch-action: none;
    }
    .history-range .form-range::-webkit-slider-thumb,
    .history-range .form-range::-webkit-slider-thumb:active {
        width: 22px;
        height: 22px;
        /* Re-center on the 0.5rem track: default margin (-0.25rem) only
         * works for the 1rem Bootstrap thumb. (22 - 8) / 2 = 7. */
        margin-top: -7px;
    }
    .history-range .form-range::-moz-range-thumb,
    .history-range .form-range::-moz-range-thumb:active {
        width: 22px;
        height: 22px;
    }

    /* Make popover value label easier to read at arm's length on mobile. */
    .popover .popover-body {
        font-weight: 600;
        font-size: 1.05rem;
    }
}

.severity-chart-wrap {
    position: relative;
    height: 320px;
    max-width: 900px;
}

.severity-chart-wrap > .zoom-hint {
    position: absolute;
    top: 0.4em;
    right: 0.6em;
    font-size: 0.8em;
    color: #888;
    background: rgba(255, 255, 255, 0.85);
    padding: 0.1em 0.5em;
    border-radius: 0.3em;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.severity-chart-wrap:hover > .zoom-hint {
    opacity: 1;
}

/* sections flagged for redacteurs (no active exercise) carry a warning badge */
.db-icon-row .db-icon-disabled,
.db-icon-row .db-icon-warn {
    position: relative;
}

/* empty section: not navigable even for redacteurs -> greyed, not clickable */
.db-icon-row .db-icon-disabled {
    cursor: not-allowed;
}

.db-icon-row .db-icon-disabled .db-icon-box {
    opacity: 0.55;
    filter: grayscale(1);
    pointer-events: none;
}

.db-icon-warning {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    color: #cc8800;
}