/* School profile, new layout (preview ?layout=new). Folding is done by /js/profile.js; without it all is open. */
.prof-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; }
.prof-head h1 { margin: 0 0 .5rem; font-size: clamp(1.85rem, 4.4vw, 2.7rem); letter-spacing: -.035em; line-height: 1.1; }
.prof-head .eyebrow { margin-bottom: .35rem; }
.prof-sub { margin: 0; color: var(--muted); font-size: .95rem; }
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.head-actions:empty, .head-actions:not(:has(> :not([hidden]))) { display: none; }
.prof-side-in { display: grid; gap: 1rem; }
.prof-side .score-panel .grades > a { flex: 1 1 8rem; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .7rem; display: flex; gap: .6rem; align-items: center; text-align: left; min-width: 0; color: inherit; text-decoration: none; }
.prof-side .score-panel .grades > a:hover { border-color: var(--line-strong); }
.side-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.side-actions form { margin: 0; }
.prof-main { min-width: 0; }
.prof-main > .jump { margin-top: 0; }
.prof-sec { margin: 1.25rem 0; }
.prof-sec .lede { margin-top: 0; }
.prof-group > * + * { margin-top: 1.25rem; }
.prof-main > .panel, .prof-main > .peek, .prof-main > section, .prof-main > .prof-group, .prof-main > details { margin-top: 1.25rem; }
.prof-main [id] { scroll-margin-top: 7.5rem; }

/* At a glance */
.glance { border: 1px solid var(--line); border-radius: var(--r-lg); padding: .9rem; background: var(--bg); }
.glance-h { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--subtle); margin: 0 0 .6rem; }
.glance ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.glance a { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: center; padding: .55rem .6rem; border-radius: var(--r); background: var(--blue-50); color: var(--ink); text-decoration: none !important; min-height: 3.3rem; }
.glance a:hover { background: var(--blue-100); }
/* Tiles in a row are the same height, and an odd last tile spans the row, so no tile leaves a white gap. */
.glance li { display: flex; min-width: 0; }
.glance li > a { flex: 1; min-width: 0; align-content: center; }
.glance li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.glance a svg { grid-row: span 2; color: var(--blue-600); }
.glance-k { font-size: .72rem; color: var(--muted); font-weight: 700; line-height: 1.2; }
.glance-v { font-size: .9rem; line-height: 1.25; }
.expand-all { justify-self: center; }
.expand-all .ea-close, .all-open .expand-all .ea-open { display: none; }
.all-open .expand-all .ea-close { display: inline; }
html:not(.js) .expand-all { display: none; }

/* Fold buttons */
.fold-btn { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; margin-top: .6rem; padding: .7rem 1rem; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--blue-600); font-weight: 700; font-size: .92rem; cursor: pointer; }
.fold-btn:hover { border-color: var(--blue-100); background: var(--blue-50); }
.fold-btn svg { transition: transform .2s ease; transform: rotate(90deg); }
.fold-btn[aria-expanded="true"] svg { transform: rotate(-90deg); }
.fold-btn .fold-less, .fold-btn[aria-expanded="true"] .fold-more { display: none; }
.fold-btn[aria-expanded="true"] .fold-less { display: inline; }
html:not(.js) .fold-btn { display: none; }

/* Scorecard areas: one line each (grade, name, what we found); a tap opens the findings */
.pillar-found { display: none; }
.fold-pillar.folding .pillar-head { cursor: pointer; border-radius: var(--r); margin: -.35rem -.5rem; padding: .35rem .5rem; }
.fold-pillar.folding .pillar-head:hover { background: var(--blue-50); }
.fold-pillar.folding .pillar-head:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fold-pillar.folding .pillar-head > div { flex: 1 1 auto; min-width: 0; }
.fold-pillar.folding .pillar-found { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; flex: none; font-size: .82rem; font-weight: 700; color: var(--blue-600); white-space: nowrap; }
.fold-pillar.folding .pillar-found svg { transform: rotate(90deg); transition: transform .2s ease; }
.fold-pillar.folding.open .pillar-found svg { transform: rotate(-90deg); }
.fold-pillar.folding:not(.open) .checklist, .fold-pillar.folding:not(.open) .fold-btn { display: none; }
.fold-pillar.folding .fold-btn .fold-more { display: none; }
.fold-pillar.folding .fold-btn .fold-less { display: inline; }
.fold-pillar.open .checklist { animation: prof-in .25s ease both; }
.fold-pillar.folding { padding: .85rem 0; }

/* Peek sections: the top of the section with a soft fade */
.peek.peeked:not(.open) .peek-body { max-height: 380px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.peek.peek-tall.peeked:not(.open) .peek-body { max-height: 520px; }
.peek > .peek-body > .panel { margin: 0; }

/* Short lists */
.fold-list.folding:not(.open) > li:nth-child(n+4) { display: none; }

@keyframes prof-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fold-pillar.open .checklist, .fold-btn svg, .pillar-found svg { animation: none; transition: none; } }

/* Computers: slim sticky right column */
@media (min-width: 1000px) {
  .prof-grid { grid-template-columns: minmax(0, 1fr) 19.5rem; column-gap: 2.25rem; grid-template-areas: "head side" "main side"; }
  .prof-head { grid-area: head; }
  .prof-side { grid-area: side; }
  .prof-main { grid-area: main; }
  .prof-side-in { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; scrollbar-width: thin; padding-bottom: .5rem; }
  .prof-side .score-panel { padding: .9rem 1rem; gap: .7rem; }
  .prof-side .score-panel .ring { width: 6.5rem; height: 6.5rem; }
  .prof-side .score-panel .grades > a { padding: .45rem .55rem; }
  .prof-side-in { gap: .75rem; }
  .prof-jump { margin: -.75rem 0 .25rem; padding: 0; }
  .prof-side .score-panel .weights { display: none; }
  .glance ul { grid-template-columns: 1fr; gap: .3rem; }
  .glance a { grid-template-columns: auto auto 1fr; min-height: 0; padding: .4rem .55rem; column-gap: .5rem; }
  .glance a svg { grid-row: auto; }
  .glance-v { text-align: right; font-size: .86rem; }
}

@media print {
  .fold-btn, .expand-all, .jump { display: none !important; }
  .fold-pillar .checklist > li, .fold-list > li { display: list-item !important; }
  .peek .peek-body { max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .prof-side-in { position: static; max-height: none; }
}

/* The summary: first lines, then "Read more" */
.lede-wrap .lede { font-size: 1.02rem; line-height: 1.6; margin: 0; }
.lede-wrap.clamped .lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lede-wrap [data-clamp-btn] { margin-top: .3rem; }

/* Share: one button */
.share-one { position: relative; display: inline-block; }
.share-pop { position: absolute; z-index: 40; top: calc(100% + .4rem); right: 0; width: min(22rem, calc(100vw - 2rem)); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: .9rem; text-align: left; }
.share-pop .share-row { flex-wrap: wrap; }
.side-actions .btn, .side-actions button { display: inline-flex; align-items: center; gap: .35rem; }

/* The bar of sections, under the header from the start */
.prof-jump { margin: 0 -1rem .5rem; }

/* Key sections (Mass, faith) stand out; the rest are plainer */
.prof-main .panel { box-shadow: none; }
.prof-main .panel.key { border-color: var(--blue-100); box-shadow: var(--shadow-sm); border-top: 4px solid var(--blue); }
.prof-main .panel.key .panel-title { font-size: 1.3rem; }
.prof-main .panel:not(.key):not(.about-data) { border-width: 1px 0 0; border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; }
.prof-main .peek > .peek-body > .panel { border-width: 1px 0 0; border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; box-shadow: none; }

/* Phones and tablets: name, a slim score row, buttons, At a glance, then the school */
@media (max-width: 999px) {
  .prof-grid { display: flex; flex-direction: column; gap: .9rem; }
  .prof-side, .prof-side-in { display: contents; }
  .prof-head { order: 1; }
  .prof-side .score-panel { order: 2; }
  .side-actions { order: 3; }
  .glance { order: 4; }
  .prof-main { order: 5; }
  .expand-all { display: none; }
  .prof-head h1 { font-size: 1.75rem; }
  .prof-sub { font-size: .88rem; }
  .prof-side .score-panel { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; text-align: left; gap: .9rem; padding: .8rem .9rem; box-shadow: none; }
  .prof-side .score-panel .ring { width: 5rem; height: 5rem; }
  .prof-side .score-panel .ring-cap { font-size: .72rem; }
  .prof-side .score-panel .weights, .prof-side .score-panel > p.meta-line, .prof-side .score-panel > div[style] { display: none; }
  .prof-side .score-panel details.built { grid-column: 1 / -1; }
  .prof-side .score-panel .grades { flex-direction: column; flex-wrap: nowrap; gap: .25rem; width: 100%; }
  .prof-side .score-panel .grades > a, .prof-side .score-panel .grades > .grade-life { flex: none; border: 0; background: none; padding: .15rem 0; gap: .5rem; }
  .prof-side .score-panel .grades br { display: none; }
  .prof-side .score-panel .grades .gl { font-size: .72rem; margin-right: .35rem; }
  .prof-side .score-panel .grades .gv { font-size: .85rem; }
  .side-actions { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .1rem; }
  .side-actions::-webkit-scrollbar { display: none; }
  .side-actions > * { flex: none; }
  /* Edge hint (Oct 20, 2026): the row fades on the side that has more buttons off-screen (floating-nav.js sets x-l / x-r). */
  .side-actions.x-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .side-actions.x-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
  .side-actions.x-l.x-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 44px), transparent); }
  .share-pop { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 5.5rem; width: auto; }
  .glance { padding: .75rem; }
  .glance a { min-height: 0; padding: .45rem .55rem; }
}
.prof-main > .prof-sec:first-child { margin-top: 0; }
.prof { overflow-anchor: none; }

/* Rankings (views/rankings-panel.tsx): the line above the name, and the section of top-quarter places */
.rank-line { display: inline-flex; gap: .35rem; align-items: baseline; margin: .1rem 0 .35rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); text-decoration: none !important; }
.rank-line b { color: var(--gold-ink); }
.rank-line:hover span { text-decoration: underline; }
.rankings .rk-h { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); margin: 1rem 0 .5rem; }
.rk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.rk-grid a { display: grid; gap: .25rem; height: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none !important; background: var(--bg); }
.rk-grid a:hover { border-color: var(--gold-line); background: var(--gold-50); }
.rk-title { font-size: .9rem; line-height: 1.3; color: var(--blue-600); font-weight: 600; }
.rk-place { font-family: var(--serif); font-style: italic; color: var(--ink-2, var(--muted)); }
.rk-place b { font-size: 1.25rem; color: var(--ink); }
.rk-more { margin-top: .6rem; }
.rk-more summary { cursor: pointer; font-weight: 700; color: var(--blue-600); min-height: 40px; display: flex; align-items: center; }
.rk-more .rk-grid { margin-top: .4rem; }