/* The app's look (resources/css/filament/app/theme.css, App\Support\BrandPalette):
   Inter, zinc greys, a white top bar with a hairline under it, Mayam's gold
   (primary 600 #886a31, 400 #c8a65f in the dark) for links and the current page. */
:root, [data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #fafafa;
  --md-primary-bg-color: #18181b;
  --md-primary-bg-color--light: #71717a;
  --md-accent-fg-color: #886a31;
  --md-accent-fg-color--transparent: rgb(136 106 49 / .1);
  --md-typeset-a-color: #886a31;
  --md-default-fg-color: #18181b;
  --md-default-fg-color--light: #52525b;
  --md-default-fg-color--lighter: #a1a1aa;
  --md-default-fg-color--lightest: #e4e4e7;
  --md-default-bg-color: #ffffff;
  --gc-rule: #e4e4e7;
}
[data-md-color-scheme="slate"] {
  --md-hue: 240;
  --md-primary-fg-color: #18181b;
  --md-primary-fg-color--light: #18181b;
  --md-primary-fg-color--dark: #09090b;
  --md-primary-bg-color: #fafafa;
  --md-primary-bg-color--light: #a1a1aa;
  --md-accent-fg-color: #c8a65f;
  --md-accent-fg-color--transparent: rgb(200 166 95 / .1);
  --md-typeset-a-color: #c8a65f;
  --md-default-fg-color: #fafafa;
  --md-default-fg-color--light: #d4d4d8;
  --md-default-fg-color--lighter: #71717a;
  --md-default-fg-color--lightest: #27272a;
  --md-default-bg-color: #09090b;
  --gc-rule: #27272a;
}
.md-header { box-shadow: none; border-bottom: 1px solid var(--gc-rule); }
.md-header[data-md-state="shadow"], .md-header--shadow { box-shadow: none; }
/* The app's wordmark: no icon beside it, the name in semibold. */
.md-header__button.md-logo { display: none; }
.md-header__title { margin-left: 1rem; font-weight: 600; }
/* No dark-mode switch: the site follows the phone or computer's own setting. */
.md-header__option[data-md-component="palette"], form[data-md-component="palette"] { display: none; }
/* The bar reads MAYAM like the app's own wordmark, at the left as in the app on
   a computer and centred on a phone, and stays so when scrolling (Material
   otherwise swaps in the page's title). */
.md-header__title .md-header__topic:first-child { opacity: 1 !important; transform: none !important; z-index: 1; pointer-events: auto; }
.md-header__title .md-header__topic + .md-header__topic { display: none; }
.md-header__title .md-header__topic:first-child .md-ellipsis { font-size: 0; }
.md-header__title .md-header__topic:first-child .md-ellipsis::after { content: "MAYAM"; font-size: .9rem; font-weight: 700; letter-spacing: .12em; }
/* No site name over the sidebar on a computer; in a phone's menu drawer it reads MAYAM. */
@media screen and (min-width: 76.25em) { .md-nav--primary > .md-nav__title { display: none; } }
@media screen and (max-width: 76.2344em) {
  .md-nav--primary > .md-nav__title { font-size: 0; }
  .md-nav--primary > .md-nav__title::after { content: "MAYAM"; font-size: .9rem; font-weight: 700; letter-spacing: .12em; }
}
@media screen and (max-width: 76.2344em) {
  .md-header__inner { position: relative; }
  .md-header__title { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .md-header__title .md-header__ellipsis { position: static; width: auto; }
  .md-header__topic { position: static; margin: 0; }
  .md-header__inner > label[for="__search"] { margin-left: auto; }
}
.md-search__form { background: rgb(9 9 11 / .05); }
[data-md-color-scheme="slate"] .md-search__form { background: rgb(255 255 255 / .06); }
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--md-typeset-a-color); font-weight: 600; }
.md-typeset h1 { color: var(--md-default-fg-color); font-weight: 700; letter-spacing: -0.01em; }
.md-typeset h2 { font-weight: 600; }

/* A guide video, 16:10 like the recordings: its YouTube thumbnail (16:9, the
   recording pillar-boxed in it, so cropping to 16:10 trims the black bars) with
   Mayam's play button in the middle; the player loaded on press (video.js). */
.md-typeset .video { position: relative; aspect-ratio: 16 / 10; margin: 1em 0 1.5em; border-radius: 8px; overflow: hidden; background: #1f1a14; border: 1px solid var(--gc-rule); }
.md-typeset .video iframe, .md-typeset .video .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.md-typeset .video .video-play { padding: 0; cursor: pointer; background: #1f1a14; color: #fff; -webkit-appearance: none; appearance: none; }
.md-typeset .video .video-play img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; }
.md-typeset .video .video-icon { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #886a31; box-shadow: 0 2px 10px rgb(0 0 0 / .35); transition: transform .15s, background .15s; }
.md-typeset .video .video-icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-38%, -50%); border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.md-typeset .video .video-play:hover .video-icon, .md-typeset .video .video-play:focus-visible .video-icon { transform: scale(1.08); background: #6e5628; }

/* Screenshots are 2x: shown at the column's width with a hairline edge. */
.md-typeset img { border: 1px solid var(--gc-rule); border-radius: 4px; }