/* =====================================================================
   skin-oldmac.css — WO-485 SKIN 6: OLD MAC STYLE (pair-06, Jason's renders
   login-old-mac-members-arena + home-old-mac). Every rule is scoped to
   html[data-skin="oldmac"], so this file is inert (and its art is never
   fetched) unless the saved skin is Old Mac Style.

   Art layers (cut by docs/wo485-oldmac/cut.py; never stretched — every art
   box carries its plate's own aspect ratio):
     world.webp       the pixel-art world from INSIDE the "JASON OS" window
                      frame of the home render. The three baked sign words
                      are removed; the real place names are HTML text laid
                      on the blank cream boards. The chimney smoke and the
                      sailboat are lifted out (water rebuilt behind them).
     smoke.png        the chimney plume, cut from the render — its own layer.
     boat.png         the sailboat, cut from the render — its own layer.
     water-mask.png   the plate's open water (alpha) — glints live there only.
     desktop.png      the render's dithered desktop pattern (one period).
   Everything else in the renders is UI (menu bar, window chrome, keypad,
   pills, tab bar): it is NOT cut — the real controls are restyled in 1-bit
   platinum materials (cream window, black 2px rule, striped title bar,
   bevelled platinum buttons, inverse black for "on").

   Motion (real element layers, transform/opacity only, never the plate):
     home  — the sailboat sails and rocks on the bay (boat layer);
             smoke puffs leave the striped chimney (two smoke layers);
             glints run across the open water (two glint layers inside a
             water-shaped mask that itself never moves).
     login — the arrow pointer drifts across the desktop band above the
             Member Access window; the insertion caret blinks in the next
             empty code box.
   Controls, numbers and words never move. Reduced motion: all of it still.
   ===================================================================== */

html[data-skin="oldmac"] {
  --om-ink: #111111;
  --om-paper: #e8e8dc;        /* window body (render 232,232,220) */
  --om-paper-hi: #f4f4ea;     /* menu bar / fields */
  --om-white: #fbfbf4;
  --om-face: #d6d6ca;         /* button face (render keys) */
  --om-shade: #7d7d74;        /* bevel shadow */
  --om-desk: #b4b5af;         /* desktop base (render 180,181,175) */
  --om-font: "Chicago", "ChicagoFLF", "Charcoal", "Geneva", "Monaco", "Menlo",
             "SF Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  --om-bevel: inset 2px 2px 0 #ffffff, inset -2px -2px 0 var(--om-shade);
  --om-bevel-in: inset 2px 2px 0 var(--om-shade), inset -1px -1px 0 #ffffff;
  --om-drop: 5px 5px 0 rgba(17, 17, 17, .78);
  /* GEOMETRY LAW (WO-485): this skin never changes a border width, padding,
     margin, font-size or line-height of an app / EYE control. The 2px black
     rule is the element's own border recoloured, plus a 1px outer ring drawn
     with box-shadow; frames on border-less boxes are inset box-shadows. */
  --om-ring: 0 0 0 1px var(--om-ink);
  --om-stripes: repeating-linear-gradient(180deg, var(--om-ink) 0 1px, transparent 1px 3px);

  --apex-bg: #b4b5af;
  --apex-bg-2: #a9aaa3;
  --apex-panel: #e8e8dc;
  --apex-panel-edge: #111111;
  --apex-blue: #111111;
  --apex-purple: #111111;
  --apex-yellow: #111111;
  --apex-cyan: #111111;
  --apex-text: #111111;
  --apex-text-dim: #3c3c36;
  --apex-ok: #0f6a1e;
  --apex-warn: #8a5200;
  --apex-danger: #b00020;
  --apex-offline: #5c5c55;
  --apex-line: rgba(17, 17, 17, .35);
  --sheet-solid: #e8e8dc;
  --font-display: var(--om-font);   /* titles + chrome in the Chicago-style face; body
                                       text keeps the default face (Geneva's role) so
                                       no box changes size between looks */
  --panel-clip: none;
  --radius: 0;
  --shadow: var(--om-drop);
  --sitenav-bar: #e8e8dc;
  --sitenav-edge: #111111;
  --sitenav-lit: #ffffff;
  --sitenav-pill: #111111;
  color-scheme: light;
}

/* ---------- page backdrop: the dithered desktop ----------------------- */
html[data-skin="oldmac"] body {
  color: var(--om-ink);
  background: var(--om-desk) url("../img/skins/oldmac/desktop.png") 0 0 / 7px 7px repeat;
}
html[data-skin="oldmac"] .arena,
html[data-skin="oldmac"] .candles,
html[data-skin="oldmac"] .rocket { display: none !important; }
html[data-skin="oldmac"] h1,
html[data-skin="oldmac"] h2,
html[data-skin="oldmac"] h3,
html[data-skin="oldmac"] h4 { font-stretch: normal; letter-spacing: .02em; }

/* ---------- windows: cream body, black rule, hard drop shadow --------- */
html[data-skin="oldmac"] .panel,
html[data-skin="oldmac"] .apex-panel,
html[data-skin="oldmac"] .subcard {
  background: var(--om-paper);
  border-color: var(--om-ink);       /* .panel's own 2px border, recoloured */
  border-image: none;
  border-radius: 0;
  clip-path: none;
  box-shadow: var(--om-drop);
  color: var(--om-ink);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: none;
}
html[data-skin="oldmac"] .apex-panel::before { display: none; }
html[data-skin="oldmac"] .apex-panel,
html[data-skin="oldmac"] .subcard { box-shadow: inset 0 0 0 2px var(--om-ink), var(--om-drop); }
html[data-skin="oldmac"] .panel::after { display: none; }

/* title bar: horizontal pinstripes, the name on a clean cream label */
html[data-skin="oldmac"] .panel__head {
  background: var(--om-stripes) 0 50% / 100% 11px no-repeat, var(--om-paper);
  border-bottom-color: var(--om-ink);
  border-image: none;
}
html[data-skin="oldmac"] .panel__title,
html[data-skin="oldmac"] .stopsheet__title {
  font-family: var(--om-font); font-weight: 700; color: var(--om-ink);
  text-transform: none; letter-spacing: .02em; text-shadow: none;
  /* the clean label over the pinstripes: painted, not padded */
  background: var(--om-paper); box-shadow: 0 0 0 .35rem var(--om-paper);
}
html[data-skin="oldmac"] .subhead { color: var(--om-ink); text-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
html[data-skin="oldmac"] .panel__lede,
html[data-skin="oldmac"] .hint { color: #3c3c36; }
html[data-skin="oldmac"] a { color: var(--om-ink); text-decoration-thickness: 1px; }

html[data-skin="oldmac"] .acctrow,
html[data-skin="oldmac"] .worldrow,
html[data-skin="oldmac"] .skinpick__row,
html[data-skin="oldmac"] .bell__item {
  background: var(--om-white); border-color: var(--om-ink); border-radius: 0;
  box-shadow: var(--om-ring), 3px 3px 0 var(--om-ink); color: var(--om-ink);
}
html[data-skin="oldmac"] .skinpick__note { color: #3c3c36; }
html[data-skin="oldmac"] .skinpick__row:has(input:checked) { background: var(--om-ink); color: #ffffff; }
html[data-skin="oldmac"] .skinpick__row:has(input:checked) .skinpick__note { color: #e8e8dc; }
html[data-skin="oldmac"] .skinpick__row input { accent-color: var(--om-ink); }
html[data-skin="oldmac"] .soon { background: var(--om-white); border-color: var(--om-ink); border-radius: 0; }

/* ---------- buttons: platinum bevel; "on"/primary = default-button ring - */
html[data-skin="oldmac"] .btn,
html[data-skin="oldmac"] .apex-btn {
  background: var(--om-face); color: var(--om-ink);
  border-color: var(--om-ink); border-radius: 4px; clip-path: none;
  box-shadow: var(--om-bevel), var(--om-ring); text-shadow: none; filter: none;
}
html[data-skin="oldmac"] .apex-btn { box-shadow: inset 2px 2px 0 #ffffff, inset -3px -3px 0 var(--om-shade); }
html[data-skin="oldmac"] .btn:active:not(:disabled),
html[data-skin="oldmac"] .apex-btn:active:not(:disabled) { background: var(--om-ink); color: #ffffff; box-shadow: none; }
html[data-skin="oldmac"] .btn--primary,
html[data-skin="oldmac"] .apex-btn--primary {
  background: var(--om-face); color: var(--om-ink); border-color: var(--om-ink); border-radius: 8px;
  box-shadow: var(--om-bevel), 0 0 0 3px var(--om-paper), 0 0 0 6px var(--om-ink);
}
html[data-skin="oldmac"] .btn--ghost,
html[data-skin="oldmac"] .apex-btn--ghost { background: var(--om-paper-hi); color: var(--om-ink); border-color: var(--om-ink); box-shadow: var(--om-bevel), var(--om-ring); }
html[data-skin="oldmac"] .stopfilter__chip { background: var(--om-paper-hi); color: var(--om-ink); border-color: var(--om-ink); border-radius: 0; box-shadow: var(--om-bevel), var(--om-ring); }
html[data-skin="oldmac"] .stopfilter__chip.is-on { background: var(--om-ink); color: #ffffff; box-shadow: none; }
html[data-skin="oldmac"] input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="oldmac"] select,
html[data-skin="oldmac"] textarea {
  background: var(--om-white); color: var(--om-ink);
  border-color: var(--om-ink); border-radius: 0; box-shadow: var(--om-bevel-in);
}
html[data-skin="oldmac"] input[type="checkbox"],
html[data-skin="oldmac"] input[type="radio"] { accent-color: var(--om-ink); }
html[data-skin="oldmac"] .chip,
html[data-skin="oldmac"] .apex-chip {
  background: var(--om-white); color: var(--om-ink);
  border-color: var(--om-ink); border-radius: 0; box-shadow: none; text-shadow: none; clip-path: none;
}

/* ---------- top bar = the menu bar ------------------------------------ */
html[data-skin="oldmac"] .topbar2 { background: transparent; }
html[data-skin="oldmac"] .profile__btn,
html[data-skin="oldmac"] .bell__btn,
html[data-skin="oldmac"] .gear {
  background: var(--om-face); color: var(--om-ink); border-color: var(--om-ink); border-radius: 4px;
  box-shadow: var(--om-bevel), var(--om-ring);
}
html[data-skin="oldmac"] .profile[open] .profile__btn,
html[data-skin="oldmac"] .bell[open] .bell__btn { background: var(--om-ink); color: #ffffff; box-shadow: none; }
html[data-skin="oldmac"] .bell__count { background: var(--om-ink); color: #ffffff; border-radius: 0; box-shadow: 0 0 0 2px var(--om-paper-hi); }
/* account box = the render's "PlexyTrade ▾ / Balance / Today" window */
html[data-skin="oldmac"] .acctbox {
  background: var(--om-paper-hi); color: var(--om-ink); border-color: var(--om-ink); border-radius: 0;
  box-shadow: var(--om-ring), 3px 3px 0 1px var(--om-ink);
}
html[data-skin="oldmac"] .acctbox__stop { color: var(--om-ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--om-ink); }
html[data-skin="oldmac"] .acctbox__k { color: #3c3c36; }
html[data-skin="oldmac"] .acctbox__v { color: var(--om-ink); font-variant-numeric: tabular-nums; }
/* DEMO / LIVE pill = the render's square DEMO button */
html[data-skin="oldmac"] .modepill {
  background: var(--om-white); color: var(--om-ink);
  border-color: var(--om-ink); border-radius: 0; box-shadow: var(--om-ring), 2px 2px 0 1px var(--om-ink); text-shadow: none;
}
html[data-skin="oldmac"] .modepill[data-mode="live"] { background: var(--om-ink); color: #ffffff; }
html[data-skin="oldmac"] .profile__panel,
html[data-skin="oldmac"] .bell__panel,
html[data-skin="oldmac"] .appmenu__panel,
html[data-skin="oldmac"] .acctpicker__panel,
html[data-skin="oldmac"] details > .appmenu__list {
  background: var(--om-paper-hi); color: var(--om-ink); border-color: var(--om-ink); border-radius: 0;
  box-shadow: var(--om-ring), var(--om-drop); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-skin="oldmac"] .appmenu__btn,
html[data-skin="oldmac"] .acctpicker__btn {
  background: var(--om-face); color: var(--om-ink);
  border-color: var(--om-ink); border-radius: 4px; box-shadow: var(--om-bevel), var(--om-ring); text-shadow: none;
}
html[data-skin="oldmac"] .appmenu[open] .appmenu__btn,
html[data-skin="oldmac"] .acctpicker[open] .acctpicker__btn { background: var(--om-ink); color: #ffffff; box-shadow: none; }
html[data-skin="oldmac"] .appmenu__item { color: var(--om-ink); border-radius: 0; }
html[data-skin="oldmac"] .appmenu__item:hover,
html[data-skin="oldmac"] .appmenu__item:focus-visible { background: var(--om-ink); color: #ffffff; }
html[data-skin="oldmac"] .appmenu__group { color: #3c3c36; box-shadow: inset 0 -1px 0 var(--om-ink); }
html[data-skin="oldmac"] .toolicon { background: var(--om-white); border-color: var(--om-ink); border-radius: 0; box-shadow: var(--om-ring), 2px 2px 0 1px var(--om-ink); }

html[data-skin="oldmac"] body.app-body .app-header {
  /* translucency HELD at the default's 86% + blur, as Western (Ace's call) */
  background: color-mix(in srgb, var(--om-paper-hi) 86%, transparent);
  border-bottom-color: var(--om-ink); border-image: none;
  box-shadow: 0 2px 0 rgba(17, 17, 17, .25);
}
html[data-skin="oldmac"] body.app-body .boot-veil { background: var(--om-desk) url("../img/skins/oldmac/desktop.png") 0 0 / 7px 7px repeat; color: var(--om-ink); }
html[data-skin="oldmac"] body.app-body .boot-veil__mark { font-family: var(--om-font); color: var(--om-ink); text-shadow: none; }

/* ---------- the bottom bar: four platinum tabs, the active one inverse - */
@media (max-width: 768px) {
  html[data-skin="oldmac"] .sitenav--tabs,
  html[data-skin="oldmac"] body.app-body .sitenav--tabs {
    background: var(--om-paper); border-color: var(--om-ink); border-radius: 0;
    box-shadow: var(--om-ring), var(--om-drop);
  }
  /* each tab = a platinum key drawn INSIDE its own box: a paper gap, a black
     rule, then the bevel — all inset shadows, so no tab box changes size */
  html[data-skin="oldmac"] .sitenav--tabs .sitenav__item {
    color: var(--om-ink); font-weight: 700;
    background: var(--om-face);
    box-shadow: inset 0 0 0 3px var(--om-paper), inset 0 0 0 5px var(--om-ink),
                inset 7px 7px 0 #ffffff, inset -7px -7px 0 var(--om-shade);
  }
  html[data-skin="oldmac"] .sitenav--tabs .sitenav__item.is-active { background: var(--om-ink); color: #ffffff; box-shadow: inset 0 0 0 3px var(--om-paper); }
  html[data-skin="oldmac"] .sitenav--tabs .sitenav__item.is-active .sitenav__glyph { background: transparent; box-shadow: none; }
}
html[data-skin="oldmac"] .sitenav--side,
html[data-skin="oldmac"] body.app-body .sitenav--side { background: var(--om-paper); border-right-color: var(--om-ink); border-image: none; box-shadow: 1px 0 0 var(--om-ink); }
html[data-skin="oldmac"] .sitenav--side .sitenav__item { color: var(--om-ink); border-radius: 0; }
html[data-skin="oldmac"] .sitenav--side .sitenav__item.is-active { background: var(--om-ink); color: #ffffff; box-shadow: none; }
html[data-skin="oldmac"] body.app-body .sitenav__item.is-active { text-shadow: none; }
html[data-skin="oldmac"] body.app-body .sitenav__item.is-active .sitenav__icon { filter: none; }

/* ---------- the world: the "Jason OS" window holding ONE plate -------- */
html[data-skin="oldmac"] .panel.world,
html[data-skin="oldmac"] body.app-body .panel.world {
  background: var(--om-paper); border: 2px solid var(--om-ink); border-radius: 0;
  box-shadow: var(--om-drop); padding: 0 8px 8px; width: 100%; max-width: 640px; margin-inline: auto; box-sizing: border-box;
}
/* the window's title bar: pinstripes, close box, "Jason OS" label (as the render) */
html[data-skin="oldmac"] .panel.world::before {
  content: "Jason OS"; display: block; position: relative;
  margin: 0 -8px 8px; padding: 0 .6rem; height: 26px; line-height: 26px; text-align: center;
  font-family: var(--om-font); font-weight: 700; font-size: 15px; color: var(--om-ink);
  border-bottom: 2px solid var(--om-ink);
  background:
    linear-gradient(var(--om-paper), var(--om-paper)) 50% 50% / 7.5em 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='1' y='1' width='12' height='12' fill='%23e8e8dc' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") 10px 50% / 14px 14px no-repeat,
    linear-gradient(var(--om-paper), var(--om-paper)) 6px 50% / 22px 100% no-repeat,
    var(--om-stripes) 0 50% / 100% 13px no-repeat,
    var(--om-paper);
}
html[data-skin="oldmac"] .world__map {
  display: block; position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  aspect-ratio: 1164 / 1263; min-height: 0; padding: 0;
  container-type: inline-size;
  background: #2e7fd0 url("../img/skins/oldmac/world.webp") center / cover no-repeat;
  border: 3px solid var(--om-ink); border-radius: 0; box-shadow: none;
  overflow: hidden; isolation: isolate;
}

/* places = hotspots over their buildings (all %, of the plate) */
html[data-skin="oldmac"] .place {
  position: absolute; display: block; padding: 0; min-height: 0; z-index: 2;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--om-ink);
  transform-origin: 50% 60%;
}
html[data-skin="oldmac"] .place:focus-visible { outline: 3px dashed var(--om-ink); outline-offset: 0; }
html[data-skin="oldmac"] .place.is-zoomed {
  transform: scale(1.05); border: 0;
  /* the classic selection: a marching-free black + white double rule */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--om-ink);
}
html[data-skin="oldmac"] .place__art { position: absolute; width: auto; height: auto; border-radius: 0; background: none; }
/* name = real text on the blanked cream signboard */
html[data-skin="oldmac"] .place__name {
  position: absolute; display: flex; align-items: center; justify-content: center;
  /* the render's boards carry heavy condensed caps */
  font-family: "Avenir Next Condensed", "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", "Roboto Condensed", sans-serif;
  font-weight: 800; font-stretch: condensed;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1; white-space: nowrap;
  color: #141414; font-size: 4.2cqw;
}
/* sub = live line on a small 1-bit tag under the sign */
html[data-skin="oldmac"] .place__sub {
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--om-font); font-size: max(10px, 2.6cqw); font-weight: 700; line-height: 1.2;
  padding: .1rem .45rem; border-radius: 0;
  background: var(--om-white); color: var(--om-ink); border: 2px solid var(--om-ink);
  box-shadow: 2px 2px 0 var(--om-ink);
}

/* Prop Farm — red barn, cream board in the field */
html[data-skin="oldmac"] .place--prop  { left: 10.65%; top: 8.79%; width: 34.36%; height: 28.11%; }
html[data-skin="oldmac"] .place--prop .place__art  { left: 2%; top: 3%; width: 87%; height: 60%; }
html[data-skin="oldmac"] .place--prop .place__name { left: 14%; top: 65.4%; width: 83.5%; height: 22.8%; }
html[data-skin="oldmac"] .place--prop .place__sub  { left: 55.7%; top: 92%; }

/* Forex Factory — the white works with the striped stack */
html[data-skin="oldmac"] .place--forex { left: 67.35%; top: 21.46%; width: 30.58%; height: 34.05%; }
html[data-skin="oldmac"] .place--forex .place__art  { left: 11.8%; top: 5.6%; width: 82%; height: 65%; }
html[data-skin="oldmac"] .place--forex .place__name { left: 2.2%; top: 71.4%; width: 95%; height: 19.1%; font-size: 3.7cqw; }
html[data-skin="oldmac"] .place--forex .place__sub  { left: auto; right: 3%; top: 93%; transform: none; }

/* Plexy Market — the striped awning on the pier, board above it */
html[data-skin="oldmac"] .place--plexy { left: 21.82%; top: 64.61%; width: 60.14%; height: 27.32%; }
html[data-skin="oldmac"] .place--plexy .place__art  { left: 0; top: 30%; width: 100%; height: 70%; }
html[data-skin="oldmac"] .place--plexy .place__name { left: 22%; top: 2%; width: 50.3%; height: 28.1%; }
html[data-skin="oldmac"] .place--plexy .place__sub  { left: 47.1%; top: 31%; }

/* plexy status sign: a small 1-bit alert box on the beach corner */
html[data-skin="oldmac"] .worldsign {
  left: 2.5%; right: auto; bottom: 2.5%; z-index: 3;
  font-family: var(--om-font); background: var(--om-white); color: var(--om-ink);
  border: 2px solid var(--om-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--om-ink);
}
html[data-skin="oldmac"] .worldsign__icon { border: 1.5px solid var(--om-ink); box-shadow: none; }
html[data-skin="oldmac"] .worldsign[data-state="ok"] .worldsign__icon { background: #2fbf4a; }
html[data-skin="oldmac"] .worldsign[data-state="warn"] .worldsign__icon { background: #ffcc00; }

/* the traveller = the classic arrow pointer; it points at the tapped place */
html[data-skin="oldmac"] .traveller {
  left: -3px; top: -2px; width: 22px; height: 33px; border-radius: 0; z-index: 4;
  box-shadow: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 19' shape-rendering='crispEdges'%3E%3Cpath d='M1 1v15l4-4 3 6 2-1-3-6h5z' fill='%23fff' stroke='%23111' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(17, 17, 17, .55));
}

/* ---------- motion: open-water glints (inside a still water mask) ----- */
html[data-skin="oldmac"] .world__road {
  display: block; position: absolute; inset: 0; left: 0; top: 0; bottom: 0; width: auto; margin: 0;
  border-radius: 0; opacity: 1; background: none; pointer-events: none; z-index: 0; overflow: hidden;
  -webkit-mask: url("../img/skins/oldmac/water-mask.png") 0 0 / 100% 100% no-repeat;
  mask: url("../img/skins/oldmac/water-mask.png") 0 0 / 100% 100% no-repeat;
}
html[data-skin="oldmac"] .world__road::before,
html[data-skin="oldmac"] .world__road::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -64px; right: -64px; pointer-events: none;
  will-change: transform;
}
/* layer 1: short white wave dashes drifting with the current (2px steps) */
html[data-skin="oldmac"] .world__road::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff'%3E%3Crect x='4' y='5' width='9' height='2'/%3E%3Crect x='38' y='17' width='6' height='2'/%3E%3Crect x='20' y='29' width='11' height='2'/%3E%3Crect x='52' y='35' width='5' height='2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 40px repeat;
  opacity: .7;
  animation: om-water 9.6s steps(32) infinite;
}
/* layer 2: light-blue sparkle dashes, the other way, twinkling */
html[data-skin="oldmac"] .world__road::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='52' shape-rendering='crispEdges'%3E%3Cg fill='%23bfe6ff'%3E%3Crect x='12' y='11' width='5' height='2'/%3E%3Crect x='46' y='3' width='8' height='2'/%3E%3Crect x='30' y='41' width='7' height='2'/%3E%3Crect x='2' y='47' width='4' height='2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 52px repeat;
  animation: om-water-back 13.4s steps(32) infinite, om-twinkle 2.4s steps(3) infinite alternate;
}
@keyframes om-water { from { transform: translateX(-64px); } to { transform: translateX(0); } }
@keyframes om-water-back { from { transform: translateX(0); } to { transform: translateX(-64px); } }
@keyframes om-twinkle { from { opacity: .15; } to { opacity: .8; } }

/* ---------- motion: the sailboat (its own cut layer) ------------------ */
html[data-skin="oldmac"] .world__map::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 85.05%; top: 68.49%; width: 12.03%; aspect-ratio: 140 / 172;
  background: url("../img/skins/oldmac/boat.png") 0 0 / 100% 100% no-repeat;
  transform-origin: 50% 90%;
  animation: om-sail 28s steps(140) infinite;
  will-change: transform;
}
/* sails out toward the market pier and back, rocking a pixel on the swell */
@keyframes om-sail {
  0%    { transform: translate(0, 0) rotate(0deg); }
  10%   { transform: translate(-8%, 1.5%) rotate(-2deg); }
  20%   { transform: translate(-16%, 0) rotate(1.5deg); }
  30%   { transform: translate(-25%, 1.5%) rotate(-2deg); }
  40%   { transform: translate(-34%, 0) rotate(1.5deg); }
  50%   { transform: translate(-40%, 1.5%) rotate(-1deg); }
  60%   { transform: translate(-33%, 0) rotate(1.5deg); }
  70%   { transform: translate(-24%, 1.5%) rotate(-2deg); }
  80%   { transform: translate(-15%, 0) rotate(1.5deg); }
  90%   { transform: translate(-7%, 1.5%) rotate(-2deg); }
  100%  { transform: translate(0, 0) rotate(0deg); }
}

/* ---------- motion: chimney smoke (the cut plume, two puffs) ---------- */
html[data-skin="oldmac"] .place--forex::before,
html[data-skin="oldmac"] .place--forex::after {
  content: ""; position: absolute; pointer-events: none;
  left: 66.3%; top: -12.6%; width: 31.5%; aspect-ratio: 112 / 76;
  background: url("../img/skins/oldmac/smoke.png") 0 0 / 100% 100% no-repeat;
  transform-origin: 12% 100%;
  opacity: 0;
  animation: om-smoke 5.6s steps(28) infinite;
  will-change: transform, opacity;
}
html[data-skin="oldmac"] .place--forex::after { animation-delay: -2.8s; }
@keyframes om-smoke {
  0%   { transform: translate(-6%, 18%) scale(.35); opacity: 0; }
  12%  { opacity: .95; }
  60%  { opacity: .8; }
  100% { transform: translate(22%, -72%) scale(1.18); opacity: 0; }
}

/* ---------- summary sheet: a solid cream dialog window ---------------- */
html[data-skin="oldmac"] .stopsheet {
  background: var(--sheet-solid); background-image: none;
  border-color: var(--om-ink); border-radius: 0; color: var(--om-ink);
  box-shadow: var(--om-drop), inset 0 0 0 3px var(--om-paper), inset 0 0 0 5px var(--om-ink);
}
html[data-skin="oldmac"] .stopsheet::backdrop { background: rgba(60, 60, 54, .55); }
html[data-skin="oldmac"] .stopsheet__head { box-shadow: 0 2px 0 var(--om-ink); }
html[data-skin="oldmac"] .stopsheet__broker { color: #3c3c36; }

/* ---------- calendar ---------------------------------------------------- */
html[data-skin="oldmac"] .cal__cell { background: var(--om-white); border-color: var(--om-ink); border-radius: 0; color: var(--om-ink); }
html[data-skin="oldmac"] .cal__cell--pad { background: transparent; border-color: transparent; }
html[data-skin="oldmac"] .cal__cell--week { background: var(--om-face); }
html[data-skin="oldmac"] .cal__cell--blank { border-style: dotted; }
html[data-skin="oldmac"] .cal__colhead--week { color: var(--om-ink); }

/* ---------- the default look's neon layer (fortnite-app.css) is off ---- */
html[data-skin="oldmac"] body.app-body {
  background: var(--om-desk) url("../img/skins/oldmac/desktop.png") 0 0 / 7px 7px repeat;
}
html[data-skin="oldmac"] body.app-body::before,
html[data-skin="oldmac"] body.app-body::after { display: none; }
html[data-skin="oldmac"] body.app-body .panel {
  border-color: var(--om-ink); border-image: none; background: var(--om-paper);
  box-shadow: var(--om-drop); backdrop-filter: none;
}
html[data-skin="oldmac"] body.app-body .panel--hero { border-color: var(--om-ink); border-image: none; }
html[data-skin="oldmac"] body.app-body .panel__head { border-bottom-color: var(--om-ink); border-image: none; }
html[data-skin="oldmac"] body.app-body .panel__title,
html[data-skin="oldmac"] body.app-body .subhead { text-shadow: none; }
html[data-skin="oldmac"] body.app-body .chip { background: var(--om-white); box-shadow: none; text-shadow: none; }
html[data-skin="oldmac"] body.app-body .btn--accent:not(:disabled),
html[data-skin="oldmac"] body.app-body .btn:not(.btn--primary):not(.btn--ghost):not(:disabled) {
  background: var(--om-face); color: var(--om-ink); border-color: var(--om-ink); border-radius: 4px;
  box-shadow: var(--om-bevel), var(--om-ring); text-shadow: none;
}
html[data-skin="oldmac"] body.app-body .btn--primary:not(:disabled) {
  background: var(--om-face); color: var(--om-ink); border-color: var(--om-ink); border-radius: 8px;
  box-shadow: var(--om-bevel), 0 0 0 3px var(--om-paper), 0 0 0 6px var(--om-ink); text-shadow: none;
}
html[data-skin="oldmac"] body.app-body .btn--ghost:not(:disabled),
html[data-skin="oldmac"] body.app-body .viewbar__back {
  background: var(--om-paper-hi); color: var(--om-ink); border-color: var(--om-ink); border-radius: 4px;
  box-shadow: var(--om-bevel), var(--om-ring); text-shadow: none;
}
/* disabled = the classic grey-out: dimmed ink on the same face (still legible) */
html[data-skin="oldmac"] body.app-body .btn:disabled { box-shadow: none; background: var(--om-paper); color: #6a6a62; border-color: #6a6a62; border-style: dashed; }
html[data-skin="oldmac"] body.app-body .stat {
  background: var(--om-white); border-color: var(--om-ink);
  border-image: none; box-shadow: var(--om-ring), 2px 2px 0 1px var(--om-ink); border-radius: 0; color: var(--om-ink);
}
html[data-skin="oldmac"] body.app-body .offline-card { background: var(--om-paper-hi); box-shadow: none; border-color: #5c5c55; border-style: dotted; color: #3c3c36; }
html[data-skin="oldmac"] body.app-body .stepup { box-shadow: 0 0 0 2px var(--om-ink), var(--om-drop); background: var(--om-paper); color: var(--om-ink); }
html[data-skin="oldmac"] body.app-body .app-footer__sig { color: var(--om-ink); text-shadow: none; background: var(--om-paper-hi); box-shadow: 0 0 0 .3rem var(--om-paper-hi); }
html[data-skin="oldmac"] .viewbar__title { color: var(--om-ink); background: var(--om-paper-hi); box-shadow: 0 0 0 .3rem var(--om-paper-hi), 0 0 0 calc(.3rem + 2px) var(--om-ink); }
html[data-skin="oldmac"] .bookline__label { background: var(--om-white); }

/* =====================================================================
   LOGIN — menu bar (live ticker), the desktop, Mac windows, keypad
   ===================================================================== */
html[data-skin="oldmac"] body.page-login {
  font-family: var(--om-font);       /* the login render is set entirely in it */
  background: var(--om-desk) url("../img/skins/oldmac/desktop.png") 0 0 / 7px 7px repeat;
}
/* the live ticker is the menu bar strip */
html[data-skin="oldmac"] .page-login .ticker {
  background: var(--om-paper-hi); color: var(--om-ink); border-bottom: 2px solid var(--om-ink);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--om-font);
}
html[data-skin="oldmac"] .page-login .ticker .chip,
html[data-skin="oldmac"] .page-login .ticker .apex-chip { background: var(--om-ink); color: #ffffff; border-color: var(--om-ink); }
html[data-skin="oldmac"] .page-login .ticker__message { color: var(--om-ink); }

/* the logo: the render's black "A" (the same SVG, recoloured) */
html[data-skin="oldmac"] .page-login .brand__mark { animation: none; filter: none; }
html[data-skin="oldmac"] .page-login .brand__mark path:nth-child(1) { fill: var(--om-ink); }
html[data-skin="oldmac"] .page-login .brand__mark path:nth-child(2) { fill: var(--om-paper-hi); }
html[data-skin="oldmac"] .page-login .brand__mark path:nth-child(3) { display: none; }
html[data-skin="oldmac"] .page-login .brand {
  background: var(--om-paper); border: 2px solid var(--om-ink); box-shadow: 3px 3px 0 var(--om-ink);
  padding: .35rem .6rem; color: var(--om-ink);
}
html[data-skin="oldmac"] .page-login .brand__text strong {
  font-family: var(--om-font); color: var(--om-ink); text-shadow: none; letter-spacing: .03em;
}
html[data-skin="oldmac"] .page-login .brand__text em { font-family: var(--om-font); color: var(--om-ink); text-shadow: none; letter-spacing: .3em; }
html[data-skin="oldmac"] .page-login .topbar__chip { background: var(--om-ink); color: #ffffff; border: 2px solid var(--om-ink); font-family: var(--om-font); }

/* the pitch reads as a document window on the desktop */
html[data-skin="oldmac"] .page-login .pitch {
  min-width: 0; background: var(--om-paper); color: var(--om-ink);
  border: 2px solid var(--om-ink); box-shadow: var(--om-drop); padding: 1rem;
}
html[data-skin="oldmac"] .page-login .pitch__title,
html[data-skin="oldmac"] .page-login .pitch__title-hero,
html[data-skin="oldmac"] .page-login .pitch__title-lead {
  font-family: var(--om-font); color: var(--om-ink); -webkit-text-fill-color: var(--om-ink);
  background: none; filter: none; text-shadow: none; animation: none; font-stretch: normal; font-style: normal;
}
html[data-skin="oldmac"] .page-login .pitch__title { font-size: clamp(1.5rem, 7.6vw, 3.6rem); overflow-wrap: anywhere; }
html[data-skin="oldmac"] .page-login .pitch__eyebrow { color: var(--om-ink); letter-spacing: .08em; white-space: normal; overflow-wrap: anywhere; text-shadow: none; }
html[data-skin="oldmac"] .page-login .pitch__lead,
html[data-skin="oldmac"] .page-login .pitch__body { color: var(--om-ink); text-shadow: none; }
html[data-skin="oldmac"] .page-login .pitch__lead strong,
html[data-skin="oldmac"] .page-login .pitch__body strong { color: var(--om-ink); background: var(--om-face); padding: 0 .15em; }
html[data-skin="oldmac"] .page-login .perk.apex-panel,
html[data-skin="oldmac"] .page-login .quote.apex-panel {
  background: var(--om-white); box-shadow: var(--om-bevel-in), 3px 3px 0 var(--om-ink); filter: none;
}
html[data-skin="oldmac"] .page-login .perk h2 { color: var(--om-ink); font-family: var(--om-font); text-shadow: none; }
html[data-skin="oldmac"] .page-login .perk p,
html[data-skin="oldmac"] .page-login .quote,
html[data-skin="oldmac"] .page-login .quote figcaption { color: var(--om-ink); }

/* the desktop band above the Member Access window: the pointer lives here */
html[data-skin="oldmac"] .page-login .gate { position: relative; padding-top: 64px; }
html[data-skin="oldmac"] .page-login .gate::after {
  content: ""; position: absolute; left: 0; top: 14px; z-index: 0; pointer-events: none;
  width: 18px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 19' shape-rendering='crispEdges'%3E%3Cpath d='M1 1v15l4-4 3 6 2-1-3-6h5z' fill='%23fff' stroke='%23111' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(17, 17, 17, .5));
  animation: om-pointer 16s steps(160) infinite;
  will-change: transform;
}
/* drifts across the desktop, pauses as if reading, wanders back */
@keyframes om-pointer {
  0%   { transform: translate(8vw, 2px); }
  14%  { transform: translate(28vw, 14px); }
  22%  { transform: translate(28vw, 14px); }
  40%  { transform: translate(62vw, 4px); }
  50%  { transform: translate(78vw, 18px); }
  58%  { transform: translate(78vw, 18px); }
  76%  { transform: translate(44vw, 10px); }
  88%  { transform: translate(20vw, 20px); }
  100% { transform: translate(8vw, 2px); }
}
html[data-skin="oldmac"] .page-login .gate > * { position: relative; z-index: 1; }

/* the Member Access window */
html[data-skin="oldmac"] .page-login .login.apex-panel {
  background: var(--om-paper); border-radius: 0; clip-path: none;
  filter: none; box-shadow: inset 0 0 0 2px var(--om-ink), 6px 6px 0 rgba(17, 17, 17, .8); color: var(--om-ink);
  padding-top: 0;
}
html[data-skin="oldmac"] .page-login .login.apex-panel::before { display: none; }
/* title bar: close box · pinstripes · "Member access" · pinstripes */
html[data-skin="oldmac"] .apex-panel__head {
  margin: 0 -1.15rem .2rem; padding: 0 .7rem 0 2.2rem; min-height: 30px;
  font-family: var(--om-font); font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: none;
  color: var(--om-ink); border-bottom: 2px solid var(--om-ink); gap: .7rem;
  /* the window's inset frame continues behind the title bar */
  box-shadow: inset 0 2px 0 var(--om-ink), inset 2px 0 0 var(--om-ink), inset -2px 0 0 var(--om-ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='1' y='1' width='12' height='12' fill='%23e8e8dc' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") 10px 50% / 15px 15px no-repeat,
    var(--om-paper);
}
html[data-skin="oldmac"] .apex-panel__head::before,
html[data-skin="oldmac"] .apex-panel__head::after {
  content: ""; display: block; flex: 1; height: 11px; background: var(--om-stripes);
}
html[data-skin="oldmac"] .page-login .login__lead,
html[data-skin="oldmac"] .page-login .login__fine,
html[data-skin="oldmac"] .page-login .code__hint { color: var(--om-ink); }
html[data-skin="oldmac"] .page-login .code:focus-within { outline: 2px dashed var(--om-ink); outline-offset: 3px; }
/* code boxes: white inset fields; a filled box shows a black square bullet */
html[data-skin="oldmac"] .page-login .code__slot {
  background: var(--om-white); border: 2px solid var(--om-ink); border-radius: 0; clip-path: none;
  box-shadow: var(--om-bevel-in); animation: none;
}
html[data-skin="oldmac"] .page-login .code__slot::after {
  background: var(--om-ink); box-shadow: none; border-radius: 0; width: .7rem; height: .7rem;
}
html[data-skin="oldmac"] .page-login .code__slot.is-filled { background: var(--om-white); border-color: var(--om-ink); }
html[data-skin="oldmac"] .page-login .code__slot.is-next { border-color: var(--om-ink); animation: none; }
/* the insertion caret blinking in the next empty box */
html[data-skin="oldmac"] .page-login .code__slot.is-next::before {
  content: ""; position: absolute; left: 50%; top: 22%; bottom: 22%; width: 2px; margin-left: -1px;
  background: var(--om-ink);
  animation: om-caret 1.06s steps(1, end) infinite;
}
@keyframes om-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
html[data-skin="oldmac"] .page-login .code.is-wrong .code__slot { border-color: #b00020; }
/* keypad: platinum keys with a bevel; pressed = inverse */
html[data-skin="oldmac"] .page-login .keypad .apex-btn--key,
html[data-skin="oldmac"] .page-login .keypad .apex-btn--ghost {
  font-family: var(--om-font); font-weight: 700; font-stretch: normal;
  background: var(--om-face); color: var(--om-ink);
  border-color: var(--om-ink); border-radius: 2px; clip-path: none;
  box-shadow: inset 2px 2px 0 #ffffff, inset -3px -3px 0 var(--om-shade); text-shadow: none; filter: none;
}
html[data-skin="oldmac"] .page-login .keypad .apex-btn--key:active:not(:disabled) { background: var(--om-ink); color: #ffffff; box-shadow: none; }
html[data-skin="oldmac"] .page-login .keypad .apex-btn--key:hover:not(:disabled) { filter: none; background: #e2e2d6; }
/* ENTER THE ARENA = the default button: bevelled face inside a heavy rounded ring */
html[data-skin="oldmac"] .page-login .login__submit {
  font-family: var(--om-font); font-weight: 700; letter-spacing: .04em;
  background: var(--om-face); color: var(--om-ink); border-color: var(--om-ink); border-radius: 6px; clip-path: none;
  box-shadow: inset 2px 2px 0 #ffffff, inset -3px -3px 0 var(--om-shade), 0 0 0 4px var(--om-paper), 0 0 0 7px var(--om-ink);
  text-shadow: none;
}
html[data-skin="oldmac"] .page-login .login__submit:not(:disabled) { animation: none; }
html[data-skin="oldmac"] .page-login .login__submit:disabled { filter: none; opacity: 1; color: #6a6a62; }
html[data-skin="oldmac"] .page-login .remember__box {
  background: var(--om-white); border: 2px solid var(--om-ink); clip-path: none; border-radius: 0;
}
html[data-skin="oldmac"] .page-login .remember__box::after { border-color: var(--om-ink); }
html[data-skin="oldmac"] .page-login .remember input:checked + .remember__box { background: var(--om-white); border-color: var(--om-ink); }
html[data-skin="oldmac"] .page-login .remember input:focus-visible + .remember__box { outline: 2px dashed var(--om-ink); }
html[data-skin="oldmac"] .page-login .remember__text { color: var(--om-ink); }
html[data-skin="oldmac"] .page-login .login__msg { background: var(--om-white); color: var(--om-ink); border-left-color: var(--om-ink); }
html[data-skin="oldmac"] .page-login .login__msg--error { color: #b00020; border-left-color: #b00020; }

/* the signature + fine print sit on a desktop label, as in the render */
html[data-skin="oldmac"] .page-login .sig__name,
html[data-skin="oldmac"] .page-login .sig__role,
html[data-skin="oldmac"] .page-login .footer__fine {
  font-family: var(--om-font); color: var(--om-ink); text-shadow: none;
  background: var(--om-paper-hi); padding: 0 .35rem; display: inline-block;
}
html[data-skin="oldmac"] .page-login .sig__flourish path { stroke: var(--om-ink); animation: none; stroke-dashoffset: 0; }

/* =====================================================================
   THE EYE — reached through eye.css's shared tokens (all re-pointed above)
   plus these window/tab materials. The emblem is a photo asset (THE EYE's
   own art); it is framed 1-bit here but not redrawn.
   ===================================================================== */
html[data-skin="oldmac"] .eye-body { background: var(--om-desk) url("../img/skins/oldmac/desktop.png") 0 0 / 7px 7px repeat; color: var(--om-ink); }
html[data-skin="oldmac"] .eye {
  --ink: #111111; --ink-dim: #3c3c36; --accent: #111111;
  --glass: var(--om-paper); --glass-brd: #111111; --glass-strong: var(--om-paper-hi);
  --tint: rgba(17, 17, 17, .06);
}
/* the hero window is painted AROUND its own box (box-shadow spread) — the
   emblem, title and column keep the exact boxes they have in Original */
html[data-skin="oldmac"] .eye-hero {
  background: var(--om-paper);
  box-shadow: 0 0 0 5px var(--om-paper), 0 0 0 7px var(--om-ink), 4px 4px 0 7px rgba(17, 17, 17, .78);
}
html[data-skin="oldmac"] .eye-hero__emblem { border-color: var(--om-ink); border-radius: 0; }
html[data-skin="oldmac"] .eye-hero__title { font-family: var(--om-font); color: var(--om-ink); }
html[data-skin="oldmac"] .eye-hero__motto { color: var(--om-ink); }
html[data-skin="oldmac"] .eye-backlink,
html[data-skin="oldmac"] .eye-veil__msg {
  color: var(--om-ink); background: var(--om-paper-hi);
  box-shadow: 0 0 0 3px var(--om-paper-hi), 0 0 0 5px var(--om-ink);
}
html[data-skin="oldmac"] .eye-sections { background: var(--om-paper-hi); box-shadow: 0 2px 0 var(--om-ink); }
html[data-skin="oldmac"] .eye-sec,
html[data-skin="oldmac"] .eye-tab {
  background: var(--om-face); color: var(--om-ink);
  border-color: var(--om-ink); border-radius: 4px; box-shadow: var(--om-bevel), var(--om-ring);
}
html[data-skin="oldmac"] .eye-sec--on,
html[data-skin="oldmac"] .eye-tab--on { background: var(--om-ink); color: #ffffff; border-color: var(--om-ink); box-shadow: none; }
html[data-skin="oldmac"] .eye-card,
html[data-skin="oldmac"] .eye-panel {
  background: var(--om-paper); border-color: var(--om-ink); border-radius: 0; box-shadow: var(--om-ring), 3px 3px 0 1px var(--om-ink);
}
html[data-skin="oldmac"] .eye-paper { background: var(--om-ink); color: #ffffff; border-radius: 0; }

/* ---------- reduced motion: the whole scene holds still --------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="oldmac"] .world__road::before,
  html[data-skin="oldmac"] .world__road::after,
  html[data-skin="oldmac"] .world__map::before,
  html[data-skin="oldmac"] .place--forex::before,
  html[data-skin="oldmac"] .place--forex::after,
  html[data-skin="oldmac"] .page-login .gate::after,
  html[data-skin="oldmac"] .page-login .code__slot.is-next::before { animation: none !important; }
  /* still: the plume sits on the stack, the pointer rests at its start */
  html[data-skin="oldmac"] .place--forex::before { opacity: 1; transform: none; }
  html[data-skin="oldmac"] .place--forex::after { opacity: 0; }
  html[data-skin="oldmac"] .page-login .gate::after { transform: translate(8vw, 2px); }
  html[data-skin="oldmac"] .world__road::after { opacity: .5; }
}