/* HRC Designer manual: brand alignment with hrcdesigner.com */
:root {
  --hrc-red: #d1232a;
  --hrc-red-dark: #b01d23;
  --hrc-ink: #14181d;
  --hrc-body: #4a525d;
  --hrc-muted: #77808c;
  --hrc-line: #dde2e8;
  --hrc-tint: #f5f7f9;
  --md-primary-fg-color: #ffffff;
  --md-accent-fg-color: var(--hrc-red);
  --md-typeset-a-color: var(--hrc-red);
  --md-default-fg-color: var(--hrc-ink);
}

/* wider content column: the pages are screenshot-heavy */
.md-grid { max-width: 1400px; }

.md-header { border-bottom: 1px solid var(--hrc-line); box-shadow: none; }
.md-header__title { font-weight: 700; letter-spacing: -.015em; color: var(--hrc-ink); }
.md-tabs { border-bottom: 1px solid var(--hrc-line); }
.md-tabs__link { font-size: .72rem; font-weight: 500; letter-spacing: .02em; color: var(--hrc-body); }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--hrc-red); }
.md-nav__link--active { color: var(--hrc-red) !important; font-weight: 600; }
.md-nav__item--section > .md-nav__link { font-weight: 700; color: var(--hrc-ink); }

.md-typeset { font-size: .78rem; line-height: 1.65; color: var(--hrc-ink); }
.md-typeset h1 { font-weight: 700; letter-spacing: -.03em; color: var(--hrc-ink); font-size: 2rem; margin-bottom: .6rem; }
.md-typeset h2 { font-weight: 650; letter-spacing: -.02em; color: var(--hrc-ink); border-bottom: 1px solid var(--hrc-line); padding-bottom: .3rem; margin-top: 2.4rem; }
.md-typeset h3 { font-weight: 600; letter-spacing: -.01em; margin-top: 1.8rem; }
.md-typeset h4 { font-weight: 600; margin-top: 1.2rem; }

.md-typeset .eyebrow {
  display: inline-block; font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--hrc-red); border: 1px solid #f0cfd1; background: #fdf4f4; border-radius: 3px; padding: 3px 9px; margin-bottom: .6rem;
}
.md-typeset .lede { font-size: .92rem; color: var(--hrc-body); max-width: 62ch; }

/* Screenshots and figures: framed, soft shadow, zoomable */
.md-typeset figure.shot, .md-typeset figure.fig { margin: 1.2rem 0 1.6rem; }
.md-typeset figure.shot img { border: 1px solid var(--hrc-line); border-radius: 6px; box-shadow: 0 6px 24px rgba(20, 24, 29, .08); }
.md-typeset figure.fig img { border: 1px solid var(--hrc-line); border-radius: 6px; background: #fff; padding: .4rem; }
.md-typeset figure.shot figcaption, .md-typeset figure.fig figcaption { font-size: .68rem; color: var(--hrc-muted); margin-top: .45rem; text-align: left; }
.md-typeset figure.shot figcaption b, .md-typeset figure.fig figcaption b { color: var(--hrc-ink); font-weight: 600; }
.md-typeset figure.narrow { max-width: 560px; }
.md-typeset figure.half { max-width: 48%; display: inline-block; vertical-align: top; margin-right: 2%; }

/* Numbered steps: red badges matching the callouts drawn on the screenshots */
.md-typeset .steps ol { counter-reset: step; list-style: none; margin-left: 0; padding-left: 0; }
.md-typeset .steps ol > li { counter-increment: step; position: relative; padding-left: 2.4rem; margin: 0 0 .9rem; }
.md-typeset .steps ol > li::before {
  content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--hrc-red); color: #fff; font-weight: 700; font-size: .78rem;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff;
}
.md-typeset .steps ol > li > p { margin: 0 0 .3rem; }
.md-typeset .steps ol > li ul { margin-top: .2rem; }

/* Inline callout number, e.g. press Auto-Fit (4) */
.md-typeset .n {
  display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--hrc-red); color: #fff; font-size: .6rem; font-weight: 700; vertical-align: .1em; margin: 0 .1rem;
}

/* UI element names */
.md-typeset .ui { font-weight: 600; color: var(--hrc-ink); white-space: nowrap; }
.md-typeset .tab { font-weight: 600; color: var(--hrc-ink); border: 1px solid var(--hrc-line); border-radius: 4px; padding: 0 .35em; background: var(--hrc-tint); white-space: nowrap; font-size: .92em; }

/* Tables */
.md-typeset table:not([class]) { font-size: .72rem; border: 1px solid var(--hrc-line); border-radius: 6px; }
.md-typeset table:not([class]) th { background: var(--hrc-tint); color: var(--hrc-ink); font-weight: 600; }
.md-typeset table:not([class]) td, .md-typeset table:not([class]) th { padding: .5em .9em; }

/* Admonitions in brand */
.md-typeset .admonition.tip, .md-typeset details.tip { border-color: var(--hrc-red); }
.md-typeset .tip > .admonition-title, .md-typeset .tip > summary { background: #fdf4f4; color: var(--hrc-ink); }
.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before { background-color: var(--hrc-red); }

/* Paper reference card */
.md-typeset .paper {
  border: 1px solid var(--hrc-line); border-left: 3px solid var(--hrc-red); border-radius: 4px;
  padding: .6rem .9rem; background: var(--hrc-tint); font-size: .7rem; color: var(--hrc-body); margin: 1rem 0;
}
.md-typeset .paper a { font-weight: 600; }
.md-typeset .paper p { margin: .15rem 0; }

/* Module cards on index pages */
.md-typeset .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.md-typeset .cards > a { display: block; border: 1px solid var(--hrc-line); border-top: 3px solid var(--hrc-red); border-radius: 6px; padding: .9rem 1rem; color: var(--hrc-ink); text-decoration: none; background: #fff; transition: box-shadow .15s; }
.md-typeset .cards > a:hover { box-shadow: 0 6px 20px rgba(20, 24, 29, .08); }
.md-typeset .cards .card-k { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hrc-muted); margin-bottom: .35rem; }
.md-typeset .cards .card-t { font-weight: 650; font-size: .9rem; margin-bottom: .3rem; }
.md-typeset .cards .card-d { font-size: .72rem; color: var(--hrc-body); }

/* Key-value strip for "what you need" */
.md-typeset .need { border: 1px solid var(--hrc-line); border-radius: 6px; padding: .6rem 1rem; background: #fff; font-size: .74rem; margin: 1rem 0; }
.md-typeset .need ul { margin: .2rem 0 .2rem 1rem; }

.md-footer { background: #fff; color: var(--hrc-muted); border-top: 1px solid var(--hrc-line); }
.md-footer-meta { background: #fff; color: var(--hrc-muted); }
.md-footer-meta .md-copyright { color: var(--hrc-muted); }
/* Material colours the highlight line separately, and its default resolves to
   white. On this white footer that made the copyright line invisible. */
.md-footer-meta .md-copyright__highlight { color: var(--hrc-muted); }
.md-footer-meta .md-copyright a { color: var(--hrc-body); }

@media print {
  .md-header, .md-tabs, .md-sidebar, .md-footer { display: none !important; }
  .md-content { max-width: none; }
}


/* Live strain-based specimen beside the title on the home page. It is driven by
   website/js/beams3d.js, the same script as the landing page, and is loaded only
   by index.md. The box has no height until that script confirms WebGL and adds
   .is-3d, so a browser without it shows the page exactly as before. No stage
   slider is authored for this one on purpose: with no control row to bind, the
   panel just plays its load cycle. */
.md-typeset .hero3d {
  position: relative; float: right; width: 360px; height: 0;
  margin: .2rem 0 1rem 1.8rem;
  background: linear-gradient(180deg, #f7f9fb 0%, #fff 100%);
}
.md-typeset .hero3d.is-3d {
  height: 258px; border: 1px solid var(--hrc-line); border-radius: 6px;
  cursor: grab; touch-action: pan-y;
}
.md-typeset .hero3d.is-grabbing { cursor: grabbing; }
.md-typeset .hero3d .lab-gl { display: block; width: 100%; height: 100%; }
.md-typeset .hero3d .lab-plot { position: absolute; right: 10px; bottom: 10px; width: 114px; height: 72px; pointer-events: none; }
.md-typeset .hero3d .lab-law { position: absolute; left: 10px; top: 10px; width: 102px; height: 66px; pointer-events: none; }
.md-typeset .hero3d .lab-hint { position: absolute; right: 12px; top: 13px; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hrc-muted); pointer-events: none; opacity: .8; }
.md-typeset .hero3d-clear { clear: both; }

/* Below Material's tablet breakpoint the content column is too narrow to hold
   a float beside the title, so the specimen becomes a full-width band. */
@media screen and (max-width: 76.1875em) {
  .md-typeset .hero3d { float: none; width: 100%; margin: 0 0 1.2rem; }
  .md-typeset .hero3d.is-3d { height: 220px; }
  .md-typeset .hero3d .lab-hint { display: none; }
}


/* The group mark in the manual footer, matching the one in the site footer.
   The URL is resolved against this stylesheet rather than against the page, so
   it is correct at every depth of the manual without a root-absolute path. */
.md-footer-meta .md-copyright {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
}
.md-footer-meta .md-copyright::before {
  content: ""; flex: 0 0 auto; width: 90px; height: 30px;
  background: url("../assets/bmrg-logo.png") left center / contain no-repeat;
}