/*
 * bindsight documentation site — brand layer.
 *
 * Values mirror bindsight/report/theme.py so the docs site, the served
 * interface and the generated HTML report read as one product. Before this file
 * the docs were teal while the other surfaces were navy.
 */

:root {
  --md-primary-fg-color:        #0b5394;
  --md-primary-fg-color--light: #1a6fbf;
  --md-primary-fg-color--dark:  #083b6b;
  --md-accent-fg-color:         #0f9d8f;

  --bs-navy:       #0b5394;
  --bs-navy-dark:  #083b6b;
  --bs-navy-tint:  #e8f0fb;
  --bs-accent:     #0f9d8f;
  --bs-rule:       #e3e6ea;
  /* 4.5:1 on every ground it is drawn on, the tightest being --bs-navy-tint
   * (4.92:1). At #6c757d it was 4.08:1 there and 4.45:1 on --bs-canvas, so
   * the label under each headline number -- .bs-stat .k at .74rem, and
   * .bs-flow .s small at .7rem -- sat below AA while the number above it
   * stayed crisp. That is the defect tests/test_contrast.py was written
   * for, reproduced on the published site. Nor is it --ink-faint from
   * bindsight/report/web/static/bindsight.css (#68727f): that clears AA on
   * the app's grounds and is 4.25:1 here, because these tinted panels are
   * lighter. theme.py's MUTED moved with it, so the mirror below still
   * holds and tests/test_contrast.py now checks that it does. */
  --bs-muted:      #5f6873;
  --bs-canvas:     #f7f9fc;

  /* Status family, lifted verbatim from the web interface's own palette in
   * bindsight/report/web/static/bindsight.css -- whose AA tests already carry
   * these six -- rather than chosen again here. Choosing again is how the
   * success colour reached three values on three surfaces of one product:
   * #2e7d32 in theme.py, #1f7a3d here, #1f6f35 in the app. That is the drift
   * theme.py's docstring says it exists to stop, and it had happened to every
   * colour theme.py did not give a --bs- name to.
   *
   * The warn stand-in these replace, #b08400, was 3.42:1 on white: below AA,
   * on the published page, for as long as it shipped. Nothing caught it
   * because .note declared no background, and tests/test_contrast.py can only
   * measure text whose ground it can name -- so it measured neither scheme and
   * reported neither. */
  --bs-ok:         #1f6f35;
  --bs-ok-tint:    #e8f4ea;
  --bs-warn:       #8a6100;
  --bs-warn-tint:  #fdf3dd;
  --bs-err:        #a32020;
  --bs-err-tint:   #fbeaea;
}

[data-md-color-scheme="slate"] {
  --bs-navy-tint: #12263f;
  --bs-rule:      #2b3038;
  --bs-canvas:    #171a1f;
  --bs-muted:     #9aa4b0;

  /* The light status colours land at 2.3-2.4:1 on this ground. Each pair
   * below clears AA on its own tint: ok 9.05:1, warn 10.31:1, err 8.43:1. */
  --bs-ok:        #8fd6a4;
  --bs-ok-tint:   #13291c;
  --bs-warn:      #f2d98b;
  --bs-warn-tint: #33290a;
  --bs-err:       #f2a9a9;
  --bs-err-tint:  #3a1618;
}

/* --- Hero ---------------------------------------------------------------- */

.bs-hero {
  background: linear-gradient(135deg, var(--bs-navy) 0%, var(--bs-navy-dark) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 2.6rem 2.4rem;
  margin: 0 0 1.6rem 0;
}

.bs-hero h1 {
  color: #fff;
  margin: 0 0 .5rem 0;
  font-size: 2.6rem;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 700;
}

.bs-hero .bs-lede {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.55;
  opacity: .95;
}

.bs-hero .bs-sub {
  margin-top: 1rem;
  font-size: .95rem;
  opacity: .82;
}

/* --- Call-to-action buttons ---------------------------------------------- */

.bs-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.4rem 0 0 0;
}

.bs-cta a,
.bs-cta a:hover {
  display: inline-block;
  padding: .6rem 1.15rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.bs-cta a.primary,
.bs-cta a.primary:hover {
  background: #fff;
  color: var(--bs-navy);
  border-color: #fff;
}

.bs-cta a:hover {
  background: rgba(255, 255, 255, .14);
}

.bs-cta a.primary:hover {
  background: #eef4fb;
}

/* --- Stat strip ----------------------------------------------------------- */

.bs-stats {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 1.6rem 0;
}

.bs-stat {
  background: var(--bs-canvas);
  border: 1px solid var(--bs-rule);
  border-radius: 11px;
  padding: 1rem 1.1rem;
}

.bs-stat .v {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--bs-navy);
  line-height: 1.1;
}

[data-md-color-scheme="slate"] .bs-stat .v {
  color: #7fb2e8;
}

.bs-stat .k {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bs-muted);
  margin-top: .25rem;
  font-weight: 600;
}

.bs-stat .d {
  font-size: .8rem;
  color: var(--bs-muted);
  margin-top: .3rem;
  line-height: 1.35;
}

/* --- Pipeline strip ------------------------------------------------------- */

.bs-flow {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.1rem 0 .6rem 0;
}

.bs-flow .s {
  flex: 1 1 130px;
  background: var(--bs-navy-tint);
  border: 1px solid rgba(11, 83, 148, .18);
  border-radius: 10px;
  padding: .6rem .65rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--bs-navy-dark);
  text-align: center;
}

[data-md-color-scheme="slate"] .bs-flow .s {
  color: #cfe2f7;
  border-color: rgba(127, 178, 232, .25);
}

.bs-flow .s small {
  display: block;
  font-weight: 400;
  font-size: .7rem;
  color: var(--bs-muted);
  margin-top: .2rem;
}

.bs-flow .s.gpu {
  background: var(--bs-warn-tint);
  border-color: #f0e0a8;
  color: var(--bs-warn);
}

/* Only the border is left to restate: the tokens above already carry their
 * own slate values, which is what this rule used to spell out by hand. */
[data-md-color-scheme="slate"] .bs-flow .s.gpu {
  border-color: #5c4a12;
}

/* --- Cards ---------------------------------------------------------------- */

.bs-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 1.2rem 0;
}

.bs-card {
  border: 1px solid var(--bs-rule);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  background: var(--bs-canvas);
}

.bs-card h3 {
  margin: 0 0 .4rem 0;
  font-size: 1.02rem;
  color: var(--bs-navy);
}

[data-md-color-scheme="slate"] .bs-card h3 {
  color: #7fb2e8;
}

.bs-card p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--bs-muted);
}

/* --- Mobile --------------------------------------------------------------- */

@media screen and (max-width: 600px) {
  .bs-hero {
    padding: 1.6rem 1.25rem;
    border-radius: 12px;
  }

  .bs-hero h1 {
    font-size: 1.85rem;
  }

  .bs-hero .bs-lede {
    font-size: 1rem;
  }

  .bs-cta a {
    flex: 1 1 100%;
    text-align: center;
  }

  .bs-flow .s {
    flex: 1 1 100%;
  }
}


/* ---------------------------------------------------------------- 3-D viewer
   The published twin of `.viewer` in bindsight/report/web/static/bindsight.css.
   Prefixed `bs-` to stay clear of Material's `md-` namespace, and hooked by
   data attributes rather than these class names, so the two stylesheets can
   differ without the shared viewer script caring. */
.bs-viewer-picker { margin: 1rem 0 0.5rem; max-width: 32rem; }
.bs-viewer-picker label { display: block; font-size: 0.8rem; color: var(--bs-muted); margin-bottom: 0.25rem; }
.bs-viewer-picker select { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--bs-rule); border-radius: 6px; background: inherit; color: inherit; }

/* Height is explicit and must stay that way: 3Dmol measures its container when
   the viewer is created, and a container that is zero-high at that moment
   renders a canvas nothing can see, with no error anywhere. */
.bs-viewer { width: 100%; height: 26rem; position: relative; border-radius: 11px; overflow: hidden; border: 1px solid var(--bs-rule); background: #fff; }
/* After the rule it overrides, not in the narrow-viewport block higher up:
   the two have equal specificity, so source order decides and the block
   above lost. mkdocs-material sets the root font to 125%, which makes this
   26rem 520px -- more than half of a 812px phone viewport, and enough to
   push the design picker and the chain legend past the fold. Those are the
   two things that say what is being looked at. 17rem is 340px here. */
@media screen and (max-width: 600px) {
  .bs-viewer { height: 17rem; }
}
.bs-viewer__fallback { padding: 1rem; font-size: 0.8rem; color: var(--bs-muted); }

.bs-viewer-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.8rem; }
.bs-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; vertical-align: middle; margin-right: 0.25rem; }


/* ------------------------------------------------------------- data checker
   The published twin of the card/field/note rules in
   bindsight/report/web/static/bindsight.css. The `note note--ok|warn|err`
   class names are emitted by your_data_check.js itself, so they are NOT
   prefixed: renaming them here would silently unstyle the checker's output. */
.bs-card { border: 1px solid var(--bs-rule); border-radius: 11px; padding: 1rem 1.2rem; margin: 1.2rem 0; }
.bs-field { margin-bottom: 1rem; }
.bs-field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.bs-field input[type="file"] { display: block; margin: 0.3rem 0; }
.bs-field__help { font-size: 0.78rem; color: var(--bs-muted); margin: 0.2rem 0 0; }
.bs-muted { color: var(--bs-muted); font-weight: 400; }

.note { display: flex; gap: 0.6rem; align-items: flex-start; border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.5rem 0; font-size: 0.85rem; border: 1px solid var(--bs-rule); }
.note__glyph { flex: 0 0 auto; font-weight: 700; }
.note__body { flex: 1 1 auto; }
.note__body p { margin: 0; }
.note--ok { background: var(--bs-ok-tint); border-color: var(--bs-ok); }
.note--ok .note__glyph { color: var(--bs-ok); }
.note--warn { background: var(--bs-warn-tint); border-color: var(--bs-warn); }
.note--warn .note__glyph { color: var(--bs-warn); }
.note--err { background: var(--bs-err-tint); border-color: var(--bs-err); }
.note--err .note__glyph { color: var(--bs-err); }
.note--info { background: var(--bs-navy-tint); border-color: var(--bs-navy); }
.note--info .note__glyph { color: var(--bs-navy); }

/* --bs-navy is also the hero gradient's first stop, so it has to stay dark in
 * both schemes and cannot be overridden in the slate block the way the status
 * colours are. The info note lifts its own text instead: navy on the slate
 * value of --bs-navy-tint is 1.67:1. */
[data-md-color-scheme="slate"] .note--info { border-color: #9ec5ef; }
[data-md-color-scheme="slate"] .note--info .note__glyph { color: #9ec5ef; }
.small { font-size: 0.85rem; }
.muted { color: var(--bs-muted); }