/* ===========================================================
   Patrick mode for exclaimrobotics.com — the internal tools' Patrick mode
   (rackthor_common/style: style.js verbatim, the switch / Office Assistant /
   message box rules below verbatim from exclaim.css), mapped onto the site's
   tokens and components.

     ?patrick (=1)          Patrick mode: a 1998 memo in Windows 98 greys, Times,
                            no colour, no "!", and the Office Assistant
     ?patrick=more (=2)     Not Patrick enough: no stylesheet at all
     ?patrick=0             back

   style.js sets html[data-style="patrick"] (+ [data-plain]) before first paint.
   =========================================================== */

/* the shared components' tokens, in the site's terms */
:root {
  --body: var(--font-body); --hand: var(--font-hand);
  --mono: ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
  --line: var(--ink); --radius-pill: 999px;
}

/* ---- the Patrick mode switch (style.js puts it in) — from exclaim.css ---- */
.xr-patrick { position: fixed; left: 8px; bottom: 8px; z-index: 50; display: inline-flex; align-items: center; gap: .3rem;
              font: .75rem/1 var(--body); color: var(--ink-70); background: var(--paper); border: 1.5px solid var(--ink-25);
              border-radius: var(--radius-pill); padding: .25rem .55rem .25rem .4rem; opacity: .55; cursor: pointer; user-select: none; }
.xr-patrick:hover, .xr-patrick:focus-within { opacity: 1; }
.xr-patrick input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.xr-patrick label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.xr-patrick label + label { margin-left: .6rem; }
.xr-patrick [hidden] { display: none !important; }
@media print { .xr-patrick { display: none; } }

/* ---- Patrick mode: the site's tokens, greyed and Times'd ---- */
html[data-style="patrick"] {
  --ink: #000; --ink-70: #444; --ink-45: #666; --ink-25: #999; --ink-12: #ddd;
  --paper: #fff; --paper-2: #e0e0e0; --bg-gray: #c0c0c0; --bg-gray-dark: #a0a0a0;
  --accent: #555; --accent-hover: #333;
  --wash-accent: #fff; --wash-accent-strong: #e0e0e0; --wash-ink: #fff;
  --surface-page: #808080;              /* the Windows 98 desktop, minus the teal: no colour, not one */
  --surface-card: #c0c0c0; --surface-note: #c0c0c0; --surface-quiet: #c0c0c0;
  --link: #000; --link-underline: #000;
  --font-body: "Tinos", "Times New Roman", serif;
  --font-hand: "Tinos", "Times New Roman", serif;
  --body: var(--font-body); --hand: var(--font-body); --mono: "Cousine", "Courier New", monospace;
  --stroke: #808080; --stroke-w-plate: 2px; --stroke-w: 1px; --stroke-w-thin: 1px;
  --shadow: none; --shadow-sm: none; --shadow-press: none;
  --radius-btn: 0; --radius-chip: 0; --radius-pill: 0;
  --wavy-underline: none; --marker-accent: none; --grid-plate: none;
  --track-hero: 0; --line: #808080;
}
html[data-style="patrick"] body { background: var(--surface-page) !important; -webkit-font-smoothing: auto; }
html[data-style="patrick"] :is(img, video, canvas, iframe) { filter: grayscale(1) !important; }
html[data-style="patrick"] .site .display,
html[data-style="patrick"] .site :is(h1, h2, h3) { font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: 0 !important; }
html[data-style="patrick"] .site .hand, html[data-style="patrick"] .site .hero-tag,
html[data-style="patrick"] .site .figure-cap { font-style: italic; letter-spacing: 0; }
html[data-style="patrick"] .site a { color: #000 !important; text-decoration: underline !important; background-image: none !important; cursor: default !important; }
html[data-style="patrick"] mark, html[data-style="patrick"] .mark { background: none !important; font-weight: 700; color: inherit; }
html[data-style="patrick"] ::selection { background: #808080; color: #fff; }

/* every panel a window: bevel, title bar, its three useless buttons */
html[data-style="patrick"] .site :is(.panel, .figure, .person-card, .jobs-box) {
  position: relative;
  background: #c0c0c0 !important; background-image: none !important;
  border: 2px outset #dfdfdf !important; box-shadow: 1px 1px 0 #000 !important;
  padding-top: calc(1.6rem + 1.4rem) !important;
}
html[data-style="patrick"] .site .figure, html[data-style="patrick"] .site .person-card { padding: 1.6rem 3px 3px !important; }
html[data-style="patrick"] .site :is(.panel, .figure, .person-card, .jobs-box)::before {
  content: "Exclaim Robotics - Microsoft Word";
  position: absolute; left: 0; right: 0; top: 0; height: 1.35rem;
  display: flex; align-items: center; padding: 0 3.6rem 0 .45rem;
  font: 700 .8rem/1 "Tahoma", "Arial", sans-serif; color: #fff; white-space: nowrap; overflow: hidden;
  background: linear-gradient(90deg, #404040, #a0a0a0);            /* the title bar, greyed like the tools' */
}
html[data-style="patrick"] .site :is(.panel, .figure, .person-card, .jobs-box)::after {
  content: "_  \25A1  \00D7"; position: absolute; top: .15rem; right: .25rem; padding: 0 .3rem;
  font: 700 .7rem/1.25 var(--mono); color: #000; background: #c0c0c0; border: 2px outset #dfdfdf; white-space: pre;
}
html[data-style="patrick"] .site .figure::before { content: "rack_insert.avi - Windows Media Player"; }
html[data-style="patrick"] .site .person-card::before { content: "Contact Properties"; }
html[data-style="patrick"] .site .jobs-box::before { content: "Open Positions - Internet Explorer"; }
html[data-style="patrick"] .site .panel--hero::before { content: "Document1 - Microsoft Word"; }
html[data-style="patrick"] .site .person-card > img { border: 2px inset #dfdfdf !important; }
html[data-style="patrick"] .site .figure-cap { background: #ffffe1 !important; border: 1px solid #000 !important; box-shadow: none !important; }  /* a tooltip */

/* buttons: grey, bevelled, no pill, no bangs */
html[data-style="patrick"] .site .btn {
  border: 2px outset #dfdfdf !important; background: #c0c0c0 !important; color: #000 !important;
  font: 400 .95rem/1.3 var(--font-body) !important; box-shadow: none !important; transform: none !important; padding: .3rem 1.2rem !important;
}
html[data-style="patrick"] .site .btn:active { border-style: inset !important; }
html[data-style="patrick"] .site .btn .ico,
html[data-style="patrick"] .site .btn .bangs,
html[data-style="patrick"] .site .btn .btn-label::after,
html[data-style="patrick"] .site .sitenav a::after,
html[data-style="patrick"] .site .sitenav a::before { display: none !important; }
html[data-style="patrick"] .site .sitenav { font-family: var(--font-body); font-size: 1rem; }

/* the mark: a full stop. The wordmark: plain text would be too much fun; it goes grey */
html[data-style="patrick"] .site .topbar .brand img { content: url("/style/brand-period.svg"); }
html[data-style="patrick"] .site .wordmark-img { filter: grayscale(1) opacity(.6) !important; }
html[data-style="patrick"] .site .backers img { filter: grayscale(1) !important; }
html[data-style="patrick"] .site :is(.foot, .foot-link, .backers-label, .saas-link) { color: #fff !important; }
/* no MS-DOS for Patrick: he'd enjoy it */
html[data-style="patrick"] .dos-badge { display: none !important; }

html[data-style="patrick"] .xr-patrick { border: 2px inset #dfdfdf !important; background: #c0c0c0 !important; border-radius: 0 !important; opacity: 1; color: #000; }

/* ---- the Office Assistant (style.js) — from exclaim.css ---- */
.xr-clippy, .xr-msgbox { display: none; }
html[data-style="patrick"] .xr-clippy {
  display: block; position: fixed; right: 14px; bottom: 14px; z-index: 49; max-width: 15rem; cursor: default;
  padding: .55rem .7rem .55rem 2.6rem; font: .85rem/1.35 var(--body); color: #000; text-align: left;
  background: #f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M8 30V8a4 4 0 0 1 8 0v24a6 6 0 0 1-12 0V12' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat .7rem 50% / 1.2rem 2rem;
  border: 1px solid #000; }
html[data-style="patrick"] .xr-msgbox {
  display: block; position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 60; width: min(26rem, 92vw);
  background: #c0c0c0; border: 2px outset #dfdfdf; font: .9rem/1.4 var(--body); color: #000; }
html[data-style="patrick"] .xr-msgbox .t { display: flex; padding: .15rem .3rem .15rem .5rem; color: #fff; font-weight: 700;
  background: linear-gradient(90deg, #404040, #a0a0a0); }
html[data-style="patrick"] .xr-msgbox .t::after { content: "\00D7"; margin-left: auto; padding: 0 .35rem; color: #000; background: #c0c0c0;
  border: 2px outset #dfdfdf; font: 700 .75rem/1.2 var(--mono); }
html[data-style="patrick"] .xr-msgbox .b { display: flex; gap: .8rem; padding: .9rem 1rem .4rem; }
html[data-style="patrick"] .xr-msgbox .b::before { content: "i"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #000;
  font: italic 700 1.3rem/1.8rem var(--body); text-align: center; background: #fff; }
html[data-style="patrick"] .xr-msgbox .f { display: flex; justify-content: space-between; align-items: center; padding: .4rem 1rem .8rem; }
html[data-style="patrick"] .xr-msgbox button { min-width: 5.5rem; border: 2px outset #dfdfdf; background: #c0c0c0; font: inherit; }
@media print { .xr-clippy, .xr-msgbox { display: none !important; } }

/* --- Not Patrick enough (style.js: html[data-plain]) — after exclaim.css's ----------
   The layout stays (everything still works); everything else goes: the browser's
   default serif in black on white, no bevels, no title bars, no shadows, the blue and
   purple links of 1995, buttons as plain links; pictures stay grey, as in Patrick mode. */
html[data-plain] {
  --surface-page: #fff; --surface-card: #fff; --surface-note: #fff; --surface-quiet: #fff; --paper: #fff; --bg-gray: #fff;
  --ink: #000; --ink-70: #000; --text-muted: #000; --stroke: #000; --line: #000;
  --font-body: serif; --font-hand: serif; --body: serif; --hand: serif; --mono: monospace;
}
html[data-plain] * { font-family: serif !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important;
  letter-spacing: normal !important; text-transform: none !important; font-style: normal; }
html[data-plain] :is(code, pre, kbd, samp) { font-family: monospace !important; }
html[data-plain] body, html[data-plain] .site :is(.panel, .figure, .person-card, .jobs-box, .figure-cap, .topbar, .backers, footer) {
  background: #fff !important; background-image: none !important; color: #000 !important; }
html[data-plain] .site :is(.panel, .figure, .person-card, .jobs-box) { border: 0 !important; padding-top: 0 !important; }
html[data-plain] .site :is(.panel, .figure, .person-card, .jobs-box)::before,
html[data-plain] .site :is(.panel, .figure, .person-card, .jobs-box)::after { content: none !important; }
html[data-plain] .site .figure-cap { position: static; border: 0 !important; max-width: none; padding: .5rem 0 !important; font-size: 1.5em; }
html[data-plain] .site :is(h1, h2, h3, .display, .hand, .hero-tag, .point-h) { color: #000 !important; font-weight: 700 !important; }
html[data-plain] .site .hero-tag, html[data-plain] .site .hand { font-weight: 400 !important; }
html[data-plain] .site a, html[data-plain] .site .btn, html[data-plain] .site .sitenav a {
  all: revert; color: #0000ee !important; text-decoration: underline !important; cursor: pointer !important; }
html[data-plain] .site a:visited { color: #551a8b !important; }
html[data-plain] .site .btn .ico { display: inline; vertical-align: middle; fill: none; stroke: currentColor; }
html[data-plain] mark, html[data-plain] .mark { all: revert; }
html[data-plain] .site .person-card > img, html[data-plain] .site .topbar .brand img { border: 0 !important; content: normal; }
html[data-plain] .xr-patrick { border: 0 !important; background: #fff !important; }
/* No assistant here: not even the paperclip is allowed. In its place, the most boring
   thing a page can end with. */
html[data-plain] :is(.xr-clippy, .xr-msgbox) { display: none !important; }
html[data-plain] body::after { content: "\00A9  2026 Exclaim Robotics. All rights reserved."; display: block; clear: both;
  margin: 2rem 0 1rem; text-align: center; font: .8rem serif; color: #000; }
/* what Patrick mode pins with !important, unpinned */
html[data-plain] .site :is(.panel, .figure, .person-card, .jobs-box, .figure-cap) { box-shadow: none !important; }
html[data-plain] .site .btn { background: none !important; border: 0 !important; padding: 0 !important; font: inherit !important; }
html[data-plain] .site :is(.hand, .hero-tag, .figure-cap) { font-style: normal !important; }
html[data-plain] .site :is(.foot, .backers-label) { color: #000 !important; }
html[data-plain] .site :is(.foot-link, .saas-link) { color: #0000ee !important; }