/* SevenBases crew components, v2.  Load AFTER the live site CSS.  Uses only tokens from sb-style.css.
   Names that already exist in the live CSS (sb-steps, sb-note, sb-disclosure, sb-hero, sb-signup-*) are NOT redefined here. */

/* Top bar: countdown and join link */
.sb-crewbar { background: var(--sb-navy); color: var(--sb-bone); font: 600 .9375rem/1.3 var(--sb-font-head); letter-spacing: .12em; text-transform: uppercase; }
.sb-crewbar .sb-wrap { display: flex; gap: var(--sb-s3); align-items: center; justify-content: center; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.sb-crewbar a { color: var(--sb-bone); text-decoration: underline; text-underline-offset: .25em; }
.sb-crewbar .dot { width: 6px; height: 6px; background: var(--sb-orange); display: inline-block; transform: rotate(45deg); }

/* Status Sun: seven rays lit by progress */
.sb-sunwrap { margin: 0; }
.sb-sun { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; }
.sb-sun .ray { fill: #1B4375; transition: fill .4s ease, transform .4s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.sb-sun .ray[data-on="true"] { fill: var(--sb-orange); transform: scale(1.05); }
.sb-sun .disc { fill: var(--sb-orange); transition: filter .6s ease; }
.sb-sun .ridge { fill: var(--sb-bone); }
.sb-sun[data-complete="true"] .disc, .sb-sun[data-complete="true"] .ray { filter: drop-shadow(0 0 16px rgba(208, 87, 35, .6)); }
.sb-sun__cap { margin-top: var(--sb-s3); font: 600 1rem/1.3 var(--sb-font-head); letter-spacing: .08em; text-transform: uppercase; color: #F3D9C6; }
.sb-sun__cap [data-base-status] { color: var(--sb-bone); font-weight: 700; }

/* Sun placed inside the live hero (desktop only; the status strip shows it on a phone) */
.sb-hero-sun { display: none; }
@media (min-width: 980px) {
  .sb-hero-sun { display: block; position: absolute; right: var(--sb-s4); top: 6rem; width: min(30vw, 400px); z-index: 3; }
  .sb-status .sb-sunwrap--mobile { display: none; }
}
.sb-status .sb-sunwrap--mobile { max-width: 340px; margin: 0 auto var(--sb-s4); }

/* Status strip: seven flags with icons */
.sb-status { background: var(--sb-white); border-top: 1px solid var(--sb-line); border-bottom: 1px solid var(--sb-line); }
.sb-status .sb-wrap { padding-top: var(--sb-s4); padding-bottom: var(--sb-s4); }
.sb-status__line { display: flex; gap: var(--sb-s3); align-items: baseline; flex-wrap: wrap; margin: 0 0 var(--sb-s3); }
.sb-status__line [data-base-status] { font: 700 1.5rem/1.1 var(--sb-font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--sb-navy); }
.sb-status__line [data-base-next] { color: var(--sb-muted); }
.sb-flags { display: grid; gap: 10px; grid-template-columns: repeat(7, 1fr); }
.sb-flags a { display: block; text-decoration: none; padding: 10px 8px; border: 1px solid var(--sb-line); background: var(--sb-bone); color: var(--sb-navy);
  font: 600 .8125rem/1.2 var(--sb-font-head); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.sb-flags a [data-base-flag] { display: block; margin-top: 4px; font-weight: 400; letter-spacing: .04em; color: var(--sb-muted); }
.sb-flags a:has([data-on="true"]) { background: var(--sb-navy); color: var(--sb-bone); border-color: var(--sb-navy); }
.sb-flags a:has([data-on="true"]) [data-base-flag] { color: #F3D9C6; }
@media (max-width: 760px) { .sb-flags { grid-template-columns: repeat(2, 1fr); } }

/* Base icons */
.sb-icon { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sb-flags a .sb-icon { display: block; margin: 0 auto 6px; width: 26px; height: 26px; }

/* Toggle buttons and the bone button for dark sections */
.sb-btn--bone { background: var(--sb-bone); color: var(--sb-navy); }
.sb-btn--bone:hover { background: var(--sb-white); }
.sb-btn--bone[data-on="true"] { background: var(--sb-orange-ink); color: var(--sb-white); }
.sb-btn[data-base-toggle][data-on="true"]::after { content: "   |   Squared away"; font-weight: 600; letter-spacing: .06em; }
.sb-basefoot { text-align: left; }
.sb-link-quiet { color: inherit; font: 700 1rem/1 var(--sb-font-head); letter-spacing: .08em; text-transform: uppercase; }

/* The standard: seven numbered lines */
.sb-creed { list-style: none; margin: var(--sb-s4) 0 0; padding: 0; counter-reset: base; }
.sb-creed li { counter-increment: base; display: grid; grid-template-columns: 64px 1fr; gap: var(--sb-s3); align-items: baseline; padding: var(--sb-s3) 0; border-top: 1px solid rgba(253,248,236,.18); }
.sb-creed li::before { content: counter(base, decimal-leading-zero); font: 800 2.25rem/1 var(--sb-font-head); color: var(--sb-orange); }
.sb-creed strong { display: block; font: 800 1.5rem/1.1 var(--sb-font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--sb-bone); }
.sb-creed span { color: #C9D4E3; }
.sb-section--cool .sb-creed li, .sb-section--bone .sb-creed li { border-top-color: var(--sb-line); }
.sb-section--cool .sb-creed strong { color: var(--sb-navy); }
.sb-section--cool .sb-creed span { color: var(--sb-muted); }
.sb-section--cool .sb-creed li::before { color: var(--sb-orange-ink); }

/* Four-step rhythm cards (renamed so they do not clash with the live .sb-steps) */
.sb-crewsteps { display: grid; gap: var(--sb-s4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: var(--sb-s4); }
.sb-crewstep .n { font: 700 .875rem/1 var(--sb-font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--sb-muted); }
.sb-crewstep h3 { margin: var(--sb-s2) 0; }

/* Countdown */
.sb-countdown { display: flex; align-items: baseline; gap: var(--sb-s3); flex-wrap: wrap; }
.sb-countdown .num { font: 800 clamp(4rem, 12vw, 7rem)/.9 var(--sb-font-head); color: var(--sb-bone); font-variant-numeric: tabular-nums; }
.sb-countdown .word { font: 700 1.75rem/1 var(--sb-font-head); letter-spacing: .1em; color: #F3D9C6; }
.sb-countdown .when { font: 600 1rem/1.3 var(--sb-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--sb-bone); }

/* Founding crew, readouts, page header, misc */
.sb-founding { border-left: 6px solid var(--sb-orange); background: var(--sb-white); padding: var(--sb-s4); }
.sb-founding h3 { margin-top: 0; }
.sb-readouts { display: grid; gap: var(--sb-s4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: var(--sb-s4) 0; }
.sb-pagehead { padding: var(--sb-s6) 0 var(--sb-s5); min-height: 0; }
.sb-pagehead h1 { margin: var(--sb-s3) 0 0; }
.sb-lead { font-size: 1.1875rem; max-width: 40rem; }
.sb-two { display: grid; gap: var(--sb-s5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sb-cta-row { display: flex; gap: var(--sb-s3); align-items: center; flex-wrap: wrap; }
.sb-cta-sub { display: block; margin-top: var(--sb-s2); font-size: .875rem; letter-spacing: .04em; opacity: .9; }
.sb-review { background: #FFE9A8; color: #3b2f00; padding: 0 4px; font: 700 .75rem/1.4 var(--sb-font-head); letter-spacing: .08em; }
.sb-badge { display: inline-block; font: 600 .75rem/1 var(--sb-font-head); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; background: var(--sb-cool); color: var(--sb-navy); }
.sb-pick-card .meta { font-size: .875rem; color: var(--sb-muted); }
.sb-pick-card ul { padding-left: 1.1em; margin: 0 0 var(--sb-s3); }
.sb-table-wrap { overflow-x: auto; margin: var(--sb-s4) 0; }
.sb-table-wrap table { min-width: 560px; }
ul:has(.sb-check) { list-style: none; padding-left: 0; }
.sb-check { margin: 0 0 var(--sb-s2); }
.sb-check::before { content: ""; display: inline-block; width: .85em; height: .85em; border: 2px solid var(--sb-navy); margin-right: .55em; vertical-align: -.05em; background: var(--sb-white); }

/* Crew card maker */
.sb-cardmaker { display: grid; gap: var(--sb-s5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .sb-cardmaker { grid-template-columns: 320px 1fr; } }
.sb-cardmaker form { display: grid; gap: var(--sb-s3); }
.sb-cardmaker label { font: 600 .875rem/1 var(--sb-font-head); letter-spacing: .12em; text-transform: uppercase; }
.sb-cardmaker input[type="text"] { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1.0625rem/1.2 var(--sb-font-body); border: 2px solid var(--sb-navy); border-radius: 0; background: var(--sb-white); }
.sb-cardmaker canvas { width: 100%; height: auto; display: block; border: 1px solid var(--sb-line); background: var(--sb-navy); }
.sb-cardmaker .actions { display: flex; gap: var(--sb-s3); flex-wrap: wrap; }

/* Crew notes (reader tips), renamed so they do not clash with the live .sb-note */
.sb-crewnote { background: var(--sb-white); border: 1px solid var(--sb-line); border-left: 4px solid var(--sb-navy); padding: var(--sb-s3) var(--sb-s4); }
.sb-crewnote blockquote { margin: 0; font-size: 1.125rem; }
.sb-crewnote cite { display: block; margin-top: var(--sb-s2); font: 600 .8125rem/1 var(--sb-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-muted); font-style: normal; }

/* Base patches: collected as each base is squared away */
.sb-patches { display: grid; gap: var(--sb-s4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: var(--sb-s4); }
.sb-patch { width: 100%; height: auto; display: block; transition: filter .4s ease, opacity .4s ease, transform .4s ease; }
.sb-patch[data-on="false"] { filter: grayscale(1) brightness(.7); opacity: .4; }
.sb-patch[data-on="true"] { filter: none; opacity: 1; transform: scale(1.03); }

/* Bring two: invite buttons */
.sb-invite { display: flex; gap: var(--sb-s3); flex-wrap: wrap; align-items: center; }
.sb-invite [hidden] { display: none; }
.sb-invite-msg { margin: var(--sb-s3) 0 0; font: 600 .95rem/1.3 var(--sb-font-head); letter-spacing: .06em; text-transform: uppercase; min-height: 1.3em; }

@media print { .sb-crewbar { display: none !important; } }

/* Roll call list */
.sb-roll { list-style: none; padding: 0; margin: var(--sb-s4) 0 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.sb-roll li { border: 1px solid rgba(253, 248, 236, .3); padding: .6rem .8rem; font: 700 1rem/1.2 var(--sb-font-head); letter-spacing: .06em; text-transform: uppercase; }

/* On the white status strip the sun needs a navy ridge */
.sb-status .sb-sun .ridge { fill: var(--sb-navy); }
.sb-status .sb-sun .ray { fill: #C9D4E3; }
.sb-status .sb-sun .ray[data-on="true"] { fill: var(--sb-orange); }