/* score screen: #score and #score/activity */

/* shared parts */
.sc [hidden], .sc-sheet [hidden] { display: none !important; }
.sc-h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; }
.sc-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-big { margin-left: auto; font-family: var(--serif); font-size: 22px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.sc-sub { font-size: 13px; line-height: 1.4; color: var(--soft); }
.sc-copy { font-size: 14px; line-height: 1.55; color: var(--soft); }
.sc-copy strong { color: var(--ink); font-weight: 600; }
.sc-fine { font-size: 13px; line-height: 1.5; color: var(--soft); }
.sc-open { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--cobalt); }
.sc-outcome { background: var(--porcelain); border-left: 3px solid var(--cobalt); padding: 10px 14px; border-radius: 0 4px 4px 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.sc-sent { font-size: 16px; line-height: 1.5; }

/* track record areas */
.sc-areas > li { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); }
.sc-areas > li:last-child { padding-bottom: 0; }
.sc-area-title { font-family: var(--sans); font-size: 15px; line-height: 1.3; font-weight: 600; }
.sc-area-score { margin-left: auto; font-size: 15px; line-height: 1.3; white-space: nowrap; }
.sc-reason { font-size: 14px; line-height: 1.5; color: var(--soft); }
.sc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-when { font-size: 12px; color: var(--soft); margin-left: 4px; }
.sc-act { margin-left: auto; display: inline-flex; align-items: center; }
.sc-wrong { font-size: 13px; min-height: 32px; }

/* the activity chart and the weeks */
.sc-chart { display: block; height: auto; margin: 6px 0 4px; overflow: visible; }
.sc-chart line { stroke: var(--line); }
.sc-chart rect.pos { fill: var(--cobalt); }
.sc-chart rect.neg { fill: var(--danger); }
.sc-chart text { font-family: var(--sans); font-size: 11px; fill: var(--soft); font-variant-numeric: tabular-nums; }
.sc-weeks > li { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; border-top: 1px solid var(--line); outline-offset: 4px; }
.sc-week-top h3 { font-family: var(--sans); font-size: 15px; line-height: 1.3; font-weight: 600; }
.sc-week-top p { margin-left: auto; font-size: 14px; line-height: 1.3; color: var(--soft); white-space: nowrap; }
.sc-net { font-weight: 600; }
.sc-net.pos { color: var(--cobalt); }
.sc-net.neg { color: var(--danger); }
.sc-lines { display: flex; flex-direction: column; gap: 5px; }
.sc-lines li, .sc-lines-empty { font-size: 14px; line-height: 1.45; color: var(--soft); }
.sc-lines li.neg { color: var(--danger); }

/* rules and what counts */
.sc-rules { display: flex; flex-direction: column; gap: 8px; }
.sc-rules p { font-size: 14px; line-height: 1.5; color: var(--soft); }
.sc-chips-block { display: flex; flex-direction: column; gap: 8px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chips .chip { white-space: normal; }

/* what the manager sees, and the 90-day counters */
.sc-sees { font-size: 15px; line-height: 1.5; color: var(--soft); }
.sc-sees strong { color: var(--ink); font-weight: 600; }
.sc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 10px; }
.sc-tiles li { background: var(--porcelain); border-radius: 4px; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-tile-n { font-weight: 300; font-size: 28px; line-height: 1.1; color: var(--cobalt); font-variant-numeric: lining-nums; }
.sc-tile-t { font-size: 13px; line-height: 1.3; color: var(--soft); overflow-wrap: anywhere; }

/* ---- the computer page ---- */
.sc-desk { gap: 28px; }
.sc-desk .card { padding: 28px; }
.sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sc-head-text { gap: 10px; }
.sc-head-text p { font-size: 16px; line-height: 1.45; color: var(--soft); }
.sc-head .btn { white-space: nowrap; font-weight: 500; }
.sc-row1 { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; }
.sc-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sc-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }

.sc-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sc-hero .score-mark .serif { font-size: 56px !important; }
.sc-hero-tier { font-size: 17px; line-height: 1.4; font-weight: 500; }
.sc-hero-small { font-size: 13px; line-height: 1.4; opacity: .9; }
.sc-hero-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .25); text-align: left; }
.sc-hero-parts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-k, .sc-s { opacity: .85; }
.sc-k { font-size: 13px; line-height: 1.4; }
.sc-v { font-size: 26px; line-height: 1.1; }
.sc-s { font-size: 12px; line-height: 1.4; }

.sc-parts { gap: 18px; }
.sc-parts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.sc-tight { gap: 8px; }
.sc-kv { display: flex; align-items: baseline; gap: 10px; }
.sc-kv .serif { font-size: 22px; line-height: 1; }

.sc-track-card { gap: 8px; }
.sc-act-card { gap: 10px; scroll-margin-top: 96px; }
.sc-act-card .sc-weeks { margin-top: 6px; }

.sc-ladder { gap: 10px; }
.sc-here { margin-left: auto; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--cobalt); text-align: right; }
.sc-track { position: relative; height: 28px; margin: 4px 0 8px; }
.sc-track::before { content: ""; position: absolute; left: 28px; right: 28px; top: 12px; height: 3px; background: var(--line); }
.sc-track i { position: absolute; left: 28px; top: 12px; height: 3px; width: calc((100% - 56px) * var(--p)); background: var(--cobalt); }
.sc-track b { position: absolute; top: 4px; left: calc(28px + (100% - 56px) * var(--p) - 9px); width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--cobalt); border: 3px solid var(--shell); }
.sc-rungs { display: grid; gap: 24px; align-items: start; }
.sc-rung { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sc-rung h3 { font-family: var(--sans); font-size: 16px; line-height: 1.2; font-weight: 600; color: var(--soft); }
.sc-rung.reached h3 { color: var(--ink); }
.sc-rung .row p { font-size: 13px; line-height: 1.2; color: var(--soft); margin-top: 2px; }
.sc-rung-text { font-size: 13px; line-height: 1.5; color: var(--soft); }

.sc-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--cobalt); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sc-wrong-text { font-size: 15px; line-height: 1.5; }
.sc-desk .sc-row3 .card .btn.block { font-weight: 500; }

/* ---- the phone pages ---- */
.sc-ph { display: flex; flex-direction: column; padding-bottom: 24px; }
.sc-ph .back { color: var(--white); min-height: 44px; }
.sc-ph-hero { background: var(--cobalt); color: var(--white); padding: 8px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sc-ph-back { width: 100%; display: flex; }
.sc-ph-hero .score-mark .serif { font-size: 54px !important; }
.sc-ph-h1 { margin-top: 8px; font-family: var(--serif); font-weight: 300; font-size: 36px; line-height: 1.1; }
.sc-ph-tier { font-size: 15px; line-height: 1.4; }
.sc-ph-parts { font-size: 13px; line-height: 1.4; }
.sc-sec { padding: 24px 24px 0; display: flex; flex-direction: column; }
.sc-gap6 { gap: 6px; }
.sc-ph-h2 { font-family: var(--sans); font-size: 15px; line-height: 1.4; font-weight: 600; }
.sc-ph-num { margin-left: auto; font-size: 15px; font-weight: 500; }
.sc-ph-p { font-size: 15px; line-height: 1.45; color: var(--soft); }
.sc-ph .sc-rules p { font-size: 14px; line-height: 1.45; }
.sc-ph .sc-sub { margin-top: 2px; margin-bottom: 4px; }
.sc-ph .sc-areas { margin-top: 8px; }
.sc-ph .sc-sees { font-size: 14px; line-height: 1.45; }
.sc-ph .sc-tiles li { background: var(--white); }
.sc-ph .sc-wrong-text { font-size: 14px; line-height: 1.45; color: var(--soft); }
.sc-ph .sc-open, .sc-ph .sc-outcome { margin: 4px 0; }
.sc-ph .sc-outcome { background: var(--white); }
.sc-ph .btn.block { min-height: 48px; font-weight: 500; margin-top: 6px; }
.sc-ph .empty { margin-top: 8px; }

/* phone ladder, top rung first */
.sc-vladder { margin-top: 12px; }
.sc-vrow { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
.sc-vcol { position: relative; }
.sc-vcol .badge { position: relative; display: block; width: 52px; height: 52px; background: var(--porcelain); }
.sc-vcol .vline { position: absolute; left: 25px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.sc-vcol .vline.on { background: var(--cobalt); }
.sc-vcol .vline.first { top: 26px; }
.sc-vcol .vline.last { bottom: auto; height: 26px; }
.sc-vtext { padding: 3px 0 20px; display: flex; flex-direction: column; gap: 3px; }
.sc-vtext h3 { font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--soft); }
.sc-vrow.reached .sc-vtext h3 { color: var(--ink); }
.sc-vtext .num { font-size: 14px; color: var(--soft); }
.sc-vtext p { font-size: 14px; line-height: 1.4; color: var(--soft); }
.sc-vmark .sc-vcol { height: 48px; }
.sc-vmark .up { position: absolute; left: 25px; top: 0; height: 24px; width: 2px; background: var(--line); }
.sc-vmark .down { position: absolute; left: 25px; top: 24px; bottom: 0; width: 2px; background: var(--cobalt); }
.sc-vmark b { position: absolute; left: 18px; top: 16px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--cobalt); border: 3px solid var(--shell); }
.sc-vmark p { display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--cobalt); }

/* phone activity */
.sc-ph-strip { position: relative; height: 150px; flex: none; background: var(--cobalt); overflow: hidden; }
.sc-ph-strip svg { position: absolute; right: -92px; top: -120px; }
.sc-ph-strip .back { position: absolute; left: 24px; top: 8px; }
.sc-ph-title { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.sc-ph-weeks .sc-weeks > li { border-top: 0; padding: 0 0 24px; }
.sc-ph-weeks .sc-week-top { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; align-items: baseline; }
.sc-ph-weeks .sc-week-top p { font-size: 15px; font-weight: 500; color: var(--ink); }
.sc-ph-weeks .btn.block { margin-top: 0; }