/* ==========================================================================
   fun/paint/paint.css — the MS Paint homage (V2), inside the shared XP desktop.

   Sections:
     1. Colours and sizes          9. Start screen (the hand-drawn start button)
     2. The Paint window           10. Home canvas
     3. Menu bar and menus         11. Website pages: shared look
     4. Action bar (Paint! tab)    12. Website pages: one by one
     5. Toolbox                    13. Paint! tab (the drawing canvas)
     6. Workspace and canvas       14. Dialogs
     7. Colour box                 15. Phones
     8. Status bar                 16. Reduced motion

   The Paint chrome is drawn in CSS (classic grey, like References/paint_landing.png);
   the 3D bevels are inset box-shadows. The tool icons are original SVG drawings in app.js.
   ========================================================================== */

/* ---------- 1. Colours and sizes ---------- */
:root {
  --pt-face: #c0c0c0;          /* Paint's grey */
  --pt-hi: #ffffff;            /* bevel highlight */
  --pt-light: #dfdfdf;
  --pt-shadow: #808080;        /* bevel shadow */
  --pt-dark: #000000;
  --pt-work: #808080;          /* the grey behind the canvas */
  --pt-select: #316ac5;        /* XP menu highlight */
  --pt-ui: Tahoma, "Segoe UI", Verdana, sans-serif;
  --pt-body: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;           /* page text */
  --pt-title: "Arial Black", "Arial Bold", Gadget, Arial, sans-serif;     /* page titles */
  --pt-hand: "Comic Sans MS", "Comic Sans", "Comic Neue", "Chalkboard SE", "Chalkboard", cursive;  /* doodle notes */
  --pt-mono: "Courier New", Courier, monospace;
  --pt-menu-h: 22px;
  --pt-tool: 26px;             /* toolbox button size */
  --pt-well: 16px;             /* palette colour size */
}

/* ---------- 2. The Paint window ---------- */
/* About 62% of the desktop, wallpaper visible all round, clear of the desktop icons on the left. */
.pt-window {
  --pt-w: clamp(640px, 63%, 1240px);
  --pt-h: clamp(440px, 86%, 980px);
  width: min(var(--pt-w), calc(100% - 128px));
  height: min(var(--pt-h), calc(100% - 16px));
  left: max(112px, calc((100% - min(var(--pt-w), calc(100% - 128px))) / 2 + 24px));
  top: max(8px, calc((100% - min(var(--pt-h), calc(100% - 16px))) / 2 - 6px));
}
.pt-body {
  position: relative;
  background: var(--pt-face);
  font: 11px/1.3 var(--pt-ui);
}
.pt-main { flex: 1; min-height: 0; display: flex; }
.pt-body [hidden] { display: none !important; }   /* View menu: hide the tool box, colour box, status bar */
/* Read out by screen readers, not shown (the headings of the start screen and the Paint! canvas). */
.pt-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 3. Menu bar and menus ---------- */
/* One row; when the window is too narrow, the items wrap onto a second row (like a real Windows menu bar). */
.pt-menubar {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: stretch;
  min-height: var(--pt-menu-h);
  padding: 0 2px;
  background: var(--pt-face);
  border-bottom: 1px solid var(--pt-shadow);
  box-shadow: 0 1px 0 var(--pt-hi);
  white-space: nowrap;
  position: relative;
  z-index: 3;
}
.pt-menus { display: flex; flex-wrap: wrap; align-items: stretch; }   /* File ... Help (role="menubar") */
.pt-menu {
  display: inline-flex; align-items: center;
  min-height: calc(var(--pt-menu-h) - 2px);
  padding: 0 7px;
  margin: 1px 0;
  border: 1px solid transparent;
  background: none;
  color: #000;
  font: 12px/1 var(--pt-ui);
  text-decoration: none;
  cursor: default;
}
/* The label is one span, so screen readers read the word whole ("File", not "F ile"). */
.pt-menu u { text-decoration: underline; text-underline-offset: 1px; }
.pt-menu:hover, .pt-menu[aria-expanded="true"] { background: var(--pt-select); color: #fff; }
.pt-menu:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.pt-menu:hover:focus-visible, .pt-menu[aria-expanded="true"]:focus-visible { outline-color: #fff; }

/* After Start the menus are the website's pages ("tabs"). */
.pt-tabs { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; flex: 1; }
.pt-tab { cursor: pointer; }
.pt-tab:hover { background: #c1d2ee; color: #000; border-color: var(--pt-select); }
.pt-tab[aria-current="page"] { background: var(--pt-select); color: #fff; border-color: var(--pt-select); }
.pt-tab[aria-current="page"]:focus-visible { outline-color: #fff; }
.pt-tab--paint svg { width: 14px; height: 14px; margin-right: 4px; flex: none; }
.pt-tabs-anim .pt-tab { animation: pt-drop .38s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes pt-drop { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

/* Right end of the menu bar: one click to the plain-text site and to the CV PDF. */
.pt-menubar-end { margin-left: auto; display: flex; align-items: stretch; padding-left: 8px; }
.pt-end-link { gap: 5px; color: #00136b; cursor: pointer; }
.pt-end-link .xp-ico { width: 14px; height: 14px; flex: none; }
.pt-end-link:hover { background: #c1d2ee; color: #000; border-color: var(--pt-select); }

/* Classic drop-down menus (File, Edit, ... before Start). */
.pt-dropdown {
  position: absolute;
  z-index: 40;
  min-width: 190px;
  padding: 2px;
  background: #fff;
  border: 1px solid #aca899;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .35);
  font: 11px/1.3 var(--pt-ui);
}
.pt-dropdown button {
  position: relative;
  display: flex; justify-content: space-between; gap: 24px;
  width: 100%;
  padding: 3px 14px 3px 24px;
  border: 0;
  background: none;
  color: #000;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}
.pt-dropdown button:hover:not([aria-disabled="true"]), .pt-dropdown button:focus { background: var(--pt-select); color: #fff; outline: none; }
.pt-dropdown button[aria-disabled="true"] { color: #aca899; }
.pt-dropdown button[aria-disabled="true"]:focus { color: #d6d3c3; }
.pt-dropdown button[aria-checked="true"]::before { content: "\2713"; position: absolute; left: 8px; }
.pt-dropdown .pt-kbd { color: inherit; opacity: .85; }
.pt-dropdown hr { border: 0; border-top: 1px solid #aca899; margin: 3px 1px; }

/* A yellow XP-style tip that points at the menu bar right after Start. */
.pt-tip {
  position: absolute;
  z-index: 30;
  left: 10px; top: calc(var(--pt-menu-h) + 9px);
  max-width: min(330px, calc(100% - 20px));
  padding: 8px 26px 9px 10px;
  background: #ffffe1;
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: 2px 3px 7px rgba(0, 0, 0, .35);
  font: 11px/1.45 var(--pt-ui);
  animation: pt-pop .3s ease-out both;
}
.pt-tip::before {
  content: "";
  position: absolute; left: 22px; top: -11px;
  border: 11px solid transparent; border-top: 0;
  border-bottom-color: #000;
}
.pt-tip::after {
  content: "";
  position: absolute; left: 23px; top: -9px;
  border: 10px solid transparent; border-top: 0;
  border-bottom-color: #ffffe1;
}
.pt-tip b { display: block; margin-bottom: 2px; }
.pt-tip-x {
  position: absolute; top: 5px; right: 6px;
  width: 15px; height: 15px; padding: 0;
  border: 1px solid #9a9a9a; border-radius: 3px;
  background: #fff;
  font: bold 10px/1 var(--pt-ui);
  cursor: pointer;
}
@keyframes pt-pop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ---------- 4. Action bar (only on the Paint! tab) ---------- */
.pt-actionbar {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 3px 4px;
  background: var(--pt-face);
  border-bottom: 1px solid var(--pt-shadow);
  box-shadow: 0 1px 0 var(--pt-hi);
}
.pt-actionbar[hidden] { display: none; }
.pt-act {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: none;
  color: #000;
  font: 11px var(--pt-ui);
  cursor: pointer;
}
.pt-act svg { width: 16px; height: 16px; flex: none; }
.pt-act:hover { box-shadow: inset -1px -1px var(--pt-shadow), inset 1px 1px var(--pt-hi); }
.pt-act:active { box-shadow: inset 1px 1px var(--pt-shadow), inset -1px -1px var(--pt-hi); }
.pt-act:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.pt-act:disabled { color: var(--pt-shadow); cursor: default; box-shadow: none; }
.pt-act:disabled svg { opacity: .45; filter: grayscale(1); }
.pt-act--save {
  font-weight: bold;
  padding: 0 11px;
  border-color: #000;
  background: #ffff80;
  box-shadow: inset -1px -1px var(--pt-shadow), inset 1px 1px var(--pt-hi);
}
.pt-act--save:hover { background: #ffff00; }
.pt-act-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--pt-shadow); box-shadow: 1px 0 0 var(--pt-hi); }
.pt-act-hint { margin-left: auto; padding: 0 6px; color: #333; }

/* ---------- 5. Toolbox ---------- */
.pt-toolbox {
  flex: none;
  width: calc(var(--pt-tool) * 2 + 10px);
  padding: 3px 4px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--pt-face);
  border-right: 1px solid var(--pt-shadow);
  overflow-y: auto;
  scrollbar-width: none;
}
.pt-tools { display: grid; grid-template-columns: repeat(2, var(--pt-tool)); }
.pt-tool {
  width: var(--pt-tool); height: var(--pt-tool);
  padding: 0;
  display: grid; place-items: center;
  border: 0;
  background: var(--pt-face);
  box-shadow: inset -1px -1px var(--pt-dark), inset 1px 1px var(--pt-hi), inset -2px -2px var(--pt-shadow), inset 2px 2px var(--pt-light);
  cursor: pointer;
}
.pt-tool svg { width: 16px; height: 16px; display: block; }
.pt-tool[aria-pressed="true"] {
  /* pressed in, with Paint's dithered background */
  background: repeating-conic-gradient(#fff 0 25%, var(--pt-face) 0 50%) 0 0 / 2px 2px;
  box-shadow: inset 1px 1px var(--pt-dark), inset -1px -1px var(--pt-hi), inset 2px 2px var(--pt-shadow), inset -2px -2px var(--pt-light);
}
.pt-tool[aria-pressed="true"] svg { transform: translate(1px, 1px); }
.pt-tool:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }

/* The options box under the tools (sizes, shapes, fill styles). */
.pt-options {
  width: 48px; min-height: 68px;
  padding: 3px 2px;
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 1px;
  background: var(--pt-face);
  box-shadow: inset 1px 1px var(--pt-shadow), inset -1px -1px var(--pt-hi);
}
.pt-opt {
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
}
.pt-opt[aria-pressed="true"] { background: var(--pt-select); color: #fff; }
.pt-opt:focus-visible { outline: 1px dotted #000; outline-offset: -1px; }
.pt-opt svg { display: block; }
.pt-opt--row { width: 42px; height: 12px; }
.pt-opt--cell { width: 13px; height: 13px; }
.pt-opt--zoom { width: 42px; height: 14px; font: 10px/1 var(--pt-ui); }
.pt-opt--fill { width: 42px; height: 20px; }

/* ---------- 6. Workspace and canvas ---------- */
.pt-workspace {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: auto;
  padding: 5px 13px 13px 5px;
  background: var(--pt-work);
  box-shadow: inset 1px 1px var(--pt-dark), inset 2px 2px var(--pt-shadow);
  scrollbar-color: #a9a9a9 #dcdcdc;
}
.pt-sheet {
  position: relative;
  flex: 1 0 auto;
  background: #fff;
  color: #000;
  outline: none;
  --pt-accent: #0080ff;      /* recoloured from the palette; see app.js */
}
.pt-sheet:focus-visible { outline: 1px dashed #fff; outline-offset: 2px; }
/* Page titles receive focus after navigation (for screen readers); they are not controls, so no ring. */
.pt-sheet [tabindex="-1"]:focus { outline: none; }
/* Paint's three resize handles: right, bottom, bottom-right. */
.pt-handle {
  position: absolute;
  width: 5px; height: 5px;
  background: #000080;
  border: 0; padding: 0;
  z-index: 2;
}
.pt-handle--e  { right: -6px; top: calc(50% - 2px); }
.pt-handle--s  { bottom: -6px; left: calc(50% - 2px); }
.pt-handle--se { right: -6px; bottom: -6px; }
.pt-sheet.is-bitmap .pt-handle { cursor: nwse-resize; }
.pt-sheet.is-bitmap .pt-handle--e { cursor: ew-resize; }
.pt-sheet.is-bitmap .pt-handle--s { cursor: ns-resize; }
.pt-resize-ghost { position: absolute; left: 0; top: 0; border: 1px dashed #000; pointer-events: none; z-index: 3; }

/* Image menu easter eggs (start screen only): Flip/Rotate and Invert Colors. */
.pt-sheet.is-flipped .pt-start-stage { transform: rotate(180deg); }
.pt-sheet.is-inverted { filter: invert(1); }

/* Page transition: a quick fade, as if the picture was just opened. */
.pt-sheet.is-entering > .pt-page, .pt-sheet.is-entering > .pt-start { animation: pt-open .22s ease-out both; }
@keyframes pt-open { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- 7. Colour box ---------- */
.pt-colorbox {
  flex: none;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 4px 5px;
  background: var(--pt-face);
  border-top: 1px solid var(--pt-hi);
  min-height: 48px;
}
.pt-swatch {
  position: relative;
  flex: none;
  width: 32px; height: 34px;
  background: repeating-conic-gradient(#fff 0 25%, var(--pt-face) 0 50%) 0 0 / 2px 2px;
  box-shadow: inset 1px 1px var(--pt-shadow), inset -1px -1px var(--pt-hi);
}
.pt-swatch span {
  position: absolute;
  width: 15px; height: 15px;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--pt-shadow);
  border: 1px solid #000;
}
.pt-swatch .pt-bg { right: 4px; bottom: 4px; }
.pt-swatch .pt-fg { left: 4px; top: 4px; z-index: 1; }
.pt-wells {
  display: grid;
  grid-template-columns: repeat(14, var(--pt-well));
  grid-auto-rows: var(--pt-well);
  gap: 1px;
}
.pt-well {
  width: var(--pt-well); height: var(--pt-well);
  padding: 0;
  border: 1px solid #000;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--pt-shadow);
  cursor: pointer;
}
.pt-well:hover { box-shadow: 0 0 0 1px #000, 0 0 0 2px #fff; position: relative; z-index: 1; }
.pt-well:focus-visible { outline: 2px dotted #000; outline-offset: 1px; position: relative; z-index: 1; }
.pt-colorbox-hint { margin-left: 10px; color: #222; font: 11px/1.35 var(--pt-ui); max-width: 340px; }
.pt-colorpicker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; bottom: 0; }

/* ---------- 8. Status bar ---------- */
.pt-status {
  flex: none;
  display: flex; gap: 2px;
  height: 22px;
  padding: 2px 2px 2px;
  background: var(--pt-face);
  border-top: 1px solid var(--pt-shadow);
  box-shadow: inset 0 1px var(--pt-hi);
  font: 11px/16px var(--pt-ui);
}
.pt-status > span {
  padding: 0 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 1px 1px var(--pt-shadow), inset -1px -1px var(--pt-hi);
}
.pt-status-text { flex: 1; min-width: 0; }
.pt-status-xy, .pt-status-size { flex: none; width: 104px; }

/* ---------- 9. Start screen ---------- */
/* The blank canvas shows Paint's pencil cursor (the start button keeps the pointing hand). */
.pt-window[data-route="start"] .pt-sheet { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M2 22l2-6L16 4l4 4L8 20z' fill='%23ffd34d' stroke='%23000'/%3E%3Cpath d='M2 22l2-6 4 4z' fill='%23f2c48d' stroke='%23000'/%3E%3Cpath d='M16 4l4 4' stroke='%23000'/%3E%3C/svg%3E") 2 22, crosshair; }
.pt-start {
  min-height: 100%;
  display: grid; place-items: center;
  padding: 70px 24px 40px;
}
.pt-start-stage { position: relative; width: min(440px, 64%); }
.pt-startbtn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: pt-wobble 2.6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.pt-startbtn svg { display: block; width: 100%; height: auto; overflow: visible; }
.pt-startbtn .pt-sb-fill { fill: var(--pt-sb-fill, #ffff00); transition: fill .15s; }
.pt-startbtn .pt-sb-face { transition: transform .12s ease-out; }
.pt-startbtn:hover { animation-duration: 1.1s; }
.pt-startbtn:hover .pt-sb-face { transform: translate(-2px, -2px); }
.pt-startbtn:active .pt-sb-face, .pt-startbtn.is-pressed .pt-sb-face { transform: translate(7px, 7px); }
.pt-startbtn:focus { outline: none; }
.pt-startbtn:focus-visible .pt-sb-select { visibility: visible; }
.pt-sb-select { visibility: hidden; }
/* "click me!" sits above and left of the button; its arrow ends at the button's top-left edge. */
.pt-start-note {
  position: absolute;
  width: 56%;
  right: 72%; bottom: 74%;
  overflow: visible;
  pointer-events: none;
}
@keyframes pt-wobble {
  0%, 100% { transform: rotate(-1.4deg) translateY(0); }
  50% { transform: rotate(1.4deg) translateY(-4px); }
}
/* The wobble (and the Enter key's bob, §10) stops 5 seconds after the screen opens, or at the
   visitor's first click or key press (app.js adds "pt-still" to the window). */
.pt-still .pt-startbtn, .pt-still .pt-startbtn:hover, .pt-still .pt-enter { animation: none; }
/* The bucket-fill flash when Start is clicked. */
.pt-fillflash {
  position: absolute; inset: 0;
  z-index: 5;
  background: var(--pt-flash, #ffff00);
  pointer-events: none;
  animation: pt-flash .5s ease-in both;
}
@keyframes pt-flash {
  0% { clip-path: circle(0 at var(--fx, 50%) var(--fy, 50%)); opacity: 1; }
  60% { clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); opacity: 1; }
  100% { clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); opacity: 0; }
}

/* ---------- 10. Home canvas (like References/msPaintmock.png) ---------- */
.pt-home { max-width: 1000px; padding-top: 30px; }
.pt-home-art {
  display: grid;
  grid-template-columns: minmax(0, 27fr) minmax(0, 50fr);
  column-gap: 7%;
  align-items: center;
  padding: 0 4% 0 6%;
}
.pt-home-photo { display: block; width: 100%; max-width: 270px; height: auto; justify-self: end; }
.pt-home-hand { display: block; width: 100%; max-width: 470px; height: auto; }
.pt-home-enterrow { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.pt-enter {
  flex: none;
  width: min(118px, 30%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  animation: pt-bob 1.8s ease-in-out infinite;
}
.pt-enter img { display: block; width: 100%; height: auto; transition: transform .1s; filter: drop-shadow(0 3px 2px rgba(0,0,0,.18)); }
.pt-enter:hover img { transform: translateY(-2px) rotate(-2deg); filter: drop-shadow(0 6px 4px rgba(0,0,0,.22)); }
.pt-enter:active img, .pt-enter.is-pressed img { transform: translateY(4px) scale(.97); filter: none; }
.pt-enter:focus { outline: none; }
.pt-enter:focus-visible { outline: 2px dashed #000; outline-offset: 4px; }
@keyframes pt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pt-enter-note { display: flex; align-items: center; gap: 2px; color: #e00000; font: 16px/1.2 var(--pt-hand); }
.pt-enter-note svg { width: 44px; height: 26px; flex: none; overflow: visible; }
.pt-textbox {
  position: relative;
  margin: 26px 4% 0 6%;
  padding: 14px 18px 15px;
  border: 1px dashed #000;
}
.pt-textbox h1 { margin: 0 0 8px; font: bold 23px/1.2 Arial, Helvetica, sans-serif; }
.pt-textbox p { margin: 0 0 9px; font-size: 14px; line-height: 1.55; }
.pt-textbox p:last-child { margin-bottom: 0; }

/* ---------- 11. Website pages: shared look ---------- */
.pt-page {
  max-width: 900px;
  padding: 24px 32px 40px;
  font: 14px/1.55 var(--pt-body);
  color: #000;
}
.pt-page a { color: #0000ee; text-underline-offset: 2px; }
.pt-page a:visited { color: #551a8b; }
.pt-page a:hover { color: #e00000; }
.pt-page a:focus-visible, .pt-page button:focus-visible { outline: 2px dashed #000; outline-offset: 2px; }
/* Links inside running text (content.js links, the email address, employers): underlined, otherwise
   exactly like the words around them (Lehan, 2026-10-02). Buttons, tabs and "Next page" keep their look. */
.pt-sheet a.text-link, .pt-sheet a.text-link:visited, .pt-sheet a.text-link:hover,
.xp-dialog a.text-link, .xp-dialog a.text-link:visited, .xp-dialog a.text-link:hover {
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.pt-sheet a.text-link:hover, .xp-dialog a.text-link:hover { text-decoration-thickness: 2px; }
.pt-page p { margin: 0 0 8px; }
.pt-page ul { margin: 0; padding-left: 20px; }
.pt-page ul.pt-rows, .pt-page ul.pt-talks { padding-left: 0; }

.pt-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.pt-head-doodle { flex: none; width: 58px; height: 58px; overflow: visible; }
.pt-h1 {
  position: relative; z-index: 0;
  margin: 0;
  font: 900 31px/1.15 var(--pt-title);
  letter-spacing: -.01em;
  outline: none;
}
/* (An SVG needs an explicit width here: with only left/right it would keep its intrinsic width.) */
.pt-hl { position: absolute; left: -7px; bottom: -4px; width: calc(100% + 17px); height: .66em; z-index: -1; overflow: visible; }
.pt-hl path { fill: color-mix(in srgb, var(--pt-accent) 38%, #fff); }

/* Section labels: a rectangle drawn with the Rectangle tool and filled with the bucket. */
.pt-h2 {
  display: inline-block;
  margin: 26px 0 14px;
  padding: 2px 10px 3px;
  font: bold 16px/1.3 Arial, Helvetica, sans-serif;
  background: color-mix(in srgb, var(--pt-accent) 22%, #fff);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
}
.pt-h2:first-child { margin-top: 4px; }

/* Cards: black rectangles with a coloured "second rectangle" behind them. */
.pt-card {
  position: relative;
  border: 2px solid #000;
  background: #fff;
  box-shadow: 6px 6px 0 var(--pt-accent);
  padding: 12px 16px 13px;
  margin: 0 6px 18px 0;
}
/* Hover or keyboard focus: Paint's dashed selection rectangle ("marching ants"). */
.pt-card::after {
  content: "";
  position: absolute; inset: -7px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, #000 50%, transparent 0) repeat-x 0 0 / 8px 1px,
    linear-gradient(90deg, #000 50%, transparent 0) repeat-x 0 100% / 8px 1px,
    linear-gradient(0deg, #000 50%, transparent 0) repeat-y 0 0 / 1px 8px,
    linear-gradient(0deg, #000 50%, transparent 0) repeat-y 100% 0 / 1px 8px;
}
.pt-card:hover::after, .pt-card:focus-within::after { opacity: 1; animation: pt-ants .6s linear infinite; }
@keyframes pt-ants { to { background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px; } }
.pt-card h3 { margin: 0 0 4px; font: bold 16px/1.35 Arial, Helvetica, sans-serif; }
.pt-meta { color: #333; }
.pt-meta b { color: #000; }

/* Paint-style buttons for the important links (PDFs, portfolio, blog). */
.pt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border: 2px solid #000;
  background: #ffff80;
  box-shadow: 3px 3px 0 #000;
  color: #000 !important;
  font: bold 13px/1.3 Arial, Helvetica, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.pt-btn:hover { background: #ffff00; }
.pt-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.pt-btn svg { width: 15px; height: 15px; flex: none; }
.pt-btn--big { padding: 9px 16px; font-size: 15px; }
.pt-btn--blue { background: #80ffff; }
.pt-btn--blue:hover { background: #00ffff; }
.pt-btns { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 4px 0 6px; }

/* Handwritten notes (the Text tool in Comic Sans). */
.pt-note { font: 15px/1.25 var(--pt-hand); color: #e00000; }

/* "Next page" at the end of each page. */
.pt-next { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 16px; border-top: 2px dotted #000; flex-wrap: wrap; }
.pt-next a { display: inline-flex; align-items: center; gap: 8px; font: bold 15px/1.3 Arial, Helvetica, sans-serif; }
.pt-next svg { width: 46px; height: 22px; overflow: visible; }

/* ---------- 12. Website pages: one by one ---------- */
/* Research: "Research interests:" and "Methods:" rows of pills, the pills lined up under each other. */
.pt-tags { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 14px; align-items: center; margin: 0 0 6px; }
.pt-tagrow { display: contents; }
.pt-tags dt { font-weight: bold; }
.pt-tags dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pt-pill {
  display: inline-block;
  padding: 3px 14px 4px;
  border: 2px solid #000;
  border-radius: 999px;
  background: var(--pill, #ffff80);
  font: bold 13px/1.25 Arial, Helvetica, sans-serif;
}
.pt-pill:nth-child(3n+1) { --pill: #80ffff; transform: rotate(-1.5deg); }
.pt-pill:nth-child(3n+2) { --pill: #ffff80; transform: rotate(1.2deg); }
.pt-pill:nth-child(3n+3) { --pill: #00ff80; transform: rotate(-.6deg); }
/* Methods get their own colours (pink, periwinkle, orange), so the two rows read as two lists. */
.pt-tagrow--methods .pt-pill:nth-child(3n+1) { --pill: #ffc0e0; }
.pt-tagrow--methods .pt-pill:nth-child(3n+2) { --pill: #c0c0ff; }
.pt-tagrow--methods .pt-pill:nth-child(3n+3) { --pill: #ffc080; }
.pt-papers { list-style: none; margin: 0; padding: 0; counter-reset: paper; }
.pt-paper { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; }
.pt-num {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 2px solid #000; border-radius: 50%;
  background: color-mix(in srgb, var(--pt-accent) 30%, #fff);
  font: bold 16px/1 Arial, Helvetica, sans-serif;
}
.pt-paper .pt-with { margin: 0 0 3px; }
.pt-paper .pt-btns { margin-top: 8px; }

/* Talks */
.pt-legend { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; color: #333; }
.pt-legend svg { width: 46px; height: 26px; overflow: visible; flex: none; }
.pt-year { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; margin-bottom: 18px; }
.pt-year-label {
  align-self: start;
  margin: 2px 0 0;
  padding: 3px 0 4px;
  text-align: center;
  font: bold 20px/1.2 var(--pt-mono);
  background: color-mix(in srgb, var(--pt-accent) 22%, #fff);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
}
.pt-talks { list-style: none; margin: 0; padding: 0; }
.pt-talk { position: relative; padding: 4px 0 5px 22px; }
.pt-talk::before {
  content: "";
  position: absolute; left: 3px; top: 11px;
  width: 8px; height: 8px;
  background: #000;
  transform: rotate(45deg);
}
.pt-talk b { font-weight: bold; }
.pt-talk .pt-detail { color: #333; }
.pt-ring { position: relative; display: inline-block; }
.pt-circle { position: absolute; left: -9px; top: -7px; width: calc(100% + 20px); height: calc(100% + 14px); overflow: visible; pointer-events: none; }
.pt-sticker {
  display: inline-block;
  margin-left: 16px;
  color: #e00000;
  font: bold 14px/1 var(--pt-hand);
  transform: rotate(-5deg);
  white-space: nowrap;
}

/* CV */
.pt-cv-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin: 0 0 6px; }
.pt-edu { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.pt-edu h3 { grid-column: 1; }
.pt-dates { grid-column: 2; grid-row: 1; justify-self: end; font: 13px/1.6 var(--pt-mono); white-space: nowrap; }
.pt-edu .pt-inst { grid-column: 1 / -1; margin: 0 0 4px; }
.pt-edu ul { grid-column: 1 / -1; }
.pt-edu li { margin: 3px 0; }

/* Art */
.pt-project { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
.pt-thumb { width: 96px; height: 80px; border: 2px solid #000; background: #fff; overflow: hidden; }
.pt-thumb svg { display: block; width: 100%; height: 100%; }
.pt-project .pt-medium { font-style: italic; margin: 0 0 6px; }
.pt-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px 20px; }
.pt-duo .pt-card { margin: 0 6px 6px 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.pt-duo .pt-card > svg { width: 64px; height: 64px; overflow: visible; }

/* Other Experience */
.pt-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 8px; }
.pt-jump button {
  padding: 2px 9px;
  border: 1px solid #000;
  background: #fff;
  font: 12px/1.4 var(--pt-body);
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}
.pt-jump button:hover { background: color-mix(in srgb, var(--pt-accent) 22%, #fff); }
.pt-jump button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.pt-job { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; padding: 10px 0 12px; border-bottom: 1px dashed #9a9a9a; }
.pt-job:last-child { border-bottom: 0; }
.pt-job .pt-dates { grid-column: 1; grid-row: 1 / span 3; justify-self: start; font-size: 12.5px; line-height: 1.5; white-space: normal; padding-top: 2px; }
.pt-job h3 { margin: 0; font: bold 15px/1.35 Arial, Helvetica, sans-serif; }
.pt-job .pt-org { margin: 0 0 4px; }
.pt-job .pt-type { color: #555; font-size: 12.5px; }
.pt-job li { margin: 3px 0; }
.pt-rows { list-style: none; margin: 0; padding: 0; }
.pt-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; padding: 6px 0; border-bottom: 1px dashed #9a9a9a; }
.pt-rows li:last-child { border-bottom: 0; }
.pt-rows .pt-dates { font-size: 12.5px; }
.pt-teach h3 { margin: 0 0 4px; font: bold 15px/1.35 Arial, Helvetica, sans-serif; }
.pt-rule { border: 0; border-top: 2px solid #000; margin: 12px 0; }
.pt-skills { display: grid; gap: 10px; }
.pt-skill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pt-skill > b { margin-right: 4px; }
.pt-chip { display: inline-block; padding: 1px 9px 2px; border: 1px solid #000; background: #ffff80; font: 13px/1.4 var(--pt-mono); font-weight: bold; }
.pt-chip:nth-child(even) { background: #80ffff; }

/* ---------- 13. Paint! tab (the drawing canvas) ---------- */
.pt-sheet.is-bitmap { flex: none; align-self: flex-start; background: transparent; }
.pt-canvaswrap { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.pt-canvaswrap canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.pt-canvaswrap .pt-preview { position: absolute; left: 0; top: 0; pointer-events: none; }
.pt-hint {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 6px;
  padding: 16px;
  pointer-events: none;
  text-align: center;
  color: #9a9a9a;
  font: 19px/1.35 var(--pt-hand);
  transition: opacity .3s;
}
.pt-hint small { font: 13px/1.4 var(--pt-ui); color: #a8a8a8; }
.pt-hint.is-gone { opacity: 0; }
.pt-textedit {
  position: absolute;
  margin: 0; padding: 0 1px;
  border: 1px dashed #000;
  background: transparent;
  resize: none; overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.15;
  white-space: pre;
  outline: none;
  z-index: 2;
}

/* Tool cursors on the canvas (SVG cursors, hotspot at the tip). */
.pt-canvaswrap { cursor: crosshair; }
.pt-canvaswrap[data-tool="pencil"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M2 22l2-6L16 4l4 4L8 20z' fill='%23ffd34d' stroke='%23000'/%3E%3Cpath d='M2 22l2-6 4 4z' fill='%23f2c48d' stroke='%23000'/%3E%3Cpath d='M16 4l4 4' stroke='%23000'/%3E%3C/svg%3E") 2 22, crosshair; }
.pt-canvaswrap[data-tool="fill"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M9 4l9 9-7 7-9-9z' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M18 13c2 3 3 5 1.5 6.5S16 19 17 16z' fill='%23000'/%3E%3Cpath d='M2 11h14' stroke='%23000'/%3E%3C/svg%3E") 18 20, crosshair; }
.pt-canvaswrap[data-tool="picker"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M2 22l1-4 10-10 3 3-10 10z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M13 8l4-4c1.5-1.5 3.5 .5 2 2l-4 4z' fill='%23000'/%3E%3C/svg%3E") 2 22, crosshair; }
.pt-canvaswrap[data-tool="magnifier"] { cursor: zoom-in; }
.pt-canvaswrap[data-tool="text"] { cursor: text; }
.pt-canvaswrap[data-tool="select"], .pt-canvaswrap[data-tool="free-select"] { cursor: crosshair; }
.pt-canvaswrap.is-over-selection { cursor: move; }

/* ---------- 14. Dialogs ---------- */
.pt-form { display: grid; gap: 8px; margin-top: 8px; }
.pt-form label { display: grid; gap: 3px; }
.pt-form input, .pt-form textarea {
  width: 100%;
  padding: 3px 4px;
  border: 1px solid #7f9db9;
  background: #fff;
  font: 11px/1.4 var(--pt-ui);
  color: #000;
}
.pt-form textarea { min-height: 64px; resize: vertical; }
.pt-form input:focus, .pt-form textarea:focus { outline: 1px dotted #000; outline-offset: 1px; }
.pt-form .pt-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pt-preview-thumb { display: block; max-width: 100%; max-height: 120px; margin: 6px 0 2px; border: 1px solid #000; image-rendering: pixelated; background: #fff; }
.xp-dialog-text code { font: 11px var(--pt-mono); }

/* The Abstract popup (Research page): a wider XP dialog. The abstract sits in a white text box with
   the Text tool's dashed border, and scrolls inside it if the screen is short. */
.xp-dialog.pt-abs-dialog { width: min(600px, calc(100vw - 24px)); }
.pt-abs-dialog .xp-dialog-msg { font: 12px/1.5 var(--pt-ui); }
.pt-abs-dialog .xp-dialog-text { flex: 1; min-width: 0; }
.pt-abs .pt-abs-title { margin: 0 0 3px; font: bold 15px/1.3 Arial, Helvetica, sans-serif; }
.pt-abs .pt-abs-with { margin: 0 0 10px; }
.pt-abs-text {
  max-height: max(140px, calc(100vh - var(--xp-taskbar-h, 30px) - 300px));
  overflow-y: auto;
  padding: 9px 12px 10px;
  background: #fff;
  border: 1px dashed #000;
  font: 13px/1.55 var(--pt-body);
}
.pt-abs .pt-abs-text p { margin: 0; }
.pt-abs-text:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.pt-abs .pt-abs-pdf { margin: 10px 0 0; }
.pt-abs-pdf a { display: inline-flex; align-items: center; gap: 6px; color: #0000ee; font-weight: bold; text-underline-offset: 2px; }
.pt-abs-pdf a:hover { color: #e00000; }
.pt-abs-pdf a:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.pt-abs-pdf svg { width: 15px; height: 15px; flex: none; }

.pt-noscript { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 3000; padding: 16px 20px; background: #ffffe1; border: 1px solid #000; font: 14px/1.5 Tahoma, sans-serif; }

/* ---------- 15. Phones (the XP shell maximises the window below 700px) ---------- */
@media (max-width: 700px) {
  /* Touch targets at least 24 x 24 px (WCAG 2.5.8): colour wells, tools, menus. */
  :root { --pt-menu-h: 34px; --pt-tool: 25px; --pt-well: 24px; }
  /* Like a real Windows menu bar that is too narrow: the items wrap onto a second line.
     At 390px: File ... Help, then the two links; or the tabs Home ... Art, then Paint! and the two links. */
  .pt-menubar { padding: 1px 0; align-items: flex-start; }
  .pt-menu { height: 32px; padding: 0 7px; font-size: 13px; margin: 0; }   /* 7px: the tabs fit on two rows at 390px */
  .pt-tabs { flex: 1 1 auto; min-width: 0; }
  .pt-menubar-end { flex: none; padding-left: 2px; }
  .pt-end-link { padding: 0 7px; }
  .pt-end-long { display: none; }   /* "Google Scholar" -> "Scholar" */
  .pt-act-hint { display: none; }
  .pt-act { height: 32px; padding: 0 7px; }
  .pt-act span { display: none; }
  .pt-act--save span { display: inline; }

  /* Pages read better without the toolbox; it comes back on the start screen and the Paint! tab. */
  .pt-window[data-route="home"] .pt-toolbox,
  .pt-window[data-route="research"] .pt-toolbox,
  .pt-window[data-route="talks"] .pt-toolbox,
  .pt-window[data-route="cv"] .pt-toolbox,
  .pt-window[data-route="art"] .pt-toolbox,
  .pt-window[data-route="experience"] .pt-toolbox { display: none; }

  .pt-workspace { padding: 3px 8px 8px 3px; }
  .pt-colorbox { overflow-x: auto; scrollbar-width: none; min-height: 52px; }
  /* 24px wells side by side (14 of them fit next to the swatch at 390px); the light-grey border draws the gap. */
  .pt-wells { gap: 0; }
  .pt-well { border-color: var(--pt-face); box-shadow: inset 0 0 0 1px #000; }
  .pt-colorbox-hint { display: none; }
  .pt-status-size { display: none; }
  .pt-status-xy { width: 76px; }

  .pt-start { padding: 64px 12px 30px; }
  .pt-start-stage { width: min(330px, 80%); }
  .pt-start-note { width: 64%; right: auto; left: -8%; bottom: 96%; }

  .pt-page { padding: 18px 16px 30px; font-size: 14px; }
  .pt-head { gap: 10px; margin-bottom: 14px; }
  .pt-head-doodle { width: 44px; height: 44px; }
  .pt-h1 { font-size: 25px; }

  .pt-home { padding-top: 16px; }
  .pt-home-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 8px; padding: 0; }
  .pt-home-hello { display: contents; }
  .pt-home-hand { grid-column: 1 / -1; grid-row: 1; max-width: 100%; }
  .pt-home-photo { grid-column: 1; grid-row: 2; justify-self: start; }
  .pt-home-enterrow { grid-column: 2; grid-row: 2; flex-direction: column; align-items: flex-start; }
  .pt-enter { width: 100px; }
  .pt-enter-note svg { transform: rotate(100deg); width: 34px; }   /* the note sits under the key: point up at it */
  .pt-textbox { margin: 18px 0 0; padding: 12px 12px 13px; }
  .pt-textbox h1 { font-size: 21px; }

  .pt-year { grid-template-columns: 1fr; row-gap: 8px; }
  .pt-talk.is-upcoming { padding-bottom: 8px; }
  .pt-talk.is-upcoming .pt-sticker { display: block; width: max-content; margin: 12px 0 0 2px; }
  .pt-year-label { justify-self: start; padding: 2px 12px; }
  .pt-edu { grid-template-columns: 1fr; }
  .pt-dates { grid-column: 1; grid-row: auto; justify-self: start; }
  .pt-project { grid-template-columns: 1fr; row-gap: 8px; }
  .pt-thumb { width: 96px; height: 72px; }
  .pt-job { grid-template-columns: 1fr; }
  .pt-job .pt-dates { grid-row: auto; padding-top: 0; }
  .pt-rows li { grid-template-columns: 1fr; }
  .pt-card { padding: 11px 12px 12px; }
  .pt-tags { grid-template-columns: 1fr; row-gap: 6px; }
  .pt-tagrow + .pt-tagrow dt { margin-top: 6px; }
  .pt-abs-dialog .xp-dialog-msg > .xp-ico { display: none; }     /* more room for the abstract */
  .pt-abs-text { padding: 8px 10px 9px; font-size: 13px; }

  /* Easy to tap: Other Experience's jump buttons are 32px tall (like the menus; they keep to two rows);
     the buttons of this page's dialogs (Abstract, Save, About, Help, Recycle Bin) and the PDF link in
     the Abstract popup are 44px tall. */
  .pt-jump button { min-height: 32px; }
  .xp-dialog .xp-dialog-buttons .xp-button { height: auto; min-height: 44px; padding: 0 16px; }
  .pt-abs-pdf a { min-height: 44px; }
}

/* Narrow phones: 14 wells of 24px no longer fit in one row, so the palette has 7 columns (4 rows). */
@media (max-width: 389px) {
  .pt-wells { grid-template-columns: repeat(7, var(--pt-well)); }
}

/* Very short windows: slimmer chrome. */
@media (max-height: 560px) and (min-width: 701px) {
  .pt-colorbox { min-height: 40px; padding: 3px 4px; }
  .pt-swatch { width: 28px; height: 30px; }
  :root { --pt-well: 14px; }
}

/* ---------- 16. Reduced motion: no wobble, bobbing, marching ants or transitions ---------- */
/* (Class motion-on on <html>, from ?motion=on or the switch on pages.html, keeps the animations.) */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .pt-startbtn, html:not(.motion-on) .pt-startbtn:hover, html:not(.motion-on) .pt-enter,
  html:not(.motion-on) .pt-tabs-anim .pt-tab, html:not(.motion-on) .pt-tip,
  html:not(.motion-on) .pt-sheet.is-entering > .pt-page, html:not(.motion-on) .pt-sheet.is-entering > .pt-start { animation: none; }
  html:not(.motion-on) .pt-card:hover::after, html:not(.motion-on) .pt-card:focus-within::after { animation: none; }
  html:not(.motion-on) .pt-fillflash { display: none; }
  html:not(.motion-on) .pt-startbtn .pt-sb-face, html:not(.motion-on) .pt-enter img, html:not(.motion-on) .pt-hint { transition: none; }
}