/* Gearworks: the artifact.
   A found object, not AppZoo: the instruction plate and catalogue page of an 1890s engineering works, printed on laid paper,
   with a riveted brass maker's plate. It knows nothing of the Zoo; its one nod is its title, set in the cabinet's title type (Rye).
   Scope: every selector here sits under [data-artifact="gearworks"], so nothing reaches the cabinet around it.
   Colour literals live only in the three palette blocks below (decisions/028). The 3D window keeps palette.js (decisions/026). */

[data-artifact="gearworks"] {
  --gwa-paper: #f1e6cb;         /* laid catalogue paper */
  --gwa-plate: #f8f0dc;         /* a lighter slip pasted on it */
  --gwa-ink: #2b2015;           /* printer's ink, brown-black */
  --gwa-muted: #5b4630;
  --gwa-edge: #3b2a18;
  --gwa-rule: #b8a477;
  --gwa-brass: #d6a53d;         /* brass buttons and plate */
  --gwa-brass-d: #7a5210;       /* engraved heads and links */
  --gwa-on-brass: #2b2015;
  --gwa-danger: #9a2a14;
  --gwa-focus: #0b5d57;
  --gwa-shadow: 0 1px 0 rgb(59 42 24 / .25), 0 10px 24px -16px rgb(59 42 24 / .6);
  --gwa-gloss: rgb(255 255 255 / .35); --gwa-sink: rgb(0 0 0 / .45);
}
:root[data-theme="dark"] [data-artifact="gearworks"] {
  --gwa-paper: #1d1710; --gwa-plate: #2a2117; --gwa-ink: #f3e6c9; --gwa-muted: #cbb78f; --gwa-edge: #d9bd78; --gwa-rule: #5c4a2f;
  --gwa-brass: #c79a3a; --gwa-brass-d: #e3b24c; --gwa-on-brass: #1d1710; --gwa-danger: #ff9a80; --gwa-focus: #4fd1c0;
  --gwa-shadow: 0 1px 0 rgb(0 0 0 / .5), 0 10px 24px -14px rgb(0 0 0 / .9);
  --gwa-gloss: rgb(255 255 255 / .2); --gwa-sink: rgb(0 0 0 / .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="gearworks"] {
    --gwa-paper: #1d1710; --gwa-plate: #2a2117; --gwa-ink: #f3e6c9; --gwa-muted: #cbb78f; --gwa-edge: #d9bd78; --gwa-rule: #5c4a2f;
    --gwa-brass: #c79a3a; --gwa-brass-d: #e3b24c; --gwa-on-brass: #1d1710; --gwa-danger: #ff9a80; --gwa-focus: #4fd1c0;
    --gwa-shadow: 0 1px 0 rgb(0 0 0 / .5), 0 10px 24px -14px rgb(0 0 0 / .9);
    --gwa-gloss: rgb(255 255 255 / .2); --gwa-sink: rgb(0 0 0 / .6);
  }
}

[data-artifact="gearworks"] {
  --gwa-serif: "IM Fell English", "IM Fell DW Pica", Georgia, "Times New Roman", serif;
  --gwa-engraved: "IM Fell DW Pica", "IM Fell English", Georgia, serif;
  --gwa-title: "Rye", Georgia, serif; /* the nod: AppZoo's title type */
  --gwa-text: 400 1.0625rem/1.55 var(--gwa-serif);
  --gwa-small: 400 .9375rem/1.45 var(--gwa-serif);
  --gwa-label: 400 .875rem/1.3 var(--gwa-engraved);

  box-sizing: border-box;
  position: relative;
  max-width: 62rem;
  margin: 0 auto var(--space-12);
  padding: var(--space-6) var(--space-4) var(--space-8);
  background: var(--gwa-paper);
  color: var(--gwa-ink);
  font: var(--gwa-text);
  border: 2px solid var(--gwa-edge);
  outline: 1px solid var(--gwa-rule);
  outline-offset: -8px;
  box-shadow: var(--gwa-shadow);
}
@media (min-width: 48rem) {
  [data-artifact="gearworks"] { padding: var(--space-12) var(--space-12) var(--space-12); }
}
[data-artifact="gearworks"] *, [data-artifact="gearworks"] *::before, [data-artifact="gearworks"] *::after { box-sizing: border-box; }
[data-artifact="gearworks"] .gw { margin-bottom: var(--space-8); }

/* Text, set the way a catalogue sets it. */
[data-artifact="gearworks"] :where(p) { margin: 0 0 var(--space-3); max-width: 68ch; }
[data-artifact="gearworks"] h2 { margin: var(--space-8) 0 var(--space-3); font: 400 1.5rem/1.2 var(--gwa-engraved); letter-spacing: .06em; text-transform: uppercase; color: var(--gwa-brass-d); padding-bottom: var(--space-1); border-bottom: 1px solid var(--gwa-rule); }
[data-artifact="gearworks"] h3 { font: 400 1.125rem/1.3 var(--gwa-engraved); letter-spacing: .04em; color: var(--gwa-brass-d); }
[data-artifact="gearworks"] :where(ul) { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
[data-artifact="gearworks"] :where(li) { margin-bottom: var(--space-1); }
[data-artifact="gearworks"] a { color: var(--gwa-brass-d); text-underline-offset: 3px; }
[data-artifact="gearworks"] :focus-visible { outline: 3px solid var(--gwa-focus); outline-offset: 2px; }

/* Masthead: a ruled catalogue head with the maker's plate beside it. */
[data-artifact="gearworks"] .gw-mast { display: grid; gap: var(--space-1); padding: var(--space-3) 0 var(--space-4); border-top: 4px double var(--gwa-edge); border-bottom: 1px solid var(--gwa-edge); margin-bottom: var(--space-6); }
[data-artifact="gearworks"] .gw-kicker { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin: 0; font: var(--gwa-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gwa-muted); max-width: none; }
[data-artifact="gearworks"] .gw-title { margin: 0; padding: 0; border: 0; font: 400 clamp(2rem, 8vw, 3.25rem)/1.05 var(--gwa-title); letter-spacing: .01em; text-transform: none; color: var(--gwa-ink); }
[data-artifact="gearworks"] .gw-contents { margin: 0; font: italic 400 1.0625rem/1.4 var(--gwa-serif); color: var(--gwa-muted); }
[data-artifact="gearworks"] .gw-maker {
  justify-self: start;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) var(--space-6);
  font: 400 .875rem/1.2 var(--gwa-engraved);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gwa-on-brass);
  background:
    radial-gradient(circle at 10px 50%, var(--gwa-edge) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 10px) 50%, var(--gwa-edge) 0 2px, transparent 3px),
    var(--gwa-brass);
  border: 1px solid var(--gwa-edge);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--gwa-brass), inset 0 0 0 3px var(--gwa-edge);
  max-width: none;
}

/* The bench frame is set into the page; its bezel and rivets are the 3D window's own. */
[data-artifact="gearworks"] .gw-stage { box-shadow: var(--gwa-shadow); }

/* Buttons: engraved brass keys. */
[data-artifact="gearworks"] .gw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: var(--space-1) var(--space-3);
  font: 400 .9375rem/1.2 var(--gwa-engraved);
  letter-spacing: .06em;
  color: var(--gwa-on-brass);
  background: var(--gwa-brass);
  border: 1px solid var(--gwa-edge);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--gwa-gloss), 0 2px 0 var(--gwa-edge);
  cursor: pointer;
}
[data-artifact="gearworks"] .gw-btn:hover { background: var(--gwa-brass-d); color: var(--gwa-plate); }
[data-artifact="gearworks"] .gw-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--gwa-gloss), 0 0 0 var(--gwa-edge); }
[data-artifact="gearworks"] .gw-btn[aria-pressed="true"] { background: var(--gwa-brass-d); color: var(--gwa-plate); box-shadow: inset 0 2px 3px var(--gwa-sink); }
[data-artifact="gearworks"] .gw-btn:disabled { background: var(--gwa-brass); color: var(--gwa-on-brass); opacity: .45; cursor: not-allowed; transform: none; }
[data-artifact="gearworks"] .gw-input { min-height: 2.5rem; padding: 0 var(--space-2); font: var(--gwa-small); color: var(--gwa-ink); background: var(--gwa-plate); border: 1px solid var(--gwa-edge); border-radius: 3px; }

/* The parts index and key, laid out as catalogue ruled lists. */
[data-artifact="gearworks"] .gw-trayBox { padding: var(--space-3); background: var(--gwa-plate); border: 1px solid var(--gwa-rule); }
[data-artifact="gearworks"] .gw-trayH { font: italic 400 .9375rem/1.4 var(--gwa-serif); }
[data-artifact="gearworks"] .gw-swatch { border-radius: 50%; }

/* The specimen label: an engraved slip. */
[data-artifact="gearworks"] .gw-specimen { background: var(--gwa-plate); border: 1px solid var(--gwa-edge); border-radius: 3px; box-shadow: var(--gwa-shadow); color: var(--gwa-ink); }
[data-artifact="gearworks"] .gw-specimen-cat { font: var(--gwa-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gwa-muted); }
[data-artifact="gearworks"] .gw-specimen-name { font: 400 1.25rem/1.2 var(--gwa-engraved); letter-spacing: .04em; color: var(--gwa-brass-d); }
[data-artifact="gearworks"] .gw-specimen-fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; font: var(--gwa-small); }
[data-artifact="gearworks"] .gw-specimen-fields dt { color: var(--gwa-muted); }
[data-artifact="gearworks"] .gw-specimen-fields dd { margin: 0; }

/* Tables: a priced parts list, ruled in ink. */
[data-artifact="gearworks"] .gw-table { background: var(--gwa-plate); border-top: 2px solid var(--gwa-edge); border-bottom: 2px solid var(--gwa-edge); }
[data-artifact="gearworks"] .gw-table thead th { color: var(--gwa-brass-d); }
[data-artifact="gearworks"] .gw-table tbody th { font-weight: 400; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  [data-artifact="gearworks"] .gw-btn { transition: none; }
  [data-artifact="gearworks"] .gw-btn:active { transform: none; }
}