/* --------------Base.css------------- */
* {
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}

html {
    /* Reserve the scrollbar gutter so the page doesn't shift horizontally when content
       height changes and the vertical scrollbar appears/disappears (e.g. toggling the
       dashboard Deadlines / stats views). No effect with macOS overlay scrollbars. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    line-height: 23px;
    background: var(--surface) !important;
    color: var(--text-color);
}

/* Typography scale — HeinOnline base, scaled up slightly for Scholar's page layout */
h1, h2, h3, h4, h5 {
    color: inherit;  /* follow the container's text color (black on light, light on dark popups/banners) */
    font-weight: 500;
    line-height: 1.3;
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }

/* Size aliases at THIS scale, for headings whose LEVEL was corrected for outline order
   (WCAG 1.3.1) but whose look must not move. Bootstrap's .h1-.h5 utility classes are
   rem-scaled -- 43-56% larger than the px scale above -- and a class outranks the
   element selectors, so class="hN" does NOT preserve size on pages that load this file.
   These are not a general invitation: existing .hN usage (dashboard panels, contact
   tabs) shipped at Bootstrap's scale and must stay there, which is why these carry
   their own names instead of redefining .hN. margin-bottom mirrors the heading reboot
   so a <p> or <span> re-tag keeps heading spacing too. */
.app-h1, .app-h2, .app-h3, .app-h4, .app-h5 {
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.app-h1 { font-size: 24px; }
.app-h2 { font-size: 20px; }
.app-h3 { font-size: 18px; }
.app-h4 { font-size: 16px; }
.app-h5 { font-size: 14px; }

/* Modal titles sit directly under the page <h1>, so an <h5> there skips three levels
   (WCAG 1.3.1). Pinning the size on the component instead of the element means the
   heading LEVEL can be corrected with no visual change -- and .modal-title's own
   margin-bottom:0 survives, which .app-h5 would have overridden with 0.5rem. */
.modal-title { font-size: 14px; }

.title-container{
    margin: 5% 3% 0 3%;
}
/* Pages whose content is capped by .page-shell put the class on their title band too,
   so the heading and rule share the column's edges. Declared here (after the shorthand
   above) because base.css loads after components.css and would otherwise win the tie. */
.title-container.page-shell {
    margin-left: auto;
    margin-right: auto;
}
/* That 5% top (68px at a 1351px main) was reserving the empty band the brand logo now
   fills, so on pages carrying both it read as a wide gap. Scoped to the logo's siblings
   rather than removed: profile completion renders before a user type exists, so it gets
   no logo band and still needs the offset. */
.app-logo-header ~ .title-container {
    margin-top: 0;
}

.popup-profile-content {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

/* Navigation bar */
/*----------------------------------------------------------------------------------------*/

/* ============================ Left-hand sidebar ============================ */
/* Dark-navy rail: collapsed to icons by default, expands (icon + label) on hover.
   It's a fixed overlay — hovering widens it OVER the content so nothing reflows;
   .main reserves the collapsed width via margin-left. */
:root {
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 74px;
    --sidebar-bg: #123150;
    /* Near-white neutral (not blue-tinted) so resting labels read as white; the
       active/hover state is pure #fff + bold for hierarchy. */
    --sidebar-text: #e8ebf0;
    --sidebar-text-strong: #ffffff;
    --sidebar-muted: #97a6bd;
    --sidebar-divider: rgba(255, 255, 255, 0.12);
    --sidebar-hover: rgba(255, 255, 255, 0.07);
    --sidebar-active: rgba(255, 255, 255, 0.14);
    /* The message drawer's tab hangs off the right edge (.message-activity-btn, below):
       a page that puts controls at the top right reserves this much beside it. The
       button is content-sized (two icons and a badge), so this is a ceiling, not a
       measurement. */
    --drawer-tab-w: 72px;
}
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    /* Fixed overlay pinned to the viewport's left edge: collapsed (icon-only) by
       default, expands to the full width on hover WITHOUT reflowing the page
       (.main reserves the collapsed width via margin-left). Being fixed also keeps
       it put during horizontal page scroll. */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-w-collapsed);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    transition: width 0.2s ease, box-shadow 0.2s ease;
}
/* Expanded via JS (.expanded) on hover/focus so Esc can dismiss it (you can't
   un-hover a CSS :hover). See the sidebar script in base.html. */
#sidebar.expanded {
    width: var(--sidebar-w);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.22);
}

/* Applied for the first two frames when the rail is restored already-open after a
   navigation: without it the restore itself animates, which is the flash it exists to
   remove. */
#sidebar.no-anim,
#sidebar.no-anim * {
    transition: none !important;
}


/* ---- top: workspaces (owner, 2026-09-10; Slack's list) ---- */
/* Its own section above the pages: a square mark per workspace -- the journal's cover,
   else its initials; the section sign on its own colour for the person's own Research
   Workspace -- and the name beside it when the rail is open. The current one wears a
   ring and is not a control; the others post the switch. */
.workspace-rail {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sidebar-divider);
    /* Many workspaces scroll here, not the whole rail: the pages below stay in reach.
       The tiles' 12px side padding keeps the current tile's ring inside the clip. */
    flex: 0 0 auto;
    max-height: 40vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-divider) transparent;
}
.workspace-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.workspace-list form { margin: 0; }
.workspace-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    /* 7px in: the mark's centre stays on the collapsed rail's centre line (x=37 --
       a 48px box centred in the rail) when the rail opens, so nothing drifts. */
    padding: 4px 12px 4px 7px;
    border-radius: 10px;
    color: var(--sidebar-text);
    font-size: 15px;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
button.workspace-tile { cursor: pointer; }
button.workspace-tile:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
}
.workspace-tile:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}
.workspace-tile.is-current {
    color: var(--sidebar-text-strong);
    font-weight: 600;
}
.workspace-tile .nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workspace-mark {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 14px;   /* the initials are text: the 14px floor holds here too */
    font-weight: 700;
    /* Three of the widest letters run 37px at 14px bold: no tracking, and the tile
       clips the half-pixel rather than growing. */
    letter-spacing: 0;
    overflow: hidden;
    object-fit: cover;
}
img.workspace-mark { background: #fff; }
.workspace-mark i,
.workspace-mark svg { font-size: 16px; }   /* both forms: Font Awesome swaps <i> for <svg> */
/* The person's own workspace, told apart from the journals by colour, not shape. */
.workspace-mark.is-own { background: var(--info); }
/* The ring, Slack's: the rail's colour between the mark and a white outline. */
.workspace-tile.is-current .workspace-mark {
    box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px #fff;
}

/* ---- nav items ---- */
#sidebar ul.components {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    flex: 1 1 auto;
}
#sidebar ul.components li { margin-bottom: 2px; }
#sidebar ul.components li a {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 14px in: the 22px icon slot keeps the collapsed rail's centre line (x=37) when
       the rail opens -- one line for the icons, the workspace marks and the account
       row, in both states. */
    padding: 10px 12px 10px 14px;
    border-radius: 10px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    /* Fixed row height so an icon-only (collapsed) item is the same height as an
       icon + label (expanded) item — the label's line-height won't make it taller. */
    min-height: 44px;
}
/* The icon slot. Font Awesome's script swaps each <i> for an <svg>, so the rule
   names both forms -- one 22px slot whether the glyph is a font or an svg. */
#sidebar ul.components li a i,
#sidebar ul.components li a svg {
    font-size: 18px;
    width: 22px;
    text-align: center;
    flex: 0 0 auto;
}
#sidebar ul.components li a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
    text-decoration: none;
}
#sidebar ul.components li.active a {
    background: var(--sidebar-active);
    color: var(--sidebar-text-strong);
    font-weight: 600;
}

/* ---- bottom: account / contact / logout ---- */
#id-account-container {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--sidebar-divider);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#id-account-container a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 14px;   /* the same centre line as the nav items */
    border-radius: 10px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    /* Same fixed row height in both states (see nav items above). */
    min-height: 42px;
}
#id-account-container a i,
#id-account-container a svg {
    font-size: 17px;
    width: 22px;
    text-align: center;
    flex: 0 0 auto;
}
/* The person's own avatar in place of the icon, the icon's footprint (owner, 2026-09-10). */
#id-account-container .account-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--sidebar-divider);
}
#id-account-container a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
}
/* After :hover, as the nav items order theirs: the active row keeps its stronger
   ground under the pointer instead of dimming to the hover tint. */
#id-account-container a.active {
    background: var(--sidebar-active);
    color: var(--sidebar-text-strong);
}

/* ==================== collapsed look (icon-only, when NOT hovered) ==================== */
/* The base rules above are the expanded look; these apply only while the rail isn't
   hovered, so hovering reverts to expanded. */
/* Visually hide labels when collapsed but KEEP them in the accessibility tree, so
   nav links always have an accessible name (display:none would drop the name). */
#sidebar:not(.expanded) .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
/* Collapsed: center each icon in a fixed square. Only the text appears/hides on expand. */
#sidebar:not(.expanded) ul.components li a,
#sidebar:not(.expanded) .workspace-tile,
#sidebar:not(.expanded) #id-account-container a {
    width: 48px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
/* Collapsed, the workspace list scrolls without a scrollbar: a gutter (17px on
   Windows) would take the 48px box's room and clip the current tile's ring. */
#sidebar:not(.expanded) .workspace-rail { scrollbar-width: none; }
#sidebar:not(.expanded) .workspace-rail::-webkit-scrollbar { display: none; }

/* ============================ main content ============================ */
/* Fills the space beside the sidebar. The rail is a fixed overlay, so reserve its
   collapsed width with margin-left; hovering expands the rail OVER this area (no reflow). */
.main {
    flex: 1 1 auto;
    min-height: 100vh;
    margin-left: var(--sidebar-w-collapsed);
    /* Wider floor so the two-column dashboard (center + right panel) stays side by
       side and just horizontal-scrolls on small windows instead of the columns
       stacking. */
    min-width: 1200px;
}

/* Main-content brand logo (the old text logo lived in the sidebar; now the full
   bust + wordmark sits at the top-left of the page content). */
.app-logo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
}
.app-logo {
    height: 76px;
    width: auto;
    display: block;
}

/* ------------------------------------------------------------ the app frame */
/* A page that reads inside the viewport rather than as a scrolling document
   (Review Mode, the evaluation page) opts in with {% block main_class %}main-frame:
   the shell keeps the rail's margin and the 1200px floor, and the frame owns the
   height. Its two children are the 64px app bar and the work area, which takes
   the rest and lets its own regions scroll (min-height: 0 is what allows a flex
   child to be shorter than its content). */
.main.main-frame {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.main-frame > .app-bar {
    flex: 0 0 var(--app-bar-h, 64px);
}
.main-frame .frame-work {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

/* Focus: only the paper. The class sits on <body> because the message drawer is
   the wrapper's sibling, not its child, so nothing lower could reach all three.
   visibility:hidden takes the rail out of the tab order and stops its hover
   expansion; the frame reclaims the rail's margin. */
body.is-focus #sidebar {
    transform: translateX(-100%);
    visibility: hidden;
}
body.is-focus .main-frame {
    margin-left: 0;
}
body.is-focus .app-bar,
body.is-focus .messages-activities {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    body.is-focus #sidebar,
    .main-frame {
        transition: none;
    }
}

/* Tab-switcher row under the logo (evaluation, forum, profile). Three tracks so the
   strip centres against the PAGE, not the space left over by the back button; the
   back button (when the page has one) takes the left track. */
.page-tabs-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px 20px;
    padding: 0 14px 8px;
}
.page-tabs-row > .back-btn {
    grid-column: 1;
    justify-self: start;
}
.page-tabs-row > .nav-tabs,
.page-tabs-row > .nav-wrapper {
    grid-column: 2;
    min-width: 0;
}


@media (max-width: 1400px) {
    /* The rail is collapsed-by-default + hover-to-expand at every width; the old
       mobile hamburger toggle isn't used. */
    #sidebarToggleBtn { display: none !important; }
}

@media (max-height: 500px) {
    #id-account-container {
        display: none;
    }
}


/* ---- message sidebar ---- */
.sidebar-nav-btn {
    color: white;
    margin-bottom: 0;
    position: relative;
}

.sidebar-nav-btn:hover {
    color: var(--neutral-400);
}

.sidebar-nav-btn.active {
    border-bottom: solid white 2px;
}

.sidebar-item {
    flex: 1;
    display: flex;
    justify-content: center;
}

.list-container {
    height: 100%;
    overflow: auto;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.list-container::-webkit-scrollbar {
    display: none;
}

.gradient-container {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.gradient-container::after {
    background: linear-gradient(0deg, var(--brand-primary) 0%, rgba(18, 49, 80, 0) 100%);
    content: "";
    height: 5%;
    position: absolute;
    width: 21rem;
    z-index: 2;
    left: 2rem;
    bottom: 3rem;
}

.new-message-paper-title {
    transition: transform 0.2s ease;
    transform-origin: left center;
    cursor: pointer;
    color: #f0f0f0;
}

.new-message-paper-title:hover svg {
    transform: translateX(5px);
}

.messages-activities {
    position: fixed;
    top: 0;
    right: 0;
    width: 25rem;
    z-index: 20;
    background-color: var(--brand-primary);
    color: white;
    transform: translateX(100%);
}
/* Closed, the panel is translated off-canvas but its links stayed in the tab order --
   a keyboard user tabbed through an invisible panel. Hiding the CONTENT (not the
   aside) fixes that while keeping the <aside> itself in the accessibility tree: hide
   the whole aside and its always-visible toggle button gets reported as text outside
   any landmark, because its landmark ancestor no longer exists to the tree
   (Siteimprove: "Messages and activity"). The 200ms delay lets the slide-out finish. */
.messages-activities .message-container {
    visibility: hidden;
    transition: visibility 0s 200ms;
}
.messages-activities.slide-in .message-container {
    visibility: visible;
    transition-delay: 0s;
}
@media (max-width: 991.98px) {
    .messages-activities {
        width: min(25rem, 100vw);
    }
}

.message-activity-btn {
    position: absolute;
    top: 2rem;
    left: 0.25rem;
    transform: translateX(-100%);
    padding: 1rem 1rem;
    box-shadow: none;
    z-index: 10;
}
.message-activity-btn:focus {
    box-shadow: none;
}
/* Bootstrap's .btn:focus zeroes the outline and the rule above zeroes the shadow, which
   left this toggle with NO focus indicator on every page (2.4.7, real-key audit). */
.message-activity-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -4px;
}

.messages-activities .message-container {
    height: 100vh;
    padding: 3rem 2rem;
    display: grid;
    grid-template-rows: auto 1fr;
    /* Overlay panel: its scrollers must never chain scroll to the page behind it */
    overscroll-behavior: contain;
}
.messages-activities .tab-content { overscroll-behavior: contain; }

.view-unread-message {
    cursor: pointer;
}

/* Loading skeleton shown on the sidebar's first open while content is fetched
   (the tab switcher renders immediately using the real markup; only the list
   content gets skeleton lines) */
.skeleton-bar {
    background: rgba(249, 249, 249, 0.18);
    border-radius: 6px;
    animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.skeleton-tab {
    width: 6rem;
    height: 1.4rem;
}

.skeleton-line {
    height: 0.9rem;
    margin: 0 auto 1rem;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Activity filter — a single dropdown of checkable items (multi-select) */
.activity-filter-btn {
    background-color: transparent;
    border: 1px solid rgba(249, 249, 249, 0.45);
    border-radius: 16px;
    padding: 4px 16px;
    color: #f9f9f9;
    font-size: 13px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.activity-filter-btn:hover {
    border-color: #f9f9f9;
    background-color: rgba(249, 249, 249, 0.12);
}

.activity-filter-menu {
    background-color: var(--brand-primary);
    border: 1px solid rgba(249, 249, 249, 0.3);
    border-radius: 8px;
    padding: 6px;
    min-width: 230px;
    max-height: 320px;
    overflow-y: auto;
}
/* Divider under the pinned "All activity" item — Bootstrap's default is too dark on navy */
.activity-filter-menu .dropdown-divider { border-top-color: rgba(249, 249, 249, 0.25); margin: 4px 0; }
.activity-filter-menu .filter-activity-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #f9f9f9;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.activity-filter-menu .filter-activity-btn:hover {
    background-color: rgba(249, 249, 249, 0.12);
}
.activity-filter-menu .filter-activity-btn.active {
    background-color: rgba(249, 249, 249, 0.18);
    font-weight: 600;
}
/* Check icon lives in the markup (fa-check svg via the FA kit); CSS only toggles it.
   The kit swaps <i> for <svg> but preserves the .filter-check class. */
.activity-filter-menu .filter-activity-btn .filter-check { display: none; margin-left: 8px; }
.activity-filter-menu .filter-activity-btn.active .filter-check { display: inline-block; }

.in {
    transform: translateX(0);
}

.slide-in {
    animation: slide-in 200ms ease-in-out 0s 1 normal forwards;
}

.slide-out {
    animation: slide-out 200ms ease-in-out 0s 1 normal forwards;
}

@keyframes slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes slide-out {
    from { transform: translateX(0%); }
    to { transform: translateX(100%); }
}

.number_activity {
    /* White on pure red is 4.00:1 -- just under 1.4.3. --danger is the palette's
       error colour and reaches 7.25:1 with white. */
    background-color: var(--danger);
    color: white;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: 0;
    left: -1rem;
    transform: translate(50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* "99+" in a smaller face than a two-digit count: the cap is a glance, and three
   characters at the badge's size overflow the pill (owner, 2026-09-05). */
.number_activity .unread-count.is-capped {
    font-size: 0.8em;
    letter-spacing: -0.02em;
}

.author_chat_activity {
    /* White on pure red is 4.00:1 -- just under 1.4.3. --danger is the palette's
       error colour and reaches 7.25:1 with white. */
    background-color: var(--danger);
    color: white;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: 0;
    left: -1rem;
    transform: translate(50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor_chat_activity {
    /* White on pure red is 4.00:1 -- just under 1.4.3. --danger is the palette's
       error colour and reaches 7.25:1 with white. */
    background-color: var(--danger);
    color: white;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: 0;
    left: -1rem;
    transform: translate(50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-activity-sidebar {
    position: relative;
}
/* Matches the folder-detail "New!" pill (Bootstrap .badge.badge-pill.badge-warning):
   amber pill, dark text, centered — so the two "new" indicators are consistent. */
.new-activity-modification::before {
    content: "New!";
    position: absolute;
    bottom: 0.25rem;
    right: 10rem;
    padding: 0.25em 0.6em;
    border-radius: 10rem;
    background-color: #ffc107;
    color: #212529;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.messages-activities .tab-content .tab-pane.active {
    display: grid;
    grid-template-rows: auto 1fr;
}

/* sus-container*/
.sus-container {
    display: none;
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(239, 240, 241, 0.95);
}

.sus-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

#sus-form {
    background-color: var(--surface-subtle);
    width: 70%;
    min-width: 500px;
    padding: 20px;
    border-radius: 10px;
    border: var(--brand-primary) 1px solid;
}

.sus-option {
    background-color: var(--brand-primary-tint);
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    color: var(--brand-primary);
    font-weight: bold;
    position: relative;
    transition: transform 0.3s ease-in-out;
}

.sus-option.checked {
    box-shadow: 0 0 0 0.2rem rgb(194, 204, 243);
}

.sus-option::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 3px solid #686868;
    border-bottom: 3px solid #686868;
    transform: rotate(45deg);
    top: 50%;
    left: 50%;
    opacity: 0;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

.sus-option.checked::after {
    width: 10px;
    height: 20px;
    opacity: 1;
    top: 26%;
    left: 42%;
}

.sus-option:hover {
    box-shadow: 0 0 0 0.2rem rgb(194, 204, 243);
}

.sus-question-container {
    padding: 2rem 0;
    display: none;
}

.sus-question-container.show {
    display: block;
}

.sus-question-title {
    color: var(--brand-primary);
    text-align: center;
    width: 100%;
}

.sus-question-num {
    padding-left: 15px;
    font-weight: bold;
    /* Bare `gray` is 3.95:1 on white and 3.62:1 on --neutral-100 -- it never
       reaches 4.5:1 on any surface this app uses. */
    color: var(--text-muted);
    margin-right: 10px;
}

#sus-skip {
    /* Bare `gray` is 3.95:1 on white and 3.62:1 on --neutral-100 -- it never
       reaches 4.5:1 on any surface this app uses. */
    color: var(--text-muted);
    margin-bottom: 0;
    margin-right: 1.5rem;
    cursor: pointer;
}

/* (Old .detail-back-arrow retired — folder/forum now use the shared .back-btn.) */

/* ============================ Reflow (WCAG 1.4.10) ============================ */
/* At 320 CSS px -- a phone, or a desktop at 400% zoom -- the page must not scroll in
   two dimensions. Everything here lives behind max-width media queries that the fixed
   desktop layout never enters, so rendering at >=992px is byte-for-byte what it was.
   Content that genuinely needs two-dimensional layout (the submissions tables) scrolls
   inside its own .table-scroll container instead, which 1.4.10 exempts. */
@media (max-width: 991.98px) {
    .main {
        /* the desktop floor that forced whole-page horizontal scrolling */
        min-width: 0;
    }
    /* Bare col-N classes are not breakpointed, so the dashboard's 75/25 split would
       survive to 320px at postage-stamp widths. Stack ONLY direct children of .row:
       col-* inside non-.row flex rows (folder cards, member rows) are percentage
       columns of their card, and forcing those to 100% inside a nowrap container makes
       every child demand full width -- the row explodes WIDER, not narrower. */
    .main .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Bootstrap's negative row margins can force 100vw + 30px */
    .main .row {
        margin-left: 0;
        margin-right: 0;
    }
    /* long titles/emails must wrap rather than widen the page */
    .main {
        overflow-wrap: break-word;
    }
    /* d-flex rows default to nowrap, which at 320px pushes the second item (the
       dashboard's segmented stats strips, header actions) off the page. Wrapping IS
       the reflow. Same for the pagination strip. */
    .main .d-flex,
    .main .app-logo-header,
    .main .pagination,
    .main #per-page-input-ul,
    .main .segmented,
    .main .single-member-container {
        flex-wrap: wrap;
    }
    /* A flex child's min-width defaults to its content, so a nowrap name or a wide
       button strip refuses to shrink and pushes the row past the viewport. Zero lets
       the existing ellipsis/wrap rules actually apply. */
    .main .d-flex > *,
    .main .single-member-container > * {
        min-width: 0;
    }
    /* fixed-size images (journal covers, avatars) scale down instead of widening */
    .main img {
        max-width: 100%;
        height: auto;
    }
    /* Bootstrap's mx-5 (3rem a side, !important) leaves 128px of content at 320px */
    .main .mx-5 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
    /* Flex-item margins count toward scrollable overflow even when nothing paints
       there; every painted box in this list stops well short of the viewport edge
       (measured: max 315px at a 320px viewport), so this clips phantom scroll extent,
       not content. */
    .main .associate-editor-list {
        overflow-x: clip;
    }
}

/* A wide table keeps its meaning by scrolling in ITS OWN box (1.4.10's 2-D exemption)
   instead of dragging the whole page wide. A real wrapper div, not display:block on the
   table -- that would strip the table's AT semantics.
   Narrow viewports ONLY: overflow-x:auto makes a scroll container that clips
   position:absolute descendants on BOTH axes (overflow-y computes to auto) even when no
   bar shows -- on desktop it silently cut off the folder table's assign-editors dropdown
   on lower rows (folder.css documents that no-overflow-ancestor contract). */
@media (max-width: 991.98px) {
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}