/* pmastudy — lavender glass, inspired by the Photoshop mockups.
 * Loaded after study.css and reader.css; the earlier layout/print rules remain.
 * The Adobe web project supplies these exact family names and weights.
 * Change the screen palette and font families here for the next design pass.
 */
@media screen {
  :root {
    color-scheme: light;
    --paper: #eeedff;
    --ink: #2e2850;
    --muted: #625979;
    --line: #6551b52b;
    --accent: #5942bd;
    --soft: #ede8ff;
    --font-heading: "omnes-pro", "Trebuchet MS", sans-serif;
    --font-subheading: "museomoderno", "Trebuchet MS", sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --serif: var(--font-heading);
    --card-background: linear-gradient(145deg, #fffffff0, #eeedffdd 62%, #ddd8ffec);
    --card-complete-background: linear-gradient(115deg, #e5dfffeb, #fff8ffff 52%, #eee7ffeb);
    --card-practice-background: linear-gradient(145deg, #fcf9ffed, #e5defff0 64%, #d6eafff0);
    --card-quick-background: linear-gradient(145deg, #fffffff2, #f4f6ffef 60%, #def7fcf2);
    --card-rehearse-background: linear-gradient(145deg, #fffffff2, #f0e9ffef 60%, #e2d6fff2);
    --card-hover-background: linear-gradient(135deg, #ffffffff, #efebfff5 66%, #e2e9fff5);
    --card-reduced-transparency-background: #f7f4ff;
    --panel-shadow: 0 14px 32px #5142a81a, 0 4px 9px #5746ab0c;
  }

  body {
    background-color: #e9e8ff;
    background-image:
      radial-gradient(ellipse at 4% 3%, #9e93ff85, transparent 47%),
      radial-gradient(ellipse at 91% 15%, #acd1ffb3, transparent 40%),
      radial-gradient(ellipse at 48% 40%, #fffaffed, transparent 55%),
      radial-gradient(ellipse at 5% 92%, #b4d3ffa6, transparent 44%),
      radial-gradient(ellipse at 100% 95%, #b4a1ffad, transparent 49%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: normal;
    background-repeat: no-repeat;
    font-family: var(--font-body);
    color: var(--ink);
  }

  a { color: var(--accent); }
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #5942bd;
    outline-offset: 5px;
  }
  .skip-link { background: #fff; color: var(--accent); }
  .button {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 100px;
    padding: 10px 17px;
    font-weight: 600;
    min-height: 42px;
  }
  .button:hover { background: #45309b; border-color: #45309b; }
  .button-secondary { background: #ffffffb3; color: var(--accent); border-color: #5942bd40; }
  .button-secondary:hover { background: #ebe5ff; color: #45309b; border-color: #5942bd70; }
  .quiet-button { color: var(--accent); padding: 10px 0; }
  .quiet-button:hover { color: #382379; text-decoration: underline; }
  select option, select optgroup { background: #fcfaff; color: var(--ink); }

  .site-header {
    height: 72px;
    padding-inline: max(5%, calc((100vw - 1080px) / 2));
    background: #f4f0ffbd;
    border-bottom: 1px solid #ffffffa8;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .brand { font: 700 25px/1 var(--font-heading); letter-spacing: -.025em; color: var(--accent); }
  .site-header nav { gap: 25px; }
  .site-header nav a { display: inline; color: var(--accent); font-size: 13px; }
  .site-header nav a:hover { text-decoration: underline; }
  .eyebrow {
    color: var(--muted);
    font: 400 12px/1.65 var(--font-subheading);
    text-transform: none;
    letter-spacing: .045em;
  }
  .page-footer { color: var(--muted); border-color: var(--line); line-height: 1.7; }
  .page-footer p { margin: 0 0 9px; }

  .library-main { max-width: 1200px; padding: 68px 60px 30px; }
  .library-intro { margin: 0; }
  .library-intro h1 {
    font: 400 clamp(48px, 6.5vw, 82px)/1.04 var(--font-heading);
    color: var(--accent);
    letter-spacing: -.035em;
    margin: 13px 0 24px;
    text-shadow: 0 2px 18px #ffffff85;
  }
  .library-intro .hero-ending { white-space: nowrap; font-style: italic; }
  .library-intro > p.library-subhead {
    max-width: none;
    color: var(--muted);
    font: 400 clamp(15px, 1.8vw, 19px)/1.7 var(--font-subheading);
    margin: 0;
  }
  .library-search { margin: 35px 0 64px; }
  .library-search label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
  .library-search input {
    border: 1px solid #38237599;
    border-radius: 16px;
    background: linear-gradient( 180deg, #49339de7, #5942bde7);
    box-shadow: inset 0 3px 6px #21104a99, inset 0 -1px 2px #bca7ff66, 0 1px 0 #ffffffb3;
    color: #fff;
    padding: 17px 20px;
    font-size: 16px;
  }
  .library-search input::placeholder { color: #ffffff; opacity: 1; }
  .library-search input:focus { border-color: var(--accent); }
  .library-search #library-search-status { color: var(--muted); }
  #library-search-results li { background: #ffffffec; border-color: #fff; box-shadow: var(--panel-shadow); }
  #library-search-results a { font: 400 25px/1.25 var(--font-heading); }
  #courses { scroll-margin-top: 100px; }

  /* One full-width guide, three equal cards, and a quiet references link. */
  .course-group {
    margin: 0 0 65px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .course-group > h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    background: none;
    color: var(--accent);
    font: italic 400 clamp(23px, 2.7vw, 31px)/1.25 var(--font-heading);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .course-number { flex: none; font-style: normal; font-size: .75em; font-variant-numeric: tabular-nums; }
  .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .guide-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 38px minmax(75px, 1fr) 38px;
    align-items: center;
    justify-content: stretch;
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    min-height: 242px;
    padding: 20px 24px;
    border: 1px solid #ffffffed;
    border-radius: 30px;
    background: var(--card-background);
    color: var(--accent);
    box-shadow: inset 0 2px 8px #fff, inset 0 -7px 20px #ffffffb0, var(--panel-shadow);
    text-align: center;
    transition: transform 180ms ease, box-shadow 180ms ease;
    will-change: auto;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .guide-card--complete {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 206px;
    background: var(--card-complete-background);
  }
  .guide-card--quick { background: var(--card-quick-background); }
  .guide-card--practice { background: var(--card-practice-background); }
  .guide-card--rehearse { grid-column: auto; background: var(--card-rehearse-background); border-left: 1px solid #ffffffed; }
  .guide-card h3 {
    grid-row: 2;
    margin: 0;
    font: 400 clamp(27px, 3vw, 37px)/1.13 var(--font-heading);
    letter-spacing: -.015em;
  }
  .guide-card--complete h3 { font-size: clamp(34px, 4.4vw, 54px); }
  .card-title-link { text-decoration: none; color: inherit; }
  .card-title-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .card-title-link:focus-visible { outline: none; }
  .guide-card:focus-within { outline: 3px solid var(--accent); outline-offset: 5px; }
  .card-topline {
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 24px;
  }
  .card-detail { color: var(--muted); font: 400 13px/1.6 var(--font-subheading); margin: 0; }
  .card-bottomline { grid-row: 3; }
  .card-topline a { position: relative; z-index: 2; padding-block: 8px; font: 400 12px/1.5 var(--font-body); }
  .card-topline a:focus-visible { border-radius: 4px; }
  .guide-card--complete .card-bottomline { font-size: 15px; }
  .card-reveals .card-detail {
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .card-reveals .guide-card:focus-within .card-detail,
  .card-reveals .guide-card.is-revealed .card-detail,
  .card-details-visible .guide-card .card-detail {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .course-references { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-top: 15px; }
  .course-references a { color: var(--muted); font-size: 12px; padding: 5px 2px; text-decoration: none; }
  .course-references a:hover { color: var(--accent); text-decoration: underline; }

  /* A fixed edge tab keeps navigation within reach throughout a long guide. */
  .contents-toggle {
    position: fixed;
    z-index: 21;
    top: 112px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 44px;
    min-height: 146px;
    padding: 16px 8px;
    border: 1px solid #ffffffc9;
    border-left: 0;
    border-radius: 0 15px 15px 0;
    background: var(--sidebar-background);
    color: #382256;
    font: 600 13px/1 var(--font-body);
    cursor: pointer;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 3px 5px 18px #55327c1f;
  }
  .contents-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); }
  .contents-toggle-icon { font-size: 24px; line-height: .8; }
  .contents-toggle:hover, .contents-toggle[aria-expanded=true] { background: rgb(208 189 249 / 52%); }
  .contents-toggle:focus-visible { outline-offset: -5px; }
  .contents-backdrop {
    position: fixed;
    inset: 72px 0 0;
    z-index: 18;
    background: #25134122;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* Paper-like reading surface beside a translucent purple navigation panel. */
  .reading-layout, .reading-layout:not(.contents-open) {
    display: block;
    max-width: 1120px;
    padding: 28px 5% 0 68px;
    margin: auto;
  }
  .reading-main {
    background: #ffffffeb;
    padding: 42px 42px 0;
    border: 1px solid #ffffffed;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 12px 45px #6355a00c;
  }
  .guide-heading h1 {
    font: 400 clamp(36px, 4vw, 48px)/1.13 var(--font-heading);
    color: var(--accent);
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
  }
  .guide-heading { border-color: var(--line); }
  .sidebar, .sidebar.open {
    display: block;
    position: fixed;
    z-index: 20;
    top: 100px;
    left: 56px;
    width: min(340px, calc(100vw - 72px));
    height: calc(100dvh - 115px);
    padding: 24px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sidebar-background);
    color: #382256;
    border: 1px solid #ffffffb8;
    border-radius: 20px;
    box-shadow: 0 12px 40px #4c287c26;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    scrollbar-width: thin;
  }
  .reading-layout:not(.contents-ready) .sidebar { position: static; width: auto; height: auto; margin-bottom: 24px; }
  .sidebar .back-link { color: #493267; margin-bottom: 20px; }
  .sidebar .eyebrow { color: #493267; font-weight: 600; margin: 0 0 12px; }
  .sidebar label { color: #493267; }
  .sidebar select, .sidebar input { background: #ffffffbd; color: #382256; border-color: #67468f45; }
  .sidebar .guide-navigation { border-top: 1px solid #67468f40; margin-top: 24px; padding-top: 8px; }
  .sidebar #contents-nav > .eyebrow { margin-top: 24px; }
  .sidebar .course-links { display: grid; gap: 6px; }
  .course-links a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #382256;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .course-links a[aria-current=true] { border-color: #ffffffad; background: #ffffff6b; font-weight: 600; }
  .course-links a:hover { background: #ffffff8f; }
  .course-nav-number { flex: 0 0 1.4em; white-space: nowrap; color: #594078; font-size: 11px; padding-top: 2px; }
  .sidebar .section-contents a { color: #493267; border-radius: 8px; padding: 9px 8px; }
  .sidebar .section-contents a[aria-current], .sidebar .section-contents a:hover { color: #382256; background: #ffffff8f; }
  .sidebar #search-results a { color: #382256; }
  .sidebar #search-results small { color: #493267; }
  .study-content { color: var(--ink); overflow-wrap: anywhere; }
  .study-content h2 { color: var(--accent); font: 400 33px/1.2 var(--font-heading); padding-top: 22px; }
  .study-content h3 { color: #42356e; font: 400 20px/1.45 var(--font-subheading); }
  .study-content h4 { color: #42356e; }
  .study-content em { color: #625478; }
  .study-content blockquote { background: #f3eeff; border-color: #9d87e3; }
  .study-content pre { background: #f0edf7; }
  .study-content table { background: #fff; }
  .study-content th { background: #f1ebfd; }
  .study-content td { background: #ffffffe0; }
  .study-content .mermaid { background: #faf8ff !important; }
  .render-status { color: #634211; background: #fff2d9; border-color: #dbc69e; }
  .reader-disclosure > summary { background: #f2ecff; border-color: #cfc3e8; color: var(--accent); border-radius: 12px; padding: 10px 14px; }
  .reader-disclosure[open] > summary { background: #e8dfff; }
  .reader-disclosure-body { padding-inline: 14px; }
  .study-content .reader-source-button { color: var(--accent); border-color: #baabda; border-radius: 7px; background: #f7f3ff; }
  .reader-citation-text { color: var(--muted); }

  .quiz-toolbar, .quiz-question { background: #faf7ff; border-color: #d8cfee; }
  .quiz-number-badge { background: #eae1fa; color: var(--accent); }
  .quiz-option { background: #fff; border-color: #dad3e8; }
  .quiz-option:hover { background: #f2ecff; }
  .quiz-option:has(input:checked) { background: #eae2ff; border-color: var(--accent); }
  .quiz-number input { background: #fff; color: var(--ink); border-color: #c3b5db; }
  .quiz-number input[aria-invalid=true] { border-color: #9b344d; }
  .quiz-feedback { background: #eee7ff; border-color: #cabbdf; }
  .quiz-question[data-state=correct] .quiz-feedback { background: #e8f6ed; border-color: #75ab87; color: #244f37; }
  .quiz-question[data-state=wrong] .quiz-feedback { background: #fbe9ee; border-color: #bf8292; color: #7d2940; }
  .quiz-explanation { border-color: #63577d33; }
  .save-note { color: var(--muted); }

  .activity-main { max-width: 1050px; padding-top: 48px; }
  .activity-main h1 { color: var(--accent); font-family: var(--font-heading); }
  .activity-lede { color: var(--muted); font: 400 17px/1.7 var(--font-subheading); }
  .activity-toolbar { background: #ffffffc9; border-color: #fff; }
  .activity-tabs { border-color: #d7ccec; }
  .activity-tabs button[aria-pressed=true] { background: var(--accent); color: #fff; }
  .activity-toolbar select, .match-row select { color: var(--ink); background: #fff; border-color: #c9bcdf; }
  .flash-card { background: var(--card-complete-background); border-color: #fff; box-shadow: var(--panel-shadow); color: var(--accent); }
  .flash-card[data-flipped=true] { background: #fcfaff; }
  #card-face { font-family: var(--font-heading); }
  #card-face p { color: var(--ink); }
  #match-panel > h2 { color: var(--accent); font-family: var(--font-heading); }
  .match-row { background: #ffffffe6; border-color: #fff; }
  .match-row[data-state=correct] { border-color: #75ab87; }
  .match-row[data-state=correct] .match-feedback { color: #28573c; }
  .match-row[data-state=wrong] { border-color: #bf8292; }
  .match-row[data-state=wrong] .match-feedback { color: #852d45; }
}

@media screen and (min-width: 1180px) {
  .reading-layout.contents-ready.contents-open { max-width: 1520px; padding-left: 418px; }
  .contents-backdrop { display: none; }
}

@media screen and (hover: hover) and (pointer: fine) {
  .guide-card:hover { transform: translateY(-3px); background: var(--card-hover-background); border-color: #fff; box-shadow: inset 0 2px 10px #fff, 0 16px 36px #5142a829; }
  .card-reveals .guide-card:hover .card-detail { opacity: 1; visibility: visible; transform: none; }
}

@media screen and (max-width: 760px) {
  .site-header { height: 65px; padding-inline: 6%; }
  .brand { font-size: 23px; }
  .site-header nav { gap: 17px; }
  .library-main { padding: 46px 6% 20px; }
  .library-intro h1 { font-size: clamp(46px, 8.5vw, 64px); max-width: 600px; }
  .library-intro .hero-ending { display: block; }
  .library-search { margin: 28px 0 45px; }
  .guide-grid { gap: 14px; }
  .guide-card { padding: 16px 14px; min-height: 215px; border-radius: 24px; }
  .guide-card h3 { font-size: 28px; }
  .guide-card--complete { min-height: 215px; }
  .guide-card--complete h3 { font-size: 39px; }
  .card-detail { font-size: 11px; }
  .card-topline { gap: 4px 17px; }
  .guide-card--complete .card-bottomline { font-size: 13px; }
  .course-group > h2 { font-size: 25px; }
  .contents-toggle { top: 92px; }
  .contents-backdrop { top: 65px; }
  .reading-layout, .reading-layout:not(.contents-open) { padding: 15px 4% 0 58px; }
  .reading-main { margin: 0; padding: 26px 22px 0; border-radius: 22px 22px 0 0; }
  .guide-heading h1 { font-size: 36px; }
  .sidebar, .sidebar.open { top: 80px; height: calc(100dvh - 95px); padding: 20px 16px; }
  .sidebar input, .sidebar select, .quiz-number input, .activity-toolbar select, .match-row select { font-size: 16px; }
  .study-content { font-size: 16px; }
  .study-content h2 { font-size: 29px; }
  .study-content h3 { font-size: 19px; }
  .activity-main { padding: 32px 6% 20px; }
}

@media screen and (max-width: 520px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 184px; grid-template-rows: 30px minmax(62px, 1fr) 30px; padding: 15px 24px; }
  .guide-card h3 { font-size: 34px; }
  .guide-card--complete { min-height: 238px; grid-template-rows: 58px minmax(70px, 1fr) 46px; }
  .guide-card--complete h3 { font-size: 39px; }
  .guide-card--complete .card-topline > span { flex-basis: 100%; }
  .card-detail { font-size: 13px; }
  .course-group { margin-bottom: 48px; }
  .course-group > h2 { font-size: 25px; gap: 10px; margin-bottom: 17px; }
  .course-references { justify-content: flex-start; }
  .reading-main { padding-inline: 18px; }
  .guide-heading h1 { font-size: 32px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .guide-card, .card-reveals .card-detail { transition: none; }
  .guide-card:hover { transform: none; }
}

@media screen and (prefers-reduced-transparency: reduce) {
  body { background: #eeedff; }
  .site-header, .reading-main, .sidebar, .sidebar.open, .contents-toggle, .contents-backdrop, .library-search input,
  #library-search-results li, .activity-toolbar, .match-row, .flash-card,
  .quiz-toolbar, .quiz-question, .guide-card {
    background: #fcfaff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .course-group, .course-group > h2 { background: none; }
  .sidebar, .sidebar.open, .contents-toggle, .contents-toggle:hover,
  .contents-toggle[aria-expanded=true] { background: #e2ccf8; }
}

/* Adobe typography is screen-only: downloaded worksheets retain local fonts. */
@media print {
  .guide-grid { display: block; }
  .guide-card { break-inside: avoid; min-height: 0; margin-bottom: 12px; }
  .card-topline, .card-bottomline { font-size: 9pt; margin: 6px 0; }
  .card-topline a { margin-left: 10px; }
  .course-number { margin-right: 10px; }
}