/*! LifeLearn Library — v0.3.0 */

.ll-resource *, .ll-resource *::before, .ll-resource *::after { box-sizing: border-box; }
body { margin:0; background:#FFFFFF; }
.ll-resource { font-family:"DM Sans", system-ui, sans-serif; color:#2D3748; -webkit-font-smoothing:antialiased; line-height:1.75; }
.ll-resource a { text-decoration:none; color:inherit; }
.ll-resource h1,.ll-resource h2,.ll-resource h3,.ll-resource h4 { font-family:"Outfit", sans-serif; color:#0E1B3D; letter-spacing:-.02em; margin:0; }
.ll-resource p { margin:0 0 20px; font-size:17px; line-height:1.78; }
.ll-resource :focus-visible { outline:2.5px solid #0C8372; outline-offset:3px; border-radius:4px; }

.ll-progress-bar { position:fixed; top:0; left:0; width:0%; height:3px; background:linear-gradient(90deg,#0E9F8B,#3DBDAF); z-index:99999; transition:width .1s ease; border-radius:0 2px 2px 0; box-shadow:0 0 8px rgba(14,159,139,.5); }

.ll-resource .w { max-width:1140px; margin:0 auto; padding:0 24px; }
@media(min-width:640px){ .ll-resource .w { padding:0 40px; } }
/* Between 1140 and about 1300 the page fills the window, so the gutter is
   whatever this padding gives it. Cards should never sit against the edge. */
@media(min-width:1140px){ .ll-resource .w { max-width:1220px; padding:0 56px; } }

/* ---------- HERO — the Library index gradient, distinct from every guide ---------- */
.ll-resource .hero { position:relative; background:linear-gradient(148deg,#0E1B3D 0%,#16295C 52%,#0C463C 100%); padding:56px 0 0; overflow:hidden; color:#fff; }
.ll-resource .hero::before { content:""; position:absolute; top:-140px; right:-100px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(14,159,139,.28) 0%,transparent 65%); pointer-events:none; }
.ll-resource .hero::after { content:""; position:absolute; bottom:20px; left:-60px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(255,233,184,.10) 0%,transparent 65%); pointer-events:none; }
.ll-resource .hero-tx { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:52px 52px; pointer-events:none; }
/* The hero holds one height whatever the copy does: the block is centred in
   a reserved space, so a longer line or a changed count moves nothing. It can
   still grow if it ever has to; it just never shrinks below this. */
.ll-resource .hero-in { position:relative; z-index:2; padding:0 0 44px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:340px; }
@media(min-width:1024px){ .ll-resource .hero-in { min-height:400px; } }
/* On a phone the hero has to end early enough that the title, the line under
   it and the counts are all on the first screen. Less air, smaller title. */
@media(max-width:640px){
  .ll-resource .hero { padding-top:28px; }
  .ll-resource .hero-in { min-height:0; padding-bottom:28px; }
  .ll-resource .hero h1 { font-size:clamp(26px,7.4vw,34px); margin-bottom:12px; }
  .ll-resource .hero-eye { margin-bottom:12px; }
  .ll-resource .hero-sub { font-size:14.5px; line-height:1.6; margin-bottom:16px; }
}
.ll-resource .hero-eye { display:inline-flex; align-items:center; gap:7px; padding:5px 16px; border-radius:999px; margin-bottom:18px; background:rgba(255,255,255,.09); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15); font-family:"Outfit",sans-serif; font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.88); }
.ll-resource .hero-eye svg { width:1em; height:1em; flex:0 0 auto; stroke-width:2.1; }
.ll-resource .hero h1 { font-family:"Outfit",sans-serif; font-size:clamp(34px,6.2vw,62px); font-weight:800; line-height:1.06; letter-spacing:-.03em; color:#fff; margin:0 auto 16px; max-width:760px; }
.ll-resource .hero h1 em { font-family:"Outfit",sans-serif; font-style:italic; font-weight:600; color:#FFE9B8; font-size:.86em; letter-spacing:-.01em; }
/* Two lines on a desktop. 660px is the width at which a sentence of about
   140 characters breaks in two rather than three; the sentence itself is
   capped to that budget server-side, so the shape cannot drift with the copy. */
.ll-resource .hero-sub { font-size:clamp(15px,2vw,18px); line-height:1.7; color:rgba(255,255,255,.72); max-width:680px; margin:0 auto 22px; }
.ll-resource .hero-stats { display:inline-flex; align-items:center; gap:0; border:1px solid rgba(255,255,255,.14); border-radius:999px; overflow:hidden; font-family:"Outfit",sans-serif; font-size:12px; font-weight:600; }
.ll-resource .hstat { padding:7px 16px; color:rgba(255,255,255,.80); }
.ll-resource .hstat:not(:last-child){ border-right:1px solid rgba(255,255,255,.12); }
.ll-resource .hstat strong { color:#fff; font-weight:800; }

/* ---------- SHELF RAIL — the index's answer to the guide category strip ---------- */
.ll-resource .shelf-rail { position:relative; z-index:3; display:flex; align-items:center; gap:7px; padding:14px 20px; background:rgba(0,0,0,.30); border-top:1px solid rgba(255,255,255,.07); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.ll-resource .shelf-rail::-webkit-scrollbar { display:none; }
@media(min-width:900px){ .ll-resource .shelf-rail { justify-content:center; } }
.ll-resource .s-pill { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:8px; font-family:"Outfit",sans-serif; font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.65); white-space:nowrap; transition:background .2s,color .2s; }
.ll-resource .s-pill:hover { background:rgba(255,255,255,.14); color:#fff; }
.ll-resource .sdot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }

/* ---------- CONTROL BAND ---------- */
.ll-resource .ctl-band { position:sticky; top:0; z-index:9000; background:#FFFFFF; border-bottom:1px solid #E2E8F0; box-shadow:0 2px 14px rgba(14,27,61,.05); }
.ll-resource .ctl-in { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 24px; padding:16px 0; }
.ll-resource .ctl { display:flex; flex-direction:column; gap:7px; }
.ll-resource .ctl > span { font-family:"Outfit",sans-serif; font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#627793; }
.ll-resource .seg { display:flex; background:#F8F9FB; border:1px solid #E2E8F0; border-radius:10px; overflow-x:auto; overflow-y:hidden; max-width:100%; scrollbar-width:none; -ms-overflow-style:none; }
.ll-resource .seg::-webkit-scrollbar { display:none; }
.ll-resource .ctl { max-width:100%; min-width:0; }
.ll-resource .seg button { font-family:"Outfit",sans-serif; font-size:13px; font-weight:600; background:none; border:0; cursor:pointer; color:#5A6577; padding:0 14px; min-height:44px; border-right:1px solid #E2E8F0; white-space:nowrap; transition:background .18s,color .18s; }
.ll-resource .seg button:last-child { border-right:0; }
.ll-resource .seg button { flex:0 0 auto; }
.ll-resource .seg button:hover:not([aria-pressed="true"]) { background:#E1F5EE; color:#0A786A; }
.ll-resource .seg button[aria-pressed="true"] { background:#0E1B3D; color:#fff; }
.ll-resource .find { position:relative; flex:1 1 240px; min-width:200px; }
.ll-resource .find svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke-width:2.1; color:#627793; pointer-events:none; }
.ll-resource .find input { width:100%; min-height:44px; padding:0 38px 0 38px; border:1px solid #E2E8F0; border-radius:10px; background:#F8F9FB; font-family:"DM Sans",sans-serif; font-size:15px; color:#2D3748; }
.ll-resource .find input::placeholder { color:#627793; }
.ll-resource .find input:focus { background:#fff; border-color:#0E9F8B; outline:none; box-shadow:0 0 0 3px rgba(14,159,139,.14); }
.ll-resource .find kbd { position:absolute; right:11px; top:50%; transform:translateY(-50%); font-family:"Outfit",sans-serif; font-size:10px; font-weight:700; color:#627793; border:1px solid #E2E8F0; border-radius:5px; padding:2px 6px; background:#fff; }
.ll-resource .tally { width:100%; font-size:13.5px; color:#5A6577; padding-bottom:2px; }
.ll-resource .tally b { color:#0E1B3D; font-weight:700; font-family:"Outfit",sans-serif; }
.ll-resource .tally em { font-style:normal; color:#627793; }

/* ---------- SHELVES ---------- */
/* Vertical only: the shorthand used to zero the side padding .w had set, so
   the list sat flush against the edge while the control band did not. */
.ll-resource .body-in { padding-top:56px; padding-bottom:28px; }
@media(min-width:720px){ .ll-resource .body-in { padding-top:76px; padding-bottom:40px; } }

.ll-resource .rows { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.ll-resource .row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 18px; background:#FFFFFF; border:1px solid #E8EDF4; border-radius:12px; box-shadow:0 2px 12px rgba(14,27,61,.05); transition:border-color .18s, transform .18s, box-shadow .18s; }
.ll-resource .row:hover { border-color:rgba(14,159,139,.42); transform:translateY(-2px); box-shadow:0 8px 24px rgba(14,27,61,.09); }
.ll-resource .r-link { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.ll-resource .r-code { font-family:"Outfit",sans-serif; font-size:11px; font-weight:700; letter-spacing:.6px; color:#627793; flex:0 0 62px; }
/* The guide's name is the thing being chosen, so it carries the weight in
   the row. Bold (700) from 0.6.6 - the owner's call, made on the live list
   2 Sep 2026: at medium the name did not stand apart from the line beside
   it. The section headings above stay 800. */
.ll-resource .r-title { flex:0 1 auto; font-size:15.5px; font-weight:700; color:#22303F; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ll-resource .r-title mark { background:#FFE9B8; color:#0E1B3D; border-radius:3px; padding:0 2px; }
.ll-resource .r-nation { font-family:"Outfit",sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#5A6577; border:1px solid #E2E8F0; border-radius:5px; padding:2px 7px; white-space:nowrap; }
.ll-resource .r-eg { font-family:"Outfit",sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#0A786A; background:#E1F5EE; border-radius:5px; padding:2px 7px; white-space:nowrap; }
.ll-resource .r-min { font-family:"Outfit",sans-serif; font-size:12px; font-weight:600; color:#627793; flex:0 0 52px; text-align:right; white-space:nowrap; }
@media(max-width:560px){
  .ll-resource .r-link { flex-wrap:wrap; gap:6px 10px; }
  .ll-resource .r-title { flex:1 1 100%; order:3; white-space:normal; }
  .ll-resource .r-min { flex:0 0 auto; }
}


/* ---------- PLAIN LIST — the Path's stage layout, numbered ---------- */
.ll-resource .path { position:relative; padding:8px 0 0; }
.ll-resource .path::before { content:""; position:absolute; left:15px; top:0; bottom:96px; width:2px; background:linear-gradient(180deg,#E2E8F0 0%,#E2E8F0 88%,transparent 100%); }
@media(min-width:820px){ .ll-resource .path::before { left:19px; } }
.ll-resource .stage { position:relative; padding:0 0 52px 50px; scroll-margin-top:178px; }
@media(min-width:820px){ .ll-resource .stage { padding-left:62px; } }
.ll-resource .snum { position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid #E2E8F0; display:grid; place-items:center; font-family:"Outfit",sans-serif; font-size:13px; font-weight:800; color:#5A6577; }
@media(min-width:820px){ .ll-resource .snum { width:40px; height:40px; font-size:15px; } }
.ll-resource .shead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; width:100%; text-align:left; background:none; border:0; padding:2px 0 10px; cursor:pointer; color:inherit; font:inherit; }
.ll-resource .ssay { width:100%; font-size:15px; line-height:1.7; color:#5A6577; max-width:60ch; margin:0 0 20px; }
.ll-resource .stitle { font-family:"Outfit",sans-serif; font-size:clamp(20px,3vw,27px); font-weight:800; letter-spacing:-.02em; color:#0E1B3D; }
.ll-resource .smeta { margin-left:auto; font-family:"Outfit",sans-serif; font-size:12.5px; font-weight:600; color:#627793; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.ll-resource .chev { display:inline-block; transition:transform .25s; }
.ll-resource .chev svg { width:13px; height:13px; stroke-width:2.4; display:block; }
.ll-resource .stage[data-open="false"] .chev { transform:rotate(-90deg); }
.ll-resource .stage[data-open="false"] .rows { display:none; }
.ll-resource .r-no { font-family:"Outfit",sans-serif; font-size:11.5px; font-weight:800; color:#0A786A; background:#E1F5EE; border-radius:6px; padding:3px 8px; flex:0 0 auto; min-width:34px; text-align:center; letter-spacing:.3px; }


/* ---------- EMPTY STATE ---------- */
.ll-resource .empty { text-align:center; padding:56px 20px 64px; }
.ll-resource .empty h3 { font-size:22px; font-weight:800; margin-bottom:8px; }
.ll-resource .empty p { color:#5A6577; max-width:46ch; margin:0 auto 18px; }
.ll-resource .empty button { font-family:"Outfit",sans-serif; font-size:14px; font-weight:600; background:#0C8372; color:#fff; border:0; border-radius:10px; padding:12px 24px; min-height:44px; cursor:pointer; }

/* ---------- NOTE STRIP ---------- */
.ll-resource .note { display:flex; gap:12px; align-items:flex-start; background:#FFFBF5; border:1px solid #F4E4BC; border-left:4px solid #F59E0B; border-radius:12px; padding:20px 24px; margin:0 0 40px; }
.ll-resource .note svg { width:17px; height:17px; stroke-width:2.1; color:#B45309; flex:0 0 auto; margin-top:3px; }
.ll-resource .note p { font-size:15px; color:#5A6577; margin:0; }
.ll-resource .note b { color:#0E1B3D; font-family:"Outfit",sans-serif; }

/* ---------- PRE-FOOTER — matched to the hero ---------- */
.ll-resource .prefooter { position:relative; background:linear-gradient(148deg,#0E1B3D 0%,#16295C 52%,#0C463C 100%); padding:56px 0; overflow:hidden; color:#fff; margin-top:20px; }
.ll-resource .prefooter::before { content:""; position:absolute; top:-140px; right:-100px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(14,159,139,.28) 0%,transparent 65%); pointer-events:none; }
.ll-resource .prefooter-tx { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:52px 52px; pointer-events:none; }
.ll-resource .prefooter-in { position:relative; z-index:2; text-align:center; max-width:620px; margin:0 auto; padding:0 24px; }
.ll-resource .prefooter h2 { font-family:"Outfit",sans-serif; font-size:clamp(24px,4.2vw,38px); font-weight:800; line-height:1.14; letter-spacing:-.025em; color:#fff; margin:0 0 14px; }
.ll-resource .prefooter h2 em { font-family:"Outfit",sans-serif; font-style:italic; font-weight:600; color:#FFE9B8; }
.ll-resource .prefooter p { font-size:clamp(15px,2vw,17px); line-height:1.7; color:rgba(255,255,255,.72); max-width:470px; margin:0 auto 24px; }
.ll-resource .cta-btns { display:flex; flex-direction:column; gap:12px; align-items:stretch; padding:0 20px; }
@media(min-width:500px){ .ll-resource .cta-btns { flex-direction:row; justify-content:center; align-items:center; padding:0; } }
.ll-resource .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:12px; font-family:"Outfit",sans-serif; font-size:15px; font-weight:600; border:2px solid transparent; transition:transform .22s,background .22s,border-color .22s; }
.ll-resource .btn--white { background:#fff; color:#0E1B3D; box-shadow:0 6px 24px rgba(0,0,0,.12); }
.ll-resource .btn--white:hover { transform:translateY(-2px); }
.ll-resource .btn--outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.ll-resource .btn--outline:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.ll-resource .foot { border-top:1px solid #E8EDF4; padding:36px 0 60px; font-size:13.5px; color:#627793; }
.ll-resource .foot b { color:#5A6577; }


/* ══ MY LOCKER — save a guide, keep a note against it, take both away ══ */
.ll-resource .r-act { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.ll-resource .r-btn { width:44px; height:44px; border-radius:10px; border:1px solid #E8EDF4; background:#FFFFFF; cursor:pointer; display:grid; place-items:center; color:#627793; padding:0; transition:border-color .16s,color .16s,background .16s; }
.ll-resource .r-btn svg { width:15px; height:15px; stroke-width:2.1; }
.ll-resource .r-btn:hover { border-color:#0E9F8B; color:#0A786A; }
.ll-resource .r-btn.is-on { background:#0E1B3D; border-color:#0E1B3D; color:#FFE9B8; }
a.ll-resource-x{}
.ll-resource a.r-btn { text-decoration:none; }
.ll-resource a.r-btn.is-on:hover { background:#0A1530; border-color:#0A1530; color:#FFE9B8; }

.ll-resource .r-note { flex:0 0 100%; border-top:1px dashed #E2E8F0; margin-top:16px; padding-top:16px; }
.ll-resource .r-note label { display:block; font-family:"Outfit",sans-serif; font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#627793; margin-bottom:8px; }
.ll-resource .r-note textarea { width:100%; min-height:104px; border:1px solid #E2E8F0; border-radius:12px; padding:14px 16px; font-family:"DM Sans",sans-serif; font-size:15.5px; line-height:1.75; color:#2D3748; resize:vertical; background:#F8F9FB; }
.ll-resource .r-note textarea:focus { background:#FFFFFF; border-color:#0E9F8B; outline:none; box-shadow:0 0 0 3px rgba(14,159,139,.14); }
.ll-resource .r-note-bar { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.ll-resource .r-note-bar .hint { font-size:12.5px; color:#627793; margin-right:auto; }
.ll-resource .r-note-read { flex:0 0 100%; margin-top:14px; padding:16px 18px; background:#F1ECFE; border-left:3px solid #A78BFA; border-radius:0 12px 12px 0; font-size:15.5px; line-height:1.75; color:#3F3557; white-space:pre-wrap; }
.ll-resource .r-note-read b { display:block; font-family:"Outfit",sans-serif; font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#6D40D9; margin-bottom:6px; }

.ll-resource .btn-sm { font-family:"Outfit",sans-serif; font-size:12.5px; font-weight:700; border-radius:10px; padding:0 18px; min-height:40px; cursor:pointer; border:1px solid #E2E8F0; background:#FFFFFF; color:#5A6577; display:inline-flex; align-items:center; gap:7px; }
.ll-resource .btn-sm svg { width:14px; height:14px; stroke-width:2.2; }
.ll-resource .btn-sm:hover { border-color:#0E9F8B; color:#0A786A; }
.ll-resource .btn-sm--go { background:#0C8372; border-color:#0C8372; color:#FFFFFF; }
.ll-resource .btn-sm--go:hover { background:#0B8676; border-color:#0A786A; color:#FFFFFF; }
.ll-resource .btn-sm--warn:hover { border-color:#EF4444; color:#991B1B; }
.ll-resource .btn-sm.done { background:#0B8676; border-color:#0A786A; color:#FFFFFF; }

.ll-resource .locker-head { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid #E8EDF4; margin-bottom:30px; }
.ll-resource .locker-head h2 { font-size:clamp(22px,3vw,30px); font-weight:800; }
.ll-resource .locker-head h2 em { font-family:"Outfit",sans-serif; font-style:italic; font-weight:600; color:#0A786A; }
.ll-resource .locker-head p { flex:0 0 100%; font-size:15.5px; color:#5A6577; max-width:58ch; margin:8px 0 0; }
.ll-resource .locker-acts { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.ll-resource .locker-grp { margin:0 0 40px; }
.ll-resource .locker-grp > h3 { display:inline-flex; align-items:center; gap:7px; font-family:"Outfit",sans-serif; font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:5px 14px; border-radius:999px; margin-bottom:16px; }
.ll-resource .lk-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:10px; border:1px solid #E2E8F0; background:#F8F9FB; color:#3F4A5A; font-family:"Outfit",sans-serif; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.ll-resource .lk-link svg { width:15px; height:15px; stroke-width:2.2; }
.ll-resource .lk-link:hover { border-color:#0C8372; color:#0A786A; }
.ll-resource .lk-link.is-on { background:#0E1B3D; border-color:#0E1B3D; color:#FFE9B8; }
.ll-resource .lk-link.is-on .lk-count { background:#FFE9B8; color:#0E1B3D; }
.ll-resource .lk-count { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 6px; margin-left:2px; border-radius:999px; background:#E2E8F0; color:#3F4A5A; font-family:"Outfit",sans-serif; font-size:10.5px; font-weight:800; }
.ll-resource .seg button[aria-pressed="true"] .lk-count { background:#FFE9B8; color:#0E1B3D; }

/* ── One line of what a guide is, on the guide's own row. It takes only the
      room the row has left and trims itself, so the row stays one line. ── */
.ll-resource .r-say { flex:1 1 0; min-width:0; font-size:13.5px; color:#8494AA; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The line only appears where the row can hold it on ONE line. Under 900px
   there is not enough room beside the title, so it steps aside rather than
   pushing the row on to a second line. */
@media(max-width:900px){ .ll-resource .r-say { display:none; } }

/* ── Changing view or nation swaps a whole page of rows. Fading through the
      swap, and holding the list where it was, keeps it from jumping. ── */
.ll-resource #lib { transition:opacity .14s ease; }
.ll-resource #lib.is-swapping { opacity:0; }

/* ══ NOTES — written on the Library row, kept in My Locker ══════════════ */
.ll-resource .r-btn.has-note { background:#F1ECFE; border-color:#C4B5FD; color:#6D40D9; }
.ll-resource .r-btn.has-note:hover { border-color:#A78BFA; color:#5B34B8; }
.ll-resource .r-btn.is-locked { border-style:dashed; }
.ll-resource .r-btn.is-locked:hover { border-color:#6D40D9; color:#5B34B8; }
.ll-resource .r-btn:disabled { opacity:.55; cursor:progress; }
.ll-resource .r-note-read .ro { display:block; margin-top:9px; font-size:12.5px; font-weight:600; color:#6D40D9; }
.ll-resource .r-note-read .r-note-edit { margin-top:12px; }
.ll-resource .r-note-bar .btn-sm:disabled { opacity:.55; cursor:progress; }
.ll-resource .r-note-warn { flex:0 0 100%; margin:12px 0 0; padding:12px 16px; border-radius:10px; background:#FEF2F2; border-left:3px solid #EF4444; font-size:14px; color:#991B1B; }
.ll-resource .r-note-warn a { color:#991B1B; text-decoration:underline; }
.ll-resource .r-flag svg { width:11px; height:11px; stroke-width:2.4; }
.ll-resource .r-flag { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; background:#F1ECFE; color:#6D40D9; font-family:"Outfit",sans-serif; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }

/* ── mockup only: the tier preview strip and the spoken-aloud status line ── */
.ll-resource .demo { border-top:1px dashed #CBD5E1; border-bottom:1px dashed #CBD5E1; background:#F8F9FB; padding:14px 0; }
.ll-resource .demo-in { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.ll-resource .demo-lab { font-family:"Outfit",sans-serif; font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#627793; }
.ll-resource .demo-note { flex:0 0 100%; font-size:12.5px; color:#627793; margin:0; }
.ll-resource .ll-say { margin-left:auto; font-family:"Outfit",sans-serif; font-size:13px; font-weight:600; color:#0A786A; }

@media(prefers-reduced-motion:reduce){ .ll-resource * { transition:none !important; animation:none !important; } }



/* Lifted verbatim from the My Locker stylesheet so the dialog a member sees on
   the Library is the same dialog they see inside My Locker. */
.lllk-gate { position:fixed;inset:0;z-index:9800;background:rgba(14,27,61,.55);display:grid;place-items:center;padding:20px;font-family:"DM Sans",system-ui,sans-serif; }
.lllk-gate-card { width:min(440px,100%);max-height:90vh;overflow-y:auto;background:#FFFFFF;border-radius:20px;padding:30px 28px 24px;box-shadow:0 24px 64px rgba(5,11,30,.36); }
.lllk-gate-eye { display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:999px;background:#F1ECFE;font-family:"Outfit",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#5B34B8;margin-bottom:16px; }
.lllk-gate-eye svg { width:12px;height:12px;stroke-width:2.3; }
.lllk-gate-card h3 { font-family:"Outfit",sans-serif;font-size:22px;font-weight:800;color:#0E1B3D;line-height:1.22;margin:0 0 12px; }
.lllk-gate-card p { font-size:15.5px;color:#3F4A5A;margin:0 0 18px; }
.lllk-gate-list { list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px; }
.lllk-gate-list li { position:relative;padding-left:26px;font-size:15px;color:#2D3748; }
.lllk-gate-list li::before { content:"";position:absolute;left:5px;top:10px;width:7px;height:7px;border-radius:50%;background:#0C8372; }
.lllk-gate-price { font-size:13.5px;color:#5A6579;margin:0 0 18px;padding-top:16px;border-top:1px solid #E8EDF4; }
.lllk-gate-price b { color:#0E1B3D;font-family:"Outfit",sans-serif; }
.lllk-gate-acts { display:flex;gap:10px;flex-wrap:wrap; }
.lllk-gate-acts .lllk-btn { flex:1 1 auto;justify-content:center;min-height:46px;font-family:"Outfit",sans-serif;font-size:13px;font-weight:700;border-radius:10px;padding:0 16px;cursor:pointer;border:1px solid #E2E8F0;background:#FFFFFF;color:#3F4A5A;display:inline-flex;align-items:center;gap:7px;text-decoration:none; }
.lllk-gate-acts .lllk-btn--go { background:#0C8372;border-color:#0C8372;color:#FFFFFF; }

/* ── A guide still being written: shown, never a dead link ───────────────── */
.ll-resource .r-link.is-soon { cursor:default; }
.ll-resource .r-link.is-soon .r-title { color:#7C8AA0; }
.ll-resource .r-soon { font-family:"Outfit",sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#8A5A00; background:#FEF6E0; border-radius:5px; padding:2px 7px; white-space:nowrap; }
.ll-resource .r-act.is-empty { width:0; }
.ll-resource .row:has(.is-soon) { background:#FCFDFE; box-shadow:none; }
.ll-resource .row:has(.is-soon):hover { transform:none; border-color:#E8EDF4; box-shadow:none; }

/* ── The Library sets its own width. Dropped into a theme column it would be
      squeezed to a third of the screen, so it breaks out of whatever it is
      placed in and manages its own gutters from there. ─────────────────────── */
.ll-resource { width:auto; max-width:none; }
.ll-progress-bar { z-index:9500; }


/* ---------- v1.1 (30 Aug 2026) — the section heading reads as a control ----------
   Added, never replaced: every rule below overrides an existing one by coming
   later, so removing this whole block restores the previous look exactly.
   The heading was already a real button with its open/closed state announced
   to assistive software; what was missing was anything a sighted reader could
   see. Nothing here animates the rows: the list is redrawn on every keystroke
   in the search box, so an entrance animation would replay while typing. */
.ll-resource .shead { align-items:center; gap:14px; padding:11px 14px; margin:0 0 2px -14px; border-radius:12px; transition:background .18s ease; }
.ll-resource .shead:hover { background:#F3F8F7; }
.ll-resource .shead:focus-visible { outline:2px solid #0F6E56; outline-offset:2px; background:#F3F8F7; }
.ll-resource .smeta { border:1px solid #DFE6EE; border-radius:999px; padding:6px 14px; gap:9px; background:#fff; transition:border-color .18s ease, background .18s ease, color .18s ease; }
.ll-resource .shead:hover .smeta,
.ll-resource .shead:focus-visible .smeta { border-color:#9FD8C7; background:#F1FAF7; color:#0A786A; }
.ll-resource .sverb { font-weight:800; color:#0F6E56; letter-spacing:.01em; }
.ll-resource .chev svg { width:15px; height:15px; }
.ll-resource .ssay { margin-top:6px; }
@media(max-width:640px){
  .ll-resource .shead { padding:11px 10px; margin-left:-10px; }
  .ll-resource .smeta { margin-left:auto; }
}
@media (prefers-reduced-motion: reduce){
  .ll-resource .shead, .ll-resource .smeta, .ll-resource .chev { transition:none; }
}

/* ═══ 0.6.7 r2 — open-to-everyone prompt and the notes lock (additive; nothing above changed) ═══ */
.ll-resource .r-open{display:inline-flex;align-items:center;gap:6px;font-family:"Outfit",sans-serif;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#0A786A;background:#E1F5EE;border:1px solid #B9E7DA;border-radius:999px;padding:4px 10px 4px 8px;white-space:nowrap}
.ll-resource .r-open svg{width:13px;height:13px;stroke-width:2.2}
.ll-resource .row.is-open{border-color:#8FD8C6;background:linear-gradient(90deg,#F2FBF8 0,#FFFFFF 40%)}
.ll-resource .row.is-open:hover{border-color:#5FC7AE}
.ll-resource .r-act{position:relative}
.ll-resource .r-btn.r-lock{border-style:solid;background:#0E1B3D;border-color:#0E1B3D;color:#FFFFFF}
.ll-resource .r-btn.r-lock:hover,.ll-resource .r-btn.r-lock:focus-visible{background:#1B2E5C;border-color:#1B2E5C;color:#FFFFFF}
.ll-resource .r-lock-cap{position:absolute;right:0;top:calc(100% + 6px);font-family:"Outfit",sans-serif;font-size:10.5px;font-weight:600;color:#FFFFFF;background:#0E1B3D;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .15s;pointer-events:none;z-index:2}
.ll-resource .r-lock:hover .r-lock-cap,.ll-resource .r-lock:focus-visible .r-lock-cap{opacity:1;transform:none}
.ll-resource .open-band{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0 4px;padding:18px 22px;border-radius:14px;color:#FFFFFF;background:linear-gradient(120deg,#0E1B3D 0%,#123A4F 60%,#0E7B6E 140%);box-shadow:0 10px 30px rgba(14,27,61,.18)}
.ll-resource .open-band .ob-copy{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.82)}
.ll-resource .open-band .ob-copy strong{font-size:17px;color:#FFFFFF;letter-spacing:-.01em}
.ll-resource .ob-kicker{display:inline-flex;align-items:center;gap:6px;font-family:"Outfit",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#7FE6D3}
.ll-resource .ob-kicker svg{width:14px;height:14px}
.ll-resource .open-band .ob-links{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.ll-resource .open-band .ob-pill{display:flex;justify-content:space-between;gap:16px;align-items:center;min-width:300px;padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#FFFFFF;text-decoration:none;font-weight:600;font-size:13.5px;transition:background .15s,transform .15s}
.ll-resource .open-band .ob-pill:hover,.ll-resource .open-band .ob-pill:focus-visible{background:rgba(255,255,255,.2);transform:translateY(-1px);color:#FFFFFF}
.ll-resource .open-band .ob-pill em{font-style:normal;color:#7FE6D3;font-size:12px}
@media (max-width:700px){.ll-resource .open-band{flex-direction:column;align-items:stretch}.ll-resource .open-band .ob-pill{min-width:0}.ll-resource .r-lock-cap{right:auto;left:0}}
@media (prefers-reduced-motion:reduce){.ll-resource .r-lock-cap,.ll-resource .open-band .ob-pill{transition:none}}


/* ═══ 0.6.9 — a kept guide in a calm orange, the same register as the purple note button (additive) ═══
   Pale apricot fill, burnt-orange bookmark; a shade warmer on hover; held under Reading comfort's tinted
   and quiet modes instead of fading to grey with the rest. */
.ll-resource .r-btn.is-on{background:#FFEFD9;border-color:#FFD8A6;color:#C2600A}
.ll-resource .r-btn.is-on:hover,.ll-resource .r-btn.is-on:focus-visible{background:#FFE4C0;border-color:#F4B76A;color:#A84F05}
.ll-resource .r-btn.is-on:focus-visible{outline:3px solid #F4B76A;outline-offset:2px}
body.is-tinted .ll-resource .r-btn.is-on{background:#FFEFD9;border-color:#FFD8A6;color:#C2600A}
.ll-resource[data-quiet="on"] .r-btn.is-on{filter:none;background:#FBF1E4;border-color:#F0DCC0;color:#B5651D}

/* ═══ 0.6.11 — the notes lock keeps its navy under Reading comfort's tinted and quiet modes (additive) ═══
   Comfort's tinted rule turns every .r-btn half-white and outweighed the 0.6.7 lock rule, leaving a white
   button with a white padlock. */
body.is-tinted .ll-resource .r-btn.r-lock{background:#0E1B3D;border-color:#0E1B3D;color:#FFFFFF}
body.is-tinted .ll-resource .r-btn.r-lock:hover,body.is-tinted .ll-resource .r-btn.r-lock:focus-visible{background:#1B2E5C;border-color:#1B2E5C;color:#FFFFFF}
.ll-resource[data-quiet="on"] .r-btn.r-lock{filter:none;background:#2E3D5F;border-color:#2E3D5F;color:#FFFFFF}