/* ============================================================================
   Snap Studio Pro — the product layer
   ----------------------------------------------------------------------------
   Everything structural comes from `revbydesign-docs`, the shared RevByDesign
   skin, which this file is loaded after so that it wins.

   What used to be here: ~560 lines across this file and snapstudio_site.css,
   hand-copied from RevFramework and left behind by it. This site had the
   furthest-drifted copy of the three — it was missing the `hr + h2` fix, and
   it carried the stylesheet for a sidebar control it had no script for.

   See revbydesign.studio `docs/decisions.md` D049.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. The accent
   ----------------------------------------------------------------------------
   Amber — studio light, capture, exposure. The value Snap Studio Pro already
   carries on revbydesign.studio's work index, read from
   `src/styles/products.css`, so the product page and its documentation cannot
   disagree about what colour Snap Studio Pro is.

   Verified at 5.72:1 (light) and 8.95:1 (dark) as link text against the page.
   ------------------------------------------------------------------------- */

:root {
  --rbd-accent-light: #8a5a06;
  --rbd-accent-dark: #e8a33d;
  --rbd-accent-ink-light: #ffffff;
  --rbd-accent-ink-dark: #1a1203;
}

/* ----------------------------------------------------------------------------
   2. The announcement bar
   ----------------------------------------------------------------------------
   `overrides/main.html` puts a notice on every page saying the demo assets in
   the screenshots are not included. It is a commercial-clarity notice for
   deep-linked visitors, and it has never had any styling of its own — it
   inherited whatever Material's announce bar happened to look like.

   It gets one now, because the schemes made the announce bar the same colour
   as the header above it. A sunken band with a hairline under it: visible on
   every page without shouting, which is the right weight for something a
   reader must not miss but is not being warned about.

   The element is `.md-banner`, not `.md-announce` -- `announce` is the Jinja
   block name and the data-md-component, and the class Material actually emits
   is `md-banner`. The first version of this rule targeted nothing, which is
   the sort of thing that only shows up when you go and look at the built HTML.
   ------------------------------------------------------------------------- */

.md-banner {
  background: var(--rbd-bg-sunken, var(--md-code-bg-color));
  border-bottom: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
}

.md-banner .snap-announce {
  color: var(--md-default-fg-color--light);
}

.md-banner .snap-announce strong {
  color: var(--md-default-fg-color);
}

/* ----------------------------------------------------------------------------
   3. Components
   ----------------------------------------------------------------------------
   Used by docs/index.md only. Retokenised rather than redesigned: the cards
   carried a #020617 fill, a radial-gradient wash on hover, a 3px lift and a
   20px drop shadow, on a site whose parent brand is hairlines and near-square
   corners. The same removal D028 made in the RevLearning Tools.

   The `snap-` prefix is kept. RevFramework and RevLearning both use `rf-`;
   renaming either way buys nothing and would mean editing markdown to achieve
   a restyle.
   ------------------------------------------------------------------------- */

.md-typeset .snap-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.md-typeset .snap-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.md-typeset .snap-card {
  padding: 1.1rem 1.2rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
  transition: border-color 120ms cubic-bezier(0.2, 0, 0.1, 1);
}

.md-typeset .snap-card:hover {
  border-color: var(--rbd-accent, var(--md-accent-fg-color));
}

.md-typeset .snap-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.md-typeset .snap-card > :last-child {
  margin-bottom: 0;
}

.md-typeset .snap-docs-intro {
  padding: 1.1rem 1.3rem;
  background: var(--rbd-bg-sunken, var(--md-code-bg-color));
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
}

.md-typeset .snap-docs-tagline {
  padding: 0.8rem 1.1rem;
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
  background: var(--rbd-bg-sunken, var(--md-code-bg-color));
  border-left: 2px solid var(--rbd-accent, var(--md-accent-fg-color));
  border-radius: 0 var(--rbd-radius, 2px) var(--rbd-radius, 2px) 0;
}

.md-typeset .snap-docs-intro > :last-child,
.md-typeset .snap-docs-tagline > :last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   4. Screenshots
   ----------------------------------------------------------------------------
   This site is screenshot-led in a way the other two are not — a panel capture
   on nearly every page of the guide. A bare screenshot of a dark Unity window
   sitting on a light page has no edge, so it bleeds. A hairline gives it one,
   in the same language as everything else here.
   ------------------------------------------------------------------------- */

.md-typeset img[src*='/img/'] {
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
}