/* ============================================================
   Collision Strategy — network.css
   Add-on styles for the Strategy Network: the "Strategy Network" button
   in the site header, and the partner pages (network.html log in,
   network-signup.html, network-profile.html, network-home.html).
   Shares the tokens, header, footer, buttons and form fields from
   styles.css.
   ============================================================ */

/* ---------- Header button: navy fill, white text ---------- */
.nav-network { gap: 8px; }
.nav-network svg { flex-shrink: 0; width: 14px; height: 14px; }
/* Strategy Network and the review button: an equal-width pair in the header. */
.nav-cta { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.nav-claim { gap: 8px; }
.nav-claim svg { flex-shrink: 0; width: 14px; height: 14px; }
.mobile-menu .btn svg { vertical-align: -2px; }
/* on the Network pages: a soft blue fill with a navy edge, so it reads as
   "you are here" */
.nav-network[aria-current="page"] { background: var(--blue-soft); border-color: var(--c-navy); color: var(--c-navy); }
.nav-network[aria-current="page"]:hover { background: #D8E4F3; border-color: var(--c-navy); color: var(--c-navy); }
/* The phone menu's Strategy Network link: the same navy as the header
   button (the menu markup gives it btn-primary, which would make it an
   orange fill identical to the phone button under it). */
.mobile-menu .btn-primary[href="network.html"] { background: var(--c-navy); border-color: var(--c-navy); color: #FFFFFF; }
.mobile-menu .btn-primary[href="network.html"]:hover { background: var(--c-navy-hover); border-color: var(--c-navy-hover); color: #FFFFFF; }
.mobile-menu .btn-primary[href="network.html"][aria-current="page"] { background: var(--blue-soft); border-color: var(--c-navy); color: var(--c-navy); }
.mobile-menu .btn-primary[href="network.html"][aria-current="page"]:hover { background: #D8E4F3; border-color: var(--c-navy); color: var(--c-navy); }

/* The total-loss guide's header carries two buttons (Network and Total Loss
   Review), so on narrower desktops its phone number steps out of the nav (it
   is still in the hero, the contact section and the footer) and the gaps
   close up just above the menu-button breakpoint. */
@media (min-width: 901px) and (max-width: 1180px) {
  .page-tl .site-nav .nav-phone { display: none; }
  .page-tl .site-nav { gap: 22px; }
}
@media (min-width: 901px) and (max-width: 1020px) {
  .page-tl .header-inner { gap: 16px; }
  .page-tl .site-nav { gap: 16px; }
  .page-tl .site-nav .btn-sm { padding: 8px 12px; letter-spacing: 0; }
}

/* ---------- Network pages: the panel centered on the sky hero ---------- */
.net-hero {
  display: flex;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
.net-hero > .container {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 88px; padding-bottom: 112px;
  text-align: center;
}
.net-hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
}
.net-hero .dim-line { width: min(300px, 64%); margin-top: 32px; }

/* ---------- The log in panel ---------- */
.net-login {
  width: 100%; max-width: 460px;
  margin-top: 48px;
  text-align: left;
}
.net-login-title {
  font-family: var(--font-display);
  font-size: 22px; line-height: 28px; font-weight: 700;
  letter-spacing: -0.005em; text-transform: none;
  color: var(--text);
  text-align: center;
  margin: 0 0 18px;
}
.net-form { padding: 32px 32px 28px; }
.net-form .btn-block { margin-top: 10px; }
/* only seen without JavaScript: the button waits for network.js */
.net-form .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* password field with a Show / Hide switch inside it */
.net-pass { position: relative; }
.net-pass input { padding-right: 84px; }
.net-reveal {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  min-width: 60px;
  font-family: var(--font-body);
  font-size: 14px; line-height: 18px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--blue-link);
  background: transparent;
  border: 0; border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.net-reveal:hover { color: var(--text); background: var(--c-canvas); }
.net-pass input::-ms-reveal, .net-pass input::-ms-clear { display: none; }

/* reply after Log in; collapses to nothing while empty so the live region stays put */
.net-status:not(:empty) {
  background: var(--blue-soft);
  border: 1px solid #C9D8EC;
  border-radius: var(--radius-ctl);
  padding: 16px 18px;
  margin-top: 18px;
}
.net-status p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--text); }
.net-status p + p { margin-top: 6px; color: var(--text-2); }
.net-status strong {
  font-size: 16px; line-height: 20px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
}
.net-status a { font-weight: 600; white-space: nowrap; color: var(--blue-link); text-decoration: underline; text-underline-offset: 3px; }

.net-noscript { font-size: 14px; line-height: 20px; color: var(--warning); margin: 16px 0 0; }

.net-help {
  font-size: 15px; line-height: 22px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--text-2);
  text-align: center;
  margin: 24px 0 0;
}
.net-help a { color: var(--blue-link); font-weight: 600; white-space: nowrap; }
.net-help a:hover { color: var(--text); }

@media (max-width: 640px) {
  .net-hero > .container { padding-top: 48px; padding-bottom: 64px; }
  .net-login { margin-top: 36px; }
  .net-form { padding: 24px 20px 22px; }
}

/* ---------- Create account button and the "New partner shop?" rule ---------- */
.net-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 14px;
  font-size: 14px; line-height: 18px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-3);
}
.net-divider::before, .net-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.net-form .btn-ghost.btn-block { margin-top: 0; }

/* ---------- Create account page ---------- */
.net-signup { max-width: 660px; }
.net-intro {
  margin: -4px auto 26px; max-width: 50ch;
  font-size: 16px; line-height: 1.6;
  color: var(--text-body);
  text-align: center;
}
.net-fieldset { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.net-fieldset + .net-fieldset { margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
/* floated, so the legend sits under the divider line instead of inside it */
.net-fieldset > legend { float: left; width: 100%; }
.net-fieldset > legend + * { clear: both; }
.net-fieldset legend {
  padding: 0; margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 19px; line-height: 24px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
}
.net-optional { text-transform: none; letter-spacing: 0; color: var(--text-3); font-weight: 500; }
.net-hint { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 6px 0 0; }
.net-row-city { grid-template-columns: 2fr 0.8fr 1.2fr; }
/* only bots fill this in; kept off screen rather than display:none */
.net-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Partner home ---------- */
.net-home-hero { min-height: 0; }
.net-home-hero > .container { padding-top: 88px; padding-bottom: 88px; }
.net-home-hero .eyebrow { margin-bottom: 16px; }
.net-welcome {
  margin: 24px 0 0;
  font-size: 20px; line-height: 1.4; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
}
.net-home-hero .btn { margin-top: 24px; }
.net-home-narrow > * { max-width: 860px; }  /* text column, left edge in line with the other sections */
.net-home-narrow h2 { font-size: clamp(30px, 3.6vw, 44px); }
.net-lead { font-size: 18px; line-height: 1.65; color: var(--text-body); margin: 20px 0 0; max-width: 64ch; }
.net-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.net-points li {
  position: relative;
  padding: 28px 26px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
}
.net-points li::before { content: none; }
.net-points h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.net-points p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: 0; }
.net-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.net-contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

@media (max-width: 1020px) {
  .net-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .net-row-city { grid-template-columns: 1fr; }
  .net-points { grid-template-columns: 1fr; }
  .net-points li { padding: 24px 22px 22px; }
  .net-home-hero > .container { padding-top: 48px; padding-bottom: 56px; }
  .net-contact .btn { width: 100%; }
}

/* ---------- Company profile (network-profile.html): steps, choices, review, done ---------- */
.net-wizard { max-width: 700px; }
.net-wizard [hidden] { display: none !important; }   /* .btn and grids set display, which would beat [hidden] */
.net-stepper {
  list-style: none; margin: 0 0 24px; padding: 0;
  scroll-margin-top: calc(var(--header-h) + 16px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
}
.net-stepper li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px; line-height: 16px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text-3);
}
.net-stepper li + li::before {   /* the rule joining a step to the one before */
  content: ""; position: absolute; top: 17px; right: calc(50% + 24px);
  width: calc(100% - 42px); height: 2px; border-radius: 2px; background: var(--line-2);
}
.net-stepper li.is-done + li::before { background: var(--blue-link); }
.net-stepper-no {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  border: 1px solid var(--line-2);
  font-weight: 700; font-size: 14px; letter-spacing: 0; color: var(--text-2);
}
.net-stepper li.is-done { color: var(--text-2); }
.net-stepper li.is-done .net-stepper-no { background: var(--blue-link); border-color: var(--blue-link); color: #FFFFFF; }
.net-stepper li[aria-current="step"] { color: var(--text); }
.net-stepper li[aria-current="step"] .net-stepper-no { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }

.net-loading { margin: 6px 0 14px; color: var(--text-2); }
.net-panel + .net-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.net-fieldset legend:focus, .net-panel-title:focus, .net-done-title:focus { outline: none; }
.net-kicker {
  display: block; margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 12.5px; line-height: 16px; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--orange-ink);
}
.net-panel-title {
  font-family: var(--font-display);
  font-size: 19px; line-height: 24px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--text); margin: 0 0 8px;
}
.net-panel-lead { font-size: 15px; line-height: 1.55; color: var(--text-2); margin: 0 0 18px; }
.net-subhead {
  font-family: var(--font-body);
  font-size: 16px; line-height: 22px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--text); margin: 6px 0 14px;
}
.form-group + .net-subhead, .form-row + .net-subhead { margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.net-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* check boxes and radio buttons, laid out as tappable tiles */
.net-group { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.net-group > legend {
  padding: 0; margin-bottom: 8px;
  font-size: 14px; line-height: 20px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
}
.net-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.net-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.net-choices-inline { grid-template-columns: repeat(2, minmax(0, 140px)); }
.net-choice {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-ctl);
  font-size: 15px; line-height: 20px; color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.net-choice:hover { border-color: var(--text-2); }
.net-choice input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--blue-link); cursor: pointer; }
.net-choice:has(input:checked) { border-color: var(--blue-link); background: var(--blue-soft); }
.net-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.net-group.invalid .net-choice { border-color: var(--danger); }

.net-wizard-nav { display: flex; gap: 12px; margin-top: 12px; }
.net-wizard-nav .btn { flex: 1; }
.net-wizard-nav .btn-ghost { flex: 0 0 34%; }

/* review: one block per step */
.net-review-step {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--c-canvas);
  padding: 16px 18px 18px; margin-bottom: 12px;
}
.net-review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.net-review-head h4 {
  font-family: var(--font-body);
  font-size: 16px; line-height: 22px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--text); margin: 0;
}
.net-review-edit {
  font-family: var(--font-body);
  font-size: 14px; line-height: 18px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--blue-link); background: transparent;
  border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.net-review-edit:hover { color: var(--text); }
.net-review-step dl {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 8px 16px;
  margin: 0; font-size: 15px; line-height: 21px;
}
.net-review-step dt { color: var(--text-2); }
.net-review-step dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* done */
.net-done { text-align: center; }
.net-done-mark {
  width: 64px; height: 64px; margin: 4px auto 18px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success);
}
.net-done-title {
  font-family: var(--font-display);
  font-size: 28px; line-height: 1.15; font-weight: 700;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--text); margin: 0 0 14px;
}
.net-done p { font-size: 16px; line-height: 1.6; margin: 0 auto 14px; max-width: 48ch; color: var(--text-2); }
.net-done-email-line { background: var(--c-canvas); border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 14px 16px; color: var(--text) !important; }
.net-done-email { font-family: var(--font-body); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.net-done .btn-block, .net-done .btn-ghost.btn-block { margin-top: 12px; }

/* partner home: how far the profile is */
.net-progress {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 28px; max-width: 680px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--panel-shadow);
  text-align: left;
}
.net-progress.is-complete { border-left-color: var(--success); }
.net-progress p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.net-progress strong {
  display: block; margin-bottom: 4px;
  font-size: 16px; line-height: 22px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
}
.net-home-hero .net-progress .btn { margin-top: 0; }
/* display: flex on the card and the buttons would otherwise beat [hidden] */
.net-progress[hidden], .net-home-hero .btn[hidden] { display: none; }

@media (max-width: 640px) {
  .net-stepper-name { font-size: 11px; letter-spacing: 0; }
  .net-stepper-no { width: 30px; height: 30px; font-size: 13px; }
  .net-stepper li + li::before { top: 15px; right: calc(50% + 20px); width: calc(100% - 34px); }
  .net-row-3 { grid-template-columns: 1fr; }
  .net-choices, .net-choices-3 { grid-template-columns: 1fr; }
  .net-review-step dl { grid-template-columns: 1fr; gap: 0; }
  .net-review-step dd { margin-bottom: 10px; }
  .net-wizard-nav .btn-ghost { flex-basis: 38%; }
  .net-progress .btn { width: 100%; }
}