/* =============================================================================
 * IN-12155 — Resource Library 2.0, page-scoped CTLS / Cobb-red theme.
 * =============================================================================
 * brief-A: variables, top strip, .rl2-libwrap grid.
 * brief-B: the POC exhibit's full stylesheet, ported.
 *
 * SCOPING IS THE POINT (design doc D6 / risk register): every rule below is
 * nested under .rl2-page, and the theme variables are declared ON .rl2-page,
 * NOT on :root. Declaring them at :root would hand `--red-500` and friends to
 * the whole application, and `--border` / `--text` / `--panel` are generic
 * enough that a global declaration could collide with another stylesheet's
 * variables of the same name. Scoped here, they resolve only inside this page
 * and cascade to everything mounted within it.
 *
 * SECOND SCOPING RULE, brief-B: every CLASS NAME is prefixed `rl2-` too, even
 * though the selectors are already nested. Nesting protects the rest of the app
 * from us; it does NOT protect us from the rest of the app. The POC's own names
 * are things like .panel, .tag, .act, .btn, .modal, .toast, .menu and .empty —
 * bootstrap and incite's shared stylesheets define several of those globally,
 * and a global `.btn` rule still applies to a `.btn` inside .rl2-page. The
 * prefix is what makes the port render as drawn. Keep it on anything new.
 *
 * No global selectors, no element selectors outside .rl2-page, and no edits to
 * any shared stylesheet.
 *
 * VALUES are lifted verbatim from the POC exhibit's :root block
 * (lotty_integration/resource-library-2.0-poc.html:8-12). Do not re-pick them
 * by eye — if the POC changes, re-copy. The tokens below the first block are
 * brief-B additions for colours the POC hardcoded inline; same naming scheme.
 * ========================================================================== */

.rl2-page {
    /* Cobb red ramp */
    --rl2-red-900: #7a0c15;
    --rl2-red-700: #a20f1f;
    --rl2-red-600: #b3121f;
    --rl2-red-500: #c8102e;
    --rl2-red-050: #fbeaec;

    /* Neutrals / surfaces */
    --rl2-grey-bg: #ececec;
    --rl2-panel: #ffffff;
    --rl2-border: #d9d9d9;
    --rl2-border-2: #e6e6e6;
    --rl2-text: #333333;
    --rl2-muted: #767676;
    --rl2-muted-2: #9a9a9a;
    --rl2-chip: #f2f2f2;
    --rl2-shadow: 0 1px 3px rgba(0, 0, 0, .14);

    /* brief-B additions — the POC hardcodes these at their use sites. */
    --rl2-star: #e0b93a;
    --rl2-star-filter: #e0c04a;
    --rl2-tag-std-bg: #eef4fb;
    --rl2-tag-std-border: #d4e3f2;
    --rl2-tag-std-text: #2c5d8f;
    --rl2-tag-lang-bg: #eef7ef;
    --rl2-tag-lang-border: #cfe6d1;
    --rl2-tag-lang-text: #39733d;
    --rl2-interp-border: #ecd3d7;
    --rl2-interp-text: #6a4b50;
    --rl2-interp-pill-border: #e6c2c8;
    --rl2-sticky-border: #eecdd2;
    --rl2-overlay-bg: rgba(0, 0, 0, .45);
    --rl2-toast-bg: #2b2b2b;
    --rl2-toast-ok: #7bd88f;
    --rl2-toast-info: #ffd479;
    --rl2-doc-bg: #8f9296;
    --rl2-skel: #ededed;
    --rl2-avatar: #5b1e2a;

    /* POC body baseline. Set on the page root rather than `body` so it stays
       inside the scope; the markup below inherits it. */
    color: var(--rl2-text);
    background: var(--rl2-grey-bg);
    font-size: 14px;
    line-height: 1.4;
    padding: 18px;
    min-height: 100%;
}

/* POC `*{box-sizing:border-box}`, scoped to the page. */
.rl2-page,
.rl2-page *,
.rl2-page *::before,
.rl2-page *::after {
    box-sizing: border-box;
}

/* POC `button{font-family:inherit;cursor:pointer}`, scoped. Also flattens the
   shared stylesheets' default button chrome so the ported styles start clean. */
.rl2-page button {
    font-family: inherit;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Top strip — POC .crumbs / .pocflag (poc:42-45).
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-crumbs {
    color: var(--rl2-muted);
    font-size: 12.5px;
    margin-bottom: 14px;
}

.rl2-page .rl2-crumbs b {
    color: #4a4a4a;
}

.rl2-page .rl2-pocflag {
    display: inline-block;
    font-size: 11px;
    color: var(--rl2-muted);
    background: var(--rl2-panel);
    border: 1px dashed var(--rl2-border);
    border-radius: 5px;
    padding: 4px 9px;
    margin-left: 8px;
}

.rl2-page .rl2-pocflag b {
    color: var(--rl2-red-700);
}

/* ---------------------------------------------------------------------------
 * AI search bar — POC .aisearch / .aibar-wrap / .ai-examples / .interp
 * (poc:47-65). The "AI" here is a client-side regex parser; see the controller.
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-aisearch {
    margin-bottom: 16px;
}

.rl2-page .rl2-aibar-wrap {
    position: relative;
    border-radius: 11px;
    padding: 2px;
    background: linear-gradient(100deg, var(--rl2-red-500), #e0637c 45%, var(--rl2-red-600));
    box-shadow: var(--rl2-shadow);
}

.rl2-page .rl2-aibar-inner {
    display: flex;
    align-items: center;
    background: var(--rl2-panel);
    border-radius: 9px;
    padding: 4px 6px 4px 14px;
}

.rl2-page .rl2-ai-spark {
    font-size: 19px;
    margin-right: 6px;
}

.rl2-page .rl2-ai-label {
    position: absolute;
    top: -9px;
    left: 14px;
    background: var(--rl2-red-700);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 2px 9px;
    border-radius: 9px;
}

.rl2-page .rl2-aibar-inner input {
    border: 0;
    outline: none;
    flex: 1;
    font-size: 15px;
    padding: 9px 6px;
    background: transparent;
    color: var(--rl2-text);
    height: auto;
    margin: 0;
    box-shadow: none;
}

.rl2-page .rl2-ai-go {
    background: var(--rl2-red-700);
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: 9px 18px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.rl2-page .rl2-ai-go:hover {
    background: var(--rl2-red-600);
    color: #fff;
}

.rl2-page .rl2-ai-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
    align-items: center;
}

.rl2-page .rl2-ai-examples .rl2-hint {
    font-size: 11.5px;
    color: var(--rl2-muted);
}

.rl2-page .rl2-ex-chip {
    background: var(--rl2-panel);
    border: 1px solid var(--rl2-border);
    border-radius: 14px;
    padding: 5px 11px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rl2-page .rl2-ex-chip:hover {
    border-color: var(--rl2-red-500);
    color: var(--rl2-red-700);
    background: var(--rl2-red-050);
}

.rl2-page .rl2-ex-chip .rl2-s {
    color: var(--rl2-red-500);
}

.rl2-page .rl2-interp {
    margin-top: 11px;
    background: linear-gradient(90deg, var(--rl2-red-050), #f7eef4);
    border: 1px solid var(--rl2-interp-border);
    border-radius: 9px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--rl2-interp-text);
}

.rl2-page .rl2-interp b {
    color: var(--rl2-red-700);
}

.rl2-page .rl2-interp .rl2-ipill {
    background: var(--rl2-panel);
    border: 1px solid var(--rl2-interp-pill-border);
    border-radius: 12px;
    padding: 3px 10px;
    font-weight: 600;
    color: var(--rl2-red-700);
}

.rl2-page .rl2-interp .rl2-reset {
    margin-left: auto;
    color: var(--rl2-red-700);
    font-weight: 600;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Sort row + "My defaults" chip — POC .lib-top2 (poc:67-75).
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-libtop {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.rl2-page .rl2-libtop .rl2-rcount {
    font-size: 12.5px;
    color: var(--rl2-muted);
}

.rl2-page .rl2-libtop .rl2-rcount b {
    color: #444;
}

.rl2-page .rl2-libtop select {
    border: 1px solid var(--rl2-border);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 12.5px;
    background: var(--rl2-panel);
    color: #555;
    width: auto;
    height: auto;
    margin: 0;
    box-shadow: none;
}

.rl2-page .rl2-prefs-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--rl2-panel);
    border: 1px solid var(--rl2-border);
    border-radius: 7px;
    padding: 9px 12px;
    box-shadow: var(--rl2-shadow);
    font-size: 12.5px;
    margin-left: auto;
}

.rl2-page .rl2-prefs-chip .rl2-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rl2-red-500);
}

.rl2-page .rl2-sticky-tag {
    background: var(--rl2-red-050);
    color: var(--rl2-red-700);
    border: 1px solid var(--rl2-sticky-border);
    border-radius: 12px;
    padding: 2px 9px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Panels — POC .panel / .panel-head (poc:77-78).
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-panel {
    background: var(--rl2-panel);
    border: 1px solid var(--rl2-border);
    border-radius: 8px;
    box-shadow: var(--rl2-shadow);
}

.rl2-page .rl2-panel-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rl2-border-2);
    font-weight: 700;
    font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
 * Three-column shell — POC .lib-wrap (poc:80), breakpoints at poc:196-197.
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-libwrap {
    display: grid;
    grid-template-columns: 220px 1fr 250px;
    gap: 16px;
    align-items: start;
}

/* ---------------------------------------------------------------------------
 * Filter rail — POC .filters / .fgroup / .fopt (poc:81-94).
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-filters .rl2-panel {
    padding: 14px 0;
}

.rl2-page .rl2-fgroup {
    padding: 6px 16px 12px;
    border-bottom: 1px solid var(--rl2-border-2);
}

.rl2-page .rl2-fgroup:last-child {
    border-bottom: 0;
}

.rl2-page .rl2-fgroup h4 {
    margin: 6px 0 8px;
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    line-height: 1.4;
}

.rl2-page .rl2-fgroup h4 .rl2-clr {
    font-weight: 400;
    font-size: 11px;
    color: var(--rl2-red-600);
    cursor: pointer;
}

.rl2-page .rl2-fopt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12.5px;
    color: #555;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
}

.rl2-page .rl2-fopt input {
    accent-color: var(--rl2-red-500);
    margin: 0;
}

.rl2-page .rl2-fopt .rl2-cnt {
    margin-left: auto;
    color: var(--rl2-muted-2);
    font-size: 11px;
}

.rl2-page .rl2-stars-filter span {
    cursor: pointer;
    color: var(--rl2-star-filter);
    font-size: 16px;
}

.rl2-page .rl2-lang-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rl2-page .rl2-lang-seg button {
    border: 1px solid var(--rl2-border);
    background: var(--rl2-panel);
    border-radius: 14px;
    padding: 4px 11px;
    font-size: 12px;
    color: #666;
}

.rl2-page .rl2-lang-seg button.rl2-on {
    background: var(--rl2-red-700);
    color: #fff;
    border-color: var(--rl2-red-700);
}

.rl2-page .rl2-inp {
    border: 1px solid var(--rl2-border);
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--rl2-text);
    background: var(--rl2-panel);
    width: 100%;
    height: auto;
    margin: 0;
    box-shadow: none;
}

.rl2-page .rl2-inp:focus {
    outline: none;
    border-color: var(--rl2-red-500);
    box-shadow: 0 0 0 2px rgba(200, 16, 46, .12);
}

/* ---------------------------------------------------------------------------
 * Active-filter chips — POC .active-filters / .af (poc:99-101).
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.rl2-page .rl2-af {
    background: var(--rl2-panel);
    border: 1px solid var(--rl2-border);
    border-radius: 13px;
    padding: 3px 6px 3px 10px;
    font-size: 11.5px;
    color: #555;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rl2-page .rl2-af .rl2-af-x {
    cursor: pointer;
    color: var(--rl2-muted-2);
    font-weight: 700;
}

.rl2-page .rl2-af-clear {
    border-style: dashed;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Resource cards — POC .cards / .rcard / .tag / .act (poc:102-126).
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rl2-page .rl2-rcard {
    background: var(--rl2-panel);
    border: 1px solid var(--rl2-border);
    border-radius: 8px;
    box-shadow: var(--rl2-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: relative;
}

.rl2-page .rl2-rcard h3 {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.3;
    color: #2b2b2b;
    cursor: pointer;
    font-weight: 700;
    padding-right: 90px;
}

.rl2-page .rl2-rcard h3:hover {
    color: var(--rl2-red-700);
    text-decoration: underline;
}

.rl2-page .rl2-rcard .rl2-rcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Lesson Planet badge — brief-B addition, no POC equivalent. Design doc §3
   requires the LP-sourced row to be visibly badged as external. */
.rl2-page .rl2-lp-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--rl2-red-050);
    border: 1px solid var(--rl2-sticky-border);
    color: var(--rl2-red-700);
    border-radius: 11px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}

.rl2-page .rl2-tag {
    background: var(--rl2-chip);
    border: 1px solid var(--rl2-border-2);
    border-radius: 11px;
    padding: 2px 8px;
    font-size: 11px;
    color: #5a5a5a;
    display: inline-block;
}

.rl2-page .rl2-tag.rl2-std {
    background: var(--rl2-tag-std-bg);
    border-color: var(--rl2-tag-std-border);
    color: var(--rl2-tag-std-text);
}

.rl2-page .rl2-tag.rl2-lang {
    background: var(--rl2-tag-lang-bg);
    border-color: var(--rl2-tag-lang-border);
    color: var(--rl2-tag-lang-text);
}

.rl2-page .rl2-rcard .rl2-desc {
    font-size: 12px;
    color: var(--rl2-muted);
    line-height: 1.45;
}

.rl2-page .rl2-stars {
    color: var(--rl2-star);
    font-size: 14px;
    letter-spacing: 1px;
}

.rl2-page .rl2-stars small {
    color: var(--rl2-muted-2);
    margin-left: 5px;
    font-size: 11px;
    letter-spacing: 0;
}

.rl2-page .rl2-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--rl2-border-2);
}

.rl2-page .rl2-act {
    border: 1px solid var(--rl2-border);
    background: var(--rl2-panel);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: #555;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.rl2-page .rl2-act:hover {
    background: var(--rl2-chip);
}

/* The Lotty button carries the primary emphasis, NOT "Insert into CTLS". The
   POC gives .primary to Insert; the design doc calls Lotty "the money button",
   so brief-B inverts it deliberately. Insert into CTLS is secondary here. */
.rl2-page .rl2-act.rl2-primary {
    background: var(--rl2-red-700);
    color: #fff;
    border-color: var(--rl2-red-700);
}

.rl2-page .rl2-act.rl2-primary:hover {
    background: var(--rl2-red-600);
    color: #fff;
}

.rl2-page .rl2-act .rl2-g {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
}

/* Disabled Lotty button (Lesson Planet row, video row). Declared AFTER the
   .rl2-primary rules so it wins — a disabled primary must not look clickable. */
.rl2-page .rl2-act[disabled],
.rl2-page .rl2-act[disabled]:hover {
    background: var(--rl2-chip);
    color: var(--rl2-muted-2);
    border-color: var(--rl2-border);
    cursor: not-allowed;
    opacity: .75;
}

/* A disabled <button> swallows its own mouse events in several browsers, so the
   native `title` tooltip can go unshown. The wrapper carries the tooltip too,
   which is why the button stays genuinely disabled instead of being faked. */
.rl2-page .rl2-act-wrap {
    display: inline-flex;
}

.rl2-page .rl2-act-wrap.rl2-act-wrap-off {
    cursor: not-allowed;
}

.rl2-page .rl2-empty {
    padding: 50px 20px;
    text-align: center;
    color: var(--rl2-muted);
    grid-column: 1 / -1;
}

.rl2-page .rl2-empty .rl2-g {
    font-size: 34px;
    display: block;
    margin-bottom: 8px;
    color: var(--rl2-muted-2);
}

/* ---------------------------------------------------------------------------
 * Collections rail — POC .collections (poc:128-137). Static.
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-collections .rl2-panel {
    padding: 0;
    overflow: hidden;
}

.rl2-page .rl2-coll-item {
    padding: 11px 16px;
    border-bottom: 1px solid var(--rl2-border-2);
    cursor: pointer;
}

.rl2-page .rl2-coll-item:hover {
    background: #f7f7f7;
}

.rl2-page .rl2-coll-item .rl2-cn {
    font-weight: 600;
    font-size: 13px;
    color: var(--rl2-text);
    display: flex;
    align-items: center;
    gap: 7px;
}

.rl2-page .rl2-coll-item .rl2-cs {
    font-size: 11px;
    color: var(--rl2-muted);
    margin-top: 2px;
}

.rl2-page .rl2-coll-item .rl2-share {
    display: flex;
    margin-top: 6px;
}

.rl2-page .rl2-coll-item .rl2-share .rl2-mini {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rl2-avatar);
    color: #fff;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -5px;
    border: 1.5px solid #fff;
}

.rl2-page .rl2-coll-item .rl2-share .rl2-mini:first-child {
    margin-left: 0;
}

.rl2-page .rl2-coll-new {
    padding: 11px 16px;
    color: var(--rl2-red-700);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
}

.rl2-page .rl2-coll-new:hover {
    background: var(--rl2-red-050);
}

/* ---------------------------------------------------------------------------
 * Modals — POC .overlay / .modal (poc:139-159).
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-overlay {
    position: fixed;
    inset: 0;
    background: var(--rl2-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 20px;
}

.rl2-page .rl2-modal {
    background: var(--rl2-panel);
    border-radius: 10px;
    width: 440px;
    max-width: 92vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.rl2-page .rl2-modal .rl2-mh {
    background: var(--rl2-red-700);
    color: #fff;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.rl2-page .rl2-modal .rl2-mh .rl2-close {
    margin-left: auto;
    cursor: pointer;
    opacity: .85;
}

.rl2-page .rl2-modal .rl2-mb {
    padding: 18px;
    font-size: 13px;
    color: #444;
}

.rl2-page .rl2-modal .rl2-mf {
    padding: 12px 18px;
    border-top: 1px solid var(--rl2-border-2);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: #fafafa;
}

/* Three metric tiles do not fit the POC's 440px modal, which only had two. */
.rl2-page .rl2-metrics-modal {
    width: 520px;
}

.rl2-page .rl2-mtitle {
    font-weight: 700;
    font-size: 14px;
    color: #2b2b2b;
}

.rl2-page .rl2-msub {
    font-size: 12px;
    color: var(--rl2-muted);
    margin-top: 2px;
}

.rl2-page .rl2-mstat {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.rl2-page .rl2-mtile {
    flex: 1;
    border: 1px solid var(--rl2-border);
    border-radius: 9px;
    padding: 16px 12px;
    text-align: center;
    background: #fafafa;
}

.rl2-page .rl2-mtile .rl2-num {
    font-size: 30px;
    font-weight: 800;
    color: var(--rl2-red-700);
    line-height: 1;
}

.rl2-page .rl2-mtile .rl2-lab {
    font-size: 11.5px;
    color: var(--rl2-muted);
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.rl2-page .rl2-mnote {
    font-size: 11.5px;
    color: var(--rl2-muted-2);
    margin-top: 14px;
    text-align: center;
}

.rl2-page .rl2-btn {
    border: 1px solid var(--rl2-border);
    background: var(--rl2-panel);
    border-radius: 6px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 13px;
    color: #555;
}

.rl2-page .rl2-btn:hover {
    background: #f0f0f0;
}

.rl2-page .rl2-btn.rl2-btn-save {
    background: var(--rl2-red-500);
    color: #fff;
    border: 0;
}

.rl2-page .rl2-btn.rl2-btn-save:hover {
    background: var(--rl2-red-600);
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * Preview modal — POC .preview-modal (poc:161-188). Styled PLACEHOLDER pages:
 * there is no S3 fetch and no document rendering anywhere in this demo.
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-preview-modal {
    width: 920px;
    max-width: 95vw;
    height: 82vh;
    display: flex;
    flex-direction: column;
}

.rl2-page .rl2-pv-head {
    background: var(--rl2-red-700);
    color: #fff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.rl2-page .rl2-pv-head .rl2-fmt {
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, .2);
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.rl2-page .rl2-pv-head .rl2-close {
    margin-left: auto;
    cursor: pointer;
    font-size: 16px;
}

.rl2-page .rl2-pv-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.rl2-page .rl2-pv-doc {
    flex: 1;
    overflow: auto;
    background: var(--rl2-doc-bg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.rl2-page .rl2-doc-page {
    background: var(--rl2-panel);
    width: 640px;
    max-width: 100%;
    min-height: 430px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
    padding: 44px 52px;
}

.rl2-page .rl2-doc-page .rl2-dp-head {
    border-bottom: 3px solid var(--rl2-red-700);
    padding-bottom: 10px;
    margin-bottom: 18px;
}

.rl2-page .rl2-doc-page .rl2-dp-kicker {
    color: var(--rl2-red-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}

.rl2-page .rl2-doc-page .rl2-dp-title {
    font-size: 22px;
    font-weight: 800;
    color: #222;
    margin: 4px 0 2px;
    line-height: 1.2;
}

.rl2-page .rl2-doc-page .rl2-dp-sub {
    color: #777;
    font-size: 12px;
}

.rl2-page .rl2-doc-page h5 {
    font-size: 13px;
    color: var(--rl2-text);
    margin: 16px 0 6px;
    font-weight: 700;
}

.rl2-page .rl2-doc-page p {
    font-size: 12.5px;
    color: #444;
    line-height: 1.6;
    margin: 0 0 10px;
}

.rl2-page .rl2-doc-page ul {
    margin: 0 0 10px;
    padding-left: 20px;
    list-style: disc;
}

.rl2-page .rl2-doc-page li {
    font-size: 12.5px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 4px;
}

.rl2-page .rl2-doc-page .rl2-pgnum {
    text-align: center;
    color: #aaa;
    font-size: 11px;
    margin-top: 26px;
}

.rl2-page .rl2-skel {
    height: 9px;
    background: var(--rl2-skel);
    border-radius: 3px;
    margin: 7px 0;
}

.rl2-page .rl2-skel.rl2-s1 { width: 100%; }
.rl2-page .rl2-skel.rl2-s2 { width: 92%; }
.rl2-page .rl2-skel.rl2-s3 { width: 78%; }
.rl2-page .rl2-skel.rl2-s4 { width: 85%; }

.rl2-page .rl2-skel.rl2-bar {
    height: 14px;
    width: 55%;
    margin-bottom: 16px;
}

.rl2-page .rl2-pv-side {
    width: 270px;
    flex-shrink: 0;
    border-left: 1px solid var(--rl2-border);
    background: #fafafa;
    padding: 16px;
    overflow: auto;
}

.rl2-page .rl2-pv-side h4 {
    margin: 0 0 4px;
    font-size: 15px;
    color: #2b2b2b;
    font-weight: 700;
    line-height: 1.3;
}

.rl2-page .rl2-pv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 14px;
}

.rl2-page .rl2-pv-side .rl2-stars {
    font-size: 15px;
    margin-bottom: 14px;
    display: block;
}

.rl2-page .rl2-pv-side .rl2-stars small {
    margin-left: 4px;
}

.rl2-page .rl2-actcol {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rl2-page .rl2-actcol button {
    width: 100%;
    justify-content: center;
    padding: 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--rl2-border);
    background: var(--rl2-panel);
    color: #555;
    display: flex;
    align-items: center;
    gap: 7px;
}

.rl2-page .rl2-actcol button.rl2-primary {
    background: var(--rl2-red-700);
    color: #fff;
    border-color: var(--rl2-red-700);
}

.rl2-page .rl2-actcol button.rl2-primary:hover {
    background: var(--rl2-red-600);
}

.rl2-page .rl2-actcol button:not(.rl2-primary):hover {
    background: #f0f0f0;
}

.rl2-page .rl2-actcol button[disabled],
.rl2-page .rl2-actcol button[disabled]:hover {
    background: var(--rl2-chip);
    color: var(--rl2-muted-2);
    border-color: var(--rl2-border);
    cursor: not-allowed;
    opacity: .75;
}

.rl2-page .rl2-actcol .rl2-act-wrap {
    display: flex;
}

/* ---------------------------------------------------------------------------
 * Toast — POC .toast (poc:190-194).
 * ------------------------------------------------------------------------ */

.rl2-page .rl2-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--rl2-toast-bg);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: .28s;
    z-index: 1200;
    max-width: 90vw;
}

.rl2-page .rl2-toast.rl2-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.rl2-page .rl2-toast .rl2-g {
    color: var(--rl2-toast-ok);
    font-size: 16px;
    display: inline-flex;
}

.rl2-page .rl2-toast.rl2-act-toast .rl2-g {
    color: var(--rl2-toast-info);
}

/* Lotty's axolotl mascot — the <rl2-axolotl> directive's SVG. The POC sizes it
   with an argument (axo(15) / axo(16) / axo(14)); here it is sized in CSS, per
   context, so the markup is identical at all three call sites. */
.rl2-page .rl2-axo {
    vertical-align: middle;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.rl2-page .rl2-actcol .rl2-axo {
    width: 16px;
    height: 16px;
}

.rl2-page .rl2-mtile .rl2-axo {
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------------------------
 * Breakpoints — POC poc:196-197, minus the .rail / .topnav rules (those are
 * the POC's own chrome; incite supplies the real ones).
 * ------------------------------------------------------------------------ */

@media (max-width: 1100px) {
    .rl2-page .rl2-libwrap {
        grid-template-columns: 210px 1fr;
    }

    .rl2-page .rl2-collections {
        grid-column: 1 / -1;
    }

    .rl2-page .rl2-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .rl2-page .rl2-libwrap {
        grid-template-columns: 1fr;
    }

    .rl2-page .rl2-filters {
        order: 2;
    }

    .rl2-page .rl2-prefs-chip {
        margin-left: 0;
    }
}