/* Textbook of Usability — visual identity
 *
 * A subtle usability motif (Fitts targets, a pointer, a crosshair and a button
 * outline) sits behind the grey page frame, with a denser white variant inside
 * the Oxford-blue header banner. Patterns are low-contrast so prose stays fully
 * legible, and only background-image is set (never the background colour), so the
 * alternate themes that recolour the body degrade gracefully rather than break.
 */

/* Page frame — very faint Oxford-blue motif on the outer grey margin. */
body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%23002147' stroke-width='1.5' opacity='0.06'><circle cx='46' cy='48' r='7'/><circle cx='46' cy='48' r='16'/><circle cx='46' cy='48' r='26'/><circle cx='46' cy='48' r='1.5' fill='%23002147'/><rect x='128' y='150' width='62' height='22' rx='4'/><line x1='44' y1='150' x2='76' y2='150'/><line x1='60' y1='134' x2='60' y2='166'/><circle cx='60' cy='150' r='5'/></g><g fill='%23002147' opacity='0.06'><path d='M168 30 L168 60 L175 53 L181 65 L185 63 L179 51 L188 51 Z'/></g></svg>");
  background-repeat: repeat;
  background-size: 220px 220px;
}

/* Header banner — Oxford-blue overlay with a denser white pointer/target motif. */
.site-header {
  background-image:
    linear-gradient(rgba(0, 33, 71, 0.90), rgba(0, 33, 71, 0.90)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'><g fill='none' stroke='%23ffffff' stroke-width='1.3' opacity='0.5'><circle cx='40' cy='40' r='6'/><circle cx='40' cy='40' r='14'/><circle cx='40' cy='40' r='22'/><line x1='150' y1='30' x2='178' y2='30'/><line x1='164' y1='16' x2='164' y2='44'/><rect x='120' y='80' width='56' height='18' rx='4'/></g><g fill='%23ffffff' opacity='0.5'><path d='M88 70 L88 98 L95 91 L101 103 L105 101 L99 89 L108 89 Z'/></g></svg>");
  background-repeat: no-repeat, repeat;
  background-size: cover, 220px 120px;
  background-position: center, top left;
}

/* Brand accent — give the per-chapter Key Takeaways block a target-ring marker
   so the usability theme carries through into the content without recolouring it. */
.key-takeaways {
  position: relative;
}
.key-takeaways::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 33, 71, 0.18);
  box-shadow: 0 0 0 4px rgba(0, 33, 71, 0.06);
  pointer-events: none;
}