/* Wellness demo: layers on concepts/survey/survey.css (SDUSD star palette, navy stage, the Likert ruler). */
.bar__brand .logo { filter: none; } /* official white logo file; never recolor a logo with a filter */
.bar__brand img { display: block; width: 148px; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: inherit; }

/* Pick */
.pick { display: grid; gap: clamp(18px, 3vh, 32px); padding-top: clamp(8px, 3vh, 36px); }
.pick__top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; font-size: 15px; color: var(--paper-dim); }
.pick__top b { color: var(--petal-l); font-weight: 700; letter-spacing: .02em; }
.pick__swap { margin-left: auto; position: relative; }
.pick__swap select { appearance: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--paper); background: transparent; border: 0; border-bottom: 2px solid var(--pl1); padding: 6px 26px 6px 0; cursor: pointer; max-width: min(64vw, 30em); text-overflow: ellipsis; }
.pick__swap select option { color: #0A2D4B; }
.pick__swap::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--pl1); border-bottom: 2px solid var(--pl1); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pick .say .w { opacity: 1; }
.pick__row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; min-height: 64px; }
.go[disabled] { opacity: .35; cursor: default; transform: none; }
.fine { font-size: 14px; color: var(--paper-faint); max-width: 34em; }

/* Meet Ahmed */
.meet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 5vw, 64px); align-items: center; padding-top: clamp(12px, 5vh, 60px); max-width: 1040px; }
.face { position: relative; width: clamp(150px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%; flex: none; }
.face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.face::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--pl1); opacity: .35; transform: scale(calc(1 + var(--v, 0) * .09)); transition: transform .09s linear, opacity .2s, border-color .2s; }
.face.talk::before { opacity: 1; }
.face.you::before { border-color: var(--pl2); opacity: .8; }
.face.think::before { border-style: dashed; opacity: .7; animation: spin 6s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.meet h1 { font-size: clamp(30px, 4.4vw, 60px); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.meet h1 span { display: block; }
.meet ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; font-size: clamp(17px, 1.6vw, 21px); color: var(--paper-dim); max-width: 32em; }
.meet ul b { color: var(--paper); font-weight: 600; }
.picked { margin-top: 22px; padding: 12px 0 0; border-top: 2px solid var(--petal-l); font-size: 16px; color: var(--paper-dim); max-width: 34em; }
.picked b { color: var(--paper); font-weight: 600; }
.acts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.link { font-weight: 600; font-size: 17px; border-bottom: 2px solid rgb(244 247 250 / .4); padding: 6px 0; }
.link:hover { border-bottom-color: var(--pl1); }

/* The conversation */
.call { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 5vw, 64px); align-items: start; padding-top: clamp(8px, 3vh, 32px); }
.call__side { display: grid; gap: 14px; justify-items: center; position: sticky; top: 16px; }
.call__side .face { width: clamp(110px, 16vw, 200px); }
.who { font-size: 15px; font-weight: 600; text-align: center; } .who small { display: block; font-weight: 400; color: var(--paper-faint); font-size: 13px; }
.clock { font-size: clamp(34px, 4vw, 52px); font-weight: 200; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.clock.low { color: var(--pl1); font-weight: 500; }
.status { font-size: 14px; color: var(--paper-dim); min-height: 1.4em; text-align: center; max-width: 13em; }
.onthetable { font-size: 14px; color: var(--paper-dim); border-top: 2px solid var(--petal-l); padding-top: 10px; margin-bottom: 14px; }
.onthetable b { color: var(--paper); font-weight: 600; }
.caps { display: grid; gap: 14px; align-content: start; min-height: 38vh; max-height: 56vh; overflow-y: auto; padding-right: 8px; scroll-behavior: smooth; }
.cap { max-width: 34em; font-size: clamp(19px, 2vw, 27px); line-height: 1.3; letter-spacing: -.01em; }
.cap small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 3px; }
.cap.ai .w { opacity: .4; transition: opacity .15s; } .cap.ai .w.said, .cap.ai.done .w { opacity: 1; }
.cap.user { color: var(--pl2); justify-self: end; text-align: right; }
.cap.user small { color: rgb(190 221 110 / .7); }
.cap.pending { opacity: .5; font-style: italic; }
.ctl { margin-top: 18px; display: grid; gap: 12px; border-top: 1px solid rgb(244 247 250 / .2); padding-top: 14px; }
.ctl__row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.meter { display: flex; align-items: center; gap: 3px; height: 30px; width: 120px; }
.meter i { flex: 1; height: 4px; border-radius: 2px; background: rgb(244 247 250 / .3); transition: height .08s linear, background .2s; }
.meter.live i { background: var(--pl2); }
.pill { padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 16px; background: var(--paper); color: var(--navy); }
.pill.quiet { background: transparent; color: var(--paper); border: 2px solid rgb(244 247 250 / .4); }
.pill[disabled] { opacity: .4; cursor: default; }
.say-in { flex: 1; min-width: 14em; font: inherit; font-size: 17px; color: var(--paper); background: rgb(244 247 250 / .07); border: 1px solid rgb(244 247 250 / .28); border-radius: 999px; padding: 12px 18px; }
.say-in::placeholder { color: var(--paper-dim); } .say-in:focus { outline: 3px solid var(--pl1); outline-offset: 2px; }
.stopline { margin-top: 18px; padding: 18px 20px; border-left: 4px solid var(--pl1); background: rgb(244 247 250 / .07); font-size: clamp(18px, 1.8vw, 23px); line-height: 1.4; max-width: 34em; }

/* Reading back */
.wait { padding-top: 12vh; max-width: 30em; } .wait h1 { font-size: clamp(34px, 5vw, 64px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.wait p { margin-top: 14px; color: var(--paper-dim); }
.dots { display: inline-flex; gap: 6px; margin-left: 6px; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--pl1); animation: dot 1.2s infinite both; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-4px); } }

/* What comes back: paper on navy */
.back { padding-top: clamp(8px, 2vh, 24px); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline; margin-bottom: 18px; }
.tabs button { font-size: 17px; font-weight: 600; padding: 8px 0; color: var(--paper-dim); border-bottom: 3px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--pl1); }
.tabs .tag { margin-left: auto; font-size: 13px; color: var(--pl1); border: 1px solid rgb(255 210 122 / .5); padding: 3px 10px; border-radius: 999px; }
.sheet { background: #FBFAF6; color: #16202E; border-radius: 6px; padding: clamp(22px, 4vw, 52px); display: grid; gap: clamp(22px, 3vw, 36px); }
.sheet h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; margin: 0; }
.sheet h3 { font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: #5B6676; margin: 0 0 10px; }
.sheet p { margin: 0; }
.sheet .muted { color: #5B6676; font-size: 15px; }
.flagbox { border: 2px solid #B4231A; border-left-width: 10px; padding: 18px 20px; background: #FFF4F2; }
.flagbox h2 { font-size: clamp(22px, 2.6vw, 32px); color: #8E1B14; } .flagbox blockquote { margin: 12px 0; font-size: 20px; line-height: 1.35; } .flagbox p { font-weight: 600; }
.picked2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 22px; align-items: start; border-top: 2px solid #16202E; padding-top: 14px; }
.picked2 .n { font-size: clamp(54px, 7vw, 92px); font-weight: 200; line-height: .85; letter-spacing: -.04em; }
.picked2 .q { font-size: 15px; color: #5B6676; } .picked2 .l { font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.01em; }
.align { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #E6EEF8; color: #1B4E8A; }
.align.says_more { background: #E9F3D6; color: #3F5D0E; } .align.worth_a_conversation { background: #FCEBCB; color: #7A4B00; }
.picked2 .said { margin-top: 8px; font-size: 17px; }
.comps { display: grid; gap: 0; }
.comp { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 8px 28px; padding: 18px 0; border-top: 1px solid #D9DEE6; }
.comp:last-child { border-bottom: 1px solid #D9DEE6; }
.comp .nm { font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .comp .lens { font-size: 14px; color: #5B6676; }
.lvl { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; max-width: 13em; } .lvl i { height: 8px; background: #D9DEE6; border-radius: 1px; } .lvl i.on { background: #1F7CC4; }
.lvlname { margin-top: 6px; font-size: 14px; font-weight: 700; color: #1B4E8A; } .lvlname.none { color: #5B6676; font-weight: 600; }
.comp .why { font-size: 16px; } .comp q { display: block; quotes: "\201C" "\201D"; font-size: 18px; line-height: 1.35; margin: 0 0 6px; padding-left: 12px; border-left: 3px solid #F7B63B; cursor: pointer; }
.comp q:hover { border-left-color: #E8492A; } .comp .did { font-size: 14px; color: #5B6676; margin: 0 0 12px 15px; }
.comp .next { margin-top: 6px; font-size: 15px; } .comp .next b { font-weight: 700; }
.names { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: 16px 28px; } .names ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 17px; } .names .none { color: #8A93A1; font-size: 15px; }
.tx { display: grid; gap: 10px; font-size: 16px; line-height: 1.5; } .tx p b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5B6676; margin-right: 8px; } .tx p.ai { color: #5B6676; }
.tx mark { background: #FFE9A8; color: inherit; padding: 1px 2px; border-radius: 2px; } .tx mark.hot { background: #F7B63B; outline: 2px solid #E8492A; }
.you h2 { max-width: 16em; } .you blockquote { margin: 0; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -.01em; padding-left: 16px; border-left: 4px solid #1F7CC4; } .you blockquote + blockquote { margin-top: 14px; border-left-color: #94B83C; }
.you .strength { font-size: 19px; max-width: 30em; }
.again { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.err { margin-top: 14px; color: var(--pl0); font-size: 15px; }

@media (max-width: 760px) {
  .meet, .call { grid-template-columns: 1fr; }
  .call__side { position: static; grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; } .call__side .face { width: 76px; } .who, .status { text-align: left; }
  .caps { max-height: none; min-height: 30vh; } .cap.user { justify-self: start; text-align: left; }
  .comp { grid-template-columns: 1fr; } .pick__swap { margin-left: 0; width: 100%; } .pick__swap select { max-width: 100%; width: 100%; }
  .scale button { min-height: 0; } .scale .lbl { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- The report, drawn (staff view v2) ---- */
.rpt { gap: clamp(26px, 3.4vw, 44px); }
.rpt__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; border-bottom: 2px solid #16202E; padding-bottom: 18px; }
.rpt__top h2 span { display: block; }
.tally { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 6px 26px; }
.tally li { font-size: 13px; line-height: 1.25; color: #5B6676; max-width: 8.5em; } .tally b { display: block; font-size: clamp(26px, 2.8vw, 38px); font-weight: 300; letter-spacing: -.03em; color: #16202E; font-variant-numeric: tabular-nums; }
.ans { display: grid; gap: 14px; }
.ans__q { font-size: clamp(19px, 2vw, 25px); letter-spacing: -.01em; font-weight: 500; max-width: 30em; } .ans__q b { font-weight: 700; color: #1F7CC4; margin-right: 10px; }
.ans__ruler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 3px solid #D9DEE6; }
.ans__ruler li { position: relative; padding: 10px 8px 0 0; display: grid; gap: 2px; color: #8A93A1; }
.ans__ruler b { font-size: clamp(30px, 4vw, 54px); font-weight: 200; line-height: 1; letter-spacing: -.04em; } .ans__ruler span { font-size: 13px; line-height: 1.25; max-width: 9em; }
.ans__ruler li.on { color: #16202E; } .ans__ruler li.on b { font-weight: 700; } .ans__ruler li.on span { font-weight: 600; }
.ans__ruler li.on::before { content: ""; position: absolute; left: 0; right: 8px; top: -6px; height: 9px; background: #1F7CC4; border-radius: 2px; }
.ans__why { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .ans__why p { flex: 1 1 100%; font-size: 17px; max-width: 44em; } .ans__why small { font-size: 13px; color: #5B6676; } .ans__why .align { margin: 0; }
.three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 2px solid #16202E; }
.slot { padding: 16px 18px 18px; border-right: 2px solid #16202E; min-height: 9.5em; background: repeating-linear-gradient(-45deg, #F1EFE8 0 8px, #FBFAF6 8px 16px); }
.slot:last-child { border-right: 0; } .slot.has { background: #fff; }
.slot__k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5B6676; }
.slot h4 { margin: 2px 0 10px; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.02em; font-weight: 600; } .slot.has h4 { color: #0A2D4B; }
.slot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 16px; line-height: 1.3; } .slot ul li { padding-left: 14px; position: relative; } .slot ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #5E8A12; }
.slot__none { font-size: 15px; color: #5B6676; }
.where { margin-top: 10px; font-size: 15px; color: #5B6676; } .where b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-right: 10px; color: #5B6676; }
.trks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24em), 1fr)); gap: 22px clamp(22px, 4vw, 48px); margin-bottom: 14px; }
.trk { border-top: 4px solid var(--hue); padding-top: 12px; display: grid; gap: 12px; align-content: start; }
.trk header h4 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 600; } .trk header p { font-size: 14px; color: #5B6676; }
.trk__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.trk__steps li { display: grid; gap: 6px; font-size: 12px; color: #8A93A1; } .trk__steps i { display: block; height: 12px; background: #E4E7EC; border-radius: 2px; }
.trk__steps li.past i { background: color-mix(in srgb, var(--hue) 35%, #E4E7EC); } .trk__steps li.at i { background: var(--hue); height: 18px; margin-top: -3px; } .trk__steps li.at { color: #16202E; font-weight: 700; font-size: 13px; }
.trk.none .trk__steps i { background: repeating-linear-gradient(-45deg, #E4E7EC 0 4px, #F4F5F7 4px 8px); }
.trk__ne { font-size: 14px; font-weight: 700; color: #5B6676; margin-top: -4px; }
.trk__ev { display: grid; gap: 8px; }
.qt { text-align: left; display: grid; gap: 3px; padding: 10px 12px; background: #fff; border: 1px solid #D9DEE6; border-left: 4px solid var(--hue); border-radius: 2px; cursor: pointer; color: #16202E; }
.qt q { quotes: "\201C" "\201D"; font-size: 17px; line-height: 1.3; } .qt small { font-size: 13px; color: #5B6676; line-height: 1.35; } .qt:hover, .qt.hot { background: color-mix(in srgb, var(--hue) 9%, #fff); border-color: var(--hue); }
.trk__why { font-size: 14px; line-height: 1.45; color: #3D4654; }
.nextup ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .nextup li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; padding: 12px 14px; background: #fff; border-left: 4px solid var(--hue); font-size: 16px; } .nextup li b { font-weight: 700; }
.strip { display: flex; gap: 2px; height: 34px; margin-bottom: 8px; } .seg { position: relative; min-width: 4px; border-radius: 2px; background: #C9D0DA; display: flex; gap: 2px; align-items: flex-end; padding: 0 2px 3px; cursor: pointer; }
.seg.user { background: #94B83C; } .seg i { flex: 1; max-width: 14px; height: 9px; border-radius: 1px; outline: 1.5px solid #FBFAF6; } .seg:hover { filter: brightness(.92); }
.strip__key { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: #5B6676; margin-bottom: 16px; } .strip__key .k { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; background: #C9D0DA; } .strip__key .k.user { background: #94B83C; }
.tx p { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; padding: 4px 6px; border-radius: 3px; transition: background .4s; } .tx p b { margin: 3px 0 0; } .tx p.flash { background: #FFF3C9; }
.tx mark { background: color-mix(in srgb, var(--hue, #F7B63B) 22%, #fff); box-shadow: inset 0 -2px 0 var(--hue, #F7B63B); cursor: pointer; } .tx mark.hot { background: color-mix(in srgb, var(--hue, #F7B63B) 40%, #fff); outline: 2px solid var(--hue, #E8492A); }
.you__three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 0 28px; } .you__three li { border-top: 3px solid #94B83C; padding-top: 10px; } .you__three h4 { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #5B6676; } .you__three p { font-size: 18px; }
@media (max-width: 760px) { .rpt__top { grid-template-columns: 1fr; } .tally { grid-template-columns: repeat(2, 1fr); } .three { grid-template-columns: 1fr; } .slot { border-right: 0; border-bottom: 2px solid #16202E; min-height: 0; } .slot:last-child { border-bottom: 0; } .ans__ruler span { font-size: 11px; } .nextup li { grid-template-columns: 1fr; gap: 4px; } .tx p { grid-template-columns: 1fr; gap: 0; } }
@media print { .bar, .foot, .tabs, .again, .seal { display: none !important; } body { background: #fff; } .sheet { padding: 0; } }

/* Option A: all 17 answers as a strip of bars you can tap to change */
.dots17 { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: clamp(3px, .8vw, 10px); align-items: end; max-width: 900px; height: 110px; }
.dots17 li { height: 100%; } .dots17 button { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 6px; }
.dots17 i { display: block; width: 100%; background: var(--c); border-radius: 2px 2px 0 0; opacity: .9; transition: height .4s var(--ease); } .dots17 b { font-size: 14px; font-weight: 600; color: var(--paper-dim); font-variant-numeric: tabular-nums; } .dots17 button:hover i { opacity: 1; filter: brightness(1.15); }
.item .ptime { min-width: 0; text-align: left; font-size: 15px; }

/* Reading back: the student's own lines return, a marker sweeps across them, four steps tick by */
.wait2 { padding-top: clamp(18px, 6vh, 72px); display: grid; gap: clamp(18px, 3vh, 30px); max-width: 980px; }
.wait2 h1 { font-size: clamp(34px, 5vw, 64px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; }
.wait2__steps { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15px; font-weight: 600; color: var(--paper-faint); }
.wait2__steps li { display: flex; align-items: center; gap: 9px; transition: color .3s; } .wait2__steps li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; transition: background .3s; }
.wait2__steps li.on { color: var(--pl1); } .wait2__steps li.on::before { background: var(--pl1); animation: dot 1.1s infinite; } .wait2__steps li.done { color: var(--paper); } .wait2__steps li.done::before { background: var(--pl2); border-color: var(--pl2); }
.wait2__lines { display: grid; gap: 14px; border-left: 3px solid rgb(244 247 250 / .25); padding-left: 18px; }
.wait2__lines p { font-size: clamp(18px, 2vw, 25px); line-height: 1.38; color: var(--paper-dim); max-width: 36em; }
.wait2__lines p span { background: linear-gradient(90deg, rgb(255 210 122 / .34), rgb(255 210 122 / .34)) no-repeat 0 85% / 0% 42%; transition: color .4s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wait2__lines p.lit { color: var(--paper); } .wait2__lines p.lit span { animation: sweep 1.6s var(--ease) forwards; }
@keyframes sweep { to { background-size: 100% 42%; } }
.wait2__fine { font-size: 14px; color: var(--paper-faint); }
@media (prefers-reduced-motion: reduce) { .wait2__lines p.lit span { background-size: 100% 42%; } }

/* ---- Report v3: a counselor's page on district letterhead (Josh: "more reporty, more bespoke, fewer numbers and sections") ---- */
.rpt2 { gap: clamp(22px, 3vw, 38px); padding-top: clamp(20px, 3vw, 36px); background: #FBFAF6 linear-gradient(#0A2D4B, #0A2D4B) no-repeat 0 0 / 100% 8px; position: relative; }
.rpt2::after { content: ""; position: absolute; left: 0; top: 8px; height: 4px; width: 100%; background: linear-gradient(90deg, #E8492A 0 20%, #F7B63B 20% 40%, #94B83C 40% 60%, #A62A76 60% 80%, #1F7CC4 80%); }
.lh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 30px; padding-top: 10px; }
.lh__logos { display: flex; align-items: center; gap: 14px; color: #8A93A1; font-weight: 300; font-size: 20px; } .lh__logos img { height: 40px; width: auto; display: block; } .lh__logos .lh__ip { height: 78px; margin: -19px -14px -19px -16px; }
.lh__t { text-align: right; display: grid; } .lh__t b { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; font-weight: 600; } .lh__t span { font-size: 14px; color: #5B6676; }
.meta { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid #16202E; border-bottom: 1px solid #D9DEE6; } .meta > div { padding: 10px 14px 12px 0; } .meta dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #5B6676; } .meta dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.lead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
.lead__q { margin: 0; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.16; letter-spacing: -.025em; font-weight: 500; text-wrap: balance; cursor: pointer; } .lead__q::before { content: "\201C"; display: block; font-size: 2.2em; line-height: .6; color: #1F7CC4; margin-bottom: 6px; }
.lead__q span { background: linear-gradient(#FFE9A8, #FFE9A8) no-repeat 0 88% / 100% 30%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.picked3 { display: grid; gap: 18px; } .pk { border-left: 3px solid #16202E; padding-left: 16px; display: grid; gap: 6px; } .pk__q { font-size: 14px; color: #5B6676; line-height: 1.35; }
.pk__r { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: 6px; } .pk__r li { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #C9D0DA; display: grid; place-items: center; font-size: 15px; color: #8A93A1; font-variant-numeric: tabular-nums; } .pk__r li.on { background: #0A2D4B; border-color: #0A2D4B; color: #fff; font-weight: 700; transform: scale(1.12); }
.pk__l { font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .pk__s { font-size: 15px; line-height: 1.45; color: #3D4654; }
.stamp { justify-self: start; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 5px 10px; border: 2px solid currentColor; border-radius: 3px; rotate: -2deg; color: #1B4E8A; } .stamp.says_more { color: #3F5D0E; } .stamp.worth_a_conversation { color: #9A4A00; }
.rpt2 .three { border: 0; gap: 14px; } .rpt2 .slot { border: 0; border-top: 5px solid #C9D0DA; background: #F1EFE8; min-height: 0; padding: 14px 16px 16px; } .rpt2 .slot.has { background: #fff; box-shadow: 0 1px 0 #D9DEE6; border-top-color: #94B83C; } .rpt2 .slot:nth-child(2).has { border-top-color: #1F7CC4; } .rpt2 .slot:nth-child(3).has { border-top-color: #F7B63B; }
.rows { display: grid; } .row { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 13em) minmax(0, 1fr); gap: 10px 26px; align-items: start; padding: 16px 0; border-top: 1px solid #D9DEE6; } .row:last-child { border-bottom: 1px solid #D9DEE6; }
.row__n b { display: block; font-size: 19px; letter-spacing: -.01em; } .row__n span { font-size: 13px; color: #5B6676; }
.row__t { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; position: relative; } .row__t li { display: grid; gap: 5px; } .row__t i { height: 10px; border-radius: 2px; background: #E4E7EC; } .row__t li.past i { background: color-mix(in srgb, var(--hue) 35%, #E4E7EC); } .row__t li.at i { background: var(--hue); height: 16px; margin-top: -3px; }
.row__t span { font-size: 13px; font-weight: 700; white-space: nowrap; color: #16202E; } .row__t li.ne { grid-column: 1 / -1; } .row__t li.ne span { color: #5B6676; font-weight: 600; } .row.none .row__t i { background: repeating-linear-gradient(-45deg, #E4E7EC 0 4px, #F4F5F7 4px 8px); }
.qt2 { display: block; text-align: left; font: inherit; font-size: 17px; line-height: 1.35; color: #16202E; padding: 0 0 0 12px; border-left: 3px solid var(--hue); margin: 0 0 8px; cursor: pointer; } .qt2:hover, .qt2.hot { background: color-mix(in srgb, var(--hue) 10%, transparent); }
.row__none { font-size: 15px; color: #8A93A1; } .row details { margin-top: 4px; } .row summary, .convo summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #1B4E8A; } .row details p { font-size: 14px; line-height: 1.45; color: #3D4654; margin-top: 8px; } .row details .qt2 { margin-top: 8px; }
.move { background: #0A2D4B; color: #F4F7FA; padding: clamp(18px, 2.6vw, 30px); border-radius: 4px; } .move h3 { color: #FFD27A; } .move p { font-size: clamp(19px, 2.1vw, 26px); line-height: 1.32; letter-spacing: -.01em; max-width: 34em; }
.convo summary { font-size: 16px; padding: 6px 0; } .convo details[open] summary { margin-bottom: 14px; }
.rpt2__f { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; border-top: 1px solid #D9DEE6; padding-top: 14px; font-size: 13px; color: #5B6676; } .rpt2__f span { max-width: 44em; }
.pdf { font: inherit; font-size: 15px; font-weight: 700; padding: 10px 18px; border-radius: 999px; background: #16202E; color: #fff; cursor: pointer; } .pdf:hover { background: #0A2D4B; }
.card3 { max-width: 880px; border-top: 10px solid #94B83C; } .card3__k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #5B6676; }
@media (max-width: 760px) { .lead { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; gap: 8px; } .meta { grid-template-columns: 1fr; } .meta > div { border-top: 1px solid #D9DEE6; } .lh__t { text-align: left; } .rpt2 .three { grid-template-columns: 1fr; } }
@media print { @page { size: Letter; margin: 14mm; } .bar, .foot, .tabs, .again, .seal, .pdf, .skip { display: none !important; } body { background: #fff !important; color: #16202E; display: block; } .stage { padding: 0; max-width: none; } .sheet { padding: 0 !important; border-radius: 0; } .view { animation: none !important; } .move { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .rpt2, .rpt2::after, .row__t i, .pk__r li.on, .lead__q span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .row, .slot, .pk, .move { break-inside: avoid; } }