/* The flag button: a swallowtail pennant of red cloth on a short dark pole, on a white page. The cloth, the pole, the
   words printed on the cloth and the light on its folds are drawn by script.js on a canvas larger than the button (the
   cloth has room to wave); its shadow on the page is a second canvas, blurred here. The colours come from here. */
:root {
  --page: #ffffff;          /* the page */
  --cloth: #e0432c;         /* the cloth, on the side that asks */
  --cloth-done: #17694a;    /* the cloth, on the side that says you are in */
  --print: #fff6ea;         /* the words and the bicycle printed on the cloth */
  --shade: #1e0a06;         /* the dark inside the folds */
  --sheen: #fff1de;         /* the light on the folds that face the lamp */
  --pole: #2b2c31;          /* the pole */
  --cap: #c9a256;           /* the brass cap on top of the pole */
  --ground: #43200f;        /* the shadow the flag throws on the page */
  --focus: #1f2328;         /* the ring of the keyboard's focus */
}

* {
  box-sizing: border-box;
}

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

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

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

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

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 72px 16px;
}

.flag {
  display: grid;
  justify-items: center;
}

/* ---------------------------------------------------------------- the flag */
/* the button's place: the pole stands at its left edge and the cloth runs to its right edge; the canvases spill
   round it, so the cloth can wave out of it */
.flag__spot {
  position: relative;
  width: min(284px, calc(100vw - 48px));
  height: 60px;
}

.flag__shadow,
.flag__cloth {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* the shadow is drawn sharp and solid; here it becomes soft and faint, as a shadow on paper is */
.flag__shadow {
  opacity: 0.2;
  filter: blur(3.5px);
}

.flag__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: transparent;
  font: inherit;
  cursor: pointer;
  /* a finger drawn across the flag blows on it; up and down still scrolls the page */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.flag__btn[aria-disabled='true'] {
  cursor: default;
}

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

html[data-using='pointer'] .flag__btn:focus-visible {
  outline: none;
}