/* Resource Library and Dee's Holy Grail. Builds on the shared room styles. */
.room-resources { --gold:#e8c27a; --gold-soft:#e8c27a33; --rose:#ff8e98; --panel:linear-gradient(165deg,#1b1016,#0d0a0e); }
.resources-main,.grail-main { flex:1; }
.room-resources em { font-style:normal; }
.cyber-world main .lib-card a,.cyber-world main .grail-fav a,.cyber-world main .grail-jump a { text-decoration:none; }

/* Holy Grail teaser */
.grail-teaser { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-top:10px; padding:30px 34px; border:1px solid #e8c27a66; border-radius:18px; background:radial-gradient(ellipse at 100% 0%,#e8c27a22,transparent 55%),var(--panel); box-shadow:0 0 50px -20px #e8c27a66; position:relative; overflow:hidden; }
.grail-teaser::after { content:''; position:absolute; right:-30px; top:-30px; width:180px; height:180px; background:url('../images/lab-butterfly.webp') center/contain no-repeat; opacity:.12; transform:rotate(-14deg); pointer-events:none; }
.grail-teaser > div { max-width:640px; }
.grail-teaser h2 { margin:6px 0 8px; font:500 clamp(30px,3.4vw,42px)/1.1 var(--serif); color:#fff4ef; }
.grail-teaser h2 em,.grail-section h2 em { font:400 1.2em "Great Vibes",cursive; color:var(--gold); }
.grail-teaser p:not(.grail-kicker) { margin:0; color:#d9cbc9; line-height:1.65; }
.grail-kicker { margin:0; font:600 11px/1.4 ui-monospace,Menlo,monospace; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); }
.room-page .grail-button { border-color:var(--gold); }
.room-page .grail-button:hover { box-shadow:0 0 24px -2px #e8c27a99; background:#3a2a14; }

/* Library */
.lib { margin-top:56px; }
.lib-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; border-bottom:1px solid #ab586244; padding-bottom:14px; }
.lib-head h2 { margin:0; font:500 clamp(30px,3.4vw,42px)/1.1 var(--serif); color:#fff4ef; }
.lib-stats { margin:0; color:#c8bab8; font-size:14px; }
.lib-stats strong { color:var(--rose); font-weight:600; }
.lib-controls { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px; }
.lib-chips { display:flex; flex-wrap:wrap; gap:8px; }
.lib-chips button,.lib-toggle { padding:9px 16px; border:1px solid #ab586266; border-radius:30px; background:#140c10; color:#e9dedd; font:500 13px var(--sans); cursor:pointer; transition:background .25s,border-color .25s,color .25s; }
.lib-chips button:hover,.lib-toggle:hover { border-color:var(--rose); }
.lib-chips button[aria-pressed="true"] { background:var(--rose); border-color:var(--rose); color:#25090f; }
.lib-tools { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.lib-search input { width:min(260px,70vw); padding:10px 16px; border:1px solid #ab586266; border-radius:30px; background:#0d090c; color:#f6eeea; font:400 14px var(--sans); }
.lib-search input:focus { outline:none; border-color:var(--rose); box-shadow:0 0 0 3px #ff2b4533; }
.lib-toggle { display:inline-flex; align-items:center; gap:10px; }
.lib-switch { width:30px; height:16px; border-radius:10px; background:#3a2128; position:relative; transition:background .25s; }
.lib-switch::after { content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#c8bab8; transition:transform .25s,background .25s; }
.lib-toggle[aria-pressed="true"] { border-color:#7ed3a1; }
.lib-toggle[aria-pressed="true"] .lib-switch { background:#2c6b48; }
.lib-toggle[aria-pressed="true"] .lib-switch::after { transform:translateX(14px); background:#c8f5da; }
.lib-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:18px 0 0; color:#a8969a; font-size:12.5px; }
.lib-legend .lib-badge + .lib-badge,.lib-legend .lib-badge:nth-of-type(2) { margin-left:12px; }
.lib-count { margin:8px 0 0; font-size:12px; color:#a8969a; min-height:1em; }
.lib-group { margin-top:38px; }
.lib-group-head { display:flex; align-items:baseline; gap:6px 18px; flex-wrap:wrap; margin-bottom:16px; }
.lib-group-head h3 { margin:0; font:400 clamp(32px,3vw,40px)/1.1 "Great Vibes",cursive; color:var(--rose); }
.lib-group-head p { margin:0; color:#c8bab8; font-size:14px; }
.lib-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.lib-card { position:relative; display:flex; flex-direction:column; gap:8px; padding:18px 20px 16px; border:1px solid #ab586244; border-radius:14px; background:var(--panel); transition:transform .3s,border-color .3s,box-shadow .3s; }
.lib-card:hover,.lib-card:focus-within { transform:translateY(-4px); border-color:#ff8e9899; box-shadow:0 18px 40px -20px #ff2b45aa; }
.lib-card.is-fav { border-color:#e8c27a66; background:radial-gradient(ellipse at 100% 0%,#e8c27a1f,transparent 60%),var(--panel); }
.lib-card-top { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.lib-badge { display:inline-block; padding:4px 9px; border-radius:20px; font:600 10px/1.2 ui-monospace,Menlo,monospace; letter-spacing:1px; text-transform:uppercase; color:#c8bab8; border:1px solid #c8bab855; background:#1a1216; white-space:nowrap; }
.lib-badge.is-used { color:#c8f5da; border-color:#7ed3a188; background:#13281d; }
.lib-fav { font:600 10px/1.2 ui-monospace,Menlo,monospace; letter-spacing:1px; text-transform:uppercase; color:var(--gold); padding:4px 0; }
.lib-card h4 { margin:2px 0 0; font:500 22px/1.2 var(--serif); }
.cyber-world main .lib-card h4 a { color:#fff4ef; }
.lib-card h4 a::after { content:''; position:absolute; inset:0; border-radius:inherit; }
.lib-card h4 a:focus-visible { outline:none; }
.lib-card:focus-within { outline:2px solid #ffa0aa; outline-offset:3px; }
.lib-card p { margin:0; color:#d9cbc9; font-size:13.5px; line-height:1.55; flex:1; }
.lib-host { font:500 11px/1.3 var(--sans); color:#ff9ba4; letter-spacing:.3px; word-break:break-all; }
.lib-empty { margin-top:30px; padding:22px; border:1px dashed #ab586266; border-radius:14px; color:#d9cbc9; text-align:center; }
.lib-note { margin-top:40px; font-size:12.5px; color:#a8969a; max-width:70ch; }

/* Holy Grail page */
.room-grail .room-intro h1 em { color:var(--gold); text-shadow:0 0 18px #e8c27a55; }
.grail-jump { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.cyber-world main .grail-jump a { padding:9px 16px; border:1px solid #e8c27a66; border-radius:30px; color:#f6e3c0; background:#1a130cbb; font:500 13px var(--sans); transition:background .25s; }
.grail-jump a:hover { background:#3a2a14; }
.grail-section { margin-top:70px; scroll-margin-top:100px; }
.grail-section h2 { margin:8px 0 14px; font:500 clamp(32px,3.6vw,46px)/1.1 var(--serif); color:#fff4ef; }
.grail-intro { max-width:68ch; margin:0 0 26px; color:#d9cbc9; line-height:1.7; font-size:15.5px; }
.grail-favs { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }
.grail-fav { position:relative; display:flex; flex-direction:column; gap:10px; padding:28px 26px 24px; border:1px solid #e8c27a55; border-radius:18px; background:radial-gradient(ellipse at 0% 0%,#e8c27a1c,transparent 60%),var(--panel); transition:transform .3s,box-shadow .3s; }
.grail-fav:hover { transform:translateY(-5px); box-shadow:0 24px 50px -24px #e8c27aaa; }
.grail-rank { position:absolute; top:16px; right:20px; font:400 44px/1 "Great Vibes",cursive; color:#e8c27a77; }
.grail-tag { margin:0; font:600 10px/1.4 ui-monospace,Menlo,monospace; letter-spacing:2px; text-transform:uppercase; color:var(--rose); }
.grail-fav h4 { margin:0; font:500 30px/1.1 var(--serif); color:#fff4ef; }
.grail-fav p:not(.grail-tag) { margin:0; color:#d9cbc9; line-height:1.65; font-size:14.5px; flex:1; }
.cyber-world main .grail-visit { align-self:flex-start; margin-top:6px; font:500 12px var(--sans); letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); }
.grail-visit:hover { text-decoration:underline!important; text-underline-offset:5px; }

.grail-learn { display:grid; grid-template-columns:1fr minmax(260px,330px); gap:22px; align-items:start; }
.grail-methods { list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:method; }
.grail-method { position:relative; padding:20px 22px 20px 70px; border:1px solid #ab586244; border-radius:14px; background:var(--panel); counter-increment:method; }
.grail-method::before { content:counter(method); position:absolute; left:20px; top:16px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--rose); color:var(--rose); font:600 14px ui-monospace,Menlo,monospace; box-shadow:0 0 14px -4px #ff2b45; }
.grail-method h4 { margin:0 0 6px; font:500 22px/1.2 var(--serif); color:#fff4ef; }
.grail-method p { margin:0; color:#d9cbc9; line-height:1.6; font-size:14.5px; }

.focus { position:sticky; top:100px; padding:24px; border:1px solid #ff8e9866; border-radius:18px; background:radial-gradient(ellipse at 50% 0%,#ff2b4522,transparent 60%),var(--panel); text-align:center; box-shadow:0 0 50px -24px #ff2b45; }
.focus h4 { margin:4px 0 4px; font:400 38px/1.1 "Great Vibes",cursive; color:var(--rose); }
.focus .grail-kicker { color:var(--rose); }
.focus-sub { margin:0 0 14px; color:#c8bab8; font-size:13px; }
.focus-modes { display:inline-flex; gap:6px; padding:4px; border:1px solid #ab586255; border-radius:30px; }
.focus-modes button { padding:7px 14px; border:0; border-radius:30px; background:transparent; color:#e9dedd; font:500 12px var(--sans); cursor:pointer; }
.focus-modes button[aria-pressed="true"] { background:#ff8e98; color:#25090f; }
.focus-ring { position:relative; width:190px; margin:18px auto 14px; }
.focus-ring svg { width:100%; display:block; transform:rotate(-90deg); }
.focus-track { fill:none; stroke:#2a161d; stroke-width:6; }
.focus-bar { fill:none; stroke:#ff6b7c; stroke-width:6; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:0; filter:drop-shadow(0 0 6px #ff2b45); transition:stroke-dashoffset 1s linear; }
.focus.is-break .focus-bar { stroke:#7ed3a1; filter:drop-shadow(0 0 6px #2c6b48); }
.focus-time { position:absolute; inset:0; display:grid; place-items:center; margin:0; font:600 40px/1 ui-monospace,Menlo,monospace; color:#fff4ef; font-variant-numeric:tabular-nums; }
.focus-actions { display:flex; justify-content:center; gap:10px; align-items:center; }
.focus-reset { padding:10px 16px; border:0; background:none; color:#c8bab8; font:500 12px var(--sans); letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
.focus-reset:hover { color:#fff; }
.focus-done { min-height:1.4em; margin:12px 0 0; font-size:13px; color:#c8f5da; }

.grail-certs { display:grid; grid-template-columns:1fr minmax(260px,360px); gap:22px; align-items:start; }
.grail-checklist { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.grail-checklist li { position:relative; padding:14px 18px 14px 50px; border:1px solid #ab586233; border-radius:12px; background:#140d11; color:#ece0de; line-height:1.55; font-size:14.5px; }
.grail-checklist li::before { content:'✓'; position:absolute; left:16px; top:12px; width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:#13281d; border:1px solid #7ed3a188; color:#c8f5da; font-size:12px; font-weight:700; }
.grail-callout { padding:22px 24px; border:1px solid #e8c27a66; border-left:4px solid var(--gold); border-radius:12px; background:#1a130c; }
.grail-callout p:not(.grail-kicker) { margin:8px 0 0; color:#f2e4cc; line-height:1.65; font-size:14.5px; }

.grail-tips { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.grail-tips li { padding:18px 20px; border:1px solid #ab586244; border-radius:14px; background:var(--panel); color:#ece0de; line-height:1.55; font-size:14.5px; position:relative; }
.grail-tips li::before { content:''; display:block; width:22px; height:22px; margin-bottom:10px; background:url('../images/lab-butterfly.webp') center/contain no-repeat; }

.grail-close { margin-top:70px; padding:44px 20px; text-align:center; border-top:1px solid #ab586244; }
.grail-close p { margin:0 auto; max-width:56ch; color:#d9cbc9; font-size:16px; }
.grail-sign { margin:10px 0 22px!important; font:400 clamp(44px,5vw,64px)/1.1 "Great Vibes",cursive!important; color:var(--rose)!important; text-shadow:0 0 24px #ff2b4555; }

@media (max-width:900px) {
 .grail-learn,.grail-certs { grid-template-columns:1fr; }
 .focus { position:static; }
}
@media (max-width:600px) {
 .grail-teaser { padding:24px 20px; }
 .lib-tools { width:100%; }
 .lib-search,.lib-search input { width:100%; }
 .grail-method { padding-left:62px; }
}
@media (prefers-reduced-motion:reduce) {
 .lib-card,.grail-fav,.focus-bar,.lib-switch::after { transition:none; }
}

/* Holy Grail gold box on the Resources page */
.grail-box { margin-top:20px; padding:clamp(24px,3.5vw,44px); border:1px solid #e8c27a77; border-radius:22px; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 100% 0%,#e8c27a24,transparent 50%),radial-gradient(ellipse at 0% 100%,#ff2b4514,transparent 50%),linear-gradient(165deg,#1d1317,#0d0a0e);
  box-shadow:0 0 70px -30px #e8c27a99, inset 0 0 0 1px #e8c27a14; scroll-margin-top:100px; }
.grail-box::after { content:''; position:absolute; right:-40px; top:-40px; width:220px; height:220px; background:url('../images/lab-butterfly.webp') center/contain no-repeat; opacity:.1; transform:rotate(-14deg); pointer-events:none; }
.grail-box-head h2 { margin:8px 0 10px; font:500 clamp(34px,4vw,52px)/1.05 var(--serif); color:#fff4ef; }
.grail-box-head h2 em { font:400 1.25em "Great Vibes",cursive; color:var(--gold); text-shadow:0 0 22px #e8c27a55; }
.grail-sub { margin:26px 0 0; font:600 11px/1.4 ui-monospace,Menlo,monospace; letter-spacing:2.5px; text-transform:uppercase; color:var(--rose); }
.grail-part { margin-top:14px; border:1px solid #e8c27a44; border-radius:16px; background:#120c0fcc; }
.grail-part[open] { border-color:#e8c27a77; }
.grail-part summary { display:flex; align-items:center; gap:16px; padding:18px 22px; cursor:pointer; list-style:none; font:500 clamp(21px,2.2vw,26px)/1.2 var(--serif); color:#fff4ef; }
.grail-part summary::-webkit-details-marker { display:none; }
.grail-part summary::after { content:'+'; margin-left:auto; font:400 28px/1 var(--sans); color:var(--gold); transition:transform .3s; }
.grail-part[open] summary::after { transform:rotate(45deg); }
.grail-part summary small { display:block; margin-top:3px; font:400 13px/1.3 var(--sans); color:#c8bab8; }
.grail-part summary:hover { color:#ffe6c4; }
.grail-part summary:focus-visible { outline:2px solid var(--gold); outline-offset:-4px; border-radius:16px; }
.grail-part-n { flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--gold); color:var(--gold); font:600 13px ui-monospace,Menlo,monospace; box-shadow:0 0 16px -6px #e8c27a; }
.grail-part-body { padding:4px 22px 24px; }
.grail-box .focus { top:110px; }
.grail-box .grail-sign { text-align:center; margin:30px 0 0; font:400 clamp(40px,4.6vw,58px)/1.1 "Great Vibes",cursive; color:var(--rose); text-shadow:0 0 24px #ff2b4555; }
.lib { scroll-margin-top:100px; }
@media (max-width:600px) { .grail-part summary { padding:16px; gap:12px; } .grail-part-body { padding:4px 16px 20px; } .grail-part-n { width:36px; height:36px; } }
@media (max-width:600px) {
 .lib-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .lib-card { padding:12px 12px 10px; gap:6px; }
 .lib-card h4 { font-size:17px; }
 .lib-card p { font-size:12px; }
 .lib-badge { font-size:8.5px; padding:3px 6px; letter-spacing:.5px; }
 .lib-host { display:none; }
 .grail-favs { gap:10px; }
 .grail-fav { padding:20px 18px 18px; }
}
.adhd { font-weight:700; color:#fff4ef; letter-spacing:.5px; }
.grail-part summary small .adhd { color:var(--gold); }

/* Folders layout: each category is a collapsible folder; the Holy Grail box is compact. */
.lib-host,.lib-legend { display:none; }
.lib-group { margin-top:10px; border:1px solid #ab586244; border-radius:14px; background:#120c0f; }
.lib-group:first-of-type { margin-top:24px; }
.lib-group[open] { border-color:#ab586277; }
.lib-group > summary.lib-group-head { display:flex; align-items:center; gap:14px; margin:0; padding:16px 22px; cursor:pointer; list-style:none; }
.lib-group > summary::-webkit-details-marker { display:none; }
.lib-group > summary::after { content:'+'; margin-left:auto; color:#ff8e98; font:400 28px/1 var(--sans); transition:transform .3s; }
.lib-group[open] > summary::after { transform:rotate(45deg); }
.lib-group > summary:hover h3 { color:#ffb3bb; }
.lib-group > summary:focus-visible { outline:2px solid #ffa0aa; outline-offset:-3px; border-radius:14px; }
.lib-group-head h3 { font-size:clamp(28px,2.6vw,34px)!important; }
.lib-count-pill { font:600 11px/1 ui-monospace,Menlo,monospace; letter-spacing:1px; color:#c8f5da; border:1px solid #7ed3a166; border-radius:20px; padding:5px 10px; white-space:nowrap; }
.lib-group-desc { margin:-4px 22px 14px; color:#c8bab8; font-size:14px; }
.lib-group .lib-grid { padding:0 16px 18px; }
.grail-fav { padding:20px 20px 18px; gap:8px; }
.grail-fav h4 { font-size:24px; }
.grail-fav p:not(.grail-tag) { font-size:13.5px; line-height:1.55; }
.grail-rank { font-size:34px; top:12px; }
.grail-box .grail-sub { margin-top:16px; }
@media (max-width:600px) {
 .lib-group > summary.lib-group-head { flex-wrap:wrap; gap:6px 10px; padding:14px 16px; }
 .lib-group > summary::after { position:absolute; right:16px; }
 .lib-group { position:relative; }
 .lib-group-desc { margin:-2px 16px 12px; }
 .lib-group .lib-grid { padding:0 10px 12px; grid-template-columns:1fr; }
}

/* Resources page uses red instead of pink for its accent text. */
.room-resources { --rose:#ff3b4f; --red-deep:#e8283d; }
.room-resources .room-intro h1 em { color:#ff3348; text-shadow:0 0 22px #ff1f3a66; }
.room-resources .room-eyebrow,.room-resources .grail-sub,.room-resources .grail-tag { color:#ff4a5c; }
.room-resources .lib-group-head h3 { color:#ff3348; }
.room-resources .lib-group > summary:hover h3 { color:#ff6170; }
.room-resources .lib-group > summary::after,.room-resources .grail-part summary::after { color:#ff3b4f; }
.cyber-world.room-resources main a:not(.studio-destination):not(.world-button):not(.button),
.cyber-world.room-resources main .lib-card h4 a { color:#ff4a5c; }
.cyber-world.room-resources main .lib-card.is-fav h4 a { color:#ffd27a!important; }
.cyber-world.room-resources main .grail-visit { color:var(--gold); }
.room-resources .lib-stats strong { color:#ff4a5c; }
.room-resources .grail-method::before { border-color:#ff3b4f; color:#ff4a5c; box-shadow:0 0 14px -4px #ff1f3a; }
.room-resources .focus h4,.room-resources .focus .grail-kicker { color:#ff3b4f; }
.room-resources .focus { border-color:#ff3b4f66; }
.room-resources .focus-bar { stroke:#ff2b45; }
.room-resources .focus-modes button[aria-pressed="true"] { background:#ff3b4f; color:#fff; }
.room-resources .lib-card:hover,.room-resources .lib-card:focus-within { border-color:#ff3b4f99; }
.room-resources .room-next > p,.room-resources .room-next .studio-destination-action { color:#ff4a5c; }
.room-resources .room-next .studio-destination h2 { color:#ff3348; }

/* Certification steps (numbered) and encouragement callout */
.grail-steps { counter-reset:step; }
.grail-steps li { counter-increment:step; padding:16px 18px 16px 58px; display:flex; flex-direction:column; gap:4px; }
.grail-steps li::before { content:counter(step); background:#2a0f17; border-color:#ff3b4f88; color:#ff8e98; border-radius:50%; width:28px; height:28px; top:14px; font:600 13px ui-monospace,Menlo,monospace; }
.grail-steps li strong { color:#fff4ef; font:500 19px/1.25 var(--serif); }
.grail-steps li span { color:#d9cbc9; }
.grail-yougotthis { font:400 34px/1.15 "Great Vibes",cursive!important; color:#ff3348!important; margin-top:14px!important; }
.grail-small { font-size:12.5px!important; color:#bba98f!important; }
.lib-card-top:empty { display:none; }
.lib-stats .lib-fav { color:var(--gold); }