/* Seven Sky site, the free site check. Builds on site.css and offers.css. */
.check-form { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin-top: 8px; }
.check-row { display: flex; flex-wrap: wrap; gap: 12px; }
.check-row input { flex: 1 1 280px; min-height: 52px; padding: 0 16px; font: 500 18px var(--font-body); color: var(--navy); background: var(--cream); border: 2px solid var(--cream); }
.check-row input::placeholder { color: #5a6aa0; }
.check-row input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.check-row .btn { cursor: pointer; }
.check-row .btn[disabled] { opacity: 0.6; cursor: progress; }
.check-small { font-size: 14px; line-height: 1.5; color: var(--mist); }
.check-status { min-height: 24px; font-size: 17px; line-height: 1.5; color: var(--gold); max-width: 720px; }
.check-result { padding: 56px var(--gutter) 72px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; row-gap: 40px; align-items: start; border-top: 1px solid transparent; }
.check-result[hidden] { display: none; }
.check-score { display: flex; flex-direction: column; gap: 16px; }
.check-score h2 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.12; color: var(--cream); overflow-wrap: anywhere; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.check-list li { padding: 18px 0 18px 44px; border-bottom: 1px solid var(--band-2); position: relative; }
.check-list li:last-child { border-bottom: 0; }
.check-list li::before { position: absolute; left: 0; top: 16px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font: 700 15px var(--font-display); }
.check-list li.is-ok::before { content: "\2713"; background: var(--cream); color: var(--navy); }
.check-list li.is-no::before { content: "\2715"; background: var(--gold); color: var(--navy); }
.check-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--cream); }
.check-state { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); margin-left: 8px; }
.check-detail { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--mist); overflow-wrap: anywhere; }
.check-fix { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--cream); }
.check-fix b { color: var(--gold); font-weight: 700; }
.check-next { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 8px; }
/* The seven skies: each group of checks is one sky, with a cloud deck along its foot (js/sky-pages.js reads data-deck). */
.sky-count { font-size: 18px; line-height: 1.5; color: var(--cream); font-weight: 500; }
.sky-ladder { display: flex; flex-direction: column; gap: 6px; max-width: 340px; }
.rung { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; font-size: 14px; line-height: 1.3; color: var(--mist); }
.rung .bar { height: 18px; border: 1px solid var(--rung); }
.rung.is-clear .bar { background: var(--rung); }
.rung.is-cloudy .bar { border-style: dashed; }
.rung-name { color: var(--cream); }
.rung-state { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.rung.is-cloudy .rung-state { color: var(--gold); }
.rung-1 { --rung: var(--band-2); } .rung-2 { --rung: var(--band-3); } .rung-3 { --rung: var(--band-4); } .rung-4 { --rung: var(--band-5); }
.rung-5 { --rung: var(--band-6); } .rung-6 { --rung: var(--cream); } .rung-7 { --rung: var(--gold); }
.sky-steps { display: flex; flex-direction: column; }
.sky-step { padding-bottom: 76px; margin-bottom: 76px; }
.sky-step:last-child { margin-bottom: 0; }
.sky-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--band-2); }
.sky-num { min-width: 52px; font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 1; color: var(--gold); }
.sky-name { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--cream); }
.sky-line { margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--mist); }
.sky-state { padding: 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--navy); background: var(--cream); }
.is-cloudy > .sky-head .sky-state { background: var(--gold); }
@media (max-width: 1129px) { .check-result { grid-template-columns: minmax(0, 1fr); } .check-next { grid-column: 1; } .check-score h2 { font-size: 32px; } }
@media screen and (max-width: 700px) { .check-result { padding-top: 40px; padding-bottom: 56px; } .check-row .btn { width: 100%; justify-content: center; } .check-list li { padding-left: 40px; } .check-name { font-size: 18px; }
  .sky-step { padding-bottom: 56px; margin-bottom: 56px; } .sky-head { grid-template-columns: auto minmax(0, 1fr); row-gap: 18px; column-gap: 14px; } .sky-num { font-size: 56px; min-width: 40px; } .sky-name { font-size: 22px; } .sky-state { grid-column: 1 / -1; justify-self: start; } }
@media (forced-colors: active) { .check-result { border-top-color: CanvasText; } .rung.is-clear .bar { background: CanvasText; } .sky-state { border: 1px solid; } }
@media print { .sky-step { padding-bottom: 8px; margin-bottom: 8px; break-inside: avoid; } .sky-ladder { display: none; } .sky-num, .sky-name, .sky-count { color: var(--navy); } .sky-line { color: var(--espresso); } .sky-state { background: none; border: 1px solid var(--navy); }
  .check-form, .check-next .btn { display: none; } .check-result { padding: 16px 0; } .check-score h2, .check-name { color: var(--navy); } .check-detail { color: var(--espresso); } .check-fix { color: var(--ink); } }