/* Atlas interaction palette. Scope belongs to the route so the other products
   keep their own controls, even when they share a player or a search component. */
main.atlas-theme {
  --ink:#352647;
  --muted:#63586e;
  --teal:#61438a;
  --edge:#d2c7db;
  --tint:#f3edf8;
  --at-plum:#352647;
  --at-iris:#7152a0;
  --at-paper:#fffcf5;
  --at-lilac:#f3edf8;
  --at-periwinkle:#c5adf0;
  --at-rule:#907b9f;
  --at-keyline:#544161;
  --at-edge:#756184;
  --at-face:#fffdf7;
  --at-gold:#f7cc80;
  color:var(--at-plum);
  accent-color:var(--at-iris);
}
main.atlas-theme :where(.back,.shelf-foot a,.shelf-resume,.edition-practice,.ph-breadcrumbs a,.ph-related a,.at-note a,.ph-unit a,.back:visited){color:#5c4177}
main.atlas-theme :where(input[type="search"],select){border-color:#aa96b6;background:var(--at-paper);color:var(--at-plum)}
main.atlas-theme :where(.shelf-search,.edition-search,.ph-find) input{border-radius:8px;box-shadow:inset 0 2px 0 #eadeef;min-height:44px}
main.atlas-theme .tone-atlas.section-heading{
  padding:clamp(17px,2.4vw,27px);border:2px solid var(--at-plum);border-radius:18px 30px 16px 16px;
  color:#fff9eb;background-color:#49335e;
  background-image:repeating-radial-gradient(ellipse at 111% 180%,transparent 0 21px,#c5adf01c 22px 23px,transparent 24px 38px);
  box-shadow:0 4px var(--at-plum);gap:clamp(13px,2.1vw,25px)
}
main.atlas-theme .tone-atlas h1{color:#fff9eb}
main.atlas-theme .tone-atlas p{color:#f3e6ff}
main.atlas-theme .tone-atlas .section-icon{width:clamp(54px,6vw,76px);height:auto;filter:drop-shadow(0 3px 0 #21132b85)}
main.atlas-theme .edition-doors{gap:15px}
main.atlas-theme .edition-door{
  --lip:#584165;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:108px 1fr;
  gap:0;align-items:stretch;padding:0;overflow:hidden;isolation:isolate;
  border:2px solid #44334f;border-radius:14px 23px 13px 13px;background:var(--at-paper);color:var(--at-plum);
  box-shadow:0 4px 0 var(--lip)
}
main.atlas-theme .edition-door>div{
  position:relative;padding:15px 20px 18px;align-self:stretch;
  border-top:1.5px solid #80698c;background:var(--at-paper)
}
main.atlas-theme .edition-door>div p{color:#54485f;max-width:32ch}
main.atlas-theme .edition-door>b{
  top:11px;right:12px;font-weight:800;font-size:1.12rem;line-height:1;color:var(--at-plum);
  display:grid;width:27px;height:27px;place-items:center;border:1px solid #725c84;border-radius:50%;background:#fffaf0e8
}
main.atlas-theme .edition-door .door-design{
  width:auto;height:100%;align-self:stretch;margin:0;isolation:isolate;transform:none;color:#382647;
  background-color:#d8c7ed;background-image:radial-gradient(#72568d45 .85px,transparent 1px);background-size:7px 7px
}
main.atlas-theme .door-books .door-design{background-color:#cab1e5}
main.atlas-theme .door-chart .door-design{background-color:#dfd4ee}
main.atlas-theme .door-course .door-design{background-color:#bfb7df}
main.atlas-theme .book-emblem i{
  width:45px;height:55px;transform:skewY(11deg) rotate(-4deg);
  border:2px solid #46334f;border-bottom:5px solid #60466e;border-radius:4px 11px 1px 3px;background:#fff6d9
}
main.atlas-theme .book-emblem i+i{transform:skewY(-11deg) rotate(-4deg);border-left-width:3px;border-radius:10px 3px 4px 1px}
main.atlas-theme .book-emblem i:after{inset:10px 6px 12px;background:repeating-linear-gradient(to bottom,#9c7c9f 0 2px,transparent 2px 7px)}
main.atlas-theme .chart-emblem{grid-template-columns:repeat(3,26px);gap:3px;align-content:center}
main.atlas-theme .chart-emblem i{
  width:26px;height:25px;border:1.75px solid #4a3759;border-radius:5px;box-shadow:0 2px 0 #59476b;
  color:#463151;background:#fff9ec;font:700 17px/1 Georgia,serif;transform:rotate(-5deg)
}
main.atlas-theme .chart-emblem i:nth-child(2),main.atlas-theme .chart-emblem i:nth-child(6){background:#bca3d8}
main.atlas-theme .course-emblem{gap:0}
main.atlas-theme .dial-hub{
  z-index:1;width:48px;height:48px;border:2px solid #462d54;border-radius:100%;display:grid;place-items:center;
  background:radial-gradient(circle,#fff4d6 0 55%,#dabae6 57% 65%,#9f86b9 67% 73%,#574566 75%);
  box-shadow:0 3px #47364e;color:#523762;font:800 16px/1 "Segoe UI",sans-serif;padding-left:2px
}
main.atlas-theme .dial-bars{
  display:flex;align-items:center;gap:3px;margin-left:-5px;padding:7px 7px 7px 10px;transform:rotate(-3deg);
  background:#5a466f;border:2px solid #382647;border-radius:3px 7px 7px 3px;box-shadow:0 3px #493451
}
main.atlas-theme .dial-bars i{border-radius:1px;width:4px;height:7px;background:#e6d5fa}
main.atlas-theme .dial-bars i:nth-child(2n){height:12px}
main.atlas-theme .dial-bars i:nth-child(3){height:20px;background:var(--at-gold)}
main.atlas-theme .edition-pocket{
  --lip:#a593b3;background:#fcf8ff;border:1.5px solid #84708e;color:var(--at-plum);
  border-left:5px solid #9170ae;box-shadow:0 3px #b3a4bf
}
main.atlas-theme .edition-pocket b{color:#68498d}
main.atlas-theme .edition-pocket span{color:#625668}
main.atlas-theme :where(.edition-library,.edition-volume,.shelf-reading,.atlas-workbench,.ph-atlas,.bank-search,.bank-collections){
  --tool-ink:var(--at-plum);--tool-paper:var(--at-paper);--tool-lilac:var(--at-lilac);--tool-violet:var(--at-iris);
  --atlas-ink:var(--at-plum)
}
main.atlas-theme .shelf-reading .shelf-question{
  background:linear-gradient(130deg,#fcf9ff,#fffdf5);border-color:#b6a5c0;
  border-left:5px solid #9279a5
}
main.atlas-theme .shelf-reading .shelf-specimen.reading-specimen{border-radius:3px 9px 9px 3px}
main.atlas-theme .shelf-reading .shelf-tool{box-shadow:inset 0 0 0 1px #705c7825}
main.atlas-theme :is(.shelf-topics a,.shelf-field li a,.shelf-results a,.ph-entrycard,.ph-related a,.edition-practice){
  border-color:#aa97b4;color:var(--at-plum);background:var(--at-paper);box-shadow:0 2px #ac9ab7
}
main.atlas-theme .edition-practice{border-radius:9px;border:1.5px solid #a595af;padding:6px 13px;background:#f0e7f8;text-decoration:none}
main.atlas-theme :is(.shelf-reading,.atlas-workbench,.ph-atlas) details summary{color:#59436a}
main.atlas-theme .sound-index-head, main.atlas-theme .ph-atlas .ph-sectionhead{
  border-color:#9b86a7;background:linear-gradient(115deg,#eee5f8 5%,#faf5ff 67%,#fffbf1);
  box-shadow:inset 4px 0 #a186bb
}
main.atlas-theme .ph-section{border-color:#8d7799;box-shadow:0 3px #917c9e}
main.atlas-theme .ph-unit:has(>a){border-color:#786585;background:var(--at-paper);box-shadow:0 3px #917f9d}
main.atlas-theme .ph-unit>a{color:#503965;border-color:#ab97b4;background:#efe6f7}
main.atlas-theme .sound-practice-link{color:#503965;border-color:#9a88aa;background:#efe6f7}
main.atlas-theme :is(.bank-collections section,.bank-search,.sample-reference,.sample-mic){border-color:#b4a4be}
main.atlas-theme .bank-collections section{background:#f2ebf8}
main.atlas-theme .bank-collections section+section{background:#f8f4fb}
main.atlas-theme .bank-collections section>a,main.atlas-theme .bank-row>a:not(.bank-play){color:#563b72}
main.atlas-theme .vowel-coordinate,main.atlas-theme .at-synth{
  background:var(--at-paper);border-color:#887394
}
main.atlas-theme .atlas-workbench .at-plot{background:#f2ebf7;border-color:#b19dbc}
main.atlas-theme .at-board .vowel-pin.current{background:#58406c;color:white}
main.atlas-theme .gesture-lab{
  --gl-ink:var(--at-plum);--gl-paper:var(--at-paper);--gl-tint:#e7dbf2;
  border:1.5px solid #725c83;box-shadow:0 3px 0 #8c769d
}
main.atlas-theme .gesture-lab .gl-keys{
  background:#e0d3ed;
  background-image:linear-gradient(180deg,#f5edf8 0 2px,transparent 3px 93%,#d6c7e2 96% 100%);
  border-color:#9b87a9
}
main.atlas-theme .gl-reading .gl-facts dt{color:#59416e}
main.atlas-theme :is(.shelf-tool .at-choices button,.study-passes button,.ipa-compare-controls button,.atlas-workbench .at-choices button,[id="at-tone"]){
  background:#fcf8ff;border:1.5px solid #806a8d;border-radius:8px;color:#46344f;
  box-shadow:inset 0 1px white,0 3px #a08bac
}
main.atlas-theme :is(.study-passes,.shelf-tool,.ipa-compare-controls,.atlas-workbench .at-choices) [aria-pressed=true],
main.atlas-theme #at-tone[aria-pressed=true]{color:white;background:#604479;box-shadow:inset 0 2px 0 #483058,0 1px #796389}
main.atlas-theme .atlas-ipa .ipa-layout #ipa-detail{
  background:#f4edf9;border-color:#ab97b8;border-radius:12px
}
main.atlas-theme .atlas-ipa .ipa-scroll{border-color:#8b7599;box-shadow:0 2px #a18eac}
main.atlas-theme .atlas-ipa .ipa-scroll :is(th,thead td){background:#ece3f4;color:#493651}
main.atlas-theme .atlas-ipa .ipa-scroll button{
  --at-face:#fffdf7;--at-keyline:#6d5780;--at-edge:#8a739c;
  background:linear-gradient(160deg,#fff,var(--at-face) 70%);color:#3e2c4e;border:1.5px solid var(--at-keyline);
  box-shadow:inset 0 1px white,0 3px var(--at-edge)
}
main.atlas-theme .atlas-ipa .ipa-scroll button[aria-pressed=true]{
  box-shadow:inset 0 2px 0 #392349,0 1px #64516d;background:#644782;color:white;border-color:#452d59
}
/* The chart explicitly identifies American English by amber keys. */
main.atlas-theme .atlas-ipa .ipa-scroll button.ipa-en-key{--at-face:#fbe4b7;--at-keyline:#946735;--at-edge:#aa8154;color:#61451f}
main.atlas-theme .atlas-ipa .ipa-scroll button.ipa-en-key[aria-pressed=true]{background:#885823;color:white;box-shadow:inset 0 1px #68491e,0 1px #6e4b27}
main.atlas-theme .ipa-key-caption{background:#ece2f6;border-color:#ad99bc}

/* Section keys keep a persistent selected face. A lit playback disc means that
   an actual recording is playing, so a selected gesture is also clear at rest. */
main.atlas-theme :is(.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.gl-key,.gesture-disc,.ipa-specimen,.hit-play,.syllable-samples button){
  --at-edge:#8b749a;
  background:linear-gradient(145deg,#fffffc 0%,var(--at-face) 45%,#f1eaf6 100%);
  border:1.5px solid var(--at-keyline);color:var(--at-plum);
  box-shadow:inset 0 1px #fff,0 3px var(--at-edge)
}
main.atlas-theme :is(.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.hit-play){
  border-radius:10px 14px 10px 10px;min-height:46px
}
main.atlas-theme .bank-play,main.atlas-theme .ph-sound-tile{font-size:1rem}
main.atlas-theme :is(.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.gl-key,.gesture-disc,.hit-play,.ipa-specimen,.syllable-samples button,.blind-key,.course-preview-key) .atlas-play-icon{
  box-sizing:border-box;display:inline-grid;flex:none;place-items:center;align-self:center;padding:0;
  width:30px;height:30px;min-width:30px;border-radius:50%;border:1.5px solid #51375f;
  background:#dac6ef;color:#39254d;font:bold .76rem/1 "Segoe UI",Arial,sans-serif;
  box-shadow:inset 0 0 0 2px #efe6f8,0 1px 0 #594263
}
main.atlas-theme .leaf-type small,main.atlas-theme .bank-play small,main.atlas-theme .ph-sound-tile small{color:#605468}
main.atlas-theme :is(.gl-key,.contact-controls button,.syllable-samples button)[aria-current=true]{
  min-width:0;background:#ddcbef;border:2px solid #5e4277;color:#352647;
  outline:0;box-shadow:inset 0 -3px #b99ad4,0 2px 0 #786187
}
main.atlas-theme :is(.gl-key,.contact-controls button,.syllable-samples button)[aria-current=true] .atlas-play-icon{
  background:#f7f0fe;box-shadow:inset 0 0 0 2px #efe4f8,0 1px #70527d
}
main.atlas-theme :is(.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.gl-key,.gesture-disc,.ipa-specimen,.hit-play,.syllable-samples button)[aria-pressed=true]{
  background:#e7d8f5;border-color:#593b71;box-shadow:inset 0 2px 0 #b8a2ca,0 1px #8c75a1;color:#3a2649
}
main.atlas-theme :is(.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.gl-key,.gesture-disc,.ipa-specimen,.hit-play,.syllable-samples button,.blind-key,.course-preview-key)[aria-pressed=true] .atlas-play-icon{
  background:#593b71;color:#fff7e9;border-color:#382747;box-shadow:inset 0 0 0 2px #71528b
}
main.atlas-theme .ph-unit:has(>a) .ph-sound-tile{border:0;border-radius:0;box-shadow:none}
main.atlas-theme .ph-unit:has(>a) .ph-sound-tile[aria-pressed=true]{box-shadow:inset 0 2px #b8a2ca}
main.atlas-theme .hit-play{border-radius:8px;margin-bottom:5px}
main.atlas-theme .atlas-ipa .ipa-specimen .ipa-key-caption{background:#ece2f6}
main.atlas-theme .atlas-ipa .ipa-specimen[aria-pressed=true] .ipa-key-caption{background:#ded0ed}
main.atlas-theme .syllable-samples mark{text-decoration-color:#74598d}
main.atlas-theme .atlas-workbench .beat-choices button[data-result=hit]{background:#dcecd9;color:#20462f;border-color:#548363;box-shadow:inset 0 1px #fff9,0 2px #96a994}
main.atlas-theme .atlas-workbench .beat-choices button[data-result=miss]{background:#fae0d4;color:#6b3426;border-color:#ae766d;box-shadow:inset 0 1px #fff9,0 2px #b88e83}
main.atlas-theme :is(.edition-door,.edition-pocket,.ph-entrycard,.shelf-topics a,.ph-section,.book-jacket,.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.gl-key,.gesture-disc,.ipa-specimen,.hit-play,.ipa-scroll button,.syllable-samples button,.at-choices button,.study-passes button,.edition-practice){
  transition:transform 130ms cubic-bezier(.2,.8,.25,1),box-shadow 130ms,background-color 130ms
}
@media(hover:hover) and (pointer:fine){
  main.atlas-theme :is(.edition-door,.edition-pocket,.ph-entrycard,.shelf-topics a,.ph-section,.book-jacket):hover{
    transform:translateY(-2px);box-shadow:0 6px #776183
  }
  main.atlas-theme .edition-door:hover>b{background:#f2d99e;color:#392644}
  main.atlas-theme :is(.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.gl-key,.gesture-disc,.ipa-specimen,.hit-play,.ipa-scroll button,.syllable-samples button,.at-choices button,.study-passes button,.edition-practice):not(:disabled):hover{
    transform:translateY(-1.5px) scale(1.012);box-shadow:inset 0 1px #fdf7ff,0 4px var(--at-edge)
  }
  main.atlas-theme .ph-unit:has(>a) .ph-sound-tile:hover{transform:none;background:#efe5fa;box-shadow:inset 3px 0 #896ca5}
}
main.atlas-theme :is(.edition-door,.edition-pocket,.ph-entrycard,.shelf-topics a,.ph-section,.book-jacket,.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.gl-key,.gesture-disc,.ipa-specimen,.hit-play,.ipa-scroll button,.syllable-samples button,.at-choices button,.study-passes button,.edition-practice):not(:disabled):active{
  transform:translateY(2px) scale(.993);box-shadow:inset 0 2px #71568445,0 1px var(--at-edge)
}
main.atlas-theme :is(button,a,input,select,summary):focus-visible{
  outline:3px solid #7042a2;outline-offset:3px
}
main.atlas-theme .ph-unit:has(>a):focus-within{outline:2px solid #6a428c;outline-offset:2px}
main.atlas-theme .ph-unit:has(>a) :is(a,button):focus-visible{outline:2px solid #61358c;outline-offset:-3px}
@media(max-width:650px){
  main.atlas-theme .edition-doors{gap:10px}
  main.atlas-theme .edition-door{grid-template-columns:82px 1fr;grid-template-rows:auto;min-height:94px}
  main.atlas-theme .edition-door>div{padding:12px 25px 12px 12px;border:0;border-left:1px solid #8f7998;display:grid;align-content:center}
  main.atlas-theme .edition-door>b{top:6px;right:6px;width:17px;height:17px;font-size:.71rem;background:var(--at-paper);border:0}
  main.atlas-theme .book-emblem i{width:28px;height:37px;border-bottom-width:3px}
  main.atlas-theme .book-emblem i:after{inset:7px 4px 5px;background-size:100% 5px}
  main.atlas-theme .chart-emblem{grid-template-columns:repeat(3,17px);gap:2px}
  main.atlas-theme .chart-emblem i{width:17px;height:18px;font-size:12px}
  main.atlas-theme .dial-hub{width:31px;height:31px;font-size:11px}
  main.atlas-theme .dial-bars{gap:2px;padding:4px 4px 4px 7px}
  main.atlas-theme .dial-bars i{width:3px;height:5px}
  main.atlas-theme .dial-bars i:nth-child(2n){height:8px}
  main.atlas-theme .dial-bars i:nth-child(3){height:14px}
  main.atlas-theme :is(.gl-key,.course-preview-key,.blind-key) .atlas-play-icon{width:23px;min-width:23px;height:23px;font-size:.64rem}
}
@media(prefers-reduced-motion:reduce){
  main.atlas-theme :is(button,a,input,select,summary){transition:none}
  main.atlas-theme :is(.edition-door,.edition-pocket,.ph-entrycard,.shelf-topics a,.ph-section,.book-jacket,.audio-leaf,.lab-audio,.bank-play,.ph-sound-tile,.gl-key,.gesture-disc,.ipa-specimen,.hit-play,.ipa-scroll button,.syllable-samples button,.at-choices button,.study-passes button,.edition-practice):not(:disabled):is(:hover,:active){transform:none;transition:none}
}
@media(forced-colors:active){
  main.atlas-theme :is(button,a,input,select,summary):focus-visible{outline-color:Highlight}
  main.atlas-theme :is(button[aria-current=true],button[aria-pressed=true]){border:2px solid Highlight}
}
