/* study.css — Study in Korea (Sample 5 "Ask + tiles", chosen 2026-09-06).
 *
 * Rules baked in: the first screen holds the visitor in 2-3 seconds (one
 * headline, tiles, numbers, icons, colour, no paragraph); more pages with less
 * on each, every page pulling to the next; three timing states everywhere in
 * this order and colour: Open now (green), Closing soon (amber), Opens soon
 * (blue). Theme tokens only, so dark mode holds. Classes are prefixed ss-. */

.ss { max-width: 720px; margin: 0 auto; padding: 4px 0 32px; }
.ss-bp { display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 9px; border-radius: 999px; background: var(--wg-warn-tint); color: var(--wg-warn-ink); font-size: 0.66rem; font-weight: 800; }
.ss-bp .wg-ico-in { width: 12px; height: 12px; }
.ss-eyebrow { font-size: 0.7rem; font-weight: 800; color: var(--wg-color-dark); text-transform: uppercase; letter-spacing: 0.14em; }
.ss h1 { font-size: 2.15rem; font-weight: 800; line-height: 1.06; letter-spacing: -0.04em; margin: 5px 0 15px; }
.ss-back { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--wg-muted); text-decoration: none; margin-bottom: 10px; }
.ss-h2 { font-size: 0.95rem; margin: 20px 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
.ss-h2 a { font-size: 0.74rem; font-weight: 700; color: var(--wg-color-dark); text-decoration: none; }
.ss-ini { display: grid; place-items: center; border-radius: 50%; background: var(--wg-tint); color: var(--wg-color-dark); font-weight: 800; }
.ss-ini.is-gov { background: var(--wg-info-tint); color: var(--wg-info-ink); }
.ss-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 14px; background: var(--wg-color); color: var(--wg-on-brand); font-weight: 700; font-size: 1rem; text-decoration: none; border: 0; }
.ss-cta .wg-ico-in { width: 18px; height: 18px; }
/* The second errand: read the page that describes it. Quieter than the apply
   button, because only one of the two is the thing most people came to do. */
.ss-cta2 { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 8px; border-radius: 14px; border: 1px solid var(--wg-border); background: var(--wg-raised); color: var(--wg-text); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.ss-cta2 .wg-ico-in { width: 16px; height: 16px; color: var(--wg-color-dark); }
.ss-msteps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.ss-msteps li { display: flex; gap: 10px; align-items: flex-start; }
.ss-msteps li i { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--wg-tint); color: var(--wg-color-dark); font-style: normal; font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ss-msteps li span { font-size: 0.88rem; line-height: 1.5; }
.ss-ghostrow { display: flex; gap: 8px; margin-top: 8px; }
.ss-ghost { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 12px; border: 1px solid var(--wg-border); background: var(--wg-raised); color: var(--wg-text); font: inherit; font-weight: 700; font-size: 0.86rem; }
.ss-ghost .wg-ico-in { width: 16px; height: 16px; }
.ss-foot { font-size: 0.7rem; color: var(--wg-muted); line-height: 1.5; margin: 18px 0 0; }
.ss-src { font-size: 0.7rem; color: var(--wg-muted); margin: 14px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.ss-src a { color: var(--wg-color-dark); text-decoration: none; }
.ss-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ss-chips::-webkit-scrollbar { display: none; }
.ss-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--wg-border-soft); background: var(--wg-raised); color: var(--wg-text); font: inherit; font-size: 0.8rem; font-weight: 700; }
.ss-chip .wg-ico-in { width: 14px; height: 14px; }
.ss-chip.is-on { background: var(--wg-color); border-color: var(--wg-color); color: var(--wg-on-brand); }
.ss-days { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 800; }
.ss-days b { font-size: 1.15rem; line-height: 1; }
.ss-days small { font-size: 0.66rem; font-weight: 700; }
.ss-tone-soon { color: var(--wg-warn-ink); }
.ss-tone-open { color: var(--wg-color-dark); }
.ss-tone-up { color: var(--wg-info-ink); }
.ss-help { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--wg-tint); margin-top: 18px; text-decoration: none; color: inherit; }
.ss-help .ss-ini { width: 44px; height: 44px; background: var(--wg-raised); }
.ss-help .ss-ini .wg-ico-in { width: 20px; height: 20px; }
.ss-help b { display: block; font-size: 0.9rem; }
.ss-help span { font-size: 0.74rem; color: var(--wg-muted); }
.ss-help .ss-arr { color: var(--wg-color-dark); font-size: 1.2rem; }
/* It had space above and none below, so on a programme page it sat flush
   against "Who do I ask?" (founder, 2026-09-11). Where a note follows it, as on
   the hub, the two margins collapse and nothing changes. */
.ss-help { margin-bottom: 14px; }

.ss-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.ss-stat { padding: 12px 10px; border-radius: 14px; background: var(--wg-surface); text-align: center; }
.ss-stat b { display: block; font-size: 1.6rem; line-height: 1; letter-spacing: -0.03em; }
.ss-stat span { display: block; font-size: 0.68rem; color: var(--wg-muted); font-weight: 700; margin-top: 4px; }
.ss-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: 14px; border-radius: 20px; text-decoration: none; color: var(--wg-text); background: var(--wg-surface); border: 1px solid var(--wg-border-soft); }
/* Direction 3: the card stays white, the colour lives in the edge, the icon
   chip and the title. Brighter than a pale wash, quieter than four blocks. */
.ss-tile { background: var(--wg-raised); border: 1.5px solid var(--wg-border-soft); }
.ss-tile.t1 { border-color: var(--ss-amber-edge); }
.ss-tile.t1 b { color: var(--ss-amber-ink); }
.ss-tile.t2 { border-color: var(--ss-blue-edge); }
.ss-tile.t2 b { color: var(--ss-blue-ink); }
.ss-tile.t3 { border-color: var(--ss-green-edge); }
.ss-tile.t3 b { color: var(--ss-green-ink); }
.ss-tile.t4 { border-color: var(--ss-grey-edge); }
.ss-tile .ss-tico { width: 46px; height: 46px; border-radius: 50%; background: var(--ss-green); display: grid; place-items: center; color: #fff; box-shadow: var(--wg-shadow-card); }
.ss-tile.t1 .ss-tico { background: var(--ss-amber); }
.ss-tile.t2 .ss-tico { background: var(--ss-blue); color: #fff; }
.ss-tile.t3 .ss-tico { background: var(--ss-green); }
.ss-tile.t4 .ss-tico { background: var(--ss-grey); color: #fff; }
.ss-tile .ss-tico .wg-ico-in { width: 22px; height: 22px; }
.ss-tile b { display: block; font-size: 1.05rem; line-height: 1.15; letter-spacing: -0.02em; }
.ss-tile span { display: block; font-size: 0.72rem; color: var(--wg-muted); font-weight: 700; margin-top: 3px; }
.ss-rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.ss-rail::-webkit-scrollbar { display: none; }
.ss-rcard { flex: none; width: 168px; padding: 14px 13px 12px; border-radius: 18px; background: var(--wg-raised); border: 1px solid var(--wg-border-soft); box-shadow: var(--wg-shadow-card); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.ss-rcard .ss-days b { font-size: 2rem; }
.ss-rcard .ss-ini { width: 34px; height: 34px; font-size: 0.72rem; }
.ss-rcard .ss-rname { font-size: 0.8rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ss-rcard .ss-rtag { align-self: flex-start; font-size: 0.64rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--wg-tint); color: var(--wg-color-dark); }
/* list */
.ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ss-gcard { border-radius: 18px; overflow: hidden; background: var(--wg-raised); border: 1px solid var(--wg-border-soft); box-shadow: var(--wg-shadow-card); text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.ss-gtop { display: flex; height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--wg-tint); }
.ss-gtop.is-gov { background: var(--wg-info-tint); }
.ss-gtop .ss-ini { width: 40px; height: 40px; background: var(--wg-raised); font-size: 0.8rem; }
.ss-gbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ss-gname { font-size: 0.82rem; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-gicons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 8px; }
/* a fact worth a mark on a card is worth its word: an unlabelled grey icon
   said nothing in the two seconds a visitor gives the page */
.ss-gtag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: var(--wg-tint); color: var(--wg-color-dark); font-size: 0.66rem; font-weight: 800; line-height: 1.2; }
.ss-gtag .wg-ico-in { width: 12px; height: 12px; }
.ss-gcard.is-k-sch .ss-gtag { background: var(--wg-warn-tint); color: var(--wg-warn-ink); }
.ss-gcard.is-k-deg .ss-gtag { background: var(--wg-info-tint); color: var(--wg-info-ink); }
/* a group with one card alone in a two-column grid left a hole beside it */
.ss-grid > :only-child { grid-column: 1 / -1; }
/* no kind label to carry: the colour band shrinks to a slim strip so the card
   does not open with an empty block of colour */
.ss-gtop.is-nokind { height: 40px; padding: 0 10px; justify-content: flex-end; }
.ss-gtop.is-nokind .ss-ini { width: 28px; height: 28px; font-size: 0.66rem; }
.ss-gicon { width: 28px; height: 28px; border-radius: 9px; background: var(--wg-surface); color: var(--wg-color-dark); display: grid; place-items: center; }
.ss-gicon.is-off { color: var(--wg-faint); }
.ss-gicon .wg-ico-in { width: 15px; height: 15px; }
/* detail */
.ss-ring { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin: 4px 0 16px; }
@media (min-width: 720px) { .ss-dtitle { font-size: 1.4rem; } }
.ss-ring svg { width: 96px; height: 96px; }
.ss-ringtx { position: relative; }
.ss-ringnum { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ss-ringnum b { display: block; font-size: clamp(0.95rem, 1.7rem, 1.7rem); line-height: 1.05; letter-spacing: -0.03em; }
/* A localised month is not three letters. "8 September" and "8 сентября" have
   to fit the same circle as "8 Jun" did, so the number wraps and shrinks
   rather than spilling out of the ring. */
.ss-ringnum b { max-width: 78px; margin: 0 auto; overflow-wrap: anywhere; font-size: 1.25rem; }
@supports (font-size: 1cqw) { .ss-ringnum b { font-size: clamp(0.95rem, 1.25rem, 1.7rem); } }
.ss-ringnum span { display: block; font-size: 0.6rem; font-weight: 800; color: var(--wg-muted); text-transform: uppercase; }
.ss-dtitle { font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.025em; margin: 0; }
.ss-dsub { font-size: 0.74rem; color: var(--wg-muted); font-weight: 700; margin-top: 4px; }
.ss-lead { font-size: 0.92rem; line-height: 1.45; color: var(--wg-text); margin: -6px 0 14px; }
.ss-cov { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ss-cv { text-align: center; padding: 12px 6px 10px; border-radius: 16px; background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-cv.is-no { background: var(--wg-surface); color: var(--wg-faint); }
.ss-cv .wg-ico-in { width: 22px; height: 22px; }
.ss-cv b { display: block; font-size: 0.68rem; margin-top: 6px; color: var(--wg-text); }
.ss-cv.is-no b { color: var(--wg-muted); }
.ss-cv small { display: block; font-size: 0.62rem; color: var(--wg-muted); }
.ss-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
/* A grid track defaults to min-content, so one long value pushed the tile past
   the card edge instead of wrapping inside it. */
.ss-fact { min-width: 0; padding: 10px; border-radius: 14px; background: var(--wg-surface); }
.ss-fact span { display: block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; color: var(--wg-muted); }
.ss-fact b { display: block; font-size: 0.9rem; margin-top: 3px; line-height: 1.25; overflow-wrap: break-word; hyphens: none; }
/* A third of a phone card is narrower than the word "consulate", so the
   documents block uses two columns and lets the last tile span both. */
.ss-facts.is-doc { grid-template-columns: 1fr 1fr; }
.ss-facts.is-doc .ss-fact:nth-child(3):last-child { grid-column: 1 / -1; }
/* A document line that names a downloadable form carries the form. */
.ss-lines li span { display: block; }
.ss-doclink { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 0.76rem; font-weight: 800; color: var(--wg-color-dark); text-decoration: none; white-space: nowrap; }
.ss-doclink .wg-ico-in { width: 12px; height: 12px; }
.ss-methods { display: grid; gap: 8px; margin-top: 8px; }
.ss-method { padding: 11px 12px; border-radius: 14px; background: var(--wg-surface); display: grid; gap: 3px; }
.ss-method b { font-size: 0.88rem; }
.ss-mfee { font-size: 0.82rem; font-weight: 700; color: var(--wg-text); font-variant-numeric: tabular-nums; }
.ss-mnote2 { font-size: 0.76rem; color: var(--wg-muted); line-height: 1.45; }
.ss-method a { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.76rem; font-weight: 800; color: var(--wg-color-dark); text-decoration: none; }
.ss-method a .wg-ico-in { width: 12px; height: 12px; }
.ss-mgroup { margin-top: 14px; }
.ss-mghead { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ss-mghead span { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 0.7rem; }
/* What you pay: one number first. Green is the scholarship's money, dark is
   yours, hatching is a figure the school never published. A number never
   changes meaning without its caption changing too. */
.ss-payhero { text-align: center; padding: 4px 0 14px; }
.ss-ph-big { display: block; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ss-ph-big.is-mine { color: var(--wg-danger-ink); }
.ss-ph-big.is-theirs { color: var(--wg-color-dark); }
.ss-ph-big.is-words { font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: normal; }
.ss-ph-cap { display: block; margin-top: 8px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wg-muted); }
.ss-ph-sub { display: block; margin-top: 5px; font-size: 0.8rem; color: var(--wg-muted); }
.ss-payleg { display: flex; justify-content: space-between; gap: 12px; font-size: 0.72rem; font-weight: 800; margin-bottom: 6px; }
.ss-payleg .is-g { color: var(--wg-color-dark); }
.ss-payleg .is-k { color: var(--wg-danger-ink); }
.ss-payleg .is-na { color: var(--wg-muted); }
.ss-paybar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--wg-surface); margin-bottom: 12px; }
.ss-paybar i { display: block; height: 100%; }
.ss-paybar .is-paid { background: var(--wg-color); }
.ss-paybar .is-you { background: var(--wg-danger-ink); }
.ss-paybar .is-unknown { background: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--wg-border) 5px, var(--wg-border) 10px); }
.ss-payline { display: flex; justify-content: space-between; gap: 12px; font-size: 0.78rem; color: var(--wg-muted); padding: 7px 0; border-bottom: 1px solid var(--wg-border-soft); }
.ss-payline b { color: var(--wg-text); font-variant-numeric: tabular-nums; }
.ss-payline.is-out b { color: var(--wg-danger-ink); }
.ss-payline.is-in b { color: var(--wg-color-dark); }
/* Row values follow the same rule as the hero. Red here is not an error, it is
   money leaving you, so it is scoped to this modal and never leaks out. */
.ss-mval.is-in { color: var(--wg-color-dark); }
.ss-mval.is-out { color: var(--wg-danger-ink); }
.ss-mval .ss-mkind { color: var(--wg-muted); }
/* A sentence the source wrote, with no label of its own. */
.ss-mrow.is-plain { display: block; }
.ss-mrow.is-plain span { font-size: 0.84rem; line-height: 1.5; color: var(--wg-text); }
.ss-payline b.is-na { color: var(--wg-muted); }
.ss-paygap { margin-top: 14px; border-radius: 14px; background: var(--wg-surface); padding: 12px 13px; }
.ss-pg-h { display: flex; align-items: center; gap: 8px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wg-muted); }
.ss-pg-hatch { flex: none; width: 22px; height: 10px; border-radius: 3px; border: 1px solid var(--wg-border); background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--wg-border) 4px, var(--wg-border) 8px); }
.ss-paygap p { margin: 7px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--wg-text); }
.ss-paygap a { display: inline-block; margin-top: 7px; font-size: 0.78rem; font-weight: 800; color: var(--wg-color-dark); text-decoration: none; }
/* Who to ask. One tap from asking, not a string to copy by hand. */
.ss-contact { margin-top: 8px; }
.ss-ct-who { font-size: 0.86rem; font-weight: 700; margin-bottom: 8px; }
.ss-ct-links { display: grid; gap: 8px; }
.ss-ct-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--wg-border); background: var(--wg-surface); color: var(--wg-text); text-decoration: none; font-size: 0.86rem; font-weight: 700; overflow-wrap: anywhere; }
.ss-ct-links a .wg-ico-in { flex: none; width: 16px; height: 16px; color: var(--wg-color-dark); }
.ss-ct-note { margin-top: 8px; font-size: 0.78rem; color: var(--wg-muted); line-height: 1.5; }
.ss-where { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-wh { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--wg-border-soft); background: var(--wg-raised); font-weight: 800; font-size: 0.86rem; }
.ss-wh .wg-ico-in { width: 20px; height: 20px; color: var(--wg-color-dark); }
.ss-stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ss-step { text-align: center; }
.ss-step i { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 5px; border-radius: 50%; background: var(--wg-color); color: var(--wg-on-brand); font-style: normal; font-weight: 800; font-size: 0.8rem; }
.ss-step span { font-size: 0.64rem; font-weight: 700; color: var(--wg-muted); display: block; line-height: 1.25; }
.ss-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-date { padding: 12px; border-radius: 14px; background: var(--wg-surface); }
.ss-date span { display: block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; color: var(--wg-muted); }
.ss-date b { display: block; font-size: 1.05rem; margin-top: 2px; }
.ss-date.is-key { background: var(--wg-warn-tint); }
.ss-date.is-key b, .ss-date.is-key span { color: var(--wg-warn-ink); }

.ss-hero { display: block; border-radius: 24px; padding: 20px 18px 18px; background: var(--wg-color); color: var(--wg-on-brand); text-decoration: none; margin-bottom: 14px; position: relative; overflow: hidden; }
.ss-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.ss-hero .ss-hk { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.ss-hero .ss-hn { font-size: 3.2rem; line-height: 1; font-weight: 800; letter-spacing: -0.05em; margin: 8px 0 0; }
.ss-hero .ss-hn small { font-size: 0.9rem; font-weight: 700; margin-left: 4px; letter-spacing: 0; }
.ss-hero .ss-ht { font-size: 0.98rem; font-weight: 700; margin-top: 10px; line-height: 1.3; max-width: 26ch; }
.ss-hero .ss-ha { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--wg-on-brand); color: var(--wg-color); display: grid; place-items: center; font-size: 1.2rem; }
.ss-short { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.ss-sc { text-align: center; text-decoration: none; color: var(--wg-text); }
.ss-sc .ss-sci { width: 58px; height: 58px; margin: 0 auto 6px; border-radius: 20px; background: var(--wg-surface); border: 1px solid var(--wg-border-soft); display: grid; place-items: center; color: var(--wg-color-dark); }
.ss-sc .ss-sci .wg-ico-in { width: 24px; height: 24px; }
.ss-sc span { font-size: 0.7rem; font-weight: 800; }
.ss-cover { display: block; border-radius: 20px; overflow: hidden; background: var(--wg-raised); border: 1px solid var(--wg-border-soft); box-shadow: var(--wg-shadow-card); text-decoration: none; color: inherit; margin-bottom: 10px; }
.ss-band { height: 88px; display: flex; align-items: flex-end; justify-content: space-between; padding: 12px 14px; background: var(--wg-tint); position: relative; }
.ss-band.is-gov { background: var(--wg-info-tint); }
.ss-band.is-priv { background: var(--wg-warn-tint); }
.ss-band .ss-bini { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.05em; color: var(--wg-color-dark); opacity: 0.9; line-height: 1; }
.ss-band.is-gov .ss-bini { color: var(--wg-info-ink); }
.ss-band.is-priv .ss-bini { color: var(--wg-warn-ink); }
.ss-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--wg-raised); font-size: 0.72rem; font-weight: 800; box-shadow: var(--wg-shadow-card); }
.ss-pill .wg-ico-in { width: 12px; height: 12px; }
.ss-cbody { display: block; padding: 12px 14px 14px; }
.ss-cname { display: block; font-size: 0.96rem; font-weight: 800; line-height: 1.25; }
.ss-ckick { display: block; font-size: 0.72rem; color: var(--wg-muted); font-weight: 700; margin-top: 3px; }
.ss-ctags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ss-ctag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--wg-surface); color: var(--wg-text); }
.ss-ctag .wg-ico-in { width: 12px; height: 12px; color: var(--wg-color-dark); }
.ss-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 14px; background: var(--wg-surface); margin: 8px 0 14px; }
.ss-seg button { border: 0; background: transparent; padding: 9px 4px; border-radius: 11px; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--wg-muted); }
.ss-seg button.is-on { background: var(--wg-raised); color: var(--wg-text); box-shadow: var(--wg-shadow-card); }
/* detail */
.ss-dband { margin: 0 -16px 14px; padding: 18px 16px 18px; background: var(--wg-info-tint); color: var(--wg-info-ink); }
.ss-dband.is-uni { background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-dband .ss-dk { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.ss-dband h1 { font-size: 1.5rem; color: var(--wg-text); margin: 6px 0 10px; }
.ss-dband .ss-pill { color: var(--wg-warn-ink); }
.ss-card { border-radius: 18px; border: 1px solid var(--wg-border-soft); background: var(--wg-raised); box-shadow: var(--wg-shadow-card); padding: 14px; margin-bottom: 10px; }
.ss-card h3 { margin: 0 0 10px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wg-muted); }
.ss-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-ic { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.8rem; font-weight: 700; }
.ss-ic .wg-ico-in { width: 16px; height: 16px; color: var(--wg-color-dark); }
.ss-ic.is-no { color: var(--wg-muted); font-weight: 600; }
.ss-ic.is-no .wg-ico-in { color: var(--wg-faint); }
.ss-big { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.ss-big small { display: block; font-size: 0.7rem; color: var(--wg-muted); font-weight: 700; letter-spacing: 0; margin-top: 4px; }
.ss-rule { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.84rem; }
.ss-rule .wg-ico-in { width: 16px; height: 16px; color: var(--wg-color-dark); flex: none; }

.ss-sum { font-size: 0.88rem; color: var(--wg-muted); margin: -6px 0 12px; }
.ss-sum b { color: var(--wg-warn-ink); }
.ss-month { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wg-muted); margin: 16px 0 4px 58px; }
.ss-tl { position: relative; }
.ss-tl::before { content: ""; position: absolute; left: 22px; top: 6px; bottom: 6px; width: 2px; background: var(--wg-border-soft); }
.ss-ev { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; text-decoration: none; color: inherit; position: relative; }
.ss-day { width: 46px; height: 46px; border-radius: 50%; background: var(--wg-raised); border: 2px solid var(--wg-border); display: grid; place-items: center; text-align: center; line-height: 1; z-index: 1; }
.ss-day b { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.ss-day span { display: block; font-size: 0.5rem; font-weight: 800; text-transform: uppercase; color: var(--wg-muted); }
.ss-ev.is-soon .ss-day { border-color: var(--wg-warn-ink); background: var(--wg-warn-tint); }
.ss-ev.is-soon .ss-day b { color: var(--wg-warn-ink); }
.ss-ev.is-open .ss-day { border-color: var(--wg-color); }
.ss-ev.is-up .ss-day { border-style: dashed; }
.ss-evn { font-size: 0.86rem; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ss-evm { font-size: 0.7rem; color: var(--wg-muted); font-weight: 700; margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.ss-evm .ss-kind { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-evm .ss-kind .wg-ico-in { width: 10px; height: 10px; }
.ss-evside { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wg-surface); color: var(--wg-muted); }
.ss-evside .wg-ico-in { width: 15px; height: 15px; }
.ss-topbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 12px; }
.ss-helpbtn { width: 44px; height: 44px; border-radius: 50%; background: var(--wg-tint); color: var(--wg-color-dark); display: grid; place-items: center; text-decoration: none; }
.ss-helpbtn .wg-ico-in { width: 20px; height: 20px; }
/* detail */
.ss-dhead { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.ss-dhead .ss-ini { width: 52px; height: 52px; font-size: 1rem; }
.ss-dhead h1 { font-size: 1.2rem; margin: 0; line-height: 1.2; }
.ss-dhead span { font-size: 0.72rem; color: var(--wg-muted); font-weight: 700; }
.ss-vt { position: relative; padding-left: 58px; margin: 6px 0 16px; }
.ss-vt::before { content: ""; position: absolute; left: 22px; top: 10px; bottom: 10px; width: 2px; background: var(--wg-border-soft); }
.ss-vte { position: relative; padding: 8px 0 14px; }
.ss-vte .ss-day { position: absolute; left: -58px; top: 2px; }
.ss-vte span { display: block; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wg-muted); }
.ss-vte b { display: block; font-size: 1.05rem; margin-top: 2px; }
.ss-vte.is-key b { font-size: 1.5rem; letter-spacing: -0.03em; color: var(--wg-warn-ink); }
.ss-vte.is-key .ss-day { border-color: var(--wg-warn-ink); background: var(--wg-warn-tint); }
.ss-vte.is-key .ss-day b { color: var(--wg-warn-ink); font-size: 1.05rem; }
.ss-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-tag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; font-size: 0.74rem; font-weight: 800; background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-tag .wg-ico-in { width: 13px; height: 13px; }
.ss-tag.is-no { background: var(--wg-surface); color: var(--wg-muted); }
.ss-lines { margin: 0; padding: 0; list-style: none; }
.ss-lines li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.84rem; padding: 5px 0; }
.ss-lines .wg-ico-in { width: 15px; height: 15px; color: var(--wg-color-dark); flex: none; margin-top: 2px; }

.ss-q { border-radius: 24px; padding: 22px 18px 18px; background: var(--wg-surface); border: 1px solid var(--wg-border-soft); }
.ss-q .ss-qk { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wg-color-dark); }
.ss-q h1 { font-size: 1.9rem; margin: 6px 0 16px; }
.ss-big3 { display: flex; flex-direction: column; gap: 8px; }
.ss-bigbtn { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 18px; background: var(--wg-raised); border: 1px solid var(--wg-border-soft); box-shadow: var(--wg-shadow-card); text-decoration: none; color: var(--wg-text); font-weight: 800; font-size: 1.02rem; }
.ss-bigbtn .ss-bico { width: 52px; height: 52px; border-radius: 16px; background: var(--wg-tint); color: var(--wg-color-dark); display: grid; place-items: center; }
.ss-bigbtn.b2 .ss-bico { background: var(--wg-info-tint); color: var(--wg-info-ink); }
.ss-bigbtn.b3 .ss-bico { background: var(--wg-warn-tint); color: var(--wg-warn-ink); }
.ss-bigbtn .ss-bico .wg-ico-in { width: 26px; height: 26px; }
.ss-bigbtn small { display: block; font-size: 0.72rem; font-weight: 700; color: var(--wg-muted); margin-top: 2px; }
.ss-bigbtn .ss-arr { color: var(--wg-faint); font-size: 1.2rem; }
.ss-orlink { display: block; text-align: center; margin-top: 12px; font-size: 0.84rem; font-weight: 700; color: var(--wg-color-dark); text-decoration: none; }
.ss-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ss-nowc { text-align: center; padding: 14px 8px; border-radius: 18px; background: var(--wg-raised); border: 1px solid var(--wg-border-soft); text-decoration: none; color: inherit; }
.ss-nowc b { display: block; font-size: 1.7rem; line-height: 1; letter-spacing: -0.04em; }
.ss-nowc.is-soon b { color: var(--wg-warn-ink); }
.ss-nowc span { display: block; font-size: 0.66rem; font-weight: 700; color: var(--wg-muted); margin-top: 5px; line-height: 1.25; }
.ss-ans { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.ss-an { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-an .wg-ico-in { width: 12px; height: 12px; }
.ss-an.is-edit { background: var(--wg-surface); color: var(--wg-muted); }
.ss-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--wg-border-soft); text-decoration: none; color: inherit; }
.ss-row .ss-ini { width: 44px; height: 44px; font-size: 0.8rem; }
.ss-rn { display: block; font-size: 0.88rem; font-weight: 800; line-height: 1.25; }
.ss-rm { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.ss-rm span { display: inline-flex; align-items: center; gap: 3px; font-size: 0.66rem; font-weight: 800; color: var(--wg-muted); }
.ss-rm .wg-ico-in { width: 12px; height: 12px; color: var(--wg-color-dark); }
.ss-rd { text-align: right; }
.ss-rd b { display: block; font-size: 1.2rem; line-height: 1; }
.ss-rd span { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; color: var(--wg-muted); }
.ss-rd.is-soon b { color: var(--wg-warn-ink); }
/* detail: question cards */
.ss-qa { border-radius: 18px; padding: 14px; background: var(--wg-raised); border: 1px solid var(--wg-border-soft); margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.ss-qa .ss-qq { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wg-muted); }
.ss-qa .ss-qv { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; line-height: 1.2; }
.ss-qa .ss-qs { font-size: 0.76rem; color: var(--wg-muted); margin-top: 3px; }
.ss-qa .ss-qi { width: 40px; height: 40px; border-radius: 12px; background: var(--wg-tint); color: var(--wg-color-dark); display: grid; place-items: center; }
.ss-qa .ss-qi .wg-ico-in { width: 20px; height: 20px; }
.ss-qa.is-wide { grid-template-columns: 1fr; }
.ss-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 8px; }
.ss-pay div { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; }
.ss-pay .wg-ico-in { width: 15px; height: 15px; color: var(--wg-color-dark); flex: none; }
.ss-pay .is-no { color: var(--wg-muted); font-weight: 600; }
.ss-pay .is-no .wg-ico-in { color: var(--wg-faint); }
.ss-dh h1 { font-size: 1.35rem; margin: 0 0 4px; }
.ss-dh span { font-size: 0.74rem; color: var(--wg-muted); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .ss * { transition: none !important; } }

.ss-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.ss-state { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--wg-border-soft); background: var(--wg-raised); text-decoration: none; color: var(--wg-text); font: inherit; cursor: pointer; }
.ss-state b { font-size: 1.5rem; line-height: 1; letter-spacing: -0.03em; }
.ss-state span { font-size: 0.66rem; font-weight: 800; margin-top: 4px; }
.ss-state.is-open b, .ss-state.is-open span { color: var(--wg-color-dark); }
.ss-state.is-soon b, .ss-state.is-soon span { color: var(--wg-warn-ink); }
.ss-state.is-up b, .ss-state.is-up span { color: var(--wg-info-ink); }
.ss-state.is-open { background: var(--wg-tint); }
.ss-state.is-soon { background: var(--wg-warn-tint); }
.ss-state.is-up { background: var(--wg-info-tint); }
.ss-states-seg .ss-state { opacity: 0.55; }
.ss-states-seg .ss-state.is-on { opacity: 1; box-shadow: var(--wg-focus-ring); }
.ss-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.ss-dot.is-open { background: var(--wg-color); }
.ss-dot.is-soon { background: var(--wg-warn-ink); }
.ss-dot.is-up { background: var(--wg-info-ink); }
.ss-dot.is-none { background: var(--wg-border); }
.ss-prep { font-size: 0.74rem; color: var(--wg-info-ink); font-weight: 700; margin: -4px 0 6px; }
.ss-rcard.is-up .ss-rtag { background: var(--wg-info-tint); color: var(--wg-info-ink); }
.ss-rcard.is-soon .ss-rtag { background: var(--wg-warn-tint); color: var(--wg-warn-ink); }
.ss-statepill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; }
.ss-statepill.is-open { background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-dates { grid-template-columns: 1fr 1fr; }
.ss-qa.is-wide > div { min-width: 0; }
.ss-qa .ss-stepper { margin-top: 8px; }
.ss-tile { min-height: 132px; }

/* ── Detail header: initials + title + one line ─────────────────────── */
.ss-dhead { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.ss-dhead .ss-ini { width: 52px; height: 52px; font-size: 1rem; }
.ss-dhead h1 { font-size: 1.25rem; margin: 0; line-height: 1.2; letter-spacing: -0.03em; }
.ss-dhead span { font-size: 0.72rem; color: var(--wg-muted); font-weight: 700; }
.ss-statepill.is-soon { background: var(--wg-warn-tint); color: var(--wg-warn-ink); }
.ss-statepill.is-up { background: var(--wg-info-tint); color: var(--wg-info-ink); }
.ss-statepill.is-closed, .ss-statepill.is-none { background: var(--wg-surface); color: var(--wg-muted); }
.ss-qa .ss-rail { margin: 8px -14px 0; padding-left: 14px; padding-right: 14px; }
.ss-qa .ss-lines { margin-top: 6px; }
.ss-qa .ss-tags { margin-top: 8px; }
.ss-qa .ss-where { margin-top: 8px; }
.ss-qa .ss-ghost { margin-top: 10px; width: 100%; }
/* A text-height link is not a tap target. Padding grows, the ink does not. */
.ss-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; min-height: 44px; padding: 0 2px; font-size: 0.78rem; font-weight: 800; color: var(--wg-color-dark); background: none; border: 0; font-family: inherit; cursor: pointer; }
.ss-cv.is-est small { color: var(--wg-warn-ink); }
.ss-cov.is-3 { grid-template-columns: repeat(3, 1fr); }
.ss-cov.is-2 { grid-template-columns: repeat(2, 1fr); }
.ss-gcard .ss-gsub { display: block; font-size: 0.68rem; color: var(--wg-muted); font-weight: 700; margin-top: -4px; }
.ss-gtop.is-lang { background: var(--wg-warn-tint); }
.ss-gtop.is-lang .ss-ini { color: var(--wg-warn-ink); }
.ss-gtop.is-inst { background: var(--wg-info-tint); }
.ss-gtop .ss-gcity { font-size: 0.7rem; font-weight: 800; color: var(--wg-muted); text-align: right; }
.ss-tile.t4 { background: var(--wg-raised); }
/* A restriction the reader must see before they start. Labelled, not a bare
   coloured bar: colour means one thing in this feature and the word carries
   the meaning. */
.ss-warn { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--wg-danger-tint, var(--wg-tint)); color: var(--wg-danger-ink); margin: 0 0 14px; }
.ss-warn b { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ss-warn span { font-size: 0.86rem; line-height: 1.45; color: var(--wg-text); }

.ss-note { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--wg-info-tint); color: var(--wg-info-ink); margin-top: 14px; text-decoration: none; }
.ss-note .ss-ini { width: 40px; height: 40px; background: var(--wg-raised); color: var(--wg-info-ink); }
.ss-note .ss-ini .wg-ico-in { width: 18px; height: 18px; }
.ss-note b { display: block; font-size: 0.86rem; }
.ss-note span { font-size: 0.72rem; }
.ss-empty { padding: 22px 12px; text-align: center; color: var(--wg-muted); font-size: 0.84rem; border: 1px dashed var(--wg-border-soft); border-radius: 16px; }
.ss-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--wg-border-soft); margin: 0 0 12px; }
.ss-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--wg-muted); font: inherit; font-weight: 800; font-size: 0.8rem; padding: 6px 1px 10px; text-decoration: none; }
.ss-tab.is-on { color: var(--wg-color-dark); border-bottom-color: var(--wg-color); }

/* ── Modals ───────────────────────────────────────────────────────── */
.wg-modal-card.ss-modal { max-width: 480px; max-height: 88vh; overflow-y: auto; }
.ss-mnote { margin: 0 0 12px; color: var(--wg-muted); font-size: 0.84rem; line-height: 1.45; }
.ss-msec { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wg-muted); margin: 12px 0 6px; }
.ss-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; margin-bottom: 10px; }
.ss-field > span { color: var(--wg-muted); font-weight: 700; }
.ss-field input, .ss-field select, .ss-field textarea { padding: 9px 11px; border: 1px solid var(--wg-border); border-radius: var(--wg-radius); background: var(--wg-raised); color: var(--wg-text); font: inherit; font-size: 16px; width: 100%; box-sizing: border-box; }
.ss-opts { display: flex; flex-direction: column; gap: 6px; }
.ss-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1px solid var(--wg-border-soft); border-radius: 12px; background: var(--wg-raised); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; color: var(--wg-text); }
.ss-opt.is-on { border-color: var(--wg-color); background: var(--wg-tint); font-weight: 700; }
.ss-opt small { color: var(--wg-muted); font-weight: 400; }
.ss-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-mchips .ss-chip { min-height: 32px; }
.ss-mbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.ss-mbtns .wg-btn { width: auto; }
.ss-mbtns .is-left { margin-right: auto; }
.ss-cb { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; margin: 8px 0; }
.ss-cb input { margin-top: 3px; accent-color: var(--wg-color); }
.ss-mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--wg-border-soft); font-size: 0.86rem; }
.ss-mrow:first-of-type { border-top: 0; }
.ss-mrow b { font-weight: 700; }
.ss-mrow span { color: var(--wg-muted); font-size: 0.76rem; text-align: right; }
.ss-mrow .ss-mkind { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ss-result { border: 1px solid var(--wg-border-soft); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.ss-result b { font-size: 0.86rem; display: block; }
.ss-result span { font-size: 0.74rem; color: var(--wg-muted); }
.ss-loginnudge { text-align: center; padding: 6px 0 0; }
.ss-loginnudge p { font-size: 0.86rem; color: var(--wg-muted); margin: 0 0 12px; line-height: 1.5; }
.ss-dotrow { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ss-dotrow.is-on { background: var(--wg-color); }
.ss-dotrow.is-off { background: var(--wg-border); }
.ss-modal .ss-cov { margin-top: 4px; }

/* ── Calendar (timeline) ──────────────────────────────────────────── */
.ss-month { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wg-muted); margin: 16px 0 4px 58px; }
.ss-tl { position: relative; }
.ss-tl::before { content: ""; position: absolute; left: 22px; top: 6px; bottom: 6px; width: 2px; background: var(--wg-border-soft); }
.ss-ev { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; text-decoration: none; color: inherit; position: relative; }
.ss-day { width: 46px; height: 46px; border-radius: 50%; background: var(--wg-raised); border: 2px solid var(--wg-border); display: grid; place-items: center; text-align: center; line-height: 1; z-index: 1; }
.ss-day b { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.ss-day span { display: block; font-size: 0.5rem; font-weight: 800; text-transform: uppercase; color: var(--wg-muted); }
.ss-ev.is-soon .ss-day { border-color: var(--wg-warn-ink); background: var(--wg-warn-tint); }
.ss-ev.is-soon .ss-day b { color: var(--wg-warn-ink); }
.ss-ev.is-open .ss-day { border-color: var(--wg-color); }
.ss-ev.is-up .ss-day { border-style: dashed; border-color: var(--wg-info-ink); }
.ss-ev.is-up .ss-day b { color: var(--wg-info-ink); }
.ss-ev.is-closed { opacity: 0.55; }
.ss-evn { font-size: 0.86rem; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ss-evm { font-size: 0.7rem; color: var(--wg-muted); font-weight: 700; margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.ss-evm .ss-kind { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-evm .ss-kind .wg-ico-in { width: 10px; height: 10px; }
.ss-evside { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wg-surface); color: var(--wg-muted); }
.ss-evside .wg-ico-in { width: 15px; height: 15px; }
.ss-topbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 12px; }
.ss-helpbtn { width: 44px; height: 44px; border-radius: 50%; background: var(--wg-tint); color: var(--wg-color-dark); display: grid; place-items: center; text-decoration: none; }
.ss-helpbtn .wg-ico-in { width: 20px; height: 20px; }
.ss-vt { position: relative; padding-left: 58px; margin: 6px 0 4px; }
.ss-vt::before { content: ""; position: absolute; left: 22px; top: 10px; bottom: 10px; width: 2px; background: var(--wg-border-soft); }
.ss-vte { position: relative; padding: 8px 0 14px; }
.ss-vte .ss-day { position: absolute; left: -58px; top: 2px; }
.ss-vte span { display: block; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wg-muted); }
.ss-vte b { display: block; font-size: 1.05rem; margin-top: 2px; }
.ss-vte.is-key b { font-size: 1.4rem; letter-spacing: -0.03em; color: var(--wg-warn-ink); }
.ss-vte.is-key .ss-day { border-color: var(--wg-warn-ink); background: var(--wg-warn-tint); }
.ss-vte.is-key .ss-day b { color: var(--wg-warn-ink); font-size: 1.05rem; }
.ss-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-tag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; font-size: 0.74rem; font-weight: 800; background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-tag .wg-ico-in { width: 13px; height: 13px; }
.ss-tag.is-no { background: var(--wg-surface); color: var(--wg-muted); }
.ss-tag.is-info { background: var(--wg-info-tint); color: var(--wg-info-ink); }
.ss-lines { margin: 0; padding: 0; list-style: none; }
.ss-lines li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.84rem; padding: 5px 0; }
.ss-lines .wg-ico-in { width: 15px; height: 15px; color: var(--wg-color-dark); flex: none; margin-top: 2px; }
@media (min-width: 720px) { .ss-tiles { grid-template-columns: repeat(4, 1fr); } .ss-tile { min-height: 140px; } .ss-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Compat for the Trusted Help blueprint page (study_bp_trusted.php) ── */
.wg-st-trust { display: flex; gap: 9px; padding: 11px; background: var(--wg-tint); border-radius: 13px; color: var(--wg-color-dark); }
.wg-st-trust .wg-ico-in { flex: none; width: 18px; height: 18px; }
.wg-st-trust p { font-size: 0.74rem; line-height: 1.45; margin: 0; }
.wg-st-cb { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; }
.wg-st-cb input { margin-top: 3px; accent-color: var(--wg-color); }
.wg-st-bp { display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 9px; border-radius: 999px; background: var(--wg-warn-tint); color: var(--wg-warn-ink); font-size: 0.66rem; font-weight: 800; }
.wg-st-bp .wg-ico-in { width: 12px; height: 12px; }
.wg-st-mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--wg-border-soft); font-size: 0.86rem; }
.wg-st-mrow b { font-weight: 700; }
.wg-st-mrow span { color: var(--wg-muted); font-size: 0.78rem; text-align: right; }
.wg-st-msec { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wg-muted); margin: 12px 0 6px; }

/* ── Words over numbers (founder, 2026-09-06 evening) ───────────────── */
.ss-when { display: inline-flex; flex-direction: column; line-height: 1; }
.ss-when b { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.ss-when small { font-size: 0.64rem; font-weight: 700; margin-top: 3px; color: var(--wg-muted); }
.ss-when.is-open b { color: var(--wg-color-dark); }
.ss-when.is-soon b { color: var(--wg-warn-ink); }
.ss-when.is-up b { color: var(--wg-info-ink); }
.ss-when.is-closed b, .ss-when.is-none b { color: var(--wg-muted); }
.ss-gtop .ss-when { align-items: flex-end; text-align: right; }
.ss-states.is-words .ss-state { flex-direction: row; gap: 7px; padding: 10px 6px; }
.ss-states.is-words .ss-state span { margin-top: 0; font-size: 0.7rem; }
.ss-states.is-words .ss-dot { margin: 0; width: 9px; height: 9px; }
.ss-ringnum b { font-size: 1.15rem; letter-spacing: -0.02em; }

/* .ss h1 (0,1,1) outranks .ss-dtitle (0,1,0); pin the detail title size. */
.ss h1.ss-dtitle { font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.025em; margin: 0; }
@media (min-width: 720px) { .ss h1.ss-dtitle { font-size: 1.4rem; } }

/* ── One colour meaning: KIND (2026-09-06 evening). Scholarship amber, school /
   admission blue, Korean course green, help neutral. States are words. ── */
.ss-tile.t1 { background: var(--wg-raised); }
.ss-tile.t1 .ss-tico { color: #fff; }
.ss-tile.t2 { background: var(--wg-raised); }
.ss-tile.t1 .ss-tico { background: var(--ss-amber); }
.ss-tile.t2 .ss-tico { background: var(--ss-blue); color: #fff; }
.ss-tile.t3 { background: var(--wg-raised); }
.ss-tile.t3 .ss-tico { color: #fff; }
.ss-tile.t4 { background: var(--wg-raised); }
.ss-tile.t4 .ss-tico { color: #fff; background: var(--ss-grey); box-shadow: none; }

.ss-khead { display: flex; align-items: center; gap: 7px; }
.ss-kico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.ss-kico .wg-ico-in { width: 14px; height: 14px; }
.ss-klabel { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.is-k-sch .ss-kico, .ss-gtop.is-k-sch { background: var(--wg-warn-tint); }
.is-k-sch .ss-kico, .is-k-sch .ss-klabel { color: var(--wg-warn-ink); }
.is-k-deg .ss-kico, .ss-gtop.is-k-deg { background: var(--wg-info-tint); }
.is-k-deg .ss-kico, .is-k-deg .ss-klabel { color: var(--wg-info-ink); }
.is-k-lang .ss-kico, .ss-gtop.is-k-lang { background: var(--wg-tint); }
.is-k-lang .ss-kico, .is-k-lang .ss-klabel { color: var(--wg-color-dark); }
.ss-rcard { gap: 7px; }
.ss-rcard .ss-rname { font-size: 0.86rem; margin-top: 2px; }
.ss-rsub { font-size: 0.68rem; color: var(--wg-muted); font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-rwhen { font-size: 0.7rem; color: var(--wg-muted); font-weight: 700; margin-top: auto; }
.ss-gtop .ss-ini { background: var(--wg-raised); color: var(--wg-text); }
.ss-gbody .ss-rwhen { margin-top: 0; }

/* States are words: neutral dots, neutral pills, neutral day circles. */
.ss-dot.is-open, .ss-dot.is-soon, .ss-dot.is-up, .ss-dot.is-none { background: var(--wg-faint); }
.ss-states.is-words .ss-state.is-open, .ss-states.is-words .ss-state.is-soon, .ss-states.is-words .ss-state.is-up { background: var(--wg-raised); }
.ss-states.is-words .ss-state span, .ss-states.is-words .ss-state b { color: var(--wg-text); }
.ss-states-seg .ss-state.is-on { box-shadow: none; border-color: var(--wg-text); }
.ss-statepill.is-open, .ss-statepill.is-soon, .ss-statepill.is-up { background: var(--wg-surface); color: var(--wg-text); }
.ss-prep { color: var(--wg-muted); }
.ss-ev .ss-day { border-color: var(--wg-border); background: var(--wg-raised); }
.ss-ev .ss-day b { color: var(--wg-text); }
.ss-ev.is-k-sch .ss-day { border-color: var(--wg-warn-ink); background: var(--wg-warn-tint); }
.ss-ev.is-k-deg .ss-day { border-color: var(--wg-info-ink); background: var(--wg-info-tint); }
.ss-ev.is-k-lang .ss-day { border-color: var(--wg-color); background: var(--wg-tint); }
.ss-ev.is-up .ss-day { border-style: dashed; }
.ss-ev.is-k-sch .ss-kind { background: var(--wg-warn-tint); color: var(--wg-warn-ink); }
.ss-ev.is-k-deg .ss-kind { background: var(--wg-info-tint); color: var(--wg-info-ink); }
.ss-ev.is-k-lang .ss-kind { background: var(--wg-tint); color: var(--wg-color-dark); }
.ss-vte.is-key b, .ss-vte.is-key .ss-day b { color: var(--wg-text); }
.ss-vte.is-key .ss-day { border-color: var(--wg-text); background: var(--wg-surface); }
.ss-date.is-key { background: var(--wg-surface); }
.ss-date.is-key b, .ss-date.is-key span { color: var(--wg-text); }

/* ── Find a school for me ─────────────────────────────────────────────────
   One question a screen after a two-question opening, then a verdict. Big
   tap targets, no coloured edge on anything: the words carry the meaning. */
.ss-mcta { display: flex; align-items: center; gap: 13px; padding: 15px 16px; margin: 18px 0 22px;
  border-radius: 18px; background: var(--wg-color); color: #fff; text-decoration: none;
  box-shadow: 0 6px 18px rgba(14, 175, 76, 0.22); }
.ss-mcta b { display: block; font-size: 1rem; font-weight: 800; }
.ss-mcta small { display: block; font-size: 0.78rem; opacity: 0.92; margin-top: 2px; line-height: 1.4; }
.ss-mcta-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 13px; background: rgba(255, 255, 255, 0.18); }
.ss-mcta-ic .wg-ico-in { width: 21px; height: 21px; }
.ss-mcta-go { margin-left: auto; font-weight: 800; flex: none; }

.ss-match .ss-mstep { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--wg-muted); margin: 6px 0 8px; }
.ss-mdots { display: flex; gap: 5px; margin: 0 0 16px; }
.ss-mdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--wg-border); }
.ss-mdots i.is-on { background: var(--wg-color); width: 22px; border-radius: 4px; }
.ss-mq { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 5px; letter-spacing: -0.01em; }
.ss-msub { color: var(--wg-muted); font-size: 0.88rem; margin: 0 0 16px; }

.ss-mopt { display: flex; align-items: center; gap: 12px; padding: 15px 16px; margin-bottom: 10px;
  border: 1px solid var(--wg-border-soft); border-radius: 16px; background: var(--wg-raised);
  text-decoration: none; color: inherit; box-shadow: var(--wg-shadow-card); }
.ss-mopt b { display: block; font-size: 0.98rem; font-weight: 800; }
.ss-mopt small { display: block; font-size: 0.79rem; color: var(--wg-muted); margin-top: 2px; }
.ss-mopt-go { margin-left: auto; color: var(--wg-muted); font-weight: 800; }
.ss-mopt:hover { border-color: var(--wg-color); }
.ss-mopt:hover .ss-mopt-go { color: var(--wg-color-dark); }

.ss-mform { display: block; }
.ss-mlabel { display: block; font-size: 0.86rem; font-weight: 800; margin: 14px 0 6px; }
.ss-msel { width: 100%; padding: 13px 12px; border: 1px solid var(--wg-border); border-radius: 14px;
  background: var(--wg-raised); color: var(--wg-text); font: inherit; font-size: 0.95rem; }
.ss-mhint { font-size: 0.76rem; color: var(--wg-muted); margin: 6px 0 0; }
.ss-mnext { margin-top: 20px; }

.ss-mv { border: 1px solid var(--wg-border-soft); border-radius: 16px; padding: 14px 15px; margin-bottom: 10px; }
.ss-mv b { display: block; font-size: 0.98rem; margin-bottom: 3px; }
.ss-mv span { font-size: 0.83rem; color: var(--wg-muted); line-height: 1.5; }
.ss-mv.is-ok { background: var(--wg-tint); border-color: #bfe5cd; }
.ss-mv.is-ok b { color: var(--wg-color-dark); }
.ss-mv.is-warn { background: var(--wg-warn-tint); border-color: #f0d9a8; }
.ss-mv.is-warn b { color: var(--wg-warn-ink); }
.ss-mv.is-no { background: var(--wg-danger-tint, #fdeceb); border-color: #f0c9c6; }
.ss-mv.is-no b { color: var(--wg-danger-ink, #8a2a2a); }

.ss-mpath { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; }
.ss-mstepbox { flex: 1; text-align: center; border: 1px solid var(--wg-border-soft); border-radius: 14px; padding: 11px 8px; }
.ss-mstepbox u { display: block; text-decoration: none; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--wg-muted); }
.ss-mstepbox b { font-size: 0.86rem; }
.ss-mstepbox.is-lang { background: var(--wg-tint); border-color: #cfe9d8; }
.ss-mstepbox.is-lang b { color: var(--wg-color-dark); }
.ss-mstepbox.is-deg { background: var(--wg-info-tint); border-color: #d5e0ee; }
.ss-mstepbox.is-deg b { color: var(--wg-info-ink); }
.ss-marrow { color: var(--wg-muted); font-weight: 800; flex: none; }
.ss-msrc { font-size: 0.78rem; margin: 10px 0 16px; }
.ss-msrc a { color: var(--wg-color-dark); font-weight: 700; }
:root[data-theme="dark"] .ss-mcta { box-shadow: none; }

/* A back control you can see and hit, not a line of grey text. */
.ss-mback { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px 9px 12px;
  margin: 2px 0 14px; border: 1px solid var(--wg-border); border-radius: 999px;
  background: var(--wg-raised); color: var(--wg-text); font-size: 0.84rem; font-weight: 700;
  text-decoration: none; box-shadow: var(--wg-shadow-card); }
.ss-mback:hover { border-color: var(--wg-color); color: var(--wg-color-dark); }
.ss-mback span { font-weight: 800; }

/* ── Study pages: a deeper ink and one confident green ────────────────────
   The founder found the page dull: grey text on flat white with three pastel
   card colours competing. This lifts the contrast and the accent for the
   Study pages only, following main.css's rule that dark is applied twice and
   light is never given a third override to fight. */
.ss {
  --wg-text: #0b1410;
  --wg-muted: #4d5b53;
  --wg-border: #e2e8e3;
  --wg-border-soft: #e4eae6;
  --wg-color: #00c257;
  --wg-color-dark: #00a047;
  --wg-tint: #eafaf0;
  --wg-warn-ink: #9a6000;
  --wg-warn-tint: #fff5e0;
  /* one solid accent per meaning, plus the edge it draws on a white card */
  --ss-amber: #ffb300;  --ss-amber-edge: #ffc94d;  --ss-amber-ink: #9a6000;
  --ss-blue:  #2f6bff;  --ss-blue-edge:  #8fb0ff;  --ss-blue-ink:  #1b3fa0;
  --ss-green: #00c257;  --ss-green-edge: #79dfa4;  --ss-green-ink: #0a7a38;
  --ss-grey:  #5b6b62;  --ss-grey-edge:  #dfe4e1;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] .ss {
  --wg-text: #e8ebf4; --wg-muted: #9aa5c0; --wg-border: #2c3854; --wg-border-soft: #253049;
  --wg-color: #31da79; --wg-color-dark: #28c46b; --wg-tint: #142b1e;
  --wg-warn-ink: #ecc78a; --wg-warn-tint: #3a2f14;
  --ss-amber-edge: #6b5220; --ss-amber-ink: #ecc78a;
  --ss-blue-edge: #2b3f6b; --ss-blue-ink: #a8c4f0;
  --ss-green-edge: #23503a; --ss-green-ink: #7fdca4;
  --ss-grey-edge: #303c58;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .ss {
  --wg-text: #e8ebf4; --wg-muted: #9aa5c0; --wg-border: #2c3854; --wg-border-soft: #253049;
  --wg-color: #31da79; --wg-color-dark: #28c46b; --wg-tint: #142b1e;
  --wg-warn-ink: #ecc78a; --wg-warn-tint: #3a2f14;
  --ss-amber-edge: #6b5220; --ss-amber-ink: #ecc78a;
  --ss-blue-edge: #2b3f6b; --ss-blue-ink: #a8c4f0;
  --ss-green-edge: #23503a; --ss-green-ink: #7fdca4;
  --ss-grey-edge: #303c58;
  }
}

/* ── The verdict: one line, three tiles, one action ───────────────────────
   Direction 2. The three tiles answer the three questions without a sentence;
   each opens a modal with the detail, so the screen itself stays short. */
.ss-mverdict { font-size: 1.62rem; font-weight: 800; line-height: 1.14; letter-spacing: -0.025em;
  margin: 0 0 5px; }
.ss-mtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 2px 0 15px; }
.ss-mtile { padding: 13px 8px 12px; border: 1px solid var(--wg-border-soft); border-radius: 15px;
  background: var(--wg-raised); text-align: center; font: inherit; color: inherit; cursor: pointer; }
.ss-mtile u { display: block; text-decoration: none; font-size: 0.61rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--wg-muted); margin-bottom: 5px; }
.ss-mtile b { display: block; font-size: 1.32rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.ss-mtile s { display: block; text-decoration: none; font-size: 0.67rem; color: var(--wg-muted);
  margin-top: 3px; line-height: 1.3; }
.ss-mtile.is-ok { background: var(--wg-tint); border-color: #c7e6d3; }
.ss-mtile.is-ok b { color: var(--wg-color-dark); }
.ss-mtile.is-warn { background: var(--wg-warn-tint); border-color: #eedcb8; }
.ss-mtile.is-warn b { color: var(--wg-warn-ink); }
.ss-mtile.is-no { background: var(--wg-danger-tint, #fceceb); border-color: #eecac7; }
.ss-mtile.is-no b { color: var(--wg-danger-ink, #7d2020); }
.ss-mtile:hover { border-color: var(--wg-color); }
/* Four tiles, Direction D (2026-09-11): two by two, so each number keeps its
   size and a label like "Korean courses, no test" gets room for one line. */
.ss-mtiles.is-4 { grid-template-columns: repeat(2, 1fr); }
.ss-mtiles.is-4 .ss-mtile { padding: 12px 10px; }
.ss-mtiles.is-4 .ss-mtile b { font-size: 1.55rem; }
.ss-mline .ss-mwhen { margin-left: 0; }
:root[data-theme="dark"] .ss-mtile.is-ok { border-color: #23503a; }
:root[data-theme="dark"] .ss-mtile.is-warn { border-color: #4d431f; }
:root[data-theme="dark"] .ss-mtile.is-no { border-color: #4d2a28; }

.ss-mplanbtn { width: 100%; border: 0; font: inherit; cursor: pointer; }
.ss-mlines { margin: 14px 0 4px; }
.ss-mline { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 2px;
  border: 0; border-bottom: 1px solid var(--wg-border-soft); background: none; font: inherit;
  color: inherit; text-align: left; cursor: pointer; }
.ss-mline:last-child { border-bottom: 0; }
.ss-mline b { display: block; font-size: 0.88rem; }
.ss-mline small { display: block; font-size: 0.76rem; color: var(--wg-muted); margin-top: 1px; }
.ss-mline span:nth-of-type(1) { flex: 1; min-width: 0; }
.ss-mdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ss-mdot.is-ok { background: var(--wg-color); }
.ss-mdot.is-warn { background: #d9a300; }
.ss-mdot.is-no { background: #c04a45; }
.ss-mchev { color: var(--wg-muted); font-weight: 800; flex: none; }

/* the plan, inside its modal */
.ss-mplan { counter-reset: sstep; }
.ss-mplanrow { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wg-border-soft); }
.ss-mplanrow:last-child { border-bottom: 0; }
.ss-mplann { counter-increment: sstep; width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--wg-tint); color: var(--wg-color-dark);
  font-size: 0.76rem; font-weight: 800; }
.ss-mplann::before { content: counter(sstep); }
.ss-mplanrow b { display: block; font-size: 0.9rem; }
.ss-mplanrow small { display: block; font-size: 0.77rem; color: var(--wg-muted); margin-top: 1px; line-height: 1.45; }
.ss-mwhen { margin-left: auto; align-self: center; flex: none; font-size: 0.72rem; font-weight: 800;
  color: var(--wg-warn-ink); }

/* ── Direction 3 finishing: the accent carries the meaning ───────────────── */
.ss-mcta { background: var(--ss-green); box-shadow: 0 10px 24px rgba(0, 194, 87, 0.3); }
.ss-cta { background: var(--ss-green); }
/* the small kind chip on a rail card becomes solid colour with a white glyph.
   Scoped to .ss-rcard so the grid card's coloured top band keeps its tint. */
.ss-rcard.is-k-sch .ss-kico { background: var(--ss-amber); color: #fff; }
.ss-rcard.is-k-deg .ss-kico { background: var(--ss-blue); color: #fff; }
.ss-rcard.is-k-lang .ss-kico { background: var(--ss-green); color: #fff; }
.ss-rcard.is-k-sch .ss-klabel { color: var(--ss-amber-ink); }
.ss-rcard.is-k-deg .ss-klabel { color: var(--ss-blue-ink); }
.ss-rcard.is-k-lang .ss-klabel { color: var(--ss-green-ink); }
:root[data-theme="dark"] .ss-mcta { box-shadow: none; }

/* ── The subject is typed, not picked ────────────────────────────────────
   Direction 4: one box does the work. The chips underneath are a shortcut
   for people who would rather not type, not a second decision. */
.ss-msearch { display: flex; align-items: center; gap: 9px; padding: 12px 13px;
  border: 1.5px solid var(--wg-border); border-radius: 14px; background: var(--wg-raised); }
.ss-msearch:focus-within { border-color: var(--wg-color); box-shadow: 0 0 0 3px rgba(0, 194, 87, 0.14); }
.ss-msearch-ic { display: grid; place-items: center; color: var(--wg-muted); flex: none; }
.ss-msearch-ic .wg-ico-in { width: 18px; height: 18px; }
.ss-msearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit;
  font-size: 0.95rem; font-weight: 600; color: var(--wg-text); }
.ss-msearch input::placeholder { color: var(--wg-muted); font-weight: 500; opacity: 0.75; }
.ss-msec { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wg-muted); margin: 18px 0 8px; }
.ss-mchips { display: flex; flex-wrap: wrap; gap: 7px; }
.ss-mchip { display: inline-block; padding: 9px 14px; border: 1px solid var(--wg-border);
  border-radius: 999px; font-family: inherit; font-size: 0.84rem; font-weight: 700; line-height: 1.3;
  text-decoration: none; text-align: center; color: var(--wg-text); background: var(--wg-raised);
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.ss-mchip:hover { border-color: var(--wg-color); color: var(--wg-color-dark); }
.ss-mchip.is-quiet { color: var(--wg-muted); border-style: dashed; }
.ss-mquiet { display: block; text-align: center; margin: 14px 0 2px; padding: 12px;
  border: 1px solid var(--wg-border); border-radius: 14px; font-size: 0.86rem; font-weight: 700;
  text-decoration: none; color: var(--wg-text); }
.ss-mquiet:hover { border-color: var(--wg-color); color: var(--wg-color-dark); }
/* live suggestions, when scripts are on */
.ss-msug { margin: 8px 0 0; border: 1px solid var(--wg-border-soft); border-radius: 14px;
  background: var(--wg-raised); overflow: hidden; box-shadow: var(--wg-shadow-card); }
.ss-msug button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 13px;
  text-align: left; text-decoration: none; color: inherit; font: inherit;
  border: 0; border-bottom: 1px solid var(--wg-border-soft); border-radius: 0; background: none;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.ss-msug button:last-child { border-bottom: 0; }
.ss-msug button:hover { background: var(--wg-tint); }
.ss-msug b { display: block; font-size: 0.88rem; }
.ss-msug small { display: block; font-size: 0.75rem; color: var(--wg-muted); margin-top: 1px; }

/* ── Where a language year leads ─────────────────────────────────────────
   Grouped by school, because that is the real link: the institute sits
   inside the university. A tag on every degree says whether it actually
   asks for Korean, so nobody reads the list as a reward for the year. */
.ss-mleads { display: grid; gap: 10px; margin: 4px 0 2px; }
.ss-mleadg { padding: 12px 13px; border: 1px solid var(--wg-border-soft); border-radius: 14px;
  background: var(--wg-raised); }
.ss-mleadg > b { display: block; font-size: 0.86rem; margin-bottom: 7px; }
.ss-mleadrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--wg-border-soft); text-decoration: none; color: inherit;
  font-size: 0.85rem; font-weight: 600; }
.ss-mleadrow:hover { color: var(--wg-color-dark); }
.ss-mleadnone { display: block; padding-top: 7px; border-top: 1px solid var(--wg-border-soft);
  font-size: 0.82rem; color: var(--wg-muted); }
.ss-mtag { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
  background: var(--ss-grey-edge); color: var(--wg-text); }
.ss-mtag.is-warn { background: var(--wg-warn-tint); color: var(--wg-warn-ink); }

/* ── When does it open ───────────────────────────────────────────────────
   Shown only when nothing is open, so the answer to "come back when?" sits
   where the missing deadline was. */
.ss-opens { display: grid; gap: 8px; margin: 2px 0 4px; }
.ss-openrow { padding: 11px 13px; border: 1px solid var(--wg-border-soft); border-radius: 14px;
  background: var(--wg-raised); }
.ss-openrow b { display: block; font-size: 0.84rem; margin-bottom: 2px; }
.ss-openrow span { display: block; font-size: 0.82rem; color: var(--wg-muted); font-weight: 600; }
/* Whether you can apply today, on a school card. It sits above the counts
   because it is the thing somebody scanning a grid actually wants. */
.ss-gstate { display: inline-block; align-self: flex-start; margin: 4px 0 2px; padding: 3px 9px;
  border-radius: 999px; font-size: 0.68rem; font-weight: 800; }
/* One neutral state component. Green, amber and blue already mean Korean
   course, scholarship and school, so a state chip wearing them said two things
   at once. State is carried by the word, not the hue. */
.ss-gstate.is-open, .ss-gstate.is-soon, .ss-gstate.is-up { background: var(--wg-surface); color: var(--wg-text); }
.ss-gstate.is-open .ss-beat { background: var(--wg-color); }
.ss-gstate.is-closed, .ss-gstate.is-none { background: var(--ss-grey-edge); color: var(--wg-text); }

/* ── A running round beats ───────────────────────────────────────────────
   Only the open state gets this. The ring is drawn with box-shadow so the
   dot itself never changes size and cannot nudge the text beside it. */
.ss-statepill.is-open, .ss-statepill.is-soon { display: inline-flex; align-items: center; gap: 6px; }
.ss-beat { position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: var(--wg-color); flex: none; }
.ss-beat::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wg-color); animation: ss-beat 1.8s ease-out infinite; }
@keyframes ss-beat {
  0%   { transform: scale(1); opacity: 0.5; }
  70%  { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-beat { animation: none; }
}

/* ── A rail needs a scrollbar when there is nothing to swipe ─────────────
   The rails hide their bar for touch. On a mouse that leaves the cards past
   the right edge unreachable, so the bar comes back. */
@media (pointer: fine) {
  /* Wrap rather than scroll: a mouse has no swipe, and a desktop has the room
     to show the whole set. Nothing ends up out of reach. */
  .ss-rail {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .ss-rail .ss-rcard { width: auto; flex: 1 1 168px; max-width: 240px; }
  .ss-chips { flex-wrap: wrap; overflow-x: visible; }
}

/* ── Approved 2026-09-11: cost total D, visa 2 + 4, the ring date ─────────── */

/* "What you pay" leads with what it costs to start. The total alone is red, at
   the founder's call: it is the one number that is money leaving you, so the
   rows under it carry no colour at all. */
.ss-ctot { border: 1px solid var(--wg-border-soft); background: var(--wg-bg); border-radius: 16px; padding: 14px 14px 13px; margin: 0 0 10px; }
.ss-ctot u, .ss-ctot-2 u { display: block; text-decoration: none; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-muted); }
.ss-ctot-n { font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--wg-danger-ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ss-ctot-n small { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.ss-ctot-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ss-ctot-2 > div { background: var(--wg-raised); border: 1px solid var(--wg-border-soft); border-radius: 12px; padding: 9px 10px; }
.ss-ctot-2 b { display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ss-ctot-2 s { display: block; text-decoration: none; font-size: 0.68rem; color: var(--wg-muted); line-height: 1.3; }
.ss-cchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ss-cchip { font-size: 0.66rem; font-weight: 800; border-radius: 999px; padding: 3px 9px; background: var(--wg-raised); border: 1px solid var(--wg-border-soft); color: var(--wg-muted); }
.ss-cchip.is-est { background: var(--wg-warn-tint); border-color: transparent; color: var(--wg-warn-ink); }
.ss-ctot-m { font-size: 0.72rem; color: var(--wg-muted); margin: 8px 0 0; }
.ss-mrow b small.ss-msub2 { display: block; font-size: 0.72rem; font-weight: 600; color: var(--wg-muted); margin-top: 1px; line-height: 1.35; }

/* The visa: a badge and a full-width button at the foot, and a slim line under
   Apply. Both open /visa_check. Blue, so it never competes with the green
   Apply button. */
.ss-visa { border-radius: 18px; background: var(--wg-info-tint); padding: 14px; margin-top: 14px; }
.ss-visa-top { display: flex; gap: 12px; align-items: center; }
.ss-visa-badge { width: 54px; height: 54px; border-radius: 14px; background: var(--wg-raised); color: var(--wg-info-ink); font-weight: 800; font-size: 1.05rem; display: grid; place-items: center; flex: none; letter-spacing: -0.02em; }
.ss-visa b { display: block; font-size: 0.95rem; font-weight: 800; color: var(--wg-info-ink); }
.ss-visa small { display: block; font-size: 0.76rem; color: var(--wg-info-ink); opacity: 0.85; margin-top: 1px; }
.ss-visa-btn { display: block; text-align: center; margin-top: 12px; font-weight: 800; font-size: 0.95rem; background: var(--wg-info-ink); color: var(--wg-raised); border-radius: 13px; padding: 12px; text-decoration: none; transition: transform 0.18s var(--wg-ease-spring, ease); }
.ss-visa-btn:active { transform: scale(0.98); }
.ss-visa-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 13px; padding: 11px 13px; background: var(--wg-info-tint); color: var(--wg-info-ink); text-decoration: none; margin: 0 0 14px; }
.ss-visa-line b { font-size: 0.86rem; font-weight: 800; }
.ss-visa-line span { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ss-visa-btn { transition: none; } }

/* The ring date, a big day over a small month. The old rule let the month wrap
   anywhere, and "September" came out as "Septem" and "ber". */
.ss-ringnum b { overflow-wrap: normal; word-break: keep-all; font-size: 1.55rem; line-height: 1; }
.ss-ringnum em { display: block; font-style: normal; font-size: 0.66rem; font-weight: 800; line-height: 1.15; max-width: 76px; margin: 1px auto 2px; color: var(--wg-text); }
/* A long word in a narrow fact tile goes smaller instead of breaking mid-word. */
.ss-fact b.is-long { font-size: 0.76rem; line-height: 1.3; }


/* ── Saves, approved 2026-09-11 ──────────────────────────────────────────── */
/* The hub's way back: a small Saved button beside the eyebrow (option A). */
.ss-hubtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ss-savedpill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 11px; border-radius: 999px; border: 1px solid var(--wg-border-soft); background: var(--wg-raised); color: var(--wg-text); font-size: 0.8rem; font-weight: 800; text-decoration: none; box-shadow: var(--wg-shadow-card); flex: none; }
.ss-savedpill .wg-ico-in { width: 14px; height: 14px; color: var(--wg-color-dark); fill: currentColor; }
.ss-savedpill b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--wg-color); color: #fff; font-size: 0.7rem; display: inline-grid; place-items: center; }
/* Save beside Remind me and Share: green once saved, the bookmark filled. */
.ss-savebtn.is-saved { background: var(--wg-tint); border-color: transparent; color: var(--wg-color-dark); }
.ss-savebtn.is-saved .wg-ico-in, .ss-runsave .wg-ico-in { fill: currentColor; }
.ss-savebtn[aria-busy="true"], .ss-runsave[aria-busy="true"] { opacity: 0.6; }
/* The saved page: rows of the usual cards, each with the bookmark that removes it. */
.ss-rwrap { position: relative; flex: none; display: flex; }
.ss-rwrap .ss-khead { padding-right: 26px; }
.ss-runsave { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--wg-color-dark); cursor: pointer; }
.ss-runsave .wg-ico-in { width: 17px; height: 17px; }
.ss-rcard.is-k-inst .ss-kico { background: #3a4553; color: #fff; }
:root[data-theme="dark"] .ss-rcard.is-k-inst .ss-kico { background: #5d6b7d; }
.ss-rcard.is-k-inst .ss-klabel { color: var(--wg-text); }
.ss-h2n { font-size: 0.8rem; font-weight: 700; color: var(--wg-muted); }
.ss-savedsec { margin-top: 4px; }
.ss-guestnote { margin-top: 18px; border-radius: 13px; background: var(--wg-info-tint); color: var(--wg-info-ink); padding: 11px 13px; font-size: 0.8rem; font-weight: 700; }
.ss-guestnote a { color: inherit; margin-left: 4px; }

/* The matcher's return screen: the answers, a pencil on each. */
.ss-ansbox { border: 1px solid var(--wg-border-soft); border-radius: 15px; padding: 2px 12px 10px; margin: 12px 0 2px; background: var(--wg-raised); }
.ss-arow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--wg-border-soft); font-size: 0.86rem; }
.ss-arow:first-child { border-top: 0; }
.ss-ak { color: var(--wg-muted); width: 98px; flex: none; font-size: 0.8rem; }
.ss-av { flex: 1; min-width: 0; font-weight: 800; }
.ss-arow.is-need .ss-av { color: var(--wg-warn-ink); }
.ss-achg { display: inline-block; margin-left: 6px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--wg-tint); color: var(--wg-color-dark); border-radius: 999px; padding: 2px 7px; vertical-align: 1px; }
.ss-apen { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--wg-border-soft); display: grid; place-items: center; color: var(--wg-text); flex: none; text-decoration: none; }
.ss-apen .wg-ico-in { width: 16px; height: 16px; }
.ss-arow.is-need .ss-apen { border-color: var(--wg-warn-ink); color: var(--wg-warn-ink); }
.ss-awhen { display: block; font-size: 0.72rem; color: var(--wg-muted); margin-top: 6px; }
.ss-muse { margin-top: 14px; }
.ss-mnew { display: flex; width: 100%; margin-top: 8px; text-decoration: none; }
.ss-medit .ss-msel { width: 100%; }
.ss-medit .ss-mnext { margin-top: 12px; width: 100%; border: 0; }
.ss-medit .ss-mchips { margin-top: 10px; }
.ss-mchip.is-cur { background: var(--wg-tint); border-color: var(--wg-color); color: var(--wg-color-dark); }
button.ss-mopt { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ss-mopt.is-cur { border-color: var(--wg-color); background: var(--wg-tint); }
.ss-myour { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wg-color-dark); white-space: nowrap; flex: none; }


/* ── "What you pay", under the page each figure came from (option C, 2026-09-11) ── */
.ss-srcgrp { border: 1px solid var(--wg-border-soft); border-radius: 14px; padding: 2px 11px 4px; margin-top: 10px; }
.ss-srch { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0 7px; border-bottom: 1px solid var(--wg-border-soft); font-size: 0.72rem; color: var(--wg-muted); font-weight: 700; line-height: 1.35; }
.ss-srch a { color: var(--wg-color-dark); font-weight: 800; text-decoration: none; white-space: nowrap; flex: none; }
.ss-srch + .ss-mrow { border-top: 0; }
/* A tuition every international student has waived: struck through, tagged, out of the total. */
.ss-mval.is-waived s { color: var(--wg-muted); }
.ss-wvtag { display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: var(--wg-tint); color: var(--wg-color-dark); border-radius: 999px; padding: 2px 7px; margin-top: 3px; }

/* ── Search (founder's picks 2026-09-11: box A on the hub, best match C and
   tabs B on the results page, suggestions as you type, box on list pages) ── */
.ss-sform { position: relative; margin: 0 0 14px; }
.ss-sbox { padding: 9px 12px; }
/* The site-wide input rule gives every search field its own padding and
   height, stacked inside this box's padding, and a font under 16px makes iOS
   zoom the page on focus (founder, 2026-09-11). The field inside the box is
   bare text at 16px; the box draws the border. Covers the matcher's box too. */
.ss-msearch input, .ss-msearch input:focus { padding: 0; margin: 0; min-height: 0; height: auto; border: 0; border-radius: 0; box-shadow: none; outline: 0; background: none; font-size: 16px; line-height: 1.25; }
.ss-sbox input::-webkit-search-cancel-button { cursor: pointer; }
.ss-sbox input { text-overflow: ellipsis; }
.ss-sbox input::placeholder { font-size: 0.9rem; }
.ss-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--wg-raised); border: 1px solid var(--wg-border-soft); border-radius: 16px; box-shadow: 0 12px 32px rgba(15, 20, 16, 0.18); padding: 4px 12px 10px; }
.ss-sugg .ss-srow { padding: 9px 12px; margin: 0 -12px; border-top: 0; }
.ss-sugg .ss-srow.is-hi, .ss-sugg .ss-srow:hover { background: var(--wg-surface); }
.ss-sall { display: block; text-align: center; margin-top: 6px; padding: 11px; border-radius: 12px; background: var(--wg-color); color: var(--wg-on-brand); font-weight: 800; font-size: 0.86rem; text-decoration: none; }
.ss-sall.is-hi { box-shadow: 0 0 0 3px var(--wg-tint); }
.ss-snone { font-size: 0.82rem; color: var(--wg-muted); padding: 10px 0 4px; }
.ss-srow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--wg-border-soft); text-decoration: none; color: inherit; }
.ss-slist > .ss-srow:first-child { border-top: 0; }
.ss-sico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--ss-grey); }
.ss-sico .wg-ico-in { width: 17px; height: 17px; }
.ss-srow.is-k-deg .ss-sico { background: var(--ss-blue); }
.ss-srow.is-k-lang .ss-sico { background: var(--ss-green); }
.ss-srow.is-k-sch .ss-sico { background: var(--ss-amber); }
.ss-stx { flex: 1; min-width: 0; }
.ss-stx b { font-size: 0.86rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-stx small { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: 700; color: var(--wg-muted); line-height: 1.35; }
.ss-stx small em { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wg-text); }
.ss-srow.is-k-deg small em { color: var(--ss-blue-ink); }
.ss-srow.is-k-lang small em { color: var(--ss-green-ink); }
.ss-srow.is-k-sch small em { color: var(--ss-amber-ink); }
.ss mark { background: var(--wg-tint); color: inherit; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--wg-tint); }
.ss-sdate { flex: none; min-width: 46px; text-align: center; border-radius: 12px; padding: 5px 4px 4px; background: var(--wg-surface); line-height: 1.05; }
.ss-sdate b { display: block; font-size: 1.05rem; font-weight: 800; }
.ss-sdate em { display: block; font-style: normal; font-size: 0.6rem; font-weight: 800; color: var(--wg-muted); text-transform: uppercase; }
.ss-sdate.is-soon { background: var(--wg-warn-tint); }
.ss-sdate.is-soon b, .ss-sdate.is-soon em { color: var(--wg-warn-ink); }
.ss-sdate.is-up b { color: var(--wg-info-ink); }
.ss-sdate.is-none, .ss-sdate.is-closed { background: transparent; border: 1px dashed var(--wg-border-soft); }
.ss-sdate.is-none b, .ss-sdate.is-closed b { font-size: 0.62rem; color: var(--wg-muted); padding: 5px 0; }
.ss-stabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 0 16px 2px; }
.ss-stabs::-webkit-scrollbar { display: none; }
.ss-stab { flex: none; font-size: 0.8rem; font-weight: 800; border: 1px solid var(--wg-border-soft); border-radius: 999px; padding: 7px 12px; color: var(--wg-text); text-decoration: none; background: var(--wg-raised); white-space: nowrap; }
.ss-stab i { font-style: normal; color: var(--wg-muted); margin-left: 4px; }
.ss-stab.is-on { background: var(--wg-text); color: var(--wg-raised); border-color: var(--wg-text); }
.ss-stab.is-on i { color: inherit; opacity: 0.7; }
.ss-best { display: block; text-decoration: none; color: inherit; border-radius: 18px; border: 1px solid var(--wg-border-soft); background: var(--wg-surface); padding: 13px 13px 12px; margin: 0 0 14px; }
.ss-best u { text-decoration: none; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-muted); }
.ss-bn { display: flex; align-items: center; gap: 11px; margin: 7px 0 11px; }
.ss-bn .ss-sico { width: 42px; height: 42px; border-radius: 12px; }
.ss-bn .ss-sico .wg-ico-in { width: 21px; height: 21px; }
.ss-bn b { display: block; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.ss-bn small { display: block; font-size: 0.74rem; color: var(--wg-muted); font-weight: 700; margin-top: 2px; }
.ss-bnums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ss-bnums span { background: var(--wg-raised); border-radius: 11px; padding: 7px 9px; font-size: 0.66rem; font-weight: 700; color: var(--wg-muted); line-height: 1.25; }
.ss-bnums b { display: block; font-size: 1.2rem; font-weight: 800; color: var(--wg-text); }
.ss-sfix { font-size: 0.8rem; color: var(--wg-muted); margin: -6px 0 10px; }
.ss-sfix b { color: var(--wg-text); }
.ss-scount { font-size: 0.8rem; color: var(--wg-muted); font-weight: 700; margin: 8px 0 0; }
.ss-snil { text-align: center; border-radius: 18px; background: var(--wg-surface); padding: 20px 14px; margin: 0 0 6px; }
.ss-snil .ss-sico { margin: 0 auto 10px; width: 48px; height: 48px; border-radius: 15px; background: var(--wg-raised); color: var(--wg-muted); }
.ss-snil b { display: block; font-size: 1rem; font-weight: 800; }
.ss-snil small { display: block; font-size: 0.8rem; color: var(--wg-muted); margin-top: 4px; }
.ss-chips.is-wrap { flex-wrap: wrap; overflow: visible; }
.ss-srecent .ss-srow { padding: 4px 0; }
.ss-srecent .ss-sico { background: var(--wg-surface); color: var(--wg-muted); }
.ss-srecent-go { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; padding: 7px 0; text-decoration: none; color: inherit; }
.ss-srm { flex: none; border: 0; background: none; color: var(--wg-muted); font: inherit; font-size: 1.15rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.ss-srm:hover { background: var(--wg-surface); }

/* ── The plan modal: one decision, then the queue it starts (2026-09-12) ──
   Step 1 is the only step that holds a choice, so it is the only one drawn as
   a block. Its tabs are radio inputs, which switch with no script at all. */
.ss-plan { counter-reset: sstep2; }
.ss-prow { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--wg-border-soft); align-items: center; }
.ss-prow:last-of-type { border-bottom: 0; }
.ss-pn { counter-increment: sstep2; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--wg-tint);
  color: var(--wg-color-dark); font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; }
.ss-pn::before { content: counter(sstep2); }
.ss-prow b, .ss-pickb > b { display: block; font-size: 0.88rem; }
.ss-prow small { display: block; font-size: 0.76rem; color: var(--wg-muted); margin-top: 1px; line-height: 1.45; }
.ss-pwhen { margin-left: auto; flex: none; align-self: center; font-size: 0.71rem; font-weight: 800; color: var(--wg-warn-ink); text-align: right; }
.ss-pwhen.is-soft { color: var(--wg-muted); }
.ss-pick { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--ss-green-edge);
  border-radius: 14px; background: var(--wg-tint); margin: 0 0 8px; }
.ss-pickb { flex: 1; min-width: 0; }
.ss-ptabs { margin-top: 8px; }
.ss-pr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ss-ptabbar { display: flex; gap: 5px; background: var(--wg-raised); border-radius: 12px; padding: 4px; }
.ss-ptabbar label { flex: 1; text-align: center; padding: 9px 6px; border-radius: 9px; font-size: 0.82rem; font-weight: 800;
  color: var(--wg-muted); cursor: pointer; }
#ss-route-pay:checked ~ .ss-ptabbar label[for="ss-route-pay"],
#ss-route-sch:checked ~ .ss-ptabbar label[for="ss-route-sch"] { background: var(--wg-color-dark); color: #fff; }
.ss-pr:focus-visible ~ .ss-ptabbar label[for="ss-route-pay"], .ss-pr:focus-visible ~ .ss-ptabbar label[for="ss-route-sch"] { outline: var(--wg-focus-ring); outline-offset: 2px; }
.ss-ppane { display: none; margin-top: 10px; }
#ss-route-pay:checked ~ .ss-ppane.is-pay, #ss-route-sch:checked ~ .ss-ppane.is-sch { display: block; }
.ss-ptop { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ss-green-ink); margin: 0 0 6px; }
.ss-pline { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--wg-border-soft);
  color: inherit; text-decoration: none; }
.ss-pline:last-of-type { border-bottom: 0; }
.ss-pline b { display: block; font-size: 0.85rem; }
.ss-pline small { display: block; font-size: 0.75rem; color: var(--wg-muted); margin-top: 1px; line-height: 1.4; }
.ss-plink { color: var(--ss-green-ink); font-weight: 800; }
a.ss-pline b { text-decoration: underline; text-underline-offset: 2px; }
.ss-pnote { font-size: 0.75rem; color: var(--wg-muted); line-height: 1.45; margin: 8px 0 0; }
.ss-pmores { display: flex; gap: 8px; margin-top: 10px; }
.ss-pmore { flex: 1; min-height: 44px; border: 1px solid var(--wg-border-soft); border-radius: 11px; background: var(--wg-raised);
  color: var(--wg-text); font: inherit; font-size: 0.75rem; font-weight: 800; line-height: 1.25; padding: 7px 6px; cursor: pointer;
  text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ss-pmore b { font-size: 0.95rem; color: var(--ss-green-ink); }
.ss-pfoot { font-size: 0.74rem; color: var(--wg-muted); line-height: 1.5; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--wg-border-soft); }