/*
 * See It Work: a season on one vineyard. The stylesheet for see-it-work-season.js, every rule
 * scoped under .ss so nothing here reaches the rest of the site, and nothing there reaches in.
 * The stage is drawn at 760 x 475 and scaled to its column (see the script), so its type and
 * layout are fixed sizes on purpose.
 */
.ss { --ink: #101828; --ink-2: #475467; --ink-3: #667085; --line: #e4e7ec; --soft: #f9fafb;
    --brand: #7f56d9; --brand-soft: #f4ebff; --brand-ring: #d6bbfb;
    --ok: #067647; --ok-soft: #ecfdf3; --warn: #b54708; --warn-soft: #fffaeb; --bad: #d92d20;
    --ease: 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.ss .sw { left: 4%; top: 13%; width: 60%; padding: 12px 14px; }
.ss .sw-grid { display: grid; grid-template-columns: 30px repeat(24, 1fr); gap: 2px; margin-top: 8px; }
.ss .sw-grid span { height: 15px; border-radius: 3px; background: #f2f4f7; transition: background 0.4s, box-shadow 0.4s; }
.ss .sw-grid .d { height: auto; background: none; font-size: 10px; font-weight: 700; color: var(--ink-3); line-height: 15px; }
.ss .sw-grid .hr { height: auto; background: none; font-size: 9px; color: var(--ink-3); text-align: center; }
.ss .sw-grid .good { background: #47cd89; }
.ss .sw-grid .bad { background: #fecdca; }
.ss .sw-grid .none { background: repeating-linear-gradient(45deg, #f2f4f7 0 3px, #e4e7ec 3px 5px); }
.ss .sw-grid .pick { box-shadow: 0 0 0 2px var(--brand); }
.ss .sw-key { display: flex; gap: 10px; margin-top: 8px; font-size: 10.5px; color: var(--ink-3); }
.ss .sw-key i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }
.ss .rules { left: 67%; top: 13%; width: 29%; }
.ss .rules .meta { flex-direction: column; align-items: flex-start; }
.ss .recipe { left: 4%; top: 14%; width: 52%; }
.ss .mat { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); transition: all var(--ease); }
.ss .mat .dot { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; }
.ss .mat .grow { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; }
.ss .mat .grow span { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.ss .checks { left: 59%; top: 14%; width: 37%; }
.ss .check { display: flex; gap: 8px; margin-top: 9px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); transition: all var(--ease); }
.ss .check b { flex-shrink: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; color: #fff; background: #17b26a; }
.ss .check.warn b { background: #f79009; }
.ss .msgs { left: 4%; top: 14%; width: 92%; padding: 0; overflow: hidden; }
.ss .msgs table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ss .msgs th { padding: 9px 12px; text-align: left; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--soft); }
.ss .msgs td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.ss .msgs td b { color: var(--ink); }
.ss .thread { left: 4%; top: 46%; width: 92%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.ss .resp4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ss .resp4 span { padding: 6px 8px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); transition: all .4s; }
.ss .resp4 .on { color: #175cd3; background: #eff8ff; box-shadow: inset 0 0 0 1px #84caff; }
.ss .bub { max-width: 70%; padding: 7px 11px; border-radius: 13px; font-size: 12px; line-height: 1.4; transition: all var(--ease); }
.ss .bub.in { align-self: flex-start; background: #f2f4f7; border-bottom-left-radius: 4px; }
.ss .bub.out { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.ss .psr { left: 4%; top: 14%; width: 60%; }
.ss .psr-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 28px; gap: 8px; align-items: center; margin-top: 9px; font-size: 12.5px; transition: all var(--ease); }
.ss .psr-row.h { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ss .psr-row .ok { color: var(--ok); font-weight: 700; }
.ss .times { left: 67%; top: 14%; width: 29%; }
.ss .oprec { left: 32%; top: 18%; width: 64%; }
.ss .oprec .meta { margin-top: 8px; }
.ss .wx { left: 4%; top: 13%; width: 92%; padding: 0; overflow: hidden; }
.ss .wx table, .ss .wb table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ss .wx th, .ss .wb th { padding: 8px 12px; text-align: left; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--soft); }
.ss .wx td, .ss .wb td { padding: 7px 12px; border-top: 1px solid var(--line); color: var(--ink-2); transition: all .4s; }
.ss .wx td b, .ss .wb td b { color: var(--ink); }
.ss .wx .hot td { background: #fffaeb; }
.ss .eq { left: 4%; top: 16%; width: 92%; padding: 18px 20px; }
.ss .eq-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.ss .term { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); transition: all var(--ease); }
.ss .term b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ss .term span { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.ss .term.res { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-ring); }
.ss .term.res b { color: var(--brand); }
.ss .term.neg { background: #fffaeb; box-shadow: inset 0 0 0 1px #fedf89; }
.ss .term.neg b { color: var(--warn); }
.ss .op { font-size: 18px; font-weight: 700; color: var(--ink-3); transition: opacity .4s; }
.ss .wb { left: 4%; top: 14%; width: 92%; padding: 0; overflow: hidden; }
.ss .wb.side { left: 32%; width: 64%; }
.ss .wb td:first-child, .ss .wb th:first-child { white-space: nowrap; }
.ss .wb .hot td { background: #fffaeb; }
.ss .wb .fixed td { background: var(--ok-soft); }
.ss .ev { left: 4%; top: 14%; width: 52%; }
.ss .ev .fld { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; }
.ss .ev .fld span:first-child { width: 92px; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.ss .ev .val { flex: 1; padding: 5px 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); min-height: 26px; transition: all .4s; }
.ss .ev .val.hot { box-shadow: inset 0 0 0 2px var(--brand-ring); }
.ss .ev-why { left: 59%; top: 14%; width: 37%; }
.ss .wthread { left: 4%; top: 14%; width: 92%; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.ss .watered { fill: url(#ss-water-hatch); opacity: 0; transition: opacity 0.8s; pointer-events: none; }
.ss .watered.on { opacity: 1; }
.ss .cal { left: 4%; top: 13%; width: 92%; padding: 12px 14px; }
.ss .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; }
.ss .cal-grid .dow { font-size: 10px; font-weight: 700; color: var(--ink-3); text-align: center; }
.ss .cal-grid .day { position: relative; min-height: 34px; padding: 3px 4px; border-radius: 6px; font-size: 10px; color: var(--ink-3); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); transition: all .4s; }
.ss .cal-grid .day b { display: block; margin-top: 2px; padding: 1px 4px; border-radius: 4px; font-size: 9px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .4s; }
.ss .cal-grid .day.lit b { opacity: 1; }
.ss .cal-grid .day.ours { box-shadow: inset 0 0 0 2px var(--brand-ring); }
.ss .tpl { left: 4%; top: 13%; width: 92%; padding: 0; overflow: hidden; }
.ss .tpl table, .ss .op table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ss .tpl th, .ss .op th { padding: 8px 12px; text-align: left; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--soft); }
.ss .tpl td, .ss .op td { padding: 7px 12px; border-top: 1px solid var(--line); color: var(--ink-2); transition: all .4s; }
.ss .tpl td b, .ss .op td b { color: var(--ink); }
.ss .tpl .used td { background: var(--brand-soft); }
.ss .opr { left: 4%; top: 13%; width: 50%; }
.ss .opr .fld { display: flex; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.ss .opr .fld span:first-child { width: 96px; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.ss .ids { left: 57%; top: 13%; width: 39%; }
.ss .ids .fld { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 7px 10px; border-radius: 9px; font-size: 12px; box-shadow: inset 0 0 0 1px var(--line); transition: all var(--ease); }
.ss .ids .fld span:first-child { font-weight: 700; color: var(--ink-3); font-size: 11px; }
.ss .tasks4 { position: absolute; transition: all var(--ease); left: 4%; top: 15%; width: 92%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ss .tcard { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: all var(--ease); }
.ss .tcard .t { font-size: 13.5px; }
.ss .tcard .meta { margin-top: 8px; }
.ss .exp { left: 4%; top: 13%; width: 54%; }
.ss .exp .fld { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; }
.ss .exp .fld span:first-child { width: 86px; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.ss .file { left: 62%; top: 22%; width: 34%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px; text-align: center; }
.ss .file .doc { width: 54px; height: 68px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px var(--ok); display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; }
.ss .file .doc i { display: block; height: 3px; border-radius: 999px; background: #17b26a; }
.ss .tally { left: 4%; top: 13%; width: 92%; padding: 16px 18px; }
.ss .tally-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.ss .tally-row div { padding: 10px 12px; border-radius: 10px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); transition: all var(--ease); }
.ss .tally-row b { display: block; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ss .tally-row span { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.ss .proof { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.ss .sprayed { fill: url(#ss-spray-hatch); opacity: 0; transition: opacity 0.8s; pointer-events: none; }
.ss .sprayed.on { opacity: 1; }
.ss .map.off { opacity: 0; }
.ss .map { position: absolute; left: 6%; top: 13%; width: 46%; height: 80%; transition: all var(--ease); transform-origin: top left; }
.ss .map.small { left: 4%; top: 13%; width: 24%; height: 42%; }
.ss .map svg { width: 100%; height: 100%; overflow: visible; }
.ss .cell { transition: opacity 0.45s ease, fill 0.6s ease; }
.ss .flag { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: 0; transition: opacity 0.4s; }
.ss .flag.on { opacity: 1; animation: ss-pulse 1.4s ease-in-out infinite; }
@keyframes ss-pulse { 50% { stroke-opacity: 0.25; } }
.ss .pin { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; transform-box: fill-box; transform-origin: bottom center; }
.ss .legend { position: absolute; left: 56%; top: 16%; display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3); transition: opacity var(--ease); }
.ss .ramp { width: 150px; height: 8px; border-radius: 999px; }
.ss .ramp-ndvi { background: linear-gradient(90deg, #d7191c, #fdae61, #ffffbf, #a6d96a, #1a9641); }
.ss .ramp-roc { background: linear-gradient(90deg, #2166ac, #92c5de, #f7f7f7, #f4a582, #d7191c); }
.ss .ramp-row { display: flex; justify-content: space-between; width: 150px; }
.ss .note { position: absolute; left: 56%; width: 38%; font-size: 13px; line-height: 1.45; color: var(--ink-2); transition: all var(--ease); }
.ss .card { position: absolute; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06), inset 0 0 0 1px var(--line); padding: 14px 16px; transition: all var(--ease); }
.ss .off { opacity: 0 !important; transform: translateY(10px) !important; pointer-events: none; }
.ss .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ss .t { margin-top: 4px; font-size: 15px; font-weight: 700; }
.ss .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ss .chip { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--soft); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ss .chip.warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px #fedf89; }
.ss .chip.ok { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px #abefc6; }
.ss .chip.brand { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-ring); }
.ss .sms { margin-top: 10px; max-width: 92%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #f2f4f7; font-size: 12px; line-height: 1.4; transition: all var(--ease); }
.ss .phone { position: absolute; left: 34%; top: 12%; width: 25%; height: 82%; border-radius: 26px; background: #101828; padding: 8px; transition: all var(--ease); }
.ss .phone-in { position: relative; height: 100%; border-radius: 20px; overflow: hidden; background: #000; }
.ss .phone img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease-out; }
.ss .phone.go img { transform: scale(1.12); }
.ss .rec { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.92); transition: all var(--ease); }
.ss .rec b { font-size: 10px; color: var(--bad); white-space: nowrap; }
.ss .wave { display: flex; align-items: center; gap: 2px; height: 18px; flex: 1; }
.ss .wave span { flex: 1; border-radius: 2px; background: var(--brand); transition: height .5s; }
.ss .summary { left: 61%; top: 12%; width: 36%; padding: 12px 14px; }
.ss .summary .row { margin-top: 7px !important; font-size: 11.5px !important; }
.ss .summary .row { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); transition: all var(--ease); }
.ss .summary .row b { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.ss .example { margin-top: 10px; font-size: 10.5px; color: var(--ink-3); }
.ss .compare { position: absolute; left: 32%; top: 14%; width: 64%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transition: all var(--ease); }
.ss .compare figure { margin: 0; }
.ss .compare img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.ss .compare figcaption { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.ss .record { left: 32%; top: 66%; width: 64%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ss .record .thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.ss .record .grow { flex: 1; min-width: 0; }
.ss .record .t { margin: 0; font-size: 13px; }



.ss { color: var(--ink); }
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss .ss-in { position: absolute; left: 0; top: 0; width: 760px; height: 475px; transform-origin: top left; }
@media (max-width: 900px) { .ss .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ss .glance-grid { grid-template-columns: 1fr; } .ss .chapters { justify-content: flex-start; } }
.ss .sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A share card is a still: everything at its final state at once, nothing caught mid-fade. */
.ss.ss-card *, .ss.ss-card *::before, .ss.ss-card *::after { transition: none !important; animation: none !important; }


/* ---------- The look: header, season line, stage, steps ---------- */
.ss { --ease: 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.ss .sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.ss .sh-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.ss .sh-tabs::-webkit-scrollbar { display: none; }
.ss .chapter { position: relative; display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 9px 14px 11px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-3); white-space: nowrap; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.ss .chapter:hover { color: var(--ink); }
.ss .chapter.on { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px -4px rgba(16,24,40,.12); }
.ss .cn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-size: 11px; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line); }
.ss .chapter.on .cn { color: #fff; background: linear-gradient(135deg, #9e77ed, #6941c6); box-shadow: none; }
.ss .cbar { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 999px; background: transparent; overflow: hidden; }
.ss .chapter.on .cbar { background: var(--brand-soft); }
.ss .cbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--brand); transition: width .7s linear; }
.ss .sh-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.ss .stages { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); margin: 22px 0 18px; }
.ss .stages::before { content: ""; position: absolute; left: 5.5%; right: 5.5%; top: 5px; height: 2px; border-radius: 999px; background: var(--line); }
.ss .stage-pt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center; letter-spacing: .01em; }
.ss .stage-pt i { width: 12px; height: 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); z-index: 1; transition: all .4s; }
.ss .stage-pt.past i { background: var(--brand-ring); box-shadow: none; }
.ss .stage-pt.now i { background: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.ss .stage-pt.now { color: var(--brand); font-weight: 700; }

.ss .player { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.ss .stage { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden;
  background: repeating-linear-gradient(122deg, #f4f6f2 0 4px, #eef0eb 4px 6px);
  box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 24px 48px -24px rgba(16,24,40,.28); }
.ss .bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 12px; font-weight: 700; color: var(--ink-2); z-index: 5; }
.ss .bar img { width: 18px; }
.ss .bar .where { margin-left: auto; font-weight: 600; color: var(--ink-3); }
.ss .fig-note { margin: 12px 4px 0; font-size: 12.5px; color: var(--ink-3); }

.ss .side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ss .side-h { display: flex; flex-direction: column; gap: 4px; }
.ss .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.ss .side-t { margin: 0; font-family: var(--font-display, inherit); font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.ss .steps { display: flex; flex-direction: column; }
.ss .step { position: relative; display: block; width: 100%; padding: 9px 0 9px 32px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.ss .step::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.ss .step:first-child::before { top: 16px; }
.ss .step:last-child::before { bottom: calc(100% - 18px); }
.ss .step-h { font-size: 15px; font-weight: 600; color: var(--ink-3); transition: color .3s; }
.ss .step:hover .step-h { color: var(--ink); }
.ss .step .n { position: absolute; left: 0; top: 9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ink-3); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: all .3s; }
.ss .step.done .n { color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand-ring); }
.ss .step.on .n { color: #fff; background: linear-gradient(135deg, #9e77ed, #6941c6); box-shadow: 0 0 0 4px var(--brand-soft); }
.ss .step.on .step-h { color: var(--ink); font-weight: 700; }
.ss .step p { display: none; margin: 4px 0 2px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ss .step.on p { display: block; }
.ss .ctl { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ss .ic { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.ss .ic:hover { background: var(--soft); }
.ss .nextch { margin-left: auto; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ss .nextch:hover { background: #344054; }

.ss .glance { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.ss .glance summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-2); list-style: none; }
.ss .glance summary::-webkit-details-marker { display: none; }
.ss .glance summary::after { content: " +"; color: var(--ink-3); }
.ss .glance[open] summary::after { content: " −"; }
.ss .glance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }

@media (max-width: 1100px) { .ss .player { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; } }
@media (max-width: 900px) {
  .ss .player { grid-template-columns: 1fr; }
  .ss .stages .stage-pt span { display: none; }
  .ss .stages .stage-pt.now span { display: block; white-space: nowrap; }
  .ss .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ss .sh-tools { width: 100%; }
  .ss .chapter { padding: 8px 11px 10px; font-size: 13px; }
  .ss .glance-grid { grid-template-columns: 1fr; }
  .ss .side-t { font-size: 24px; }
}

/* A share card is the stage alone, still: everything at its final state at once. */
.ss.ss-card .sh, .ss.ss-card .stages, .ss.ss-card .side, .ss.ss-card .glance, .ss.ss-card .fig-note { display: none; }
.ss.ss-card .player { display: block; }
.ss.ss-card *, .ss.ss-card *::before, .ss.ss-card *::after { transition: none !important; animation: none !important; }
.ss .glance-ch { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.ss .glance-ch small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ss .glance ol { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ss .glance ol button { padding: 2px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ss .glance ol button:hover { color: var(--brand); }
.ss .glance ol .on { color: var(--brand); font-weight: 700; }

/*
 * ---------- Phone: a portrait stage ----------
 * Below 640 px the season draws on 480 x 600 instead of 760 x 475, and every card that sat beside
 * another sits under it instead. Positions are per part, keyed by data-ss; !important wins over the
 * few inline positions in the markup.
 */
.ss.narrow .stage { aspect-ratio: 4 / 5; }
.ss.narrow .ss-in { width: 480px; height: 600px; }
.ss.narrow .bar .where { display: none; }
.ss.narrow [data-ss="map"] { left: 8% !important; top: 9% !important; width: 84% !important; height: 46% !important; }
.ss.narrow [data-ss="map"].small { left: 4% !important; top: 9% !important; width: 40% !important; height: 30% !important; }
.ss.narrow .legend { left: 8% !important; top: 57% !important; }
.ss.narrow [data-ss="note1"], .ss.narrow [data-ss="note2"] { left: 8% !important; top: 66% !important; width: 84% !important; font-size: 15px; }
.ss.narrow [data-ss="task"] { left: 4% !important; top: 64% !important; width: 92% !important; }
.ss.narrow [data-ss="phone"] { left: 4% !important; top: 42% !important; width: 40% !important; height: 55% !important; }
.ss.narrow [data-ss="captured"] { left: 48% !important; top: 42% !important; width: 48% !important; }
.ss.narrow [data-ss="summary"] { left: 48% !important; top: 9% !important; width: 48% !important; }
.ss.narrow [data-ss="compare"] { left: 4% !important; top: 42% !important; width: 92% !important; }
.ss.narrow [data-ss="record"] { left: 4% !important; top: 82% !important; width: 92% !important; }
.ss.narrow [data-ss="sw"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="rules"] { left: 4% !important; top: 60% !important; width: 92% !important; }
.ss.narrow [data-ss="rules"] .meta { flex-direction: row; flex-wrap: wrap; }
.ss.narrow [data-ss="recipe"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="checks"] { left: 4% !important; top: 51% !important; width: 92% !important; }
.ss.narrow [data-ss="msgs"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="msgs"] th:nth-child(3), .ss.narrow [data-ss="msgs"] td:nth-child(3) { display: none; }
.ss.narrow [data-ss="thread"] { left: 4% !important; top: 42% !important; width: 92% !important; }
.ss.narrow [data-ss="psr"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="times"] { left: 4% !important; top: 46% !important; width: 92% !important; }
.ss.narrow [data-ss="times"] .meta { flex-direction: row !important; flex-wrap: wrap; }
.ss.narrow [data-ss="oprec"] { left: 4% !important; top: 42% !important; width: 92% !important; }
.ss.narrow [data-ss="wx"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="wx"] th:nth-child(2), .ss.narrow [data-ss="wx"] td:nth-child(2) { display: none; }
.ss.narrow [data-ss="wx-note"] { left: 6% !important; top: 66% !important; width: 88% !important; font-size: 15px; }
.ss.narrow [data-ss="eq"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="wb"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="wb"].side { top: 42% !important; }
.ss.narrow [data-ss="wb-note"] { left: 6% !important; top: 62% !important; width: 88% !important; font-size: 15px; }
.ss.narrow [data-ss="ev"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="ev-why"] { left: 4% !important; top: 50% !important; width: 92% !important; }
.ss.narrow [data-ss="wthread"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="cal"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="tpl"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="tpl"] th:nth-child(2), .ss.narrow [data-ss="tpl"] td:nth-child(2) { display: none; }
.ss.narrow [data-ss="opr"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="ids"] { left: 4% !important; top: 50% !important; width: 92% !important; }
.ss.narrow [data-ss="tasks4"] { left: 4% !important; top: 9% !important; width: 92% !important; grid-template-columns: 1fr !important; }
.ss.narrow [data-ss="tasks-note"] { left: 6% !important; top: 76% !important; width: 88% !important; font-size: 15px; }
.ss.narrow [data-ss="exp"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow [data-ss="file"] { left: 4% !important; top: 56% !important; width: 92% !important; }
.ss.narrow [data-ss="tally"] { left: 4% !important; top: 9% !important; width: 92% !important; }
.ss.narrow .tally-row { grid-template-columns: repeat(2, 1fr); }
.ss.narrow .proof { grid-template-columns: 1fr; }

/* The crew task's progress: Sent, Delivered, Opened, Responded, Completed. */
.ss .prog5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ss .prog5 span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ink-3); transition: color .4s; }
.ss .prog5 i { width: 16px; height: 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--line); background: #fff; transition: all .4s; }
.ss .prog5 small { font-weight: 600; font-size: 9.5px; color: var(--ink-3); min-height: 12px; }
.ss .prog5 .on { color: var(--ink); }
.ss .prog5 .on i { background: #17b26a; box-shadow: none; }