/* HyperCard skin, stripped to a menu bar and one card.
 * Fonts: Chicago 12 and Geneva 9 pixel recreations by Giles Booth
 * (@blogmywiki). ChicagoFLF is the vector fallback.
 * Same files as the Riso Studio HyperCard theme.
 */

@font-face {
  font-family: "Chicago_12";
  src:
    url("/fonts/hypercard/ChiKareGo2.woff2") format("woff2"),
    url("/fonts/hypercard/ChiKareGo2.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Geneva_9";
  src:
    url("/fonts/hypercard/FindersKeepers.woff2") format("woff2"),
    url("/fonts/hypercard/FindersKeepers.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "ChicagoFLF";
  src: url("/fonts/hypercard/ChicagoFLF.woff2") format("woff2");
  font-display: swap;
}

:root {
  --hc-chicago: "Chicago_12", "ChicagoFLF", "Geneva", sans-serif;
  --hc-geneva: "Geneva_9", "Geneva", sans-serif;
  /* Text to be read (info boxes, instructions). Geneva runs small, so a size up, on tight lines. */
  --hc-read-size: 16px;
  --hc-read-leading: 18px;
  --hc-grey-50: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0 / 2px 2px;
  --hc-stripes: repeating-linear-gradient(
    to bottom,
    #000 0 1px,
    transparent 1px 2px
  );
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body.theme-hypercard {
  background: #000;
  color: #000;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

.hc-app {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: var(--hc-grey-50);
  border-radius: 8px 8px 0 0;
  font-family: var(--hc-geneva);
  font-size: 16px;
  color: #000;
}

.hc-menubar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 22px;
  padding: 0 10px;
  background: #fff;
  border-bottom: 1px solid #000;
  border-radius: 8px 8px 0 0;
  font-family: var(--hc-chicago);
  font-size: 16px;
  line-height: 22px;
  user-select: none;
}

.hc-logo {
  display: inline-flex;
  align-items: center;
  padding: 0 8px 0 4px;
}

.hc-menubar-title {
  padding: 0 10px 0 2px;
  color: inherit;
  text-decoration: none;
}

/* Menu bar menus (the Windows menu is built by windows.js) */
.hc-menu {
  position: relative;
  align-self: stretch;
}

/* The admin's menu sits at the far right, and opens leftwards */
.hc-menubar-admin {
  margin-left: auto;
}

.hc-menubar-admin .hc-menu-list {
  left: auto;
  right: 0;
}

/* A desktop with one fixed window in the middle (the admin login) */
.hc-desktop--centred {
  display: grid;
  place-items: center;
}

.hc-desktop--centred > .hc-window {
  position: relative;
  width: min(300px, calc(100% - 36px));
  min-height: 0;
}

.hc-window--login .hc-controls input[type="password"] {
  height: 22px;
  padding: 0 5px;
  border: 1px solid #000;
  border-radius: 0;
  font: inherit;
}

.hc-menu-title {
  height: 100%;
  padding: 0 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: default;
}

.hc-menu-title[aria-expanded="true"] {
  background: #000;
  color: #fff;
}

.hc-menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 2px 0;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 #000;
}

.hc-menu-list[hidden] {
  display: none;
}

.hc-menu-item {
  position: relative;
  padding: 0 16px 0 24px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}

.hc-menu-item:hover,
.hc-menu-item:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

.hc-menu-item:disabled {
  background: none;
  color: #888;
}

.hc-menu-item[aria-checked="true"]::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M9 1v2H8v2H7v2H6v2H4V8H3V7H1V5h2v1h1v1h1V5h1V3h1V1z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M9 1v2H8v2H7v2H6v2H4V8H3V7H1V5h2v1h1v1h1V5h1V3h1V1z'/%3E%3C/svg%3E") no-repeat;
}

.hc-menu-rule {
  margin: 3px 0;
  border-top: 1px dotted #000;
}

.hc-desktop {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Classic Mac scroll bars: dithered track, white thumb, arrow boxes */
.hc-desktop::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: #fff;
}

.hc-desktop::-webkit-scrollbar-track {
  background: var(--hc-grey-50);
}

.hc-desktop::-webkit-scrollbar-track:vertical {
  border-left: 1px solid #000;
}

.hc-desktop::-webkit-scrollbar-track:horizontal {
  border-top: 1px solid #000;
}

.hc-desktop::-webkit-scrollbar-thumb {
  background: #fff;
  border: 1px solid #000;
}

.hc-desktop::-webkit-scrollbar-corner {
  background: #fff;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
}

.hc-desktop::-webkit-scrollbar-button:single-button {
  display: block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  background-repeat: no-repeat;
}

.hc-desktop::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M.5 0v15.5h15.5V0' fill='none' stroke='%23000'/%3E%3Cpath d='M8 4l-4.5 5H6v3h4V9h2.5z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E");
}

.hc-desktop::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M.5 16V.5h15.5V16' fill='none' stroke='%23000'/%3E%3Cpath d='M8 12l-4.5-5H6V4h4v3h2.5z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E");
}

.hc-desktop::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 .5h15.5v15.5H0' fill='none' stroke='%23000'/%3E%3Cpath d='M4 8l5-4.5V6h3v4H9v2.5z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E");
}

.hc-desktop::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M16 .5H.5v15.5H16' fill='none' stroke='%23000'/%3E%3Cpath d='M12 8L7 3.5V6H4v4h3v2.5z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E");
}

@supports not selector(::-webkit-scrollbar) {
  .hc-desktop {
    scrollbar-color: #fff #808080;
  }
}

.hc-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100% - 36px));
  min-height: 280px;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 #000;
}

.hc-window[hidden] {
  display: none;
}

/* Scroll room past each window; margins don't count for absolute boxes */
.hc-window::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.hc-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 20px;
  background: #fff;
  border-bottom: 1px solid #000;
  user-select: none;
  touch-action: none;
  cursor: grab;
}

.hc-window.is-dragging .hc-titlebar {
  cursor: grabbing;
}

.hc-window.is-active .hc-titlebar::before {
  content: "";
  position: absolute;
  inset: 4px 2px 3px;
  background: var(--hc-stripes);
  pointer-events: none;
}

.hc-title {
  position: relative;
  z-index: 1;
  padding: 0 8px;
  background: #fff;
  font-family: var(--hc-chicago);
  font-size: 16px;
  line-height: 18px;
}

.hc-closebox {
  position: absolute;
  z-index: 1;
  left: 9px;
  top: 4px;
  width: 11px;
  height: 11px;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 0 0 0 1px #fff;
  cursor: pointer;
}

.hc-closebox:active {
  background: #000;
}

/* Help box: a ? at the right of the title bar (data-window-help) */
.hc-helpbox {
  position: absolute;
  z-index: 1;
  right: 9px;
  top: 3px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 0 0 0 1px #fff;
  cursor: pointer;
}

.hc-helpbox::before {
  content: "";
  width: 5px;
  height: 7px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h3v1H1zM0 1h1v1H0zM4 1h1v1H4zM4 2h1v1H4zM3 3h1v1H3zM2 4h1v1H2zM2 6h1v1H2z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h3v1H1zM0 1h1v1H0zM4 1h1v1H4zM4 2h1v1H4zM3 3h1v1H3zM2 4h1v1H2zM2 6h1v1H2z'/%3E%3C/svg%3E") no-repeat;
}

.hc-helpbox:active {
  background: #000;
  color: #fff;
}

.hc-helpbox:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 2px;
}

.hc-window-body {
  padding: 28px 24px 32px;
}

/* Information box (showInfo): a heading, scrolling text, Done */
.hc-dialog.hc-dialog--info {
  width: min(460px, calc(100vw - 40px));
}

.hc-info {
  max-height: min(70vh, 560px);
  margin: 14px 0;
  padding-right: 8px;
  overflow-y: auto;
  font-family: var(--hc-geneva);
  font-size: var(--hc-read-size);
  line-height: var(--hc-read-leading);
}

.hc-info p,
.hc-info dl,
.hc-info dd {
  margin: 0;
}

.hc-info p + dl,
.hc-info dl + p {
  margin-top: 12px;
}

.hc-info dt {
  margin-top: 10px;
  font-family: var(--hc-chicago);
  font-size: 16px;
}

.hc-info dt:first-child {
  margin-top: 0;
}

.hc-window-body h1,
.hc-window-body p {
  margin: 0;
  font-family: var(--hc-chicago);
  font-size: 16px;
  font-weight: normal;
  line-height: 1.3;
}

.hc-window-body p {
  margin-top: 12px;
}

.hc-window-body a {
  color: inherit;
}

/* ---------- Tool windows ---------- */

.hc-window--tool {
  width: 300px;
  min-height: 0;
}

.hc-image-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  border: 1px solid #000;
  background: var(--hc-grey-50);
}

.hc-image-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

/* The part of the image that lands on the paper; drag it to pan */
.hc-image-view {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #e00;
  touch-action: none;
  cursor: grab;
}

.hc-image-view.is-dragging {
  cursor: grabbing;
}

.hc-image-view[hidden],
.hc-image-preview img[hidden],
.hc-image-preview .hc-note[hidden] {
  display: none;
}

.hc-image-preview .hc-note {
  padding: 0 6px;
  background: #fff;
}

.hc-window--paper {
  width: auto;
  min-height: 0;
}

.hc-paper-body {
  padding: 12px;
  background: var(--hc-grey-50);
}

/* Fits beside the Controls window as well as within the screen height. */
.hc-paper {
  --paper-w: 210;
  --paper-h: 297;
  height: max(
    160px,
    min(
      calc(100vh - 110px),
      760px,
      calc((100vw - 400px) * var(--paper-h) / var(--paper-w))
    )
  );
  aspect-ratio: var(--paper-w) / var(--paper-h);
  background: #fff;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
}

.hc-paper img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- HyperCard controls ---------- */

.hc-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  font-family: var(--hc-chicago);
  font-size: 16px;
}

/* Instructions. Same size and line spacing as the info boxes. Numbers stay as they are. */
.hc-window-body .hc-note {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--hc-geneva);
  font-size: var(--hc-read-size);
  line-height: var(--hc-read-leading);
}

.hc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hc-row--spread {
  justify-content: space-between;
}

.hc-row--end {
  justify-content: flex-end;
}

/* Last item sits on the right even when earlier ones are hidden */
.hc-row--apart > :last-child {
  margin-left: auto;
}

.hc-slider {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hc-slider label {
  display: flex;
  justify-content: space-between;
}

.hc-slider output {
  font-family: var(--hc-geneva);
}

/* roundRect button */
.hc-btn {
  display: inline-block;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 7px;
  box-shadow: 1px 1px 0 #000;
  font-family: var(--hc-chicago);
  font-size: 16px;
  line-height: 20px;
  padding: 1px 12px 0;
  cursor: pointer;
  user-select: none;
}

.hc-btn:active:not(:disabled) {
  background: #000;
  color: #fff;
}

/* Dimmed, like a Mac button that can't be pressed yet */
.hc-btn:disabled {
  color: #888;
  cursor: default;
}

/*
 * A button stacked on its own in a window keeps its natural width. In a
 * row (.hc-row, .hc-dialog-buttons) the row centres it, so buttons of
 * different heights, like the default button's ring, still line up.
 */
.hc-controls > .hc-btn,
.hc-dialog form > .hc-btn {
  align-self: flex-start;
}

/* The button Return would press: a thick rounded ring, with room kept for it */
.hc-btn--default {
  margin: 4px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000;
}

/* Modal dialogs (dialog.js): classic double border, no title bar */
.hc-dialog {
  width: min(360px, calc(100vw - 40px));
  margin: auto;
  padding: 20px 22px 16px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px #000, 2px 2px 0 #000;
}

.hc-dialog:not([open]) {
  display: none;
}

.hc-dialog::backdrop {
  background: transparent;
}

.hc-dialog-title,
.hc-dialog-message {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}

.hc-dialog form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.hc-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.hc-progress {
  height: 14px;
  border: 1px solid #000;
  background: #fff;
}

.hc-progress-fill {
  height: 100%;
  width: 0;
  background: #000;
}

/* A job in steps (showSteps): each step's name beside its bar, then a clock */
.hc-steps {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 12px;
  margin: 16px 0 10px;
}

.hc-steps-clock {
  margin: 0 0 12px;
  font-family: var(--hc-geneva);
  font-size: 14px;
}

.hc-dialog .hc-stats {
  margin: 4px 0 14px;
}

/* Folding section: a 1-bit triangle that turns down when open */
.hc-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.hc-disclosure > summary::-webkit-details-marker {
  display: none;
}

.hc-disclosure > summary::before {
  content: "";
  width: 6px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v11H0zM1 1h1v9H1zM2 2h1v7H2zM3 3h1v5H3zM4 4h1v3H4zM5 5h1v1H5z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v11H0zM1 1h1v9H1zM2 2h1v7H2zM3 3h1v5H3zM4 4h1v3H4zM5 5h1v1H5z'/%3E%3C/svg%3E") no-repeat;
}

.hc-disclosure[open] > summary::before {
  transform: rotate(90deg);
}

.hc-disclosure[open] > summary {
  margin-bottom: 8px;
}

/* Export steps: a checkbox each, with its amount on the right */
.hc-export-options {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
}

.hc-amount {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--hc-geneva);
  font-size: 14px;
}

.hc-controls .hc-amount input[type="number"] {
  width: 64px;
  height: 20px;
}

.hc-controls .hc-amount input:disabled {
  color: #888;
  border-color: #888;
}

.hc-export-reverse {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dotted #000;
}

.hc-controls :focus-visible,
.hc-file:focus-within {
  outline: 1px dotted #000;
  outline-offset: 2px;
}

/* Pop-up menu */
.hc-controls select {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  padding: 0 24px 0 6px;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h11L5.5 6z' fill='%23000'/%3E%3C/svg%3E")
    right 6px center no-repeat;
  color: #000;
  font-family: var(--hc-chicago);
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
}

/* Text fields */
.hc-controls input[type="text"],
.hc-controls input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 22px;
  padding: 0 5px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: var(--hc-chicago);
  font-size: 16px;
}

.hc-controls input[type="number"] {
  width: 80px;
}

.hc-controls input[aria-invalid="true"] {
  background: var(--hc-grey-50);
}

/* Colour well: a plain bordered square */
.hc-controls input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #000;
  background: none;
  cursor: pointer;
}

.hc-controls input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.hc-controls input[type="color"]::-webkit-color-swatch {
  border: 0;
}

.hc-controls input[type="color"]::-moz-color-swatch {
  border: 0;
}

/* Pen line: favourite star, then pen, nib and colour menus under headings */
.hc-pen-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px 6px;
}

.hc-pen-head {
  font-family: var(--hc-geneva);
  font-size: 14px;
}

.hc-controls .hc-pen-line select {
  min-width: 0;
  padding-right: 20px;
  background-position: right 5px center;
  text-overflow: ellipsis;
}

.hc-controls .hc-pen-line .hc-pen-colour {
  border-left: 8px solid var(--swatch, #000);
}

/* 1-bit star: favourites in menus, and the favourite toggle */
.hc-star {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v2H4zM3 2h3v1H3zM0 3h9v1H0zM1 4h7v1H1zM2 5h5v1H2zM2 6h2v1H2zM5 6h2v1H5zM1 7h2v1H1zM6 7h2v1H6zM1 8h1v1H1zM7 8h1v1H7z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v2H4zM3 2h3v1H3zM0 3h9v1H0zM1 4h7v1H1zM2 5h5v1H2zM2 6h2v1H2zM5 6h2v1H5zM1 7h2v1H1zM6 7h2v1H6zM1 8h1v1H1zM7 8h1v1H7z'/%3E%3C/svg%3E") no-repeat;
}

.hc-star-toggle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 20px;
  padding: 0;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

.hc-star-toggle .hc-star {
  margin: 0;
  background: var(--hc-grey-50);
}

.hc-star-toggle[aria-pressed="true"] {
  background: #000;
}

.hc-star-toggle[aria-pressed="true"] .hc-star {
  background: #fff;
}

/* Label and value pairs */
.hc-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 0;
}

.hc-stats dt {
  margin: 0;
}

.hc-stats dd {
  margin: 0;
  font-family: var(--hc-geneva);
  text-align: right;
}

.hc-link {
  color: inherit;
}

.hc-window--pen-preview {
  width: auto;
  min-height: 0;
}

#pen-preview {
  display: block;
  max-width: none;
}

.hc-controls input.hc-time {
  width: 72px;
}

.hc-test-thumb img {
  display: block;
  height: 96px;
  border: 1px solid #000;
  background: #fff;
}

.hc-test-stats {
  flex: 1;
  font-size: 14px;
}

.hc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.hc-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.hc-list[hidden] {
  display: none;
}

/* Groups controls so they can be disabled together, without looking boxed */
.hc-fieldset-plain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hc-fieldset-plain > .hc-btn {
  align-self: flex-start;
}

.hc-row[hidden],
.hc-note:empty {
  display: none;
}

.hc-list-heading {
  margin: 6px 0 0;
  font-family: var(--hc-geneva);
  font-size: 14px;
}

.hc-list-heading:first-child {
  margin-top: 0;
}

.hc-list small {
  margin-left: auto;
  font-family: var(--hc-geneva);
}

/* Slider: patterned track, rectangular thumb */
.hc-controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
}

.hc-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid #000;
  background: var(--hc-grey-50);
}

.hc-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 16px;
  margin-top: -6px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  box-shadow: 1px 1px 0 #000;
}

.hc-controls input[type="range"]:active::-webkit-slider-thumb {
  background: #000;
}

.hc-controls input[type="range"]::-moz-range-track {
  height: 4px;
  border: 1px solid #000;
  background: var(--hc-grey-50);
}

.hc-controls input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 14px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  box-shadow: 1px 1px 0 #000;
}

/* Radio buttons: a circle with a dot */
.hc-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.hc-radios legend {
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
}

.hc-radios label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.hc-controls input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.hc-controls input[type="radio"]:checked {
  background: radial-gradient(circle, #000 0 3px, #fff 3.5px);
}

/* Classic checkbox: a box with an X */
.hc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.hc-controls input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
}

.hc-controls input[type="checkbox"]:checked {
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0L10 10M10 0L0 10' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}