/* =========================================================================
   CoLateral website - the floating canvas layer
   -------------------------------------------------------------------------
   Small Project Canvas cards and dashed wires drifting down both side
   gutters of every public page, the whole length of the page, behind all of
   the content. site-canvas-float.js builds the layer and places each card
   where it clears everything a visitor can see; this sheet is the look.

   The cards wear the same chrome as the four cards floating in the home
   hero (index.html, .ih-cvp): the icon, the title over a small uppercase
   kind, the action icons, the soft pool of light behind each card, and the
   dashed wires with ring endpoints. Keep the two in step.

   Rules, so the next edit keeps it quiet:
   - Faint. The layer is dimmed as a whole and fades out toward the middle
     of the page, so a card never competes with the copy it sits beside.
   - Motion follows site-atmosphere.css: floats of 10px over 7-12s, wires
     hold still, reduced motion removes the animation outright.
   - Below 1400px of viewport there is no gutter wide enough; the layer is
     hidden, and the script does not build it. At 1440 the cards are about
     half size, and never under half: where the copy runs to the column
     edge that side is left bare rather than shrinking a card to a speck.
   - From 1400 to 1519px the gutter is so narrow that the mask below has
     already faded the cards most of the way, so the layer is a touch less
     dim there to keep the same faint read as on a wide window.
   ========================================================================= */

.site-canvas-float {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* Full strength out at the window edge, fading toward the content column. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 720px), rgba(0, 0, 0, .32) calc(50% - 580px), transparent calc(50% - 470px), transparent calc(50% + 470px), rgba(0, 0, 0, .32) calc(50% + 580px), #000 calc(50% + 720px), #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 720px), rgba(0, 0, 0, .32) calc(50% - 580px), transparent calc(50% - 470px), transparent calc(50% + 470px), rgba(0, 0, 0, .32) calc(50% + 580px), #000 calc(50% + 720px), #000 100%);
  --scf-s0: #f0f4f9;
  --scf-s1: #ffffff;
  --scf-card: #ffffff;
  --scf-bd: rgba(15, 23, 42, .10);
  --scf-bd2: rgba(15, 23, 42, .16);
  --scf-tx: #182130;
  --scf-tx2: #42597a;
  --scf-tx3: #526988;
  --scf-blue: #0078d4;
  --scf-accent: #106ebe;
  --scf-green: #0a7a3a;
  --scf-amber: #c97f00;
  --scf-red: #d1293f;
  --scf-wire: rgba(0, 120, 212, .3);
  --scf-ring: rgba(0, 120, 212, .45);
  --scf-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 60px -22px rgba(15, 23, 42, .28);
  --scf-strength: .5;
}

.site-canvas-float.is-on { opacity: var(--scf-strength); }

html[data-site-theme="dark"] .site-canvas-float {
  --scf-s0: #0b111e;
  --scf-s1: #101829;
  --scf-card: linear-gradient(180deg, #131c2f 0%, #0d1422 100%);
  --scf-bd: rgba(148, 178, 220, .12);
  --scf-bd2: rgba(148, 178, 220, .22);
  --scf-tx: #e6edf5;
  --scf-tx2: #a1b1c4;
  --scf-tx3: #8b9cb1;
  --scf-blue: #4da6ff;
  --scf-accent: #7cc0ff;
  --scf-green: #1ed96b;
  --scf-amber: #f0b429;
  --scf-red: #f05050;
  --scf-wire: rgba(124, 192, 255, .32);
  --scf-ring: rgba(124, 192, 255, .5);
  --scf-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 70px -26px rgba(0, 0, 0, .85), 0 0 60px -20px rgba(77, 166, 255, .28);
  --scf-strength: .55;
}

/* Narrow gutters: the mask fades these cards more, so lift them to match. */
@media (max-width: 1519px) {
  .site-canvas-float { --scf-strength: .62; }
  html[data-site-theme="dark"] .site-canvas-float { --scf-strength: .66; }
}

/* An opaque body paints over every negative z-index layer. The pages that
   load the app's themes.css get one in light (its body[data-site][data-theme]
   rule), so there the script lifts the layer to z-index 0. It is still first
   in the page and every card is placed clear of all visible content, so the
   only difference is that the body's fill no longer hides it. */
.site-canvas-float.is-over-body { z-index: 0; }

/* ---- Wires ---------------------------------------------------------------- */
.scf-wires {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.scf-wires path {
  fill: none;
  stroke: var(--scf-wire);
  stroke-width: 1.2;
  stroke-dasharray: 5 7;
}

.scf-wires circle {
  fill: var(--scf-s0);
  stroke: var(--scf-ring);
  stroke-width: 1.2;
}

/* ---- Cards ---------------------------------------------------------------- */
.scf-probe {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.scf-probe .scf-item { position: relative; animation: none; }

.scf-item {
  position: absolute;
  scale: var(--scf-scale, .75);
  transform-origin: 0 0;
  animation: scf-float 10s ease-in-out infinite alternate;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  text-align: left;
}

.scf-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--atm-glow-a, rgba(0, 120, 212, .13)), transparent);
  filter: blur(18px);
}

@keyframes scf-float {
  from { transform: translate3d(0, -5px, 0); }
  to { transform: translate3d(0, 5px, 0); }
}

.scf-card {
  display: flex;
  flex-direction: column;
  background: var(--scf-card);
  border: 1px solid var(--scf-bd2);
  border-radius: 14px;
  box-shadow: var(--scf-shadow);
  overflow: hidden;
  color: var(--scf-tx);
}

.scf-head {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  flex: none;
  padding: 0 6px 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--scf-bd) 55%, transparent);
}

.scf-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; opacity: .85; color: var(--scf-tx2); }
.scf-ic svg { width: 15px; height: 15px; display: block; }
.scf-ic-accent { opacity: 1; color: var(--scf-accent); }
.scf-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.scf-title { font-size: 12.5px; font-weight: 700; color: var(--scf-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scf-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--scf-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scf-actions { display: flex; align-items: center; flex: none; }
.scf-sep { width: 1px; height: 14px; margin: 0 2px; flex: none; background: color-mix(in srgb, var(--scf-bd) 80%, transparent); }
.scf-btn { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--scf-tx3); }
.scf-btn svg { width: 12.5px; height: 12.5px; }
.scf-btn-danger { color: color-mix(in srgb, var(--scf-red) 55%, var(--scf-tx3)); }

/* A card laid out narrow for a tight gutter drops its buttons and kind label,
   so the whole header width goes to the title. */
.scf-compact .scf-actions,
.scf-compact .scf-sub { display: none; }
.scf-compact .scf-head { padding: 0 10px; gap: 7px; }

/* Below 1520px every card renders at about half size, where body text lands
   near 6px and reads as grey lint. Those bodies keep their layout (color and
   visibility, never display, so the size measured for placement still holds)
   and show placeholder lines instead. The kind label goes for the same
   reason. Note bodies hold bare text, so color hides it, not visibility. */
.scf-compact .scf-body { position: relative; color: transparent; }
.scf-compact .scf-body > * { visibility: hidden; }
.scf-compact .scf-body::after {
  content: "";
  position: absolute;
  inset: 12px 14px;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--scf-tx3) 26%, transparent) 0 7px, transparent 7px 17px);
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
  mask-image: linear-gradient(90deg, #000 72%, transparent);
  border-radius: 3px;
}
@media (max-width: 1519px) {
  .site-canvas-float .scf-sub { display: none; }
  .site-canvas-float .scf-body { position: relative; color: transparent; }
  .site-canvas-float .scf-body > * { visibility: hidden; }
  .site-canvas-float .scf-body::after {
    content: "";
    position: absolute;
    inset: 12px 14px;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--scf-tx3) 26%, transparent) 0 7px, transparent 7px 17px);
    -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
    mask-image: linear-gradient(90deg, #000 72%, transparent);
    border-radius: 3px;
  }
}

.scf-body { background: var(--scf-s0); font-size: 12.5px; color: var(--scf-tx); }

.scf-text { padding: 12px 14px; line-height: 1.55; }
.scf-text .scf-util { margin-top: 8px; }

.scf-rows { padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; }
.scf-metric { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--scf-tx2); }
.scf-metric b { color: var(--scf-tx); font-weight: 750; white-space: nowrap; }
.scf-util { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.scf-bar { flex: 1; height: 4px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--scf-tx) 12%, transparent); }
.scf-bar i { display: block; height: 100%; border-radius: 3px; background: var(--scf-blue); }
.scf-pill { flex: none; font-size: 9px; font-weight: 850; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; color: #fff; background: var(--scf-accent); }
.scf-pill-open { background: #965d00; }
html[data-site-theme="dark"] .scf-pill { color: #041018; }
html[data-site-theme="dark"] .scf-pill-open { background: var(--scf-amber); }

.scf-agent { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.scf-agent-state { display: flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--scf-tx3); }
.scf-agent-state i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--scf-green); }
.scf-agent-msg { line-height: 1.5; }

.scf-calc { padding: 11px 13px; font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; line-height: 1.75; display: flex; flex-direction: column; }
.scf-calc .k { color: var(--scf-tx3); }

.scf-sk { display: block; padding: 10px 13px 13px; }
.scf-sk svg { display: block; width: 100%; }
.scf-sk .m { fill: none; stroke: var(--scf-blue); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.scf-sk .g { fill: color-mix(in srgb, var(--scf-green) 16%, transparent); stroke: var(--scf-green); stroke-width: 1; opacity: .85; }

.scf-grid { padding: 8px 10px 10px; }
.scf-grid table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.scf-grid th, .scf-grid td { border: 1px solid color-mix(in srgb, var(--scf-bd) 90%, transparent); padding: 3px 6px; text-align: left; white-space: nowrap; }
.scf-grid th { font-size: 9.5px; font-weight: 700; color: var(--scf-tx3); background: color-mix(in srgb, var(--scf-s1) 60%, transparent); text-align: center; }
.scf-grid tr:nth-child(2) td { font-weight: 700; color: var(--scf-tx2); }

.scf-todo { padding: 11px 14px; display: flex; flex-direction: column; gap: 7px; }
.scf-todo div { display: flex; align-items: center; gap: 9px; }
.scf-todo i { flex: none; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--scf-tx3); }
.scf-todo .is-done { color: var(--scf-tx3); text-decoration: line-through; }
.scf-todo .is-done i { border-color: var(--scf-green); background: color-mix(in srgb, var(--scf-green) 22%, transparent); }

.scf-doc { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.scf-doc b { font-size: 11px; font-weight: 750; color: var(--scf-tx2); }
.scf-doc i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--scf-tx) 14%, transparent); }

.scf-slide { padding: 11px 13px 10px; }
.scf-slide-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; border: 1px solid var(--scf-bd2); background: var(--scf-s1); padding: 12px 12px 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.scf-slide-frame b { display: block; width: 58%; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--scf-blue) 70%, transparent); }
.scf-slide-frame i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--scf-tx) 16%, transparent); }
.scf-slide-frame span { position: absolute; right: 12px; bottom: 10px; width: 34%; height: 36%; border-radius: 4px; background: color-mix(in srgb, var(--scf-green) 18%, transparent); border: 1px solid color-mix(in srgb, var(--scf-green) 45%, transparent); }
.scf-slide-foot { margin-top: 7px; font-size: 10px; font-weight: 700; color: var(--scf-tx3); }

.scf-cal { padding: 10px 13px 12px; display: flex; flex-direction: column; gap: 6px; }
.scf-cal-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.scf-cal-row:first-child { font-size: 9.5px; font-weight: 700; color: var(--scf-tx3); }
.scf-cal-row span { padding: 3px 0; border-radius: 6px; }
.scf-cal-row .is-on { color: #fff; font-weight: 800; background: var(--scf-blue); }
html[data-site-theme="dark"] .scf-cal-row .is-on { color: #041018; }
.scf-cal-event { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding: 5px 8px; border-radius: 7px; font-size: 11px; font-weight: 650; background: color-mix(in srgb, var(--scf-blue) 12%, transparent); }
.scf-cal-event i { flex: none; width: 3px; height: 14px; border-radius: 2px; background: var(--scf-blue); }

/* No gutter wide enough below this: the layer would crowd the copy. */
@media (max-width: 1399px) { .site-canvas-float { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .site-canvas-float { transition: none; }
  .scf-item { animation: none; }
}

@media print {
  .site-canvas-float { display: none; }
}