/* ── skyline.css — the living window (Skyline theme, Morris 27 October 2026).
   #gc-sky is a fixed layer behind the whole desk: the view from the chief executive's
   office, painted (banking/img/paint/hero_*) and cut into three depth layers by
   tools/paint/layers.py, back to front: the sky (with the clouds' canvas), the city, the
   grade and the fog, the canvas for what moves outside, the room (with the dust's canvas),
   the lightning. Each layer moves at its own rate (skyline.js). The city outside is the game's health meter. This file owns only
   #gc-sky; the panels are styled elsewhere. Every colour the canvas draws with is a token
   here, read by skyline.js through getComputedStyle. ────────────────────────────── */

:root{
  /* the canvas palette */
  --sky-window:#ffd28a;          /* a lit office window */
  --sky-window-2:#ffe9c2;        /* a brighter one */
  --sky-window-3:#f3b562;        /* a dimmer, warmer one */
  --sky-crane:#0d131c;           /* a tower crane against the sky */
  --sky-crane-day:#3a4654;       /* the same crane in daylight */
  --sky-aviation:#ff2a1f;        /* the red aviation light */
  --sky-strobe:#f4f7ff;          /* an aircraft's white strobe */
  --sky-nav-red:#ff4b3e;         /* port light */
  --sky-nav-green:#5dff9b;       /* starboard light */
  --sky-rain:#c9d6e6;            /* a rain streak on the glass */
  --sky-drop:#dfe8f3;            /* a drop on the glass, its lit edge */
  --sky-drop-shade:#0a1018;      /* a drop on the glass, its dark edge */
  --sky-snow:#f4f8ff;            /* a snowflake */
  --sky-snow-shade:#5d6a7c;      /* the faint shade that lets it read against a bright sky */
  --sky-dust:#ffe2a8;            /* a dust mote in the lamp light */
  --sky-gold:#ffcf6a;            /* the record month's gold */
  --sky-gold-2:#fff0c4;          /* and its brighter glints */
  --sky-paper:#e9e4d6;           /* a loose sheet of paper in the storm */
  --sky-paper-shade:#7d7868;     /* its edge and its print */
  --sky-steam:#e6ebf2;           /* steam from a rooftop by day */
  --sky-steam-night:#c9b8a0;     /* the same at night, lit by the city */
  --sky-cloud-dawn:#f6c9c0;      /* the clouds that drift over the painted sky, per light */
  --sky-cloud-day:#eef2f7;
  --sky-cloud-dusk:#e7a873;
  --sky-cloud-night:#2a3550;
  --sky-cloud-storm:#3a424d;

  /* the layer */
  --sky-base:#0a0f17;            /* behind the painting while it loads */
  --sky-fog:#8d99a8;             /* fog over the city */
  --sky-flash:#e8eeff;           /* lightning */
  --sky-grade:#808890;           /* elevated risk: the colour drained (a saturation blend) */
  --sky-dim:#8e98a6;             /* and the light dimmed and cooled (a multiply) */

  /* the light of a painting faked from the dusk one, until its own painting exists */
  --sky-tint-dawn:linear-gradient(180deg, #f2a5a0 0%, #d9a3b8 32%, #7d8db0 60%, #2b3550 100%);
  --sky-tint-day:linear-gradient(180deg, #a9c9ee 0%, #cfe0f2 38%, #b9c7d6 62%, #6c7684 100%);
  --sky-tint-night:linear-gradient(180deg, #050a1c 0%, #0b1430 36%, #141d36 60%, #0b0f18 100%);
  --sky-tint-storm:linear-gradient(180deg, #2c3440 0%, #46505c 36%, #2d343e 62%, #12161c 100%);

  /* the plain window, when the paintings are turned off */
  --sky-plain-dawn:linear-gradient(180deg, #2a2f4a 0%, #6b5266 45%, #c98a6a 70%, #1a1e2a 100%);
  --sky-plain-day:linear-gradient(180deg, #2f4f78 0%, #6f93b8 55%, #9fb4c8 72%, #1d2530 100%);
  --sky-plain-dusk:linear-gradient(180deg, #1c2638 0%, #4a3a4a 40%, #c0743e 68%, #141820 100%);
  --sky-plain-night:linear-gradient(180deg, #05080f 0%, #0b111c 55%, #141b28 72%, #07090d 100%);
  --sky-plain-storm:linear-gradient(180deg, #1b2027 0%, #333b45 55%, #2a3038 72%, #0c0e12 100%);

  /* how much the painting moves with the pointer, and how far it is oversized to allow it */
  --sky-bleed:14px;
}

body.gc-skyline{ background-color:var(--sky-base); }

#gc-sky{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:var(--sky-base); contain:strict;
}
#gc-sky .sky-wrap{
  position:absolute; inset:calc(-1 * var(--sky-bleed));
  will-change:transform; transform:translate3d(0, 0, 0);
}
/* back to front */
#gc-sky .sky-l-sky{ z-index:1; }
#gc-sky .sky-l-city{ z-index:2; }
#gc-sky .sky-grade{ z-index:3; }
#gc-sky .sky-dim{ z-index:3; }
#gc-sky .sky-fog{ z-index:4; }
#gc-sky canvas.sky-near{ z-index:5; }
#gc-sky .sky-l-room{ z-index:6; }
#gc-sky .sky-flash{ z-index:7; }
/* the flat painting (no layer files) or the plain sky: the sky wrap alone carries the picture */
#gc-sky:is(.is-flat, .is-plain) :is(.sky-l-city, .sky-l-room, .sky-far){ display:none; }
#gc-sky .sky-p{
  position:absolute; inset:0; opacity:0;
  background-repeat:no-repeat;
  background-size:var(--sky-bs, cover); background-position:var(--sky-bp, center);
  will-change:opacity;
}
/* the clouds and the dust: canvases inside the sky and the room, sized by skyline.js */
#gc-sky canvas.sky-far{ z-index:5; width:auto; height:auto; pointer-events:none; }
#gc-sky canvas.sky-dust{ z-index:5; left:auto; top:auto; width:auto; height:auto; pointer-events:none; }
/* a light faked from the dusk painting: a colour grade and a tint laid over it */
#gc-sky .sky-p.is-fake::after{
  content:''; position:absolute; inset:0; opacity:.55; mix-blend-mode:soft-light;
}
#gc-sky .sky-p.is-fake[data-k="dawn"]{ filter:saturate(.82) brightness(1.06) contrast(.96) hue-rotate(-8deg); }
#gc-sky .sky-p.is-fake[data-k="dawn"]::after{ background:var(--sky-tint-dawn); opacity:.6; }
#gc-sky .sky-p.is-fake[data-k="day"]{ filter:brightness(1.2) saturate(.8) contrast(.92); }
#gc-sky .sky-p.is-fake[data-k="day"]::after{ background:var(--sky-tint-day); opacity:.36; mix-blend-mode:screen; }
#gc-sky .sky-p.is-fake[data-k="night"]{ filter:brightness(.8) saturate(1.05) contrast(1.08); }
#gc-sky .sky-p.is-fake[data-k="night"]::after{ background:var(--sky-tint-night); opacity:.5; mix-blend-mode:multiply; }
#gc-sky .sky-p.is-fake[data-k="storm"]{ filter:grayscale(.55) brightness(.58) contrast(1.14); }
#gc-sky .sky-p.is-fake[data-k="storm"]::after{ background:var(--sky-tint-storm); opacity:.7; mix-blend-mode:multiply; }

/* the plain window: no painting, a sky drawn by the stylesheet */
#gc-sky.is-plain .sky-p{ background-image:none !important; filter:none !important; }
#gc-sky.is-plain .sky-p::after{ display:none; }
#gc-sky.is-plain .sky-l-sky .sky-p[data-k="dawn"]{ background:var(--sky-plain-dawn); }
#gc-sky.is-plain .sky-l-sky .sky-p[data-k="day"]{ background:var(--sky-plain-day); }
#gc-sky.is-plain .sky-l-sky .sky-p[data-k="dusk"]{ background:var(--sky-plain-dusk); }
#gc-sky.is-plain .sky-l-sky .sky-p[data-k="night"]{ background:var(--sky-plain-night); }
#gc-sky.is-plain .sky-l-sky .sky-p[data-k="storm"]{ background:var(--sky-plain-storm); }

/* elevated risk: the hour's own painting greyed, drained of colour and dimmed */
#gc-sky :is(.sky-grade, .sky-dim){ position:absolute; inset:0; opacity:0; will-change:opacity; pointer-events:none; }
#gc-sky .sky-grade{ background:var(--sky-grade); mix-blend-mode:saturation; }
#gc-sky .sky-dim{ background:var(--sky-dim); mix-blend-mode:multiply; }
/* fog over the city, heaviest at the horizon */
#gc-sky .sky-fog{
  position:absolute; inset:0; opacity:0; will-change:opacity;
  background:linear-gradient(180deg, transparent 0%, var(--sky-fog) 34%, var(--sky-fog) 52%, transparent 86%);
  mix-blend-mode:screen;
}
#gc-sky canvas{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
#gc-sky .sky-flash{
  position:absolute; inset:0; opacity:0; will-change:opacity; pointer-events:none;
  background:var(--sky-flash); mix-blend-mode:screen;
}

/* the phone: no pointer to follow, so no bleed (its layers drift within the painting's own margin) */
@media (max-width:900px){ :root{ --sky-bleed:0px; } }

@media print{ #gc-sky{ display:none; } }