/* pmastudy course flow. Keep layout/animation edits here; theme.css retains
 * the shared lavender palette, reader sidebar, and user-adjusted blur settings. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.brand-logo { display: block; width: 178px; max-width: 100%; height: auto; }

@media screen {
  .site-header .brand { display: inline-flex; max-width: 100%; }
  .site-header .brand-logo { max-height: 56px; object-fit: contain; }
  .site-header--library {
    position: relative;
    top: auto;
    height: auto;
    justify-content: center;
    padding: 42px 6% 28px;
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header--library .brand { width: 100%; max-width: 680px; }
  .site-header--library .brand-logo { width: 100%; max-height: none; }
  .library-main { max-width: 1080px; padding: 0 44px 36px; }
  .library-intro { text-align: center; }
  .library-intro .library-subhead { font: 400 15px/1.6 var(--font-body); }
  .library-search { margin: 24px 0 36px; }
  .library-search label { font-size: 12px; }
  .library-search input { padding: 14px 18px; }
  .library-main .page-footer { margin-top: 38px; }

  .course-accordion.course-group {
    --flow-color: #5942BD;
    --flow-outline: #000000;
    --course-open-ms: 700;
    --course-close-ms: 450;
    --flow-draw-ms: 900;
    --flow-wrap-ms: 550;
    --flow-width: 12;
    display: block;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    scroll-margin-top: 28px;
  }
  .course-summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 134px;
    padding: 25px 30px;
    list-style: none;
    border: 1px solid #74619485;
    border-radius: 32px;
    background: linear-gradient(145deg, #fffffff0, #eef5fff0 60%, #eee9fff0);
    box-shadow: inset 0 3px 9px #fff, inset 0 -7px 15px #d8caff80, 0 9px 24px #62519912;
    color: var(--accent);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .course-summary::-webkit-details-marker { display: none; }
  .course-summary::marker { content: ''; }
  .course-summary h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: inherit;
    font: 400 clamp(29px, 3.5vw, 42px)/1.15 var(--font-heading);
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
    transition: font-weight 1ms step-end;
  }
  .course-summary .course-number {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 66px;
    width: 66px;
    height: 82px;
    color: var(--accent);
    font: 400 31px/1 var(--font-heading);
    font-variant-numeric: tabular-nums;
    isolation: isolate;
  }
  .course-summary .course-number::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 54px;
    height: 54px;
    border: 1px solid #74619485;
    background: linear-gradient(135deg, #e9e2ff, #bdacec);
    transform: rotate(45deg);
  }
  .course-disclosure-icon {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font: 300 29px/1 var(--font-body);
    transition: transform 200ms ease;
  }
  .course-summary:hover { box-shadow: inset 0 3px 9px #fff, inset 0 -7px 15px #d8caff80, 0 10px 30px #62519926; }
  .course-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
  .course-accordion[open]:not(.is-closing) > .course-summary {
    color: #fff;
    background: var(--flow-color);
    box-shadow: inset 0 3px 9px #ffffffb0, inset 0 -5px 13px #7652c278, 0 10px 25px #7d59c22b;
    text-shadow: 0 2px 3px #6a4eb34d;
  }
  .course-accordion[open]:not(.is-closing) .course-summary h2 { font-weight: 600; transition-delay: 200ms; }
  .course-accordion[open]:not(.is-closing) .course-number::before { background: linear-gradient(135deg, #fff, #edf0ff); }
  .course-accordion[open]:not(.is-closing) .course-disclosure-icon { transform: rotate(45deg); }

  .course-panel { overflow: hidden; }
  .course-panel-inner { position: relative; display: flow-root; padding-bottom: 10px; }
  .course-panel .guide-grid { display: flex; flex-direction: column; gap: 28px; padding-top: 32px; }
  .course-panel .guide-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 72%;
    min-height: 154px;
    margin: 0 0 0 auto;
    padding: 24px 26px;
    border: 1px solid #74619485;
    border-radius: 30px;
    background: linear-gradient(145deg, #ffffffed, #eef5fff0 64%, #eee9fff2);
    box-shadow: inset 0 3px 10px #fff, inset 0 -6px 16px #d8caff80, 0 8px 20px #6251990c;
    text-align: center;
    opacity: 1;
    transform: none;
    transition: opacity 240ms ease var(--node-delay, 0ms), transform 240ms ease var(--node-delay, 0ms), box-shadow 180ms ease;
  }
  .course-panel .guide-card:first-child { margin-left: 0; margin-right: auto; }
  .course-panel .guide-card h3 { margin: 0; font: 400 clamp(28px, 3.8vw, 43px)/1.12 var(--font-heading); }
  .course-panel .guide-card .card-detail { opacity: 1; visibility: visible; transform: none; font: 400 12px/1.5 var(--font-body); }
  .course-panel .guide-card .card-topline { gap: 5px 18px; }
  .course-panel .guide-card .card-bottomline { color: #6b6182; }
  .course-panel .guide-card:hover { transform: translateY(-2px); box-shadow: inset 0 3px 10px #fff, inset 0 -6px 16px #d8caff80, 0 12px 28px #62519920; }
  .course-panel .guide-card:first-child:hover { transform: none; }
  .course-panel .course-references { margin: 16px 3px 4px; }
  .course-accordion.is-ready:not(.flow-drawn) .material-node { opacity: 0; transform: translateY(6px); }
  .course-accordion.is-closing .material-node { transition-delay: 0ms; transition-duration: 140ms; }

  .flow-drawing { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 2px #7051b61a); }
  .flow-path {
    fill: none;
    stroke: var(--flow-color);
    stroke-width: calc(var(--flow-width) * 1px);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset calc(var(--flow-draw-ms) * 1ms) cubic-bezier(.3, 0, .2, 1) var(--flow-start, 0ms),
      opacity 1ms linear var(--flow-start, 0ms);
  }
  .flow-outline-ink { flood-color: var(--flow-outline); }
  .flow-wrap {
    --flow-start: calc(var(--flow-draw-ms) * 1ms);
    transition-duration: calc(var(--flow-wrap-ms) * 1ms), 1ms;
  }
  .flow-trunk { --flow-start: calc((var(--flow-draw-ms) + var(--flow-wrap-ms)) * 1ms); }
  .flow-branch {
    --flow-start: calc(var(--flow-draw-ms) * 1.65ms + var(--flow-wrap-ms) * 1ms + var(--flow-delay, 0ms));
    transition-duration: calc(var(--flow-draw-ms) * .5ms), 1ms;
  }
  .flow-head {
    fill: var(--flow-color); stroke: var(--flow-color); stroke-width: 6px;
    stroke-linejoin: round; opacity: 0;
    transition: opacity 100ms ease;
  }
  .flow-head-incoming { transition-delay: calc(var(--flow-draw-ms) * 1ms - 60ms); }
  .flow-head-branch { transition-delay: calc(var(--flow-draw-ms) * 2.15ms + var(--flow-wrap-ms) * 1ms + var(--flow-delay, 0ms) - 60ms); }
  .flow-drawn .flow-path { stroke-dashoffset: 0; opacity: 1; }
  .flow-drawn .flow-head { opacity: 1; }
  .is-closing .flow-path { transition-duration: 140ms; transition-delay: 0ms; }
  .is-closing .flow-head { transition-duration: 80ms; transition-delay: 0ms; }
}

.course-accordion[hidden] { display: none !important; }

@media screen and (max-width: 760px) {
  .site-header .brand-logo { width: 154px; max-height: 48px; }
  .site-header--library { padding: 32px 6% 24px; }
  .site-header--library .brand-logo { width: 100%; max-height: none; }
  .library-main { padding: 0 22px 28px; }
  .library-intro .library-subhead { font-size: 14px; }
  .library-search { margin: 22px 0 28px; }
  .course-accordion.course-group { margin-bottom: 20px; }
  .course-summary { min-height: 112px; gap: 17px; padding: 18px 21px; border-radius: 26px; }
  .course-summary h2 { font-size: clamp(24px, 4.6vw, 33px); }
  .course-summary .course-number { flex-basis: 46px; width: 46px; height: 62px; font-size: 25px; }
  .course-summary .course-number::before { width: 38px; height: 38px; }
  .course-disclosure-icon { flex-basis: 23px; width: 23px; font-size: 26px; }
  .course-panel .guide-grid { gap: 23px; padding-top: 26px; }
  .course-panel .guide-card { min-height: 130px; padding: 19px 16px; border-radius: 25px; }
  .course-panel .guide-card h3 { font-size: clamp(25px, 5.6vw, 34px); }
  .course-panel .guide-card .card-detail { font-size: 11px; }
  .course-panel .guide-card .card-bottomline { font-size: 11px; }
  .course-accordion.course-group { --flow-width: 10; }
  .flow-head { stroke-width: 5px; }
}

@media screen and (max-width: 380px) {
  .library-main { padding-inline: 16px; }
  .course-summary { gap: 12px; padding: 17px 16px; }
  .course-summary h2 { font-size: 22px; }
  .course-summary .course-number { flex-basis: 37px; width: 37px; font-size: 22px; }
  .course-summary .course-number::before { width: 33px; height: 33px; }
  .course-disclosure-icon { flex-basis: 19px; width: 19px; }
  .course-panel .guide-card { width: 75%; padding: 18px 12px; }
  .course-panel .guide-card h3 { font-size: 24px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  .course-summary, .course-summary h2, .course-disclosure-icon, .course-panel .guide-card,
  .flow-path, .flow-head { transition: none; }
  .course-panel .guide-card:hover { transform: none; }
}

@media screen and (prefers-reduced-transparency: reduce) {
  .course-summary, .course-panel .guide-card { background: #fcfaff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .course-accordion[open]:not(.is-closing) > .course-summary { background: #9c80d4; }
}

@media print {
  .site-header--library { height: auto; padding: 0 0 12pt; }
  .site-header--library .brand-logo { width: 160px; }
  .library-intro, .library-search, .flow-drawing, .course-disclosure-icon { display: none !important; }
  .course-accordion.course-group { margin: 0 0 18pt; padding: 0; border: 0; background: none; box-shadow: none; }
  .course-summary { display: flex; align-items: baseline; gap: 10pt; padding: 0; margin-bottom: 8pt; list-style: none; break-after: avoid; }
  .course-summary h2 { margin: 0; font-size: 17pt; }
  .course-summary .course-number { font-size: 12pt; }
  .course-panel { height: auto !important; overflow: visible !important; }
  .course-accordion::details-content { content-visibility: visible; }
  .course-panel .guide-grid { display: block; padding: 0; }
  .course-panel .guide-card { display: block; width: auto; min-height: 0; margin: 0 0 8pt; padding: 8pt; break-inside: avoid; }
  .course-panel .guide-card h3 { font-size: 14pt; }
}