/* The ship in a bottle installer: a glass bottle on a wooden stand, alone on a black page, with one line of words and
   the pill under it. The bottle, the schooner, the resin sea, the winch and the cork are painted by script.js with
   these colours. */
:root {
  --page: #000000;          /* the page */
  --ink: #f2efe8;           /* the words */
  --muted: #8d918f;         /* the quiet words */
  --error: #ff7b63;         /* what went wrong */
  --glass: #d8f1ea;         /* the glass: its edges and highlights */
  --glass-tint: #3f8f80;    /* the green of the glass, seen through its thickness */
  --resin: #2459c9;         /* the sea of blue resin */
  --resin-deep: #0f2a6e;    /* the resin deep down */
  --foam: #f4f1ea;          /* the white resin of the foam */
  --hull: #6a3a22;          /* the varnished hull */
  --hull-dark: #2a150c;     /* the hull in its shadow */
  --trim: #d9b45a;          /* the gold stripe along the hull */
  --spar: #c99a5f;          /* the masts, the booms and the gaffs */
  --sail: #f1e7d0;          /* the sails */
  --sail-shade: #8f7f63;    /* the sails in their shadow */
  --flag: #e5432f;          /* the pennants */
  --thread: #e9e2d2;        /* the thread that raises the masts */
  --wood: #8a5f3b;          /* the stand and the winch */
  --wood-dark: #3b2414;     /* their shadow */
  --cork: #c79a64;          /* the cork */
  --button: #f2efe8;        /* the pill */
  --button-ink: #0b0c0c;    /* its words */
  --line: #3b3d3c;          /* the ring round the quiet pill */
  --focus: #7fc8ff;         /* the keyboard's focus ring */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap, no zoom */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the bottle */
.ship {
  display: grid;
  width: min(380px, 100%);
}

/* the drawing is 380 by 200 units and scales with the width */
.ship__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 380 / 200;
}

.ship__paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the words and the buttons */
.ship__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
}

.ship__words {
  min-width: 0;
}

.ship__title,
.ship__meta {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ship__title {
  font-size: 15.5px;
  font-weight: 620;
  font-stretch: 94%;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ship__meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 440;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.ship__swap {
  display: inline-block;
}

.ship__swap .is-error {
  color: var(--error);
}

.ship__buttons {
  display: flex;
  flex: none;
  gap: 8px;
}

/* the pill: its words widen on the variable width axis under the pointer, and it squashes a little when pressed */
.pill {
  position: relative;
  flex: none;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 620;
  line-height: 38px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.pill[hidden] {
  display: none;
}

.pill__label {
  display: inline-block;
  font-stretch: 86%;
  transition: font-stretch 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pill.is-quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .pill:hover .pill__label {
    font-stretch: 104%;
  }

  .pill:hover {
    background: color-mix(in srgb, var(--button) 86%, var(--page));
  }

  .pill.is-quiet:hover {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }
}

.pill:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (max-width: 360px) {
  .pill {
    padding: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill__label {
    transition: none;
  }
}