/* ShotWork docs theme. Implements DOCS_STYLE_GUIDE.md section 7. */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* JetBrains Mono ships static webfonts, not a variable woff2, so the two
   weights the pages use are loaded separately. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";
  /* A hammer: the mark of a planned block (Material Design's "hammer" glyph). */
  --md-admonition-icon--planned: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 19.63l9.43-9.43-.71-.7-1.41.7-2.83-2.83 4.24-4.24 2.83 2.83-.7 1.41.7.71 3.54-3.54-2.83-2.83 1.41-1.41 7.07 7.07-1.41 1.41-2.83-2.83-3.54 3.54.71.71 1.41-.71 2.12 2.12-9.43 9.43a1 1 0 0 1-1.41 0l-4.24-4.24a1 1 0 0 1 0-1.41z"/></svg>');
  /* Material's custom-admonition recipe: the cog that marks a technical block. */
  --md-admonition-icon--technical: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z"/></svg>');
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #2b2b2b;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #0b8f3e;
  --md-typeset-a-color: #3f6d8e;
  --sw-shot-border: #d0d3d8;
  --sw-shot-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1c1e21;
  --md-primary-fg-color: #141618;
  --md-primary-bg-color: #eeeeee;
  --md-accent-fg-color: #3df26c;
  --md-typeset-a-color: #6fa3c4;
  --sw-shot-border: #0e0f11;
  --sw-shot-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Every screenshot: framed so app chrome reads as an object on the page. */
.md-typeset figure.screenshot {
  margin: 1em 0 1.5em;
}
.md-typeset figure.screenshot img,
.md-typeset figure.screenshot video {
  border: 1px solid var(--sw-shot-border);
  border-radius: 4px;
  box-shadow: var(--sw-shot-shadow);
  max-width: 100%;
}
.md-typeset figure.screenshot figcaption {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  text-align: left;
  max-width: none;
}

/* Region maps: an SVG of the outlines over the screenshot, laid there by
   tools/mkdocs_hooks/region_maps.py and made pickable by
   javascripts/region-map.js. The wrapper shrinks to the image so the SVG
   can cover it exactly; the 1px inset is the image's own border. */
.md-typeset .region-map {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: top;
}
.md-typeset .region-map img {
  display: block;
}
.md-typeset .region-map .region-overlay {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  pointer-events: none;
}
.region-overlay g {
  transition: opacity 180ms ease;
}
.region-overlay .region-badge {
  pointer-events: auto;
  cursor: pointer;
}
.region-overlay .region-badge text {
  font-family: var(--md-text-font), sans-serif;
}
.region-overlay[data-selected] .region-outline:not(.is-selected) {
  opacity: 0;
}
.region-overlay[data-selected] .region-badge:not(.is-selected) {
  opacity: 0.35;
}
/* The table's numbers, as the badges' twins: orange ring, filled when
   pressed. Orange 5 over orange 8, annotate.py's "orange" scheme. */
.md-typeset button.region-pick {
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.35em;
  border: 2px solid #f97316;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 0.8rem/1 var(--md-text-font), sans-serif;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.md-typeset button.region-pick:hover {
  background: rgba(249, 115, 22, 0.18);
}
.md-typeset button.region-pick[aria-pressed="true"] {
  background: #f97316;
  border-color: #9a3412;
  color: #10141c;
}
.md-typeset tr.region-row--selected > td {
  background: rgba(249, 115, 22, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .region-overlay g,
  .md-typeset button.region-pick {
    transition: none;
  }
}

/* Collapsible "technical" admonition: gray, cog icon. */
.md-typeset .admonition.technical,
.md-typeset details.technical {
  border-color: #767676;
}
.md-typeset .technical > .admonition-title,
.md-typeset .technical > summary {
  background-color: rgba(118, 118, 118, 0.1);
}
.md-typeset .technical > .admonition-title::before,
.md-typeset .technical > summary::before {
  background-color: #767676;
  -webkit-mask-image: var(--md-admonition-icon--technical);
  mask-image: var(--md-admonition-icon--technical);
}

/* "Planned" admonition: a section documenting something on the roadmap
   that is not built yet. Amber, so it reads as a flag rather than a note,
   and dashed, so it reads as provisional. Jarom's call, 2026-09-14: the
   docs are written ahead of the app, and every one of these is either
   removed or de-flagged before launch. `python tools/docs_planned.py`
   lists them all. */
.md-typeset .admonition.planned,
.md-typeset details.planned {
  border-color: #e8952e;
  border-style: dashed;
}
.md-typeset .planned > .admonition-title,
.md-typeset .planned > summary {
  background-color: rgba(232, 149, 46, 0.12);
}
.md-typeset .planned > .admonition-title::before,
.md-typeset .planned > summary::before {
  background-color: #e8952e;
  -webkit-mask-image: var(--md-admonition-icon--planned);
  mask-image: var(--md-admonition-icon--planned);
}

/* Optional page badge (tiers / since-version). DECIDE: unused until tiers exist. */
.sw-badge {
  display: inline-block;
  font: 600 0.7rem/1.6 var(--md-text-font);
  padding: 0 0.5em;
  border-radius: 3px;
  letter-spacing: 0.02em;
  background: var(--md-accent-fg-color);
  color: #10141c;
}

/* -- Sidebar navigation ---------------------------------------------------
   Section labels read as labels, not as another link in the list. Material
   styles them almost identically to their children by default, which made
   "Getting started" and "Marking shots" scan as pages (Jarom, 2026-09-09). */
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__item--section > label.md-nav__link {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin-top: 1.4em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* The home entry duplicates the header title and the page's own H1, three
   "ShotWork"s in a row. The header title already links home, so the sidebar
   row is redundant. It stays in the nav (mkdocs --strict requires every page
   to be listed) and is hidden here. */
.md-nav--primary > .md-nav__list > .md-nav__item:first-child:not(.md-nav__item--section) {
  display: none;
}

/* A name for a control that does not exist in the app yet, inside a planned
   section: `**Label**{ .tbd }`. Loud on purpose, so the owner can approve or
   change each name before launch (Jarom, 2026-09-15). The launch sweep,
   `python tools/docs_planned.py`, lists every one. */
.md-typeset .tbd {
  background-color: #ff2bd6;
  color: #000000;
  outline: 2px dashed #00e5ff;
  outline-offset: 1px;
  padding: 0 0.2em;
}


/* Reading review mode (docs/javascripts/review-mode.js). None of these
   classes exist on the page unless the mode is on, which is one browser at
   a time and never a visitor's (Jarom, 2026-09-21). */
.review-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.4rem 0.6rem 0.2rem;
  font-size: 0.65rem;
}
.review-panel button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 0.1rem;
  padding: 0 0.3rem;
  cursor: pointer;
}
.review-count {
  font-weight: 700;
}
.review-tick {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border: 1px solid currentColor;
  border-radius: 0.1rem;
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}
.review-tick[aria-checked="true"] {
  opacity: 1;
}
.review-tick:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 1px;
}
.md-nav__item.review-done {
  display: none;
}
.review-chip {
  margin-left: 0.3rem;
  padding: 0 0.25rem;
  border-radius: 0.1rem;
  background-color: var(--md-accent-fg-color);
  color: var(--md-primary-bg-color);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The wordmark. In the header it is the logo (mkdocs.yml); the site name
   Material prints beside it would say the same thing twice, so it is
   hidden while keeping its place, and the page title still slides in
   when the reader scrolls. On the landing page the wordmark stands where
   the H1 was. The header is dark in both schemes, so it takes the
   dark-ground SVG; the landing page carries both and shows the one its
   scheme calls for. */
.md-header__topic:first-child {
  visibility: hidden;
}
.md-header__button.md-logo img {
  height: 1.1rem;
  width: auto;
}
.md-nav__button.md-logo img {
  height: 1.6rem;
  width: auto;
}
.sw-wordmark {
  margin: 0.6em 0 1em;
}
.sw-wordmark img {
  height: 2.6rem;
  width: auto;
  display: block;
}
[data-md-color-scheme="default"] .sw-wordmark .sw-on-dark,
[data-md-color-scheme="slate"] .sw-wordmark .sw-on-light {
  display: none;
}