/* Shared styles for the release pages. Illustrations use example content; only the View and Spoken form radios change them. */
.release-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--size-3);
  margin-block: var(--size-6);

  & > a {
    display: grid;
    gap: var(--size-2);
    padding: var(--size-4);
    border: var(--border-size-1) solid var(--border-color);
    border-radius: var(--radius-3);
    background: var(--surface-2);
    color: var(--text-1);
    text-decoration: none;
  }

  & ui-icon { color: var(--brand); font-size: var(--font-size-4); }
  & span { color: var(--text-2); }
  & a:hover { border-color: var(--brand); }
}

/* A card update ready to post on the Trello card the section answers. */
.release-trello {
  max-width: 75ch;
  margin-block: var(--size-4);
  padding: var(--size-3) var(--size-4);
  border-inline-start: var(--border-size-3) solid var(--brand);
  border-radius: var(--radius-2);
  background: var(--surface-2);

  & > h3 { margin-block: 0 var(--size-2); font-size: var(--font-size-1); }
  & p { margin-block: var(--size-2); }
}

.example-note { color: var(--text-2); font-size: var(--font-size-0); }
.example-key { display: flex; flex-wrap: wrap; gap: var(--size-4); padding-block: var(--size-3); font-size: var(--font-size-0); }
.example-key > span { display: inline-flex; align-items: baseline; gap: var(--size-2); }

kbd {
  font-family: var(--font-mono, monospace); font-size: 0.85em;
  padding: 0.1em 0.4em; border-radius: var(--radius-1);
  background: var(--surface-1); border: var(--border-size-1) solid var(--border-color);
}

.release-visual {
  margin: var(--size-5) 0 var(--size-6);
  color: var(--text-1);
  line-height: 1.6;

  & figcaption { margin-block-start: var(--size-3); color: var(--text-2); font-size: var(--font-size-0); }
  & p { margin-block: var(--size-2); }
  & .visual-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-3); }
}

.example-window, .example-studio {
  border: var(--border-size-1) solid var(--border-color);
  border-radius: var(--radius-3);
  overflow: hidden;
  background: var(--surface-1);
}

.example-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-3);
  border-block-end: var(--border-size-1) solid var(--border-color);
  background: var(--surface-2);
  font-size: var(--font-size-0);
}

.example-document {
  padding: var(--size-5);
  font-family: Literata, Georgia, serif;
  font-size: var(--font-size-1);

  & .example-heading { font-size: var(--font-size-3); font-weight: var(--font-weight-7); margin-block: var(--size-2) var(--size-4); line-height: 1.4; }
  & p { margin-block: var(--size-3); }
  & table { width: 100%; margin-block: var(--size-4); }
  & caption { text-align: start; font-weight: var(--font-weight-6); }
  & th, & td { border: var(--border-size-1) solid var(--border-color); padding: var(--size-2); text-align: start; }
  & th { background: var(--surface-2); }
}

.example-page {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-2);
  font-size: var(--font-size-0);
  /* Two hairlines with a gap between them, the shape public/document.css draws. The number's
     chip breaks the line where it crosses it. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 var(--border-size-1),
    var(--border-color) var(--border-size-1) var(--border-size-2));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% var(--border-size-3);

  & span { padding-inline: var(--size-1); background: var(--surface-1); }
}
.example-dot { display: inline-block; width: .55em; height: .55em; border-radius: var(--radius-round); margin-inline-end: .25em; background: var(--status-recorded); vertical-align: middle; }
.example-dot[data-status="mismatch"] { background: var(--status-mismatch); }
.example-mismatch { text-decoration: underline wavy var(--status-mismatch); text-underline-offset: .25em; }
.example-tentative { text-decoration: underline dashed var(--status-mismatch); text-underline-offset: .25em; }
.example-current { background: color-mix(in oklab, var(--brand) 9%, var(--surface-1)); border-radius: var(--radius-1); }
.example-heard { background: color-mix(in oklab, var(--brand) 8%, var(--surface-1)); }
.example-cursor { background: color-mix(in oklab, var(--brand) 25%, var(--surface-1)); border-radius: var(--radius-1); }
[data-reading] { font-family: var(--font-neo-grotesque); font-size: .75em; color: var(--text-1); background: color-mix(in oklab, var(--annotation) 10%, var(--surface-1)); border-radius: var(--radius-1); padding: .1em .3em; margin-inline-start: .3em; vertical-align: super; }

.example-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4);
  padding: var(--size-4);
  background: var(--surface-2);
  border: var(--border-size-1) solid var(--border-color);
  border-radius: var(--radius-3);
  margin-block-end: var(--size-3);

  & fieldset { margin: 0; min-width: 0; }
  & legend { font-weight: var(--font-weight-6); }
}

.example-studio {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) 3.5rem;
  grid-template-areas: "title title title" "book document rail" "bottom bottom bottom";

  & > .example-title { grid-area: title; }
  & > .example-document { grid-area: document; }
}

.example-book {
  grid-area: book;
  padding: var(--size-3);
  border-inline-end: var(--border-size-1) solid var(--border-color);
  font-size: var(--font-size-0);

  & p { padding: var(--size-2); }
  & [data-selected] { background: var(--surface-2); color: var(--brand); border-radius: var(--radius-2); }
}
.example-page-link { display: block; margin-block-start: var(--size-6); color: var(--brand); }
.example-document[data-layout="sentences"] p { padding-block-end: var(--size-2); border-block-end: var(--border-size-1) solid var(--border-color); }

.example-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding: var(--size-2);
  border-inline-start: var(--border-size-1) solid var(--border-color);
  font-size: var(--font-size-00);

  & > span { display: grid; justify-items: center; gap: var(--size-1); padding: var(--size-2); text-align: center; }
  & ui-icon { font-size: var(--font-size-3); }
  & [data-selected] { outline: var(--border-size-2) solid var(--brand); border-radius: var(--radius-2); background: var(--surface-2); }
}

.example-bottom {
  grid-area: bottom;
  padding: var(--size-3);
  border-block-start: var(--border-size-1) solid var(--border-color);
  background: var(--surface-2);

  & > div:last-child { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: var(--size-4); font-size: var(--font-size-0); }
}
.example-record { display: inline-flex; align-items: center; gap: var(--size-1); color: var(--status-error); font-weight: var(--font-weight-6); }
.example-wave {
  display: flex;
  align-items: center;
  gap: var(--size-1);
  height: 3rem;
  margin-block-end: var(--size-3);

  & span { flex: 1; height: 30%; background: var(--brand); opacity: .65; border-radius: var(--radius-1); }
  & span:nth-child(3n) { height: 80%; }
  & span:nth-child(4n) { height: 50%; }
  & span:nth-child(5n) { height: 95%; }
}

[data-example="view"] {
  &:not(:has([value="dots"]:checked)) .example-dot { display: none; }
  &:has([value="clean"]:checked) .example-mismatch { text-decoration: none; }
  &:has([value="clean"]:checked) :is(.example-heard, .example-cursor) { background: none; }
  &:has([value="off"]:checked) [data-reading], &:not(:has([value="full"]:checked)) [data-reading="auto"] { display: none; }
}

.example-drift { display: inline-flex; color: var(--status-mismatch); }
.example-detail { padding: var(--size-4); }
.example-detail progress { width: 100%; accent-color: var(--brand); }
.example-menu { display: flex; align-items: center; gap: var(--size-2); padding: var(--size-3); border-block-start: var(--border-size-1) solid var(--border-color); background: var(--surface-2); }
.example-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--size-3);
  padding: var(--size-4);
  background: var(--surface-1);
  border: var(--border-size-1) solid var(--border-color);
  border-radius: var(--radius-2);

  & > ui-icon { flex: none; font-size: var(--font-size-3); color: var(--brand); }
  &[data-tone="warning"] { border-inline-start: var(--border-size-3) solid var(--status-mismatch); }
  &[data-tone="warning"] > ui-icon { color: var(--status-mismatch); }
}

@media (max-width: 800px) {
  .example-studio { grid-template-columns: minmax(0, 1fr) 3.5rem; grid-template-areas: "title title" "document rail" "bottom bottom"; }
  .example-book { display: none; }
  .example-document { padding: var(--size-3); }
}

@media (max-width: 560px) {
  .release-visual .visual-pair { grid-template-columns: minmax(0, 1fr); }
  .example-studio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "document" "rail" "bottom"; }
  .example-rail { flex-direction: row; flex-wrap: wrap; justify-content: center; border-inline-start: 0; border-block-start: var(--border-size-1) solid var(--border-color); }
  .example-controls { padding: var(--size-2); }
  .example-controls [data-look="segmented"] > label { padding-inline: var(--size-2); font-size: var(--font-size-0); }
}