/* style.css
 * Reden CSS not specific to AdminLTE/bootstrap
 * TODO: Merge with reden adminlte Style
 */
a {
    text-decoration: none;
}

label {
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

h4 {
    font-size: 18px;
}

.sidebar-menu i { /* Colored menu icons */
    color: #a0eace;
    font-size: 1.4em;
    width: 30px;
    min-width: 30px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}

.btn .extract {
    width: 20px !important
}
.sidebar-collapse .logo {
    padding: 0;
}
.sidebar-collapse .user-panel {
    display: none;
}
.sidebar-collapse .logo-inner {
    margin-left: 0;
}
.sidebar-collapse .sidebar-menu i { /* Colored menu icons */
    text-align: center !important;
    width: 10px !important;
    margin-right: 0px !important;
    margin-left: -10px;
}
.sidebar-menu > li {/* Bold menu text */
    font-weight: 600;
    position: relative;
    margin: 0;
    padding: 0;
}
.sidebar-menu > li.header { /* Bold menu headers */
    font-weight: 800;
}
.toggle-container {
    width: 70px;
    position: relative;
    height: 36px;
    border: 1px solid #ffefef;
    box-shadow: 0px 0px 1px 1px #80808099;
}
.toggle-container > input {
    display: none;
}
.gender-label {
    content: " ";
    height: 100%;
    display: inline-block;
    width: 100%;
    position: absolute;
    left: 0px;
    z-index: 2;
    top: 0px;
}
.toggle-container > .toggle-slider {
    width: 32px;
    height: 32px;
    display: inline-block;
    position: relative;
    left: 0px;
    transition: 0.25s cubic-bezier(0.6, -0.5, 0.5, 1.4);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 1px;
    background: #f8eded;
    box-shadow: 0px 0px 0px 1px #716767cc inset;
    z-index: 1;
}
.toggle-container > input:checked + .gender-label + .toggle-slider {
    left: calc(100% - 34px);
}
.toggle-container > input + .gender-label + .toggle-slider + .toggle-background {
    background: #EF7C84;
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease-in-out;
    overflow: hidden;
    color: white;
    font-size: 2.1em;
    font-weight: 400;
    text-shadow: 0px 0px 1px black;
}
.toggle-container > input:checked + .gender-label + .toggle-slider + .toggle-background {
    background: #4AA9E7;
}
.toggle-container > input + .gender-label + .toggle-slider + .toggle-background::after {
    content: "\f278";
    left: 70%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Ionicons" !important;
}
.toggle-container > input:checked + .gender-label + .toggle-slider + .toggle-background::after {
    content: "\f2a1";
    left: 25%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    font-family: "Ionicons" !important;
}
.toggle-container > input:checked + .gender-label {
    display: none;
}
.toggle-container > input + .gender-label + .toggle-slider + .toggle-background + input + .gender-label + .toggle-notset-overlay {
    opacity: 0;
}
.toggle-container > input:not(:checked) + .gender-label + .toggle-slider + .toggle-background + input:not(:checked) + .gender-label {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #999999bb;
    content: " ";    
    left: 0;
    top: 0;
    z-index: 2;
    opacity: 1;
    transition: 0.25s linear;
}
@keyframes fadeOutIn  {
    0%, 100% { opacity: 1 }
    50%      { opacity: 0 }
}
.box .nav-tabs-custom {
    margin-bottom: 10px;
}
.box .nav-tabs-custom + .box-body,
.box .nav-tabs-custom + .box-body .box-header {
    padding-top: 0;
}
.box .page-header {
    margin: 9px 0 0 0;
}

/* User count visualiser */
/* Male */
.reden-user-counter-container > .reden-user-counter:nth-child(2n+1):after {
    content: "\f202";
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: inline-block;
    color: #333;
}
.reden-user-counter-container > .reden-user-counter-percentage:nth-child(2n+1):before {
    content: "\f202";
}
/* Female */
.reden-user-counter-container > .reden-user-counter:nth-child(2n):after {
    content: "\f25d";
    color: #333;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.reden-user-counter-container > .reden-user-counter-percentage:nth-child(2n):before {
    content: "\f25d";
}
 /* Outline for < 100% user indicator male */
.reden-user-counter-container > .reden-user-counter-percentage::before {
    position: absolute;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
.reden-user-counter {
    display: inline-block;
    font-family: "Ionicons";
    font-size: 5em;
    font-style: normal;
    position: relative;
    color: transparent;
    margin: 6px;
}
.reden-user-counter-infobox {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 2px;
    height: 180px;
    padding: 10px;
}
.reden-user-counter-container {
    height: 180px;
}
.reden-user-counter-container > h3 {
    padding: 0px;
    margin: 0px;
}
.reden-user-counter-percentage:after {
    width: unset;
    overflow-x: hidden;
}
.reden-user-counter-shadow:after {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
/* End user count visualiser */

/** Gender percentage visualisation **/
.reden-vertical-percent-indicator {
    height: 120px;
    position: relative;
    font-family: "Ionicons";
    font-size: 8em;
}
.reden-vertical-percent-indicator::before {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    line-height: 1.1em;
}
.reden-vertical-percent-indicator::after {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    line-height: 1.1em;
}
/** Male **/
.reden-vertical-percent-indicator.reden-percent-male::before {
    content: "\f202";
    color: #009AFF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #333;
}
.reden-vertical-percent-indicator.reden-percent-male::after {
    content: "\f202";
    overflow: hidden;
}
/** Female **/
.reden-vertical-percent-indicator.reden-percent-female::before {
    content: "\f202";
    color: #9A00FF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #333;
}
.reden-vertical-percent-indicator.reden-percent-female::after {
    content: "\f202";
    overflow: hidden;
}
/** End gender percentage visualisation **/

/** Start custom dropdown select **/


.custom-select-container .select-toggle-label:focus {
    z-index: -1;
  }
  .custom-select-container > .select-toggle-label:focus + ul input:checked + label, .custom-select-container > .select-toggle-label + ul:active input:checked + label {
    width: 100%;
    height: 100%;
    background: dodgerblue;
    color: white;
    font-weight: 900;
    box-shadow: 1px 1px 1px 1px #00000099 inset, 0px 0px 2px 0px #00000099 inset;
  }
  .custom-select-container > .select-toggle-label:not(:focus) + ul:not(:active) {
    border-bottom: 2px solid black;
  }
  .custom-select-container ul:active li, .custom-select-container > .select-toggle-label:focus + ul li {
    display: inline-block;
    width: 30px;
    max-height: 30px;
    text-align: center;
  }
  .custom-select-container > label:focus + ul:before, .custom-select-container > label + ul:active:before {
    content: "Day of Birth";
    border-bottom: 1px solid dodgerblue;
    width: 100%;
    height: 30px;
    position: absolute;
    top: 0;
    text-align: center;
    line-height: 30px;
    background: dodgerblue;
    color: white;
    text-transform:     uppercase;
    font-family: mono;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
  }
  .custom-select-container ul li {
    font-size: 14px;
    line-height: 25px;
    /*! font-family:  mono; */
    display: inline-block;
  }
  .custom-select-container ul:active .default-value, .custom-select-container > .select-toggle-label:focus .default-value {
    display: none;
  }
  .custom-select-container > label {
    height: 30px;
    outline: none;
    width: 100%;
  }
  
  .custom-select-container ul {
    list-style: none;
    margin: 0;
    position: relative;
    outline: none;
    top: 0;
    transition: none;
    list-style: none;
    font-size: 0;
    padding: 0;
  }
  .custom-select-container input {
    display: none;
  }
  .custom-select-container ul label {
    height: 100%;
    display: block;
    outline: none;
    margin-bottom: 0px;
  }
  .custom-select-container {
    position: relative;
    top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    z-index: 5;
    min-width: 40px;
  }
  .custom-select-container > label:not(:focus) + ul:not(:active) input:not(:checked) + label {
    display: none;
  }
  .custom-select-container > label:not(:focus) + ul:not(:active) input:checked + label {
    display: inline-block;
  }
  .select-toggle-label {
    z-index: 1;
    position: absolute;
    top: 0;
  }
  .custom-select-container > label:focus + ul, .custom-select-container > label + ul:active {
    padding-top: 30px;
    box-shadow: 0px 0px 5px black, 0px 5px 0px -2px white, 0px 5px 5px -2px black, 0px 11px 0px -5px white, 0px 11px 4px -5px black, 0px 16px 0px -7px white, 0px 16px 5px -7px black;
    background: linear-gradient(90deg, transparent 0px, #0009 0px, transparent 1px) 0px 0px, linear-gradient(transparent 1px, #0009 1px, transparent 2px) 0px 4px, linear-gradient(white, white);
    background-size: 30px 25px;
    outline: 1px solid grey;
    padding-bottom: 0px;
    margin-bottom: 0px;
    width: 210px;
    position: absolute;
    top: -12px;
  }
  
  .custom-select-container > label:not(:focus) + ul:not(:active) input:checked + label + div {
      display: inline-block;
      height: 100%;
      padding-right: 14px;
  }
  .custom-select-container ul input + label + div, .custom-select-container ul input + div {
      display: none;
  }
  .custom-select-container > label:not(:focus) + ul:not(:active) input:checked + div {
      display: inline-block;
      padding-right: 14px;
  }
  .custom-select-container ul:active label:hover, .custom-select-container > .select-toggle-label:focus + ul label:hover {
    box-shadow: 1px 1px 1px 1px #00000099 inset, 0px 0px 2px 0px #00000099 inset;
  }
  .custom-select-container::before {
    content: "⌄";
    position: absolute;
    left: calc(100% - 16px);
    top: calc(50% - 22px);
    font-size: 24px;
}
/** End custom dropdown select **/

.logo-box {
    width: 360px;
    margin: 7% auto;
}

.user-panel > .info {
    left: unset;
    position: relative;
    width: 100%;
    text-align: left;
}

.reden-user-info {
    color: white;
    width: 70% !important;
    padding-left: 10px;
    padding-top: 0px !important;
    padding-bottom: 10px !important;
    margin-bottom: 0px !important;
}
.reden-user-info > br {
    margin-bottom: 4px;
}

.reden-navbar-user {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 0px 2px -1px black;
    display: block;
}
.reden-navbar-user > .reden-user-icon {
    font-size: 32px;
    color: #337ab7;
    overflow: hidden;
    background: #cbccd8;
    text-align: center;
    height: 32px;
    width: 30px;
}
/* Legacy login styles - kept for backward compatibility with msg-box */
.reden-login-wrapper .msg-box {
    background-color: #FFFFFF;
    color: #000000;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
}
.reden-login-wrapper .msg-box > .msg-box-header {
    color: #000000;
    margin-bottom: 1.5rem;
    font-family: 'AROneSans', sans-serif;
}
.form-file {
    border: 2px dashed #ccc;
    border-radius: 4px;
    display: block;
    /* width: 100%; */
    padding: 20px;
}
.smlButton {
    padding: 2px 5px;
}
.main-header .logo .logo-lg {
    display: inline-block;
}
.logo-inner {
    display: inline-block;
    margin-left: -10px;
    transform-origin: 3px;
    transform: translateY(3px);
}
.logo-inner svg {
    max-width: 100%;
    height: auto;
}
.reden-login-wrapper {
    background-color: #633269;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: var(--reden-space-l, 1rem);
}

.reden-login-wrapper .login-card {
    max-width: 28.75rem;
    width: 100%;
    border-radius: 1.5rem;
    border: none;
    box-shadow: 16px 42px 80px -18px rgba(30, 10, 38, 0.55),
                8px 18px 32px -6px rgba(30, 10, 38, 0.32);
}

.reden-login-wrapper .login-card .card-body {
    padding: var(--reden-space-xl) var(--reden-space-l);
}

.reden-login-wrapper .reden-input {
    border: none;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    color: #000000;
    width: 100%;
    padding: 0.5rem 0.25rem;
    outline: none;
    box-shadow: none;
    border-radius: 0;
}

.reden-login-wrapper .reden-input::placeholder {
    color: #000000;
    opacity: 0.5;
    font-family: 'Jost', sans-serif;
}

.reden-login-wrapper .reden-input:focus {
    box-shadow: none;
    outline: none;
    border: none;
}

.reden-login-wrapper .btn-primary,
.reden-login-wrapper .btn-secondary {
    --reden-auth-btn-fill: #633269;
    --reden-auth-btn-hover-ink: #B299B3;
    background-color: var(--reden-auth-btn-fill);
    border-color: var(--reden-auth-btn-fill);
    color: #FFFFFF;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: var(--reden-text-m, 1rem);
    border-radius: 0.875rem;
    padding: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transition: color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
}

.reden-login-wrapper .btn-secondary {
    --reden-auth-btn-fill: #003D20;
    --reden-auth-btn-hover-ink: #8DB392;
}

.reden-login-wrapper .btn-primary:hover,
.reden-login-wrapper .btn-secondary:hover {
    background-color: var(--reden-auth-btn-fill);
    border-color: var(--reden-auth-btn-fill);
    color: var(--reden-auth-btn-hover-ink);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
}

.reden-login-wrapper .btn-primary:focus,
.reden-login-wrapper .btn-primary:active,
.reden-login-wrapper .btn-secondary:focus,
.reden-login-wrapper .btn-secondary:active {
    background-color: var(--reden-auth-btn-fill);
    border-color: var(--reden-auth-btn-fill);
    box-shadow: none;
}

.account-wrap .nav-stacked {
    background: #fff;
    
}

.speechatax-radio-group{
    padding-top: 5px;
}

.speechatax-radio{
    padding: 3px;
}

/* Fixed-width button sizes */
.btn-fixed-width {
    display: inline-block;
    max-width: 100%;
}
.btn-fixed-width.fixed-width-xlg {
        min-width: 300px;
    }
.btn-fixed-width.fixed-width-lg {
    min-width: 180px;
}
.btn-fixed-width.fixed-width-md {
    min-width: 120px;
}
.btn-fixed-width.fixed-width-sm {
    padding: 3px 10px;
    min-width: 80px;
}

/* Vertical spacing helpers */
.vertical-spacing-1 {
    margin-top: 6px;
}
.vertical-spacing-2 {
    margin-top: 12px;
}
.vertical-spacing-3 {
    margin-top: 18px;
}
.vertical-spacing-4 {
    margin-top: 24px;
}

/* Icon spacing */
.icon-horizontal-spacing-1 {
    margin-left: 4px;
    margin-right: 4px;
}

label.dob-selector-label {
    font-weight: 500;
    font-size: 0.8em;
}

form.d-inline {
    display: inline;
}

/* Bulk download spinner */
.spinner {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 50px auto;
}

.spinner-header {
    text-align: center;
    color: white;
}

.download-overlay{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%, 100% {
        -webkit-transform: scale(0.0)
    }

    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.search-session {
    padding-top: 5px;
}

#filterDate {
    line-height: normal;
    height: 38px;
}

.hidden{
    display: none !important;
    visibility: hidden !important;
}

#study-summary .box-header {
    overflow-x: auto;
}

#StudySummaryList {
    text-align: center; 
    margin: 1em 0;
}

#StudySummaryList .fa {
    font-size: 60px;
}

.in-active {
    text-decoration: line-through;
    color: grey;
}

.site-subheading {
    font-weight: bold;
}

.session-inactive {
    opacity: 0.5;
}

.site-subheading-row {
    font-weight: bold;
}

.horizontally-scrollable {
    overflow-x: auto;
}

.text-truncate-language {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.margin-left-6 {
    margin-left: 6px;
}

.margin-top-12 {
    margin-top: 12px;
}

.margin-5 {
    margin: 5px;
}

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

.study-task-row {
    line-height: 26px;
    margin-bottom: 1em;
}

.stud-col-left {
    text-align: left;
}

.stud-col-center {
    text-align: center;
}

.study-summary-header {
    text-align: left;
    margin-top: 0;
}

.vertical-resize {
    resize: vertical;
}

.width-100 {
    width: 100px;
}

.width-150 {
    width: 150px;
}

.max-width {
    width: 100% !important;
}

.extract .word-wrap {
    word-wrap: anywhere;
}

.find-study-row {
    height: 35px;
}

.find-study-row .col-md-12 .col-sm-2 {
    text-align: right;
}

.site-search {
    padding-left: 2rem; 
    padding-right: 2rem
}

.padding-side-2 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.white-space-preblock {
    display: block;
    white-space: pre;
}

.block {
    display:block;
}

.task-choices {
    padding-left: 10px;
}

.speechatax-alert {
    color: #ff00ff; 
    font-size: 16px; 
    font-weight: 900; 
    line-height: 16px;
}

.padding-0 {
    padding: 0;
}

.padding-3 {
    padding: 3px;
}

.min-width-320 {
    min-width: 320px;
}

.align-center {
    align-items: center;
}

.user-session-extract-wide {
    width: 40%;
}

.user-session-extract-narrow {
    width: 20%;
}

.user-session-no-language {
    display: flex;
    background-color: #F08080;
    margin-right: 16px;
}

.spinner-visible {
    display: block;
}

.spinner-hidden {
    display: none;
}

.form-group{
    margin-bottom: 15px;
}

.form-control {
    width: auto;
}

.inline-form {
    display: inline-block;
    vertical-align: middle;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.session-details-form-block {
    vertical-align: middle;
    display: inline-block;
}

.user-site-role-background {
    background-color: #dff0d8;
}

.nav-stacked {
    flex-direction: column;
}

.site-permission-element {
    padding: 5px;
    margin-right: 64px;
    display: flex;
    justify-content: space-between;
}

.user-permissions-study {
    display: flex;
    justify-content: space-between;
    margin-right: 64px;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.display-flex {
    display: flex;
}

.btn-block {
    display: block;
    width: 100%;
}

.manage-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 0.375rem;
    color: #6c757d;
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}

.manage-nav-link:hover {
    color: #495057;
    background-color: #e9ecef;
}

.manage-nav-link.active {
    color: #fff;
    background-color: #0d6efd;
}

/* Spin animation utility */
@keyframes reden-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.reden-spin {
    animation: reden-spin 1.5s linear infinite;
    display: inline-block;
}

/* RedenSpinner component styles */
.reden-spinner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    color: var(--primary, #633269);
}

.reden-spinner-sm {
    font-size: 1rem;
}

.reden-spinner-label {
    font-size: 1rem;
}

/* SortableJS drag placeholder for task reordering tables */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--primary--alt-l-6, #e9e0ea);
}

.app-render-root {
    min-height: 100%;
}

.app-startup-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    cursor: wait;

    /* Keep the correctly rendered page visible underneath */
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(1.5px);
}

/* The app's content-region canvas colour, applied wherever the page background shows through so
   the same tone is used whether or not a routed page has rendered into it yet. This file is
   loaded after AdminLTE.min.css, so the .content-wrapper rule below is the authoritative one
   and the two cannot drift apart.

   Primary Alt L8 (#F6F3F6) from the brand palette, replacing AdminLTE's blue-grey #ecf0f5 — the
   canvas is now deliberately a brand tone rather than a mirror of the AdminLTE default.

   The literal is intentional rather than a reference to --reden-surface-alt, which happens to hold
   the same value: that token is the alternating table-row tone, and tying the page background to it
   would drag one along whenever the other was retuned. */
:root {
    --reden-app-canvas: #F6F3F6;
}

.skin-reden .content-wrapper {
    background-color: var(--reden-app-canvas);
}

/* Painted on <body> as well so the viewport reads as the app canvas rather than flashing pure
   white in the window between the prerendered shell and the circuit filling in the content
   region. Login pages are unaffected — .reden-login-wrapper paints its own full-viewport
   background on top of this. */
body.reden-body {
    background-color: var(--reden-app-canvas);
}

/* Holds the content region's footprint while the routed page is deferred to the interactive
   render (see InteractiveOnly), so the shell doesn't collapse to nothing and then reflow when
   the real page arrives. */
.app-content-placeholder {
    min-height: 60vh;
}

/* Full-bleed opt-out. AdminLTE's .content pads every page by 15px, which suits pages built from
   cards floating on the canvas but not the style guide's pages that open with a white header
   and tab strip running edge to edge. A page opts out by putting .reden-full-bleed on its root
   element; the routed page renders as a direct child of .content (InteractiveOnly adds no
   wrapper), so the direct-child match keeps this from firing on anything nested deeper.
   Scoped to .content-wrapper so the signed-out layout's .content is never affected. */
.content-wrapper > .content:has(> .reden-full-bleed) {
    padding: 0;
}

/* Single page gutter for the authenticated layout. Pages no longer wrap themselves in their own
   .container-fluid; the layout's .content section is the one container, and this replaces
   AdminLTE's fixed 15px side padding with the style guide's fluid spacing token. Full-bleed pages
   still get zero padding because the :has(> .reden-full-bleed) rule above is more specific
   (0,3,0 vs 0,2,0) — keep that in mind if either selector is simplified. */
.content-wrapper-flex > .content {
    padding-left: var(--reden-space-l);
    padding-right: var(--reden-space-l);
}