/* Ariadne curriculum workspace — same charcoal, ivory and coral identity. */
.explorer-page { --atlas-border:rgba(222,207,185,.10); --atlas-quiet:#a49e96; }
.explorer-page .top-bar { padding:17px 0; border-color:var(--atlas-border); }
.explorer-page .top-bar-content { gap:35px; padding:0 27px; }
.explorer-page .search-trigger { max-width:420px; background:#222323; font-size:12px; }
.explorer-page .nav-logo { min-width:230px; }
.explorer-page .view-toggle { border:1px solid var(--atlas-border); padding:3px; gap:2px; }
.explorer-page .view-btn { padding:8px 14px; border:0; border-radius:4px; font-size:11px; }
.explorer-page .view-btn.active { background:#d8c2a912; color:#f4d0bd; border:0; }
.explorer-page .path-trigger { padding:10px 14px; border-color:#bf9a7745; font-size:11px; }
.atlas-workspace { display:flex; flex:1; min-height:0; overflow:hidden; }
.atlas-sidebar { flex:0 0 270px; display:flex; flex-direction:column; background:#181a1a; border-right:1px solid var(--atlas-border); padding:28px 19px 0; min-height:0; z-index:85; }
.sidebar-heading { display:flex; align-items:center; justify-content:space-between; color:#baa99a; font-size:9px; letter-spacing:1.65px; }
.atlas-sidebar h1 { font:italic 29px/1.25 Georgia,serif; color:#efc1aa; letter-spacing:-.7px; margin:18px 0 9px; }
.sidebar-intro { font-size:11px; color:var(--atlas-quiet); line-height:1.8; max-width:190px; }
.subject-filter { margin:24px 0 22px; display:flex; align-items:center; gap:9px; border:1px solid #d6c4ac23; background:#ffffff04; border-radius:6px; padding:10px 12px; color:#a99f92; }
.subject-filter:focus-within { border-color:#edb293; box-shadow:0 0 0 2px #edb29318; }
.subject-filter input { background:none; border:0; color:#f3efe6; min-width:0; width:100%; outline:0; font:11px Inter,sans-serif; }
.subject-filter input::placeholder { color:#a49e96; }
.sidebar-context { min-height:30px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; font-size:8px; letter-spacing:.9px; color:#b5aaa0; }
.directory-back { border:0; background:none; color:#dfb9a3; font:11px Inter,sans-serif; cursor:pointer; padding:0 0 7px; text-align:left; }
.subject-directory { overflow-y:auto; min-height:0; flex:1; margin:0 -9px; padding:0 9px 15px; scrollbar-width:thin; scrollbar-color:#544c43 transparent; overscroll-behavior:contain; }
.directory-item { display:flex; align-items:center; gap:12px; width:100%; padding:12px 10px; margin:2px 0; background:transparent; color:#dedad2; border:1px solid transparent; border-radius:6px; text-align:left; cursor:pointer; transition:background .18s,border-color .18s; }
.directory-item:hover { background:#d4c5af09; border-color:#d4c5af17; }
.directory-item[aria-current=true] { border-color:color-mix(in srgb,var(--subject-color) 35%,transparent); background:color-mix(in srgb,var(--subject-color) 7%,transparent); }
.directory-symbol { flex:0 0 28px; height:28px; border:1px solid color-mix(in srgb,var(--subject-color) 35%,transparent); border-radius:50%; display:grid; place-items:center; color:var(--subject-color); font:23px/1 Georgia,serif; }
.directory-course .directory-symbol { font:10px/1 Inter,sans-serif; }
.directory-name { font:11px/1.4 Inter,sans-serif; flex:1; }
.directory-name small { display:block; color:#aaa197; font-size:9px; margin-top:4px; }
.directory-arrow { color:#c5b4a3; font-size:12px; opacity:0; }
.directory-item:hover .directory-arrow,.directory-item[aria-current=true] .directory-arrow { opacity:1; }
.directory-empty { color:#bbb0a3; font-size:12px; line-height:1.8; padding:15px 0; }
.sidebar-footer { padding:17px 0; border-top:1px solid var(--atlas-border); font-size:8px; display:flex; align-items:center; gap:7px; color:#aaa196; }
.sidebar-status { background:#a4b799; width:4px; height:4px; border-radius:50%; }
.atlas-stage { padding:0; display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; }
.atlas-context-bar { height:49px; padding:0 25px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#171919; border-bottom:1px solid var(--atlas-border); flex-shrink:0; }
.explorer-page .breadcrumbs { position:static; border:0; background:none; max-width:100%; padding:0; scrollbar-width:none; flex:1; gap:7px; }
.explorer-page .crumb { border:0; background:none; padding:5px 0; color:#aca59b; border-radius:0; font:10px/1.5 Inter,sans-serif; }
.explorer-page button.crumb:hover { color:#efc1aa; }
.explorer-page .crumb.active { color:#e9d9c9; background:none; border:0; }
.explorer-page .crumb-sep { color:#645e56; padding:0 2px; }
.atlas-edition { font:8px/1.5 Inter,sans-serif; color:#aaa094; letter-spacing:1.3px; white-space:nowrap; }
.explorer-page .canvas-container { min-height:0; background:#111416; }
.atlas-caption { position:absolute; top:26px; left:30px; z-index:2; pointer-events:none; max-width:calc(100% - 60px); transition:opacity .2s; }
.atlas-kicker { color:#b6a28d; font:8px/1.5 Inter,sans-serif; letter-spacing:1.7px; }
.atlas-caption h2 { font:400 25px/1.35 Georgia,serif; letter-spacing:-.5px; color:#e8dfd3; margin:8px 0 4px; }
.atlas-caption p { color:#a49d94; font:10px/1.7 Inter,sans-serif; }
.atlas-caption.is-focused { opacity:0; }
.atlas-controls { position:absolute; z-index:65; bottom:23px; right:24px; display:flex; align-items:center; gap:3px; border:1px solid #c5ac8b30; padding:5px; border-radius:8px; background:#202321ed; box-shadow:0 5px 30px #0004; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); cursor:default; }
.atlas-controls button { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:4px; font:20px/1 Inter,sans-serif; background:none; color:#b8aea0; cursor:pointer; }
.atlas-controls button:hover { background:#f3d6bb12; color:#f3d6bb; }
.atlas-controls button[aria-pressed=true] { color:#e8bb9e; background:#e8bb9e0b; }
.atlas-controls svg { width:18px; height:18px; }
.atlas-controls output { min-width:35px; font:9px Inter,sans-serif; color:#c8b9a8; text-align:center; }
.control-divider { height:18px; width:1px; background:var(--atlas-border); margin:0 4px; }
.atlas-legend { position:absolute; bottom:32px; left:28px; display:flex; gap:17px; z-index:2; pointer-events:none; }
.atlas-legend>span { display:flex; align-items:center; gap:7px; font:9px Inter,sans-serif; color:#b4a99d; }
.legend-line { width:19px; height:1px; background:#b5a0eb; position:relative; }
.legend-line.prerequisite { background:#f3a18e; }
.legend-line.related { background:none; border-top:1px dashed #8abdb6; }
.legend-line:after { content:''; position:absolute; right:0; top:-1.5px; width:3px; height:3px; border-radius:50%; background:inherit; }
.explorer-page .canvas-tip { display:none; }
.explorer-page .explorer-disclaimer { bottom:78px; right:25px; }
.explorer-page .detail-panel { top:12px; right:12px; height:calc(100% - 24px); width:390px; max-width:calc(100% - 24px); border:1px solid #cbb89a30; border-radius:12px; box-shadow:-20px 0 70px #0005; background:#1b1e1ef5; transform:translateX(calc(100% + 16px)); scrollbar-width:thin; scrollbar-color:#635546 transparent; }
.explorer-page .detail-panel.open { transform:translateX(0); }
.explorer-page .detail-header { padding:27px 24px 22px; border-color:var(--atlas-border); background:#1b1e1ef5; }
.explorer-page .detail-subject-badge { padding:0; background:none!important; font-size:9px; letter-spacing:.5px; margin:0 24px 13px 0; }
.explorer-page .detail-course-name { font:400 28px/1.18 Georgia,serif; letter-spacing:-.6px; color:#f1e5d8; }
.explorer-page .detail-close { width:30px; height:30px; top:18px; right:16px; border:1px solid var(--atlas-border); border-radius:50%; color:#c3b4a3; }
.explorer-page .detail-body { padding:0 24px 25px; }
.explorer-page .detail-section { margin:22px 0; }
.explorer-page .detail-section-title { color:#bca58d; font-size:9px; font-weight:500; letter-spacing:1.4px; margin-bottom:13px; }
.explorer-page .detail-summary,.explorer-page .detail-expectations li { color:#c2b9ad; font-size:12px; line-height:1.9; }
.explorer-page .detail-topic-pill { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:#ffffff03; border:1px solid #c4ab8822!important; border-radius:6px; padding:12px 13px; text-align:left; font:11px/1.5 Inter,sans-serif; cursor:pointer; }
.explorer-page .detail-topic-pill:hover { background:#dac3a30c; border-color:#dbc09d66!important; }
.explorer-page .detail-topics { display:grid; grid-template-columns:1fr; gap:6px; }
.detail-topic-pill::after { content:'↗'; color:#bba58c; }
/* Concept chips (children of a subtopic) have no panel of their own. */
.explorer-page .detail-topic-chip { cursor:default; }
.explorer-page .detail-topic-chip:hover { background:#ffffff03; border-color:#c4ab8822!important; }
.detail-topic-chip::after { content:none; }
/* Visible keyboard focus on the charcoal shell (explorer.css sets outline:none on the trigger). */
.explorer-page .search-trigger:focus-visible { outline:2px solid #ffc4ae; outline-offset:3px; }
.explorer-page .search-trigger:hover { border-color:#ffffff33; background:#2a2b2b; }
.explorer-page .crumb:focus-visible { outline-offset:-2px; } /* the context bar clips anything outside the button box */
.explorer-page .directory-item:focus-visible { outline-offset:-2px; }
.explorer-page .directory-back:focus-visible { outline-offset:2px; }
.mobile-subjects:focus-visible { outline-offset:-2px; }
.explorer-page .detail-panel summary:focus-visible,.explorer-page .detail-panel button:focus-visible,.explorer-page .detail-panel a:focus-visible { outline-offset:2px; }
/* The Path Builder timeline (explorer.css: fixed, top:64px, left:16px, z-index:70) predates the sidebar. */
.explorer-page .ariadne-path-timeline { top:142px; left:286px; z-index:90; max-height:calc(100vh - 250px); }
.detail-thread-summary { display:flex; align-items:center; gap:12px; padding:14px; margin-top:21px; border:1px solid #d5b08d26; border-radius:7px; background:#d5b08d06; }
.detail-thread-summary strong { font:italic 21px Georgia,serif; color:#e0b293; }
.detail-thread-summary span { color:#bfb09f; font:10px/1.65 Inter,sans-serif; }
.detail-thread-action { padding:10px 12px; margin-top:12px; width:100%; text-align:left; border:1px solid #f3a18e44; background:#f3a18e0c; border-radius:5px; color:#efb397; font:11px/1.5 Inter,sans-serif; cursor:pointer; }
.explorer-page .detail-cta { font-size:11px; background:#e1ae9140; border:1px solid #e1ae9140; color:#efd3be; border-radius:6px; box-shadow:none; }
.explorer-page .graph-tooltip { background:#232623f5; border:1px solid #b3a58d50; border-radius:7px; padding:13px 16px; }
.explorer-page .tooltip-name { font:14px Georgia,serif; color:#f2e2d2; }
.explorer-page .tooltip-meta { font-size:10px; color:#b6a894; }
.mobile-subjects,.sidebar-close,.sidebar-scrim { display:none; }
@media(max-width:1200px) {
    .atlas-sidebar { flex-basis:238px; padding-inline:15px; }
    .explorer-page .nav-logo { min-width:196px; }
    .explorer-page .top-bar-content { gap:20px; }
    .atlas-edition { display:none; }
    .atlas-legend { bottom:82px; left:24px; gap:12px; }
    .atlas-controls { bottom:22px; }
    .explorer-page .detail-panel { width:350px; }
    .explorer-page .ariadne-path-timeline { left:254px; }
}
@media(max-width:900px) {
    .atlas-sidebar { position:absolute; top:0; left:0; bottom:0; width:280px; max-width:85vw; z-index:160; transform:translateX(-100%); transition:transform .25s ease; padding-top:25px; box-shadow:20px 0 70px #0005; }
    .atlas-sidebar.is-open { transform:translateX(0); }
    .sidebar-close { display:block; width:32px; height:32px; background:none; border:1px solid var(--atlas-border); border-radius:50%; color:#cbb8a4; font-size:20px; cursor:pointer; }
    .sidebar-scrim:not([hidden]) { display:block; position:absolute; inset:0; width:100%; height:100%; background:#0008; border:0; z-index:150; }
    .mobile-subjects { display:flex; align-items:center; gap:6px; color:#e1b89b; background:none; border:0; font:10px Inter,sans-serif; padding:12px 9px 12px 0; cursor:pointer; border-right:1px solid var(--atlas-border); }
    .mobile-subjects>span:first-child { font-size:18px; }
    .explorer-page .nav-logo { min-width:0; }
    .explorer-page .top-bar-content { gap:16px; }
    .atlas-context-bar { padding:0 18px; }
    .atlas-caption { left:23px; top:23px; }
    .atlas-caption h2 { font-size:23px; }
    .atlas-legend { bottom:31px; font-size:8px; }
    .explorer-page .ariadne-path-timeline { left:16px; z-index:140; }
    .canvas-container.panel-open .atlas-legend { display:none; }
}
@media(max-width:650px) {
    .explorer-page .top-bar { padding:12px 0; }
    .explorer-page .top-bar-content { padding:0 17px; gap:10px; }
    .explorer-page .wordmark { font-size:26px; }
    .explorer-page .thread-mark { width:23px; height:27px; font-size:25px; }
    .explorer-page .top-bar-right { gap:8px; }
    .explorer-page .view-btn { padding:7px 8px; font-size:10px; }
    .explorer-page .path-trigger { padding:8px; }
    .explorer-page .path-trigger-label { display:none; }
    .explorer-page .path-trigger-icon { display:block; }
    .explorer-page .lang-toggle { gap:0; margin-left:0; }
    .explorer-page .lang-btn { font-size:10px; padding:8px 6px; min-width:26px; }
    .explorer-page .lang-toggle { gap:4px; }
    .explorer-page .lang-divider { display:none; }
    .explorer-page .search-trigger { order:3; flex-basis:100%; max-width:none; padding:11px 13px; }
    .atlas-context-bar { height:43px; padding:0 16px; }
    .atlas-caption { top:20px; left:20px; }
    .atlas-caption h2 { font-size:21px; max-width:270px; }
    .atlas-caption p { font-size:9px; }
    .atlas-kicker { font-size:7px; }
    .atlas-controls { right:16px; bottom:17px; padding:4px; }
    .atlas-controls button { width:31px; height:32px; }
    .atlas-legend { left:20px; bottom:78px; gap:13px; }
    .atlas-legend>span { font-size:8px; gap:5px; }
    .legend-line { width:14px; }
    .explorer-page .explorer-disclaimer { bottom:72px; right:17px; }
    .explorer-page .explorer-disclaimer-label { display:none; }
    .explorer-page .detail-panel { top:auto; bottom:0; right:0; width:100%; max-width:100%; height:68%; border-radius:16px 16px 0 0; transform:translateY(105%); }
    .explorer-page .detail-panel.open { transform:translateY(0); }
    .explorer-page .detail-header { padding:24px 22px 18px; }
    .explorer-page .detail-course-name { font-size:25px; }
    .explorer-page .detail-body { padding:0 22px 25px; }
}
.explorer-page .detail-topic-pill { color:#d1c0ae; }
.explorer-page .detail-connection-pill { width:100%; display:flex; justify-content:space-between; background:#d2b69207!important; border:1px solid #d2b69229!important; border-radius:6px; padding:11px 12px; font-size:11px; line-height:1.6; text-align:left; cursor:pointer; }
.explorer-page .detail-connections { gap:6px; }
@media(max-width:720px) { .explorer-page .search-trigger-label { display:block; font-size:11px; } }
/* Keep map controls reachable while the reading panel is open. explorer.js
   toggles .panel-open so this works without :has(). */
.canvas-container.panel-open .atlas-controls { right:422px; }
.canvas-container.panel-open .explorer-disclaimer { display:none; }
@media(max-width:1200px) { .canvas-container.panel-open .atlas-controls { right:378px; } }
@media(max-width:650px) {
    .canvas-container.panel-open .atlas-controls { top:10px; bottom:auto; right:12px; }
    .canvas-container.panel-open .atlas-legend { display:none; }
}
/* Phones and portrait tablets (the top bar wraps at 768): the timeline sits above the controls instead of on top of them. */
@media(max-width:768px) {
    .explorer-page .ariadne-path-timeline { top:auto; bottom:84px; max-height:38vh; }
    body.panel-open .ariadne-path-timeline { display:none; }
    body.path-active .explorer-disclaimer,body.path-active .atlas-legend { display:none; }
}
/* Short stages (landscape phones, keyboard open, 200% zoom): give the map the room back. */
@media(max-height:560px) {
    .sidebar-intro,.sidebar-footer { display:none; }
    .atlas-sidebar h1 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* keep the page's h1 for assistive tech */
    .subject-filter { margin:14px 0 12px; }
    .atlas-caption { display:none; }
    .atlas-legend { display:none; }
    .atlas-context-bar { height:38px; }
    .explorer-page .ariadne-path-timeline { max-height:30vh; }
}