/* Page components: the language checker, inline diagrams, and figure layout.
 *
 * Kept out of facecue.css so a component can be styled without touching the theme
 * sheet. Every colour comes from an existing theme token, so everything here
 * follows the palette and both colour schemes with no rules of its own for either.
 */

/* ---- figures ----
 *
 * Figures and their captions centre in the column, and so does anything inside
 * one. Material centres a `markdown="span"` figure by default and the theme
 * sheet's own figure rule resets the margins, so this states it rather than
 * relying on which sheet loads last. Covers screenshots as well as diagrams.
 */

.md-typeset figure {
  /* Material shrink-wraps a markdown="span" figure to its content, which leaves a
   * diagram sized by whatever its intrinsic width happened to be. Taking the full
   * column and centring the contents inside it means a diagram uses the space and
   * a fixed-size screenshot still sits in the middle. */
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.md-typeset figure > img,
.md-typeset figure > svg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.md-typeset figcaption {
  margin-left: auto;
  margin-right: auto;
}

.md-typeset .fc-lc {
  border: 1px solid var(--fc-callout-border);
  background: var(--fc-callout);
  border-radius: 4px;
  padding: 0.9rem 1rem 1rem;
  margin: 1.2em 0;
}

/* ---- search bar ---- */

.md-typeset .fc-lc-bar {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.md-typeset .fc-lc-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--md-default-fg-color);
  background: var(--fc-section-header);
  border: 1px solid var(--fc-hairline);
  border-radius: 3px;
  padding: 0.4em 0.7em;
}

.md-typeset .fc-lc-input:focus {
  outline: none;
  border-color: var(--fc-gold);
}

.md-typeset .fc-lc-input::placeholder { color: var(--md-default-fg-color--light); }

.md-typeset .fc-lc-toggle {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.72rem;
  color: var(--fc-button-label);
  background: var(--fc-button);
  border: 1px solid var(--fc-button-border);
  border-radius: 3px;
  padding: 0.4em 0.9em;
  cursor: pointer;
  white-space: nowrap;
}

.md-typeset .fc-lc-toggle:hover { background: var(--fc-button-hover); }

/* ---- list ---- */

.md-typeset .fc-lc-hint {
  margin: 0.7em 0 0.5em;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .fc-lc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fc-hairline);
}

/* Folded, a search returns a handful of rows and they all show. Unfolded, the whole
 * list is there and has to be capped or it takes over the page. */
.md-typeset .fc-lc-list.is-open {
  max-height: 19rem;
  overflow-y: auto;
}

.md-typeset .fc-lc-list li {
  margin: 0;
  list-style: none;
}

.md-typeset .fc-lc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.38em 0.2em;
  border-bottom: 1px solid var(--fc-hairline);
}

/* The name yields, never the chips. A long language name truncates rather than
 * squeezing the chip column out of alignment or off the edge. */
.md-typeset .fc-lc-name {
  font-size: 0.78rem;
  color: var(--md-default-fg-color);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-typeset .fc-lc-badges {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}

/* ---- badges, matching the tier-badge idiom ---- */

/* Every chip is the same width, so a row is read down a column rather than by
 * hunting along a ragged line. The width is set from the longest label
 * ("Multilingual") plus the mark and the padding, and the label is centred inside
 * it. A chip is a fixed slot, not a piece of text that happens to have a border. */
.md-typeset .fc-lc-badge {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3em;
  /* Sized from the widest label, "Multilingual", measured in the browser at this
   * font rather than estimated, plus the mark, the gap and the padding. Three of
   * these plus the language name have to sit inside the prose column. */
  width: 5.6rem;
  flex: 0 0 auto;
  box-sizing: border-box;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.05em 0.4em;
  border-radius: 3px;
  border: 1px solid;
  background-color: var(--fc-section-header);
}

.md-typeset .fc-lc-mark { font-weight: 700; }
.md-typeset .fc-lc-chip-label { white-space: nowrap; }

/* The bake chip is a ladder, so its three states are a colour ramp: gold for the
 * tuned route, green for the multilingual one, neutral for the universal floor.
 * The two generation chips share one colour so they read as a separate family
 * rather than as further rungs on that ladder. */
.md-typeset .fc-lc-badge.is-on.fc-lc-tuned { color: var(--fc-gold); border-color: var(--fc-gold); }
.md-typeset .fc-lc-badge.is-on.fc-lc-multi { color: var(--fc-ok);   border-color: var(--fc-ok); }
.md-typeset .fc-lc-badge.is-on.fc-lc-gen   { color: var(--fc-blue); border-color: var(--fc-blue); }
.md-typeset .fc-lc-badge.is-on.fc-lc-universal {
  color: var(--md-default-fg-color--light);
  border-color: var(--fc-hairline);
}

.md-typeset .fc-lc-badge.is-off {
  color: var(--md-default-fg-color--lighter);
  border-color: var(--fc-hairline);
  background: transparent;
}

/* ---- no match ---- */

.md-typeset .fc-lc-empty {
  padding: 0.9em 0 0.2em;
  font-size: 0.78rem;
}

.md-typeset .fc-lc-empty strong { color: var(--md-default-fg-color); }
.md-typeset .fc-lc-empty p { margin: 0.4em 0 0; color: var(--md-default-fg-color--light); }

/* ---- narrow screens: badges drop under the name ---- */

@media screen and (max-width: 45em) {
  .md-typeset .fc-lc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .md-typeset .fc-lc-badges { flex-wrap: wrap; }
}

/* ---- inline diagrams ----
 *
 * Conceptual figures drawn as SVG rather than captured from the editor, for the
 * few ideas that are about shape over time and have no screen to photograph.
 * Colours are theme tokens, so a diagram follows the palette and both schemes.
 */

.md-typeset .fc-diagram {
  width: 100%;
  height: auto;
  display: block;
}

.md-typeset .fc-dg-axis line {
  stroke: var(--fc-hairline);
  stroke-width: 1;
}

.md-typeset .fc-dg-span line {
  stroke: var(--fc-hairline);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.md-typeset .fc-dg-curve {
  fill: none;
  stroke: var(--fc-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.md-typeset .fc-dg-label text {
  fill: var(--md-default-fg-color--light);
  font-size: 15px;
  font-family: inherit;
}

/* Fill the column rather than shrink to content, so two tables on a page agree with each other
 * and with the paragraphs between them.
 *
 * Material wraps a table as scrollwrap > md-typeset__table > table and makes the table itself
 * `display: inline-block`, which shrinks it to its content, so the only thing missing is telling
 * the table to fill the wrapper it already has. Specificity is raised past Material's own rule
 * deliberately, hence the leading .md-typeset. */
/* Two steps, and the first one is why the obvious version of this does not work. Material makes
 * the wrapper `display: inline-block`, so it shrinks to its content, and a percentage width on
 * the table inside then resolves against that shrunken box. Telling the table to fill 100% of a
 * box that is itself sized by the table is circular, and measures out at exactly the width it
 * started with. So the wrapper is made to fill first, and only then does the table's percentage
 * mean the column. */
.md-typeset .md-typeset__scrollwrap,
.md-typeset .md-typeset__table {
  display: block;
  width: 100%;
}

/* Material pulls the scroll wrapper 0.8rem wider than the column on each side and pads the
 * inner wrapper 0.8rem back in, so a table ends up inset by 1.6rem overall and stops short of
 * the prose it sits between. Both are zeroed here so the table's edges line up with the text.
 * Measured: 720px column, 688px table, exactly the 32px this pair accounts for. */
.md-typeset .md-typeset__scrollwrap { margin-left: 0; margin-right: 0; }
.md-typeset .md-typeset__table { padding-left: 0; padding-right: 0; }

.md-typeset .md-typeset__table > table,
.md-typeset > table:not([class]) {
  display: table;
  min-width: 100%;
}

/* ---- yes / no marks in compatibility tables ----
 *
 * A support matrix reads faster as marks than as repeated words, so the cells carry a tick or
 * a cross. Each one keeps a title attribute with the word, so the meaning survives a screen
 * reader and a hover, and colour is never the only thing carrying it: the two glyphs differ
 * in shape as well, which matters for anyone who cannot separate the two hues.
 */

.md-typeset .fc-yes,
.md-typeset .fc-no {
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1;
  cursor: default;
}

.md-typeset .fc-yes { color: var(--fc-ok); }
.md-typeset .fc-no  { color: var(--fc-error); }

/* ---- annotated screenshots ----
 *
 * A numbered map of a window: pins sit on the screenshot, a matching key sits under it, and the
 * prose refers to a part by its number instead of describing where it is on screen.
 *
 * The pins are positioned in per-cent rather than pixels, so they track the image at whatever
 * width it renders at and survive the image being re-shot at a different resolution. Each pin
 * carries its own --x / --y inline, which is the one thing that has to be authored per image.
 *
 * The pin is a dark disc with a gold rim rather than a solid gold dot, because a screenshot of
 * this editor is mostly mid-tone chrome and a filled marker disappears into it. The rim reads
 * against both the dark panels and the pale cue blocks.
 */

.md-typeset .fc-shot {
  position: relative;
  display: block;
  line-height: 0;
}

.md-typeset .fc-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* Pin and key badge share a look, but not a size. The badge in the key sits next to running text
 * and is sized against it. The pin sits on a screenshot of a dense editor, where a toolbar row is
 * about fourteen pixels once the image is scaled into the column, so a badge sized for prose is
 * half again taller than the thing it points at. The pin is sized against the screenshot instead. */
.md-typeset .fc-pin,
.md-typeset .fc-key > li::before {
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(18, 16, 13, 0.92);
  border: 1px solid var(--fc-gold);
  color: var(--fc-gold);
  font-weight: 700;
  text-align: center;
  font-style: normal;
}

.md-typeset .fc-key > li::before {
  width: 1.45em;
  height: 1.45em;
  font-size: 0.72rem;
  line-height: 1.3em;
}

.md-typeset .fc-pin {
  /* min-width rather than width, so a two-digit pin widens into a short pill instead of
   * squeezing its digits. Single digits stay round. */
  min-width: 1.2em;
  height: 1.2em;
  padding: 0 0.18em;
  font-size: 0.55rem;
  line-height: 1.05em;
}

.md-typeset .fc-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: block;
}

/* The key under the shot. Numbers are generated, so the markup is a plain list and the numbering
 * cannot drift out of step with itself the way hand-typed numbers do. */
.md-typeset .fc-key {
  list-style: none;
  counter-reset: fc-key;
  padding-left: 0;
  margin-top: 0.7em;
}

.md-typeset .fc-key > li {
  counter-increment: fc-key;
  position: relative;
  padding-left: 2.1em;
  margin: 0.32em 0;
  break-inside: avoid;
}

.md-typeset .fc-key > li::before {
  content: counter(fc-key);
  position: absolute;
  left: 0;
  top: 0.12em;
  display: block;
}

@media screen and (min-width: 60em) {
  .md-typeset .fc-key {
    columns: 2;
    column-gap: 1.8rem;
  }
}

/* The overview shot is downscaled a long way from its capture size, so say that clicking it
 * gives you the full-size version rather than leaving that to the caption alone. */
.md-typeset .fc-shot a {
  cursor: zoom-in;
}

/* ---- drawn-in cursor ----
 *
 * A screen capture never contains the mouse cursor, so a screenshot cannot show what the pointer
 * turns into over a draggable edge. This draws it back in, positioned the same way the pins are.
 *
 * It is deliberately a drawing and not a photograph of a cursor: the shape is the platform's
 * resize-horizontal pointer, and drawing it keeps it sharp at any scale and in either theme.
 */

.md-typeset .fc-cursor {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: block;
  width: 1.7rem;
  pointer-events: none;
  /* lifts it off the screenshot so it reads as an overlay and not part of the capture */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.md-typeset .fc-cursor svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- pages still being written ----
 *
 * A published site with unfinished chapters in it. The alternative was leaving the outline
 * skeletons up, but a list of headings with a one-line tease under each reads as somebody's
 * notes rather than as a page, and a reader cannot tell the difference between that and a
 * page that is finished and thin.
 *
 * So the skeleton comes out and this goes in: the chapter's title and its one-line purpose
 * stay, because both are real writing and both tell a reader whether this is the page they
 * wanted, and the notice says plainly that the rest is coming.
 */

.md-typeset .fc-soon {
  border: 1px solid var(--fc-callout-border);
  border-left: 3px solid var(--fc-gold);
  background: var(--fc-callout);
  border-radius: 3px;
  padding: 1rem 1.1rem;
  margin: 1.6em 0;
}

.md-typeset .fc-soon > :first-child { margin-top: 0; }
.md-typeset .fc-soon > :last-child { margin-bottom: 0; }

.md-typeset .fc-soon-title {
  display: block;
  font-weight: 600;
  color: var(--fc-gold);
  margin-bottom: 0.4em;
}