@nysds/playground 0.1.0

package/src/app.css

@@ -0,0 +1,1087 @@
+/*
+ * Shell styling for the playground.
+ *
+ * The design system supplies the reset, the type scale, and the color
+ * variables. Everything here covers the split-pane layout, the presentation
+ * chrome, and the playground editor theming, which the design system does not
+ * ship.
+ */
+
+:root {
+  --pg-toolbar-height: auto;
+  --pg-divider-width: 10px;
+  --pg-surface: var(--nys-color-ink-reverse, #ffffff);
+  --pg-border: var(--nys-color-neutral-100, #d0d0ce);
+  --pg-muted: var(--nys-color-text-weaker, #62666a);
+  --pg-editor-surface: var(--nys-color-ink-reverse, #ffffff);
+  --pg-editor-border: var(--nys-color-neutral-100, #d0d0ce);
+  --pg-editor-label: var(--nys-color-text-weaker, #62666a);
+  --pg-editor-label-strong: var(--nys-color-text, #1b1b1b);
+  --pg-column-strip-width: 32px;
+
+  /* Playground editor theming. Larger than the default so code reads from
+     the back of a room. */
+  --playground-code-font-size: 15px;
+  --playground-code-line-height: 1.55;
+  --playground-code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --playground-code-padding: 12px 8px;
+  --playground-preview-width: 100%;
+  --playground-bar-height: 40px;
+  --playground-tab-bar-font-size: 14px;
+  --playground-tab-bar-background: var(--pg-surface);
+  --playground-tab-bar-active-color: var(--nys-color-theme, #154973);
+  --playground-tab-bar-indicator-color: var(--nys-color-theme, #154973);
+}
+
+/* Dark editor theme. Only the editor pane changes: the preview keeps showing
+   the design system as it is, and the caption bar keeps the theme color. */
+body[data-editor-theme="dark"] {
+  --pg-editor-surface: #212121;
+  --pg-editor-border: #3a3a3a;
+  --pg-editor-label: #a8a8a8;
+  --pg-editor-label-strong: #ffffff;
+  --playground-tab-bar-background: var(--pg-editor-surface);
+  --playground-tab-bar-foreground-color: #d0d0ce;
+  --playground-tab-bar-active-color: #ffffff;
+  --playground-tab-bar-indicator-color: #82aaff;
+  --playground-code-font-size: 15px;
+}
+
+body[data-editor-theme="dark"] .split__pane--editors {
+  background: var(--pg-editor-surface);
+  border-color: var(--pg-editor-border);
+}
+
+body[data-editor-theme="dark"] .editors__tabs {
+  border-bottom-color: var(--pg-editor-border);
+}
+
+body[data-editor-theme="dark"] .split__divider {
+  background: var(--pg-editor-border);
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--pg-surface);
+  overflow: hidden;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+}
+
+/* Home ----------------------------------------------------------------- */
+
+/* A raised surface behind the home page so the white deck cards stand out. */
+.app:has(> .home:not([hidden])) {
+  background: var(--nys-color-surface-raised, #f6f6f6);
+}
+
+.home {
+  flex: 1 1 auto;
+  width: min(1100px, 100%);
+  margin-inline: auto;
+  padding: 32px 24px 64px;
+  overflow-y: auto;
+}
+
+.home[hidden] {
+  display: none;
+}
+
+.app--home .toolbar,
+.app--home .split,
+.app--home .caption,
+.app--home .preview__build {
+  display: none;
+}
+
+.home__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.home__title {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  gap: 16px;
+  margin: 0;
+  font-size: 2.5rem;
+}
+
+/* The logo's intrinsic size is 1037x114; scale it by height so the
+   wordmark lines up with the "Playground" text beside it. */
+.home__logo {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: 48px;
+}
+
+.home__title-text {
+  padding-left: 16px;
+  border-left: 2px solid var(--nys-color-neutral-300, #b1b3b5);
+  font-size: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--pg-muted);
+}
+
+/* On a phone the wordmark and "Playground" no longer fit beside the settings
+   button on one line, so stack them and drop the divider. */
+@media (max-width: 640px) {
+  .home {
+    padding-inline: 16px;
+  }
+  .home__title {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+  .home__logo {
+    width: min(100%, 320px);
+    height: auto;
+  }
+  .home__title-text {
+    padding-left: 0;
+    border-left: 0;
+    font-size: 0.875rem;
+  }
+}
+
+.home__lede {
+  margin: 16px 0 24px;
+  max-width: 60ch;
+  color: var(--pg-muted);
+}
+
+.home__actions {
+  margin-bottom: 32px;
+}
+
+.home__decks {
+  --nys-card-height: 100%;
+}
+
+.home__empty {
+  margin: 0;
+  color: var(--pg-muted);
+}
+
+.home__footer {
+  margin-top: 32px;
+}
+
+/* The title is a link to the present view, so it is rendered in the card's
+   default slot rather than through the plain-text `heading` property. */
+.deck-card__title {
+  margin: 0;
+  font-family: var(--nys-font-family-heading);
+  font-size: var(--nys-font-size-h4, 1.25rem);
+  line-height: var(--nys-font-lineheight-h4, 1.3);
+  font-weight: var(--nys-font-weight-bold, 700);
+}
+
+.deck-card__title a {
+  color: var(--nys-color-text);
+  text-decoration: none;
+}
+
+.deck-card__title a:hover {
+  text-decoration: underline;
+}
+
+.deck-card__title a:focus-visible {
+  outline: 2px solid var(--nys-color-focus, #004dd1);
+  outline-offset: 2px;
+}
+
+.deck-card__meta {
+  margin: 4px 0 0;
+  color: var(--pg-muted);
+  font-size: 0.9375rem;
+}
+
+.deck-card__description {
+  margin: 8px 0 0;
+}
+
+.deck-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.deck-card__play {
+  width: 24px;
+  height: 24px;
+}
+
+.home--dragging {
+  outline: 3px dashed var(--nys-color-theme, #154973);
+  outline-offset: -12px;
+}
+
+/* Deck not found ------------------------------------------------------- */
+
+.deck-missing {
+  width: min(680px, 100%);
+  margin: 48px auto;
+  padding-inline: 24px;
+}
+
+.deck-missing[hidden] {
+  display: none;
+}
+
+.deck-missing nys-button {
+  margin-top: 16px;
+}
+
+.app--missing .toolbar,
+.app--missing .split,
+.app--missing .caption,
+.app--missing .preview__build {
+  display: none;
+}
+
+/* Toolbar -------------------------------------------------------------- */
+
+/*
+ * One compact row: the mark and the deck on the left, a spacer, then the
+ * version and the actions as circle buttons, matching the slide bar and the
+ * deck cards.
+ */
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 56px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--pg-border);
+  background: var(--pg-surface);
+}
+
+.toolbar__home {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--nys-color-theme, #154973);
+  border-radius: 4px;
+}
+
+.toolbar__home:focus-visible {
+  outline: 2px solid var(--nys-color-focus, #004dd1);
+  outline-offset: 2px;
+}
+
+.toolbar__mark {
+  width: 100%;
+  height: 100%;
+}
+
+.toolbar__spacer {
+  flex: 1 1 auto;
+}
+
+.toolbar__title {
+  margin: 0;
+  max-width: 40%;
+  overflow: hidden;
+  font-size: 1.125rem;
+  font-weight: var(--nys-font-weight-bold, 700);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The title is the rename control: plain text until you reach for it. */
+.toolbar__rename {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font-family: inherit;
+  cursor: text;
+}
+
+.toolbar__rename:hover,
+.toolbar__rename:focus-visible {
+  box-shadow: inset 0 -2px 0 var(--nys-color-theme, #154973);
+}
+
+.toolbar__rename:focus-visible {
+  outline: 2px solid var(--nys-color-focus, #004dd1);
+  outline-offset: 1px;
+}
+
+.toolbar__rename > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.toolbar__rename-icon {
+  flex: 0 0 auto;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.toolbar__rename:hover .toolbar__rename-icon,
+.toolbar__rename:focus-visible .toolbar__rename-icon {
+  opacity: 0.7;
+}
+
+.toolbar__rename-input {
+  width: 28ch;
+  max-width: 40%;
+  padding: 4px 6px;
+  border: 1px solid var(--nys-color-theme, #154973);
+  border-radius: 4px;
+  background: var(--pg-surface);
+  color: var(--nys-color-text);
+  font-family: inherit;
+  font-size: 1.125rem;
+  font-weight: var(--nys-font-weight-bold, 700);
+  line-height: 1.2;
+}
+
+.toolbar__rename-input[hidden] {
+  display: none;
+}
+
+.toolbar__rename-input:focus-visible {
+  outline: 2px solid var(--nys-color-focus, #004dd1);
+  outline-offset: 1px;
+}
+
+.toolbar__select {
+  width: 9rem;
+  flex: 0 0 auto;
+}
+
+/* The save indicator fades rather than shifting the toolbar, so the layout
+   stays still while you type. */
+.toolbar__saved {
+  margin: 0;
+  min-width: 5ch;
+  color: var(--pg-muted);
+  font-size: 0.8125rem;
+  opacity: 0;
+  transition: opacity 400ms ease;
+}
+
+.toolbar__saved--on {
+  opacity: 1;
+}
+
+/* Glyphs the design system does not ship, slotted into a button. */
+.glyph {
+  width: 20px;
+  height: 20px;
+}
+
+nys-button[circle] .glyph {
+  width: 24px;
+  height: 24px;
+}
+
+.settings__fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.settings__legend {
+  padding: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+
+.settings__hint {
+  margin: 4px 0 8px;
+  color: var(--pg-muted);
+  font-size: 0.875rem;
+}
+
+.share__lede {
+  margin: 0 0 16px;
+  color: var(--pg-muted);
+}
+
+.toolbar__controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.toolbar__select {
+  min-width: 180px;
+}
+
+/*
+ * Design system components set `display` on their `:host`, which beats the
+ * browser's `[hidden] { display: none }` rule. Restore it so the `hidden`
+ * property still works on them.
+ */
+nys-button[hidden],
+nys-select[hidden],
+nys-toggle[hidden] {
+  display: none !important;
+}
+
+.toolbar__toggle {
+  padding-bottom: 6px;
+}
+
+.toolbar__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-inline-start: auto;
+}
+
+/* Stage ---------------------------------------------------------------- */
+
+/*
+ * One layout serves editing and presenting. The preview fills the stage and
+ * the editors are a drawer over its bottom edge. Sharing the space would
+ * change the preview iframe's viewport, so dragging the divider would reflow
+ * the example and push the part you are looking at off the screen.
+ */
+.split {
+  position: relative;
+  display: block;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.split__pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.split__pane--preview {
+  position: absolute;
+  inset: 0;
+  background: #ffffff;
+}
+
+.split__pane--editors {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: 5;
+  height: var(--pg-drawer-size, 32%);
+  /* Solid, never translucent: code has to stay readable on a projector. */
+  background: var(--pg-editor-surface);
+  border-top: 1px solid var(--pg-editor-border);
+  box-shadow: 0 -8px 28px rgb(0 0 0 / 28%);
+}
+
+.split__divider {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: var(--pg-drawer-size, 32%);
+  z-index: 6;
+  height: var(--pg-divider-width);
+  cursor: row-resize;
+  border-block: 4px solid transparent;
+  background: var(--pg-editor-border);
+  background-clip: content-box;
+  touch-action: none;
+}
+
+.split__divider:focus-visible {
+  outline: 2px solid var(--nys-color-focus, #004dd1);
+  outline-offset: 1px;
+}
+
+.app--code-collapsed .split__pane--editors,
+.app--code-collapsed .split__divider {
+  display: none;
+}
+
+.preview {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Hide the preview's own header bar so the stage is only the slide. The
+   custom property has to land on the element itself: playground-preview sets
+   a default on :host, which beats an inherited value. */
+.preview {
+  --playground-bar-height: 0px;
+}
+
+.preview__build {
+  position: absolute;
+  inset-block-end: calc(var(--pg-drawer-size, 32%) + 16px);
+  inset-inline-end: 16px;
+  z-index: 4;
+  background: var(--pg-surface);
+  border-radius: 999px;
+}
+
+.app--code-collapsed .preview__build {
+  inset-block-end: 16px;
+}
+
+.preview__build--pending {
+  --nys-button-border-color: var(--nys-color-theme, #154973);
+  box-shadow: 0 0 0 3px rgb(21 73 115 / 22%);
+}
+
+.editors__layout {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.editors__layout[hidden] {
+  display: none;
+}
+
+.editors__layout--tabs {
+  flex-direction: column;
+}
+
+.editors__tabs {
+  flex: 0 0 auto;
+  border-bottom: 1px solid var(--pg-border);
+}
+
+.editors__editor {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Side-by-side columns ------------------------------------------------- */
+
+.editors__layout--columns {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  /* Expanded columns share the width evenly. */
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  /* The design system spaces sibling sections apart. The columns sit side by
+     side, so drop it. */
+  margin: 0;
+  border-inline-start: 1px solid var(--pg-editor-border);
+}
+
+.column:first-child {
+  border-inline-start: none;
+}
+
+.column__header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 2px 4px 2px 10px;
+  border-bottom: 1px solid var(--pg-editor-border);
+  background: var(--pg-editor-surface);
+}
+
+.column__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 6px 0;
+  border: none;
+  background: none;
+  color: var(--pg-editor-label);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: start;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.column__label:hover {
+  color: var(--pg-editor-label-strong);
+}
+
+.column__label:focus-visible {
+  outline: 2px solid var(--nys-color-focus, #004dd1);
+  outline-offset: -2px;
+}
+
+.column__editor {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* A collapsed column shrinks to a strip whose label reads bottom to top and
+   acts as the control that brings the column back. */
+.column--collapsed {
+  flex: 0 0 var(--pg-column-strip-width);
+}
+
+.column--collapsed .column__header {
+  flex: 1 1 auto;
+  align-items: stretch;
+  justify-content: center;
+  padding: 8px 0;
+  border-bottom: none;
+}
+
+.column--collapsed .column__label {
+  padding: 0;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  text-align: center;
+}
+
+.column--collapsed .column__collapse,
+.column--collapsed .column__editor {
+  display: none;
+}
+
+.preview {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.split__divider {
+  flex: 0 0 var(--pg-divider-width);
+  cursor: col-resize;
+  background: var(--pg-border);
+  background-clip: content-box;
+  border-inline: 4px solid var(--pg-surface);
+  touch-action: none;
+}
+
+.split__divider:focus-visible {
+  outline: 2px solid var(--nys-color-focus, #004dd1);
+  outline-offset: 1px;
+}
+
+/* Presentation mode ---------------------------------------------------- */
+
+.app--present .toolbar,
+.app--present .edit-only {
+  display: none;
+}
+
+.app:not(.app--present) .present-only {
+  display: none;
+}
+
+/* Deck-only controls disappear on the scratch pad, and the other way round. */
+.app:not(.app--deck) .deck-only,
+.app--deck .scratch-only {
+  display: none;
+}
+
+/*
+ * Three real columns rather than an absolutely centred mark. Both sides are
+ * `1fr`, so the mark is exactly centred and the sides shrink into their
+ * ellipses before anything can overlap it.
+ */
+.caption {
+  /* Sits above the editor drawer (z-index 5) so tooltips that pop upward
+     out of the bar are not painted over by the drawer. Modals use 20+. */
+  position: relative;
+  z-index: 10;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--nys-color-theme-strong);
+  background: var(--nys-color-theme);
+  color: var(--nys-color-text-reverse);
+}
+
+.caption[hidden] {
+  display: none;
+}
+
+/* The caption takes programmatic focus after every step, so it needs no
+   focus ring of its own. Its buttons still show theirs. */
+.caption:focus,
+.caption:focus-visible {
+  outline: none;
+}
+
+.caption__left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.caption__center {
+  display: flex;
+  align-items: center;
+}
+
+.caption__right {
+  display: flex;
+  align-items: center;
+  justify-self: end;
+  gap: 8px;
+}
+
+.caption__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* The mark matches the previous and next circle buttons, so the three read as
+   one row of equal shapes. */
+.caption__home {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: var(--nys-color-text-reverse);
+  border-radius: 50%;
+}
+
+.caption__home:focus-visible {
+  outline: 2px solid var(--nys-color-text-reverse);
+  outline-offset: 2px;
+}
+
+.caption__mark {
+  width: 100%;
+  height: 100%;
+}
+
+.caption__notes[hidden] {
+  display: none;
+}
+
+.caption__headline {
+  min-width: 0;
+}
+
+.caption__title {
+  margin: 0;
+  overflow: hidden;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.caption__group {
+  color: var(--nys-color-text-reverse-weak);
+  font-weight: 400;
+}
+
+/* The slide title doubles as the slide picker while editing. */
+.caption__picker {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+}
+
+.caption__select {
+  max-width: 100%;
+  padding: 2px 2px 2px 4px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  appearance: none;
+  cursor: pointer;
+}
+
+.caption__select:hover {
+  background: rgb(255 255 255 / 12%);
+}
+
+.caption__select:focus-visible {
+  outline: 2px solid var(--nys-color-text-reverse);
+  outline-offset: 1px;
+}
+
+/* The native menu paints with the system colours, so the options need the
+   page's own. */
+.caption__select option,
+.caption__select optgroup {
+  color: var(--nys-color-text);
+  background: var(--pg-surface);
+}
+
+.caption__picker-icon {
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+
+.caption__group:not(:empty)::after {
+  content: " · ";
+}
+
+.caption__description {
+  margin: 2px 0 0;
+  overflow: hidden;
+  font-size: 0.9375rem;
+  line-height: 1.35;
+  color: var(--nys-color-text-reverse-weak);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.caption__description:empty {
+  display: none;
+}
+
+.caption__count {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  color: var(--nys-color-text-reverse-weak);
+  white-space: nowrap;
+}
+
+/* The counter rides with the title on narrow screens instead. */
+.caption__count--inline {
+  display: none;
+  margin-inline-start: 8px;
+}
+
+/*
+ * Narrow screens: two rows. The arrows keep the outer columns and span both
+ * rows, the title and counter take row one, and the icons take row two. The
+ * mark has nowhere to go, so it steps aside.
+ */
+@media (max-width: 720px) {
+  .caption {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto auto;
+    gap: 4px 8px;
+  }
+
+  .caption__left,
+  .caption__right {
+    display: contents;
+  }
+
+  .caption__center {
+    display: none;
+  }
+
+  #prev-button {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    align-self: center;
+  }
+
+  .caption__headline {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .caption__actions {
+    grid-column: 2;
+    grid-row: 2;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  #next-button {
+    grid-column: 3;
+    grid-row: 1 / 3;
+    align-self: center;
+  }
+
+  /* The counter reads better beside the title than alone on the icon row. */
+  .caption__right > .caption__count {
+    display: none;
+  }
+
+  .caption__count--inline {
+    display: inline;
+  }
+}
+
+/* Presenter notes ------------------------------------------------------ */
+
+.notes {
+  position: fixed;
+  inset-inline: 16px;
+  inset-block-end: 72px;
+  z-index: 25;
+  max-width: 900px;
+  margin-inline: auto;
+  padding: 16px 20px;
+  border: 1px solid var(--pg-border);
+  border-radius: 8px;
+  background: var(--pg-surface);
+  box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
+}
+
+.notes[hidden] {
+  display: none;
+}
+
+.notes__heading {
+  margin: 0 0 6px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--pg-muted);
+}
+
+.notes__body {
+  margin: 0 0 12px;
+  font-size: 1rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  max-height: 40vh;
+  overflow: auto;
+}
+
+.present-hint {
+  position: fixed;
+  inset-block-start: 16px;
+  inset-inline-end: 16px;
+  z-index: 20;
+  margin: 0;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgba(20, 20, 20, 0.86);
+  color: #ffffff;
+  font-size: 0.875rem;
+  transition: opacity 600ms ease;
+}
+
+.present-hint[hidden] {
+  display: none;
+}
+
+.present-hint--fading {
+  opacity: 0;
+}
+
+.settings {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.settings__field {
+  margin: 0;
+}
+
+.settings__reset {
+  align-self: flex-start;
+}
+
+/* The base CSS field is the same CodeMirror editor as the CSS pane, boxed
+   like a design system text area so it sits with the other fields. */
+.settings__code .settings__legend {
+  font-size: 1rem;
+}
+
+.settings__code .settings__hint {
+  margin-bottom: 8px;
+  font-size: 1rem;
+  color: var(--nys-color-text, #1b1b1b);
+}
+
+.settings__editor {
+  display: block;
+  height: 160px;
+  border: 1px solid var(--nys-color-neutral-400, #6b6d70);
+  border-radius: var(--nys-radius-md, 4px);
+  overflow: hidden;
+}
+
+.settings__editor:focus-within {
+  outline: 2px solid var(--nys-color-focus, #004dd1);
+  outline-offset: 2px;
+}
+
+/* Toast ---------------------------------------------------------------- */
+
+.toast {
+  position: fixed;
+  inset-block-end: 24px;
+  inset-inline-end: 24px;
+  z-index: 30;
+  max-width: 320px;
+}
+
+.toast[hidden] {
+  display: none;
+}
+
+/* Narrow screens ------------------------------------------------------- */
+
+@media (max-width: 720px) {
+  .toolbar {
+    row-gap: 4px;
+  }
+
+  .toolbar__spacer {
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  .toolbar__title,
+  .toolbar__rename-input {
+    max-width: 55%;
+  }
+
+  /* The trailing controls sit on their own row, aligned right. */
+  .toolbar__select {
+    margin-inline-start: auto;
+    width: 8rem;
+  }
+
+  .caption {
+    flex-wrap: wrap;
+  }
+}