/* Layout on top of 98.css: a toolbar across the top of a teal desktop, and one
   window in the middle. The book's pages turn with pure CSS (see the end of this file
   and receiver/app.py, which writes quotes.html). */

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

body {
  background: #008080;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px;
}

.window {
  width: min(100%, 680px);
}

.window-body {
  margin: 8px;
}

/* ---- Toolbar ---------------------------------------------------------- */

.toolbar {
  /* Scrolls away with the page (not pinned to the top of the window). */
  position: relative;
  z-index: 10;
  background: silver;
  box-shadow: inset 0 -1px #808080, inset 0 1px #fff, 0 1px #0a0a0a;
  padding: 3px 4px;
}

.toolbar nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 680px;
  margin: 0 auto;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 2px 8px;
  color: #000;
  text-decoration: none;
}

/* Flat until hovered, like Explorer's toolbar buttons. */
.tool:hover {
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff;
}

.tool:active,
[data-page="home"] .nav-home,
[data-page="quotes"] .nav-quotes,
[data-page="map"] .nav-map {
  /* Pressed in, on the same grey as the toolbar (no checkered fill). */
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
}

.tool:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.tool svg {
  flex: none;
}

.divider {
  width: 2px;
  align-self: stretch;
  margin: 2px 4px;
  box-shadow: inset 1px 0 #808080, inset -1px 0 #fff;
}

/* Phones: icons only, the names move to the tooltip / screen reader. */
@media (max-width: 420px) {
  .tool span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tool {
    padding: 2px 10px;
  }
}

/* ---- Hanging panel ------------------------------------------------------ */

/* Pages have one grey panel that hangs straight down from the toolbar, with the
   Windows 98 bevel on its sides and bottom but no title bar. Sections inside it
   (welcome, book, submit form) are split by an etched line instead of being
   separate windows. */
main.hanging {
  place-items: start center;
  padding-top: 0;
}

.panel {
  position: relative;
  z-index: 11;           /* sits over the toolbar's dark bottom edge, so they join */
  margin-top: -1px;
  width: min(100%, 680px);
  box-sizing: border-box;
  background: silver;
  padding: 0 3px 3px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 0 #dfdfdf, inset -2px -2px grey, inset 2px 0 #fff;
}

.panel > section,
.panel > .window-body {
  margin: 0;
  padding: 10px 8px;
}

/* Etched divider between sections, like a 98 group separator. */
.panel > * + section {
  box-shadow: inset 0 1px #808080, inset 0 2px #fff;
  padding-top: 12px;
}

/* ---- Home ------------------------------------------------------------- */

.frame {
  background: #000;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  padding: 2px;
}

.frame img {
  display: block;
  width: 100%;
  height: auto;
}

.welcome h1 {
  font-size: 18px;
  margin: 14px 0 6px;
}

.welcome p {
  font-size: 12px;
  line-height: 1.5;
}

.home-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---- Mousetrap Map ------------------------------------------------- */

.map h1 {
  font-size: 18px;
  margin: 0 0 8px;
}

.map .frame {
  display: block;
  background: #fff;
  cursor: zoom-in;
}

/* ---- Submit ----------------------------------------------------------- */

.submit {
  font-size: 12px;
}

.submit h2 {
  font-size: 14px;
  margin: 0 0 8px;
}

.submit textarea,
.submit input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
}

.submit textarea {
  resize: vertical;
}

/* 98.css leaves only 2px between the text and the sunken border, and its fixed
   21px height clips text with a taller line height. Give the text room. */
.submit textarea,
.submit input[type="text"] {
  padding: 4px 7px;
  line-height: 16px;
}

.submit input[type="text"] {
  height: 24px;
}

.submit .field-row-stacked {
  margin-bottom: 10px;
}

/* The picture picker: 98.css doesn't style file inputs, so its button copies a 98 button. */
.submit input[type="file"] {
  font-size: 12px;
  max-width: 100%;
}

.submit input[type="file"]::file-selector-button {
  min-width: 75px;
  min-height: 23px;
  margin-right: 8px;
  padding: 0 12px;
  border: none;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  color: #222;
  font: inherit;
  cursor: pointer;
}

.submit input[type="file"]::file-selector-button:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

.hint {
  color: #404040;
}

.submit-row {
  justify-content: flex-end;
  margin-top: 12px;
}

.submit-row button {
  font-weight: bold;
}

.trap {
  position: absolute;
  left: -9999px;
}

/* Error messages: the receiver redirects to submit.html#too-long etc. */
.notice {
  display: none;
  padding: 6px 8px;
  background: #ffffe1;
  border: 1px solid #000;
}

.notice:target {
  display: block;
}

/* ...and goes away again once the visitor starts typing a new quote. */
.submit:has(#quote:not(:placeholder-shown)) .notice {
  display: none;
}

/* ---- Which spread is showing ------------------------------------------ */

/* The radios do the work but stay invisible (still reachable by keyboard). */
.window-body > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
}

.spread {
  display: none;
}

.still:checked + .fwd + .back + .spread,
.fwd:checked + .back + .spread,
.back:checked + .spread {
  display: block;
}

/* Opening quotes.html#s3 starts on spread 3 (used after submitting a quote),
   until the reader turns a page. An open popup (#f5) counts as its spread. */
.window-body:has(#p1-still:checked):has(.spread:target, .popup:target) .spread:not(:target, :has(.popup:target)) {
  display: none;
}

.window-body:has(#p1-still:checked) .spread:is(:target, :has(.popup:target)) {
  display: block;
}

.spread {
  scroll-margin-top: 8px;
}

/* ---- The book -------------------------------------------------------- */

/* pages.jpg = frames 1-9 of the original gif side by side.
   Frame 9 (the far right) is the book lying flat, so that is the resting image. */
.stage {
  position: relative;
  aspect-ratio: 400 / 320;
  container-type: inline-size;
  isolation: isolate; /* keeps the paper patches (z-index -1) above the book picture */
  background: #000 url("pages.jpg") no-repeat;
  background-size: 900% 100%;
  background-position: 100% 0;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  outline: 2px solid #000;
  outline-offset: -2px;
}

/* Turning forward: frames 1-8, then it settles back on frame 9. */
@keyframes turn-forward {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

/* Turning back: frames 8-1 (the same turn played in reverse), then frame 9. */
@keyframes turn-back {
  from { background-position: 87.5% 0; }
  to   { background-position: -12.5% 0; }
}

@keyframes ink-in {
  from { opacity: 0; filter: blur(2px); }
  to   { opacity: 1; filter: none; }
}

/* A spread's animations restart each time it goes from hidden to shown. */
.fwd:checked + .back + .spread .stage {
  animation: turn-forward 1.2s steps(8, jump-end);
}

.back:checked + .spread .stage {
  animation: turn-back 1.2s steps(8, jump-end);
}

.fwd:checked + .back + .spread .page,
.back:checked + .spread .page {
  animation: ink-in 0.6s ease-out 1.2s both;
}

/* ---- Text on the pages ------------------------------------------------- */

/* Positions are percentages of the picture, fitted inside the flat pages of frame 9.
   The pages turn with the arrows in their bottom corners (.corner). */
.page {
  position: absolute;
  top: 30%;
  bottom: 22%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4cqw;
  padding: 0 1.5cqw;
  text-align: center;
  color: #2e1a0b;
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

.page.left  { left: 19%; right: 53%; }
.page.right { left: 53.5%; right: 19%; }

/* A soft patch of lighter paper behind the words so they read over the sketches. */
.page::before {
  content: "";
  position: absolute;
  inset: -12% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(244, 222, 170, 0.82), rgba(244, 222, 170, 0.55) 60%, rgba(244, 222, 170, 0));
}

.quote {
  font-size: 3.5cqw;
  font-style: italic;
  line-height: 1.3;
  text-shadow: 0 0 6px rgba(255, 240, 200, 0.7);
}

.quote.long  { font-size: 2.9cqw; }
.quote.xlong { font-size: 2.4cqw; line-height: 1.25; }

/* An odd number of quotes leaves the last right-hand page blank: invite one. */
.page.empty {
  text-decoration: none;
  cursor: pointer;
}

.quote-blank {
  font-size: 2.6cqw;
  font-style: italic;
  color: #5a3a1a;
  opacity: 0.8;
}

.page.empty:hover .quote-blank {
  opacity: 1;
  text-decoration: underline;
}

.quote::before { content: "\201C"; }
.quote::after  { content: "\201D"; }

.cite {
  font-size: 2.5cqw;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.cite::before { content: "\2014\00a0"; }

/* A quote with a file attached: blue and underlined, like a link; opens its popup. */
.quote.has-file {
  color: #1034a6;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.12em;
  text-shadow: 0 0 6px rgba(255, 240, 200, 0.9);
}

.quote.has-file:hover {
  color: #0000ee;
}

.quote.has-file:focus-visible {
  outline: 1px dotted #1034a6;
  outline-offset: 2px;
}

/* ---- Corner arrows: turn the page ------------------------------------- */

/* A dog-eared page corner with an arrow, at the bottom outer corner of each page:
   bottom left goes back, bottom right goes forward. */
.corner {
  position: absolute;
  bottom: 10%;               /* ~25px lower than the page corner at full width */
  width: 7cqw;
  height: 7cqw;
  cursor: pointer;
  z-index: 1;
  opacity: 0.15;              /* faint until hovered */
  transition: opacity 0.15s;
  filter: drop-shadow(-0.3cqw -0.3cqw 0.4cqw rgba(0, 0, 0, 0.45));
}

.corner.prev { left: 7.5%; }
.corner.next { right: 6%; }

/* The folded-over flap: a paper triangle. */
.corner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f7e7bf, #d9bb7c);
}

.corner.next::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.corner.prev::before { clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* The arrow drawn on the flap. */
.corner::after {
  position: absolute;
  bottom: 0.3cqw;
  font: bold 3.2cqw/1 "Palatino Linotype", Palatino, Georgia, serif;
  color: #5a3414;
}

.corner.next::after { content: "\25B6"; right: 0.8cqw; }
.corner.prev::after { content: "\25C0"; left: 0.8cqw; }

.corner:hover,
.window-body > input:focus-visible ~ .spread .corner {
  opacity: 1;
}

.corner:hover::before { background: linear-gradient(135deg, #fff4d6, #e6c98c); }
.corner:hover::after  { color: #000; }

.corner:active { transform: translateY(0.3cqw); }

/* ---- Under the book ---------------------------------------------------- */

.page-count {
  margin: 8px 0 0;
  padding: 3px 6px;
  text-align: center;
  box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
}

/* ---- Attachment popups ------------------------------------------------ */

/* Each file's popup is hidden until its link (#f5) is clicked: CSS :target, no scripts.
   Close, the X and clicking outside all go back to #sN, the spread it came from. */
.popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  place-items: center;
  padding: 16px;
}

.popup:target {
  display: grid;
}

.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: default;
}

.popup-window {
  position: relative;
  width: fit-content;
  max-width: min(100%, 900px);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}

.popup-window .title-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 98.css draws the X only on <button>; this link copies it. */
.popup-close {
  display: block;
  min-width: 16px;
  min-height: 14px;
  margin-left: 2px;
  background: silver url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E") no-repeat top 3px left 4px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.popup-close:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

.popup-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popup-body img,
.popup-body video {
  display: block;
  min-height: 0;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  margin: 0 auto;
  background: #000;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
}

.popup-body audio {
  width: min(80vw, 400px);
}

.popup-file {
  margin: 0;
  padding: 16px 24px;
  font-size: 12px;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}

/* 98.css only styles <button>; these labels copy its look. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  color: #222;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.btn:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
  padding: 1px 11px 0 13px;
}

/* Keyboard users: the hidden radios have focus, so ring the book instead. */
.window-body > input:focus-visible ~ .spread .stage {
  outline: 1px dotted #fff;
  outline-offset: -5px;
}

/* No page-turn motion for people who've asked their system for less. */
@media (prefers-reduced-motion: reduce) {
  .fwd:checked + .back + .spread .stage,
  .back:checked + .spread .stage {
    animation: none;
  }

  .fwd:checked + .back + .spread .page,
  .back:checked + .spread .page {
    animation: ink-in 0.3s ease-out both;
  }
}

/* ---- Footer ----------------------------------------------------------- */

.site-footer {
  /* Same width as the grey panel above (680px, with the page's 16px side margins),
     badges spread edge to edge: 7 per row at full width, fewer on narrow screens. */
  display: grid;
  grid-template-columns: repeat(auto-fill, 88px);
  justify-content: space-between;
  gap: 6px;
  width: min(100% - 32px, 680px);
  margin: 0 auto;
  padding: 12px 0 20px;
  box-sizing: border-box;
}

.site-footer img {
  display: block;
  image-rendering: pixelated;
}

/* Home button picture (site/home-icon.jpg): a small sunken photo frame. */
.home-face {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: cover;
  box-shadow: 0 0 0 1px #808080, 1px 1px 0 1px #fff;
}