/* ==========================================================================
   MS Paint site chrome
   The entire site lives inside a Windows-95-style Paint window: title bar,
   menu-bar navigation, tool strip on the left, color palette and status bar
   at the bottom. Page content scrolls inside the white "canvas" and visitors
   can draw on it. Markup: _layouts/default.html — Logic: assets/js/paint.js
   ========================================================================== */

.paint-app,
.paint-app * {
  box-sizing: border-box;
}

.paint-app {
  --mp-face: #c0c0c0;
  --mp-hi: #ffffff;
  --mp-light: #dfdfdf;
  --mp-shadow: #808080;
  --mp-dark: #0a0a0a;
}

/* Chrome bars get the retro UI font; page content inside the viewport
   keeps the theme's own typography and colors */
.paint-app-titlebar,
.paint-app-menubar,
.paint-app-tools,
.mspaint-palette-row,
.mspaint-status {
  font-family: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
  font-size: 11px;
  line-height: 1.2;
  color: #000;
  -webkit-user-select: none;
  user-select: none;
}

/* ==========================================================================
   Desktop: full Paint application frame on a teal Win95 desktop
   ========================================================================== */
@media (min-width: 801px) {
  html:has(.paint-app) {
    height: 100%;
    overflow: hidden; /* overrides the theme's overflow-y: scroll — the viewport scrolls instead */
  }
  body.paint-shell {
    height: 100%;
    overflow: hidden;
  }
  body.paint-shell {
    margin: 0;
    background: #008080; /* the classic desktop */
  }

  .paint-app {
    position: fixed;
    inset: 10px;
    display: flex;
    flex-direction: column;
    background: var(--mp-face);
    padding: 3px;
    box-shadow:
      inset -1px -1px 0 var(--mp-dark),
      inset 1px 1px 0 var(--mp-light),
      inset -2px -2px 0 var(--mp-shadow),
      inset 2px 2px 0 var(--mp-hi),
      3px 3px 10px rgba(0, 0, 0, 0.4);
  }

  .paint-app-body {
    flex: 1;
    display: flex;
    min-height: 0;
  }

  .paint-viewport-wrap {
    flex: 1;
    position: relative;
    margin: 1px 2px 2px 1px;
    box-shadow:
      inset 1px 1px 0 var(--mp-shadow),
      inset -1px -1px 0 var(--mp-hi);
    background: #fff;
  }

  .paint-viewport {
    position: absolute;
    inset: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
  }
  [data-theme="dark"] .paint-viewport,
  [data-theme="dark"] .paint-viewport-wrap {
    background: #1a1a1a;
  }

  #mspaint-canvas {
    position: absolute;
    top: 2px;
    left: 2px;
    pointer-events: none; /* never blocks clicks — drawing is captured on window */
    z-index: 40;
    image-rendering: pixelated;
  }

  /* Win95 scrollbar for the canvas viewport (WebKit/Blink) */
  .paint-viewport::-webkit-scrollbar {
    width: 16px;
    background: repeating-conic-gradient(#ffffff 0% 25%, #dfdfdf 0% 50%);
    background-size: 2px 2px;
  }
  .paint-viewport::-webkit-scrollbar-thumb {
    background: var(--mp-face);
    box-shadow:
      inset -1px -1px 0 var(--mp-dark),
      inset 1px 1px 0 var(--mp-light),
      inset -2px -2px 0 var(--mp-shadow),
      inset 2px 2px 0 var(--mp-hi);
  }

}

/* ==========================================================================
   Content column: with the author sidebar gone, undo the theme's grid
   offsets and center a single readable column (ellensu.me-style)
   ========================================================================== */
.site-content #main {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.site-content .page,
.site-content .archive {
  float: none;
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* The theme's "sticky footer fix" pins the footer with position:absolute,
   which floats it mid-screen inside the scrollable canvas — restore flow */
.site-content .page__footer {
  position: static;
  float: none;
}

/* ==========================================================================
   Typography: all site content in Roboto Mono Light
   (loaded in head/custom.html; the Paint chrome bars keep Tahoma)
   ========================================================================== */
.site-content,
.site-content h1,
.site-content h2,
.site-content h3,
.site-content h4,
.site-content h5,
.site-content h6,
.site-content p,
.site-content li,
.site-content dl,
.site-content td,
.site-content th,
.site-content input,
.site-content textarea,
.site-content .page__lead,
.site-content .page__footer-copyright,
.site-content .archive__item-title,
.site-content .archive__item-excerpt {
  font-family: "Roboto Mono", "Courier New", monospace;
}
.site-content {
  font-weight: 300;
}
.site-content h1,
.site-content h2,
.site-content h3,
.site-content h4,
.site-content h5,
.site-content h6 {
  font-weight: 300;
}
.site-content strong,
.site-content b {
  font-weight: 500;
}

/* ---- Title bar ---- */
.paint-app-titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  flex: none;
  padding: 2px 4px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}
.paint-titlebar-icon {
  width: 15px;
  height: 15px;
  flex: none;
}
.paint-titlebar-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.paint-titlebar-btns {
  display: flex;
  gap: 2px;
  flex: none;
}
.paint-titlebar-btns button {
  width: 18px;
  height: 16px;
  padding: 0;
  border: 0;
  background: var(--mp-face);
  color: #000;
  font-family: inherit;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset -1px -1px 0 var(--mp-dark),
    inset 1px 1px 0 var(--mp-hi),
    inset -2px -2px 0 var(--mp-shadow),
    inset 2px 2px 0 var(--mp-light);
}
.paint-titlebar-btns button:active {
  box-shadow:
    inset 1px 1px 0 var(--mp-dark),
    inset -1px -1px 0 var(--mp-hi),
    inset 2px 2px 0 var(--mp-shadow);
}

/* ---- Menu bar: real site navigation dressed as Paint menus ---- */
.paint-app-menubar {
  display: flex;
  align-items: center;
  flex: none;
  padding: 2px 2px 1px;
  gap: 1px;
}
.paint-app-menubar a {
  padding: 3px 8px;
  color: #000;
  text-decoration: none;
  font-family: inherit;
  font-size: 11px;
}
.paint-app-menubar a:hover,
.paint-app-menubar a:focus-visible {
  background: #000080;
  color: #fff;
}
.paint-menubar-spacer {
  flex: 1;
}
.paint-menu-toggle {
  border: 0;
  background: transparent;
  padding: 3px 8px;
  cursor: pointer;
  color: #000;
  font-size: 12px;
  line-height: 1;
}
.paint-menu-toggle:hover {
  background: #000080;
  color: #fff;
}

/* ---- Tool strip ---- */
.paint-app-tools {
  flex: none;
  width: 88px;
  padding: 4px 3px;
}
.mspaint-tools {
  display: grid;
  grid-template-columns: repeat(2, 37px);
  gap: 1px;
  justify-content: center;
}
.mspaint-tool {
  width: 37px;
  height: 37px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mp-face);
  cursor: pointer;
  box-shadow:
    inset -1px -1px 0 var(--mp-dark),
    inset 1px 1px 0 var(--mp-hi),
    inset -2px -2px 0 var(--mp-shadow),
    inset 2px 2px 0 var(--mp-light);
}
.mspaint-tool svg {
  width: 25px;
  height: 25px;
  display: block;
}
.mspaint-tool:active,
.mspaint-tool.is-active {
  background: #fff;
  box-shadow:
    inset 1px 1px 0 var(--mp-dark),
    inset -1px -1px 0 var(--mp-hi),
    inset 2px 2px 0 var(--mp-shadow),
    inset -2px -2px 0 var(--mp-light);
}
.mspaint-tool.is-active {
  background-image: repeating-conic-gradient(#fff 0% 25%, #dfdfdf 0% 50%);
  background-size: 4px 4px;
}

/* ---- Line-size picker ---- */
.mspaint-sizes {
  margin: 8px auto 0;
  width: 56px;
  padding: 2px;
  background: var(--mp-face);
  box-shadow:
    inset 1px 1px 0 var(--mp-shadow),
    inset -1px -1px 0 var(--mp-hi);
}
.mspaint-size {
  display: block;
  width: 100%;
  height: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.mspaint-size::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  background: #000;
  transform: translateY(-50%);
}
.mspaint-size[data-size="1"]::after { height: 1px; }
.mspaint-size[data-size="2"]::after { height: 2px; }
.mspaint-size[data-size="4"]::after { height: 4px; }
.mspaint-size[data-size="8"]::after { height: 6px; }
.mspaint-size.is-active {
  background: #000080;
}
.mspaint-size.is-active::after {
  background: #fff;
}

/* ---- Undo / Clear ---- */
.mspaint-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding: 0 1px;
}
.mspaint-actions button {
  height: 24px;
  padding: 0;
  border: 0;
  background: var(--mp-face);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  box-shadow:
    inset -1px -1px 0 var(--mp-dark),
    inset 1px 1px 0 var(--mp-hi),
    inset -2px -2px 0 var(--mp-shadow),
    inset 2px 2px 0 var(--mp-light);
}
.mspaint-actions button:active {
  box-shadow:
    inset 1px 1px 0 var(--mp-dark),
    inset -1px -1px 0 var(--mp-hi),
    inset 2px 2px 0 var(--mp-shadow);
}

/* ---- Color box ---- */
.mspaint-palette-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px 4px;
}
.mspaint-current {
  flex: none;
  width: 44px;
  height: 44px;
  position: relative;
  background: var(--mp-face);
  box-shadow:
    inset 1px 1px 0 var(--mp-shadow),
    inset -1px -1px 0 var(--mp-hi);
}
.mspaint-current-fg {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 20px;
  height: 20px;
  background: #000;
  box-shadow:
    inset 1px 1px 0 var(--mp-dark),
    inset -1px -1px 0 var(--mp-light),
    0 0 0 1px var(--mp-shadow);
}
.mspaint-palette {
  display: grid;
  grid-template-columns: repeat(14, 23px);
  grid-auto-rows: 21px;
}
.mspaint-swatch {
  width: 23px;
  height: 21px;
  padding: 0;
  border: 0;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 var(--mp-shadow),
    inset -1px -1px 0 var(--mp-hi),
    inset 2px 2px 0 var(--mp-dark),
    inset -2px -2px 0 var(--mp-light);
}

/* ---- Status bar ---- */
.mspaint-status {
  flex: none;
  margin: 0 2px 2px;
  padding: 3px 6px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow:
    inset 1px 1px 0 var(--mp-shadow),
    inset -1px -1px 0 var(--mp-hi);
}

/* ==========================================================================
   Tool cursors (only over the canvas viewport)
   ========================================================================== */
body[data-paint-tool="pencil"] .paint-viewport {
  cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M1%2019l2-6L13%203l4%204L7%2017l-6%202z%22%20fill%3D%22white%22%20stroke%3D%22black%22%2F%3E%3Cpath%20d%3D%22M1%2019l2-6%204%204-6%202z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E') 1 19, crosshair;
}
body[data-paint-tool="brush"] .paint-viewport,
body[data-paint-tool="spray"] .paint-viewport,
body[data-paint-tool="line"] .paint-viewport {
  cursor: crosshair;
}
body[data-paint-tool="eraser"] .paint-viewport {
  cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22white%22%20stroke%3D%22black%22%2F%3E%3C%2Fsvg%3E') 8 8, crosshair;
}

/* Links and controls keep their normal cursor while a tool is active */
body[data-paint-tool] .paint-viewport a,
body[data-paint-tool] .paint-viewport button,
body[data-paint-tool] .paint-viewport select,
body[data-paint-tool] .paint-viewport label,
body[data-paint-tool] .paint-viewport summary {
  cursor: pointer;
}
body[data-paint-tool] .paint-viewport input,
body[data-paint-tool] .paint-viewport textarea {
  cursor: text;
}

/* ==========================================================================
   Homepage hero (ellensu.me-style: text left, portrait right)
   ========================================================================== */
/* Big Playfair name, Jordan-Lei-style
   (.paint-viewport prefix outweighs the site-wide mono rule;
   Playfair Display is used ONLY for the name) */
.site-content .home-name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1.05;
  margin: 0.15em 0 0.5em;
}
@media (min-width: 1100px) {
  .site-content .home-name,
  .site-content .page__content > p {
    margin-left: -90px; /* paragraphs align with the name's left edge */
  }
  .site-content .home-portrait {
    margin-right: -90px; /* mirrors the text shift so side margins match */
  }
}

@media (max-width: 600px) {
  .site-content .home-name {
    font-size: 2.3rem;
  }
}

.home-portrait {
  float: right;
  width: 400px;
  max-width: 48%;
  margin: 0.3em 0 1em 1.6em;
  border-radius: 0;
}
@media (max-width: 600px) {
  .home-portrait {
    float: none;
    display: block;
    width: 65%;
    max-width: 280px;
    margin: 0 auto 1.2em;
  }
}

/* ==========================================================================
   Small screens / touch: plain site, Paint chrome reduced to header bars
   ========================================================================== */
@media (max-width: 800px) {
  .paint-app-tools,
  .mspaint-palette-row,
  .mspaint-status,
  #mspaint-canvas,
  .paint-titlebar-btns {
    display: none;
  }
  .paint-app-body,
  .paint-viewport-wrap,
  .paint-viewport {
    display: block;
  }
}

@media print {
  .paint-app-titlebar,
  .paint-app-menubar,
  .paint-app-tools,
  .mspaint-palette-row,
  .mspaint-status,
  #mspaint-canvas {
    display: none !important;
  }
}