/* adamreichenbach.com — one page, one embed, two icons.
   Geometry comes from the Claude Design pass; see ../design/. */

:root {
  /* Report canvas is 2072 x 1020 -> 2.03137 (widened from 1920 on 2026-09-21 so
     the report fills a 1920x1080 screen in Power BI full screen instead of
     leaving a 71px white stripe down each side). The Power BI action bar renders
     INSIDE the iframe and is NOT part of that ratio, so it is added after the
     division, never inside it. */
  --report-ratio: 2.03137;
  /* Height of the Power BI action bar, which renders INSIDE the iframe. It is
     the single calibration knob on this page: if white columns appear down the
     left and right of the report, --bar is too small; if white bands appear
     above and below it, --bar is too big.
     Conversion: total column width (CSS px) = 2.03137 x (true bar - --bar).

     MEASURED 2026-09-21, not assumed. Microsoft's published 56px is wrong for
     this embed. From a render at 125% display scaling (so 1 CSS px = 1.25
     device px, confirmed twice over: the 2px green card border spans 2-3 device
     rows, and the two icon centres sit 55 device px apart against a known
     40 + 4 = 44 CSS px):
       iframe interior  x 37..1550  = 1514 device px
       report rendered  x 41..1546  = 1506 device px  -> 4px stripe each side
       stripe total 8 device = 6.4 CSS -> 6.4 / 2.03137 = 3.15 -> bar = 59.15
     Cross-checked against the bar itself: the report canvas ends at the
     (225,223,221) rule at y 758 and the card's bottom border is at y 833, so
     the bar is 74.6 device = 59.7 CSS px. Both land on 59, which is what is set
     here. Residual error is sub-pixel either way. */
  --bar: 59px;
  --pad: 24px;
  --card-border: 3px;   /* 2px green top + 1px bottom */

  /* Icon column, parked in the right margin beside the card. It is absolutely
     positioned, so it costs the height budget NOTHING -- which is the whole
     point of moving it off the bottom. */
  --icon: 40px;

  /* Everything above the canvas in the height budget. Height is the binding
     axis on every 16:9 and 16:10 viewport, so each px removed here becomes
     ~2.03px of report width. Moving the icons out of the flow dropped the old
     --footer (40) and --gap (20) from this sum: 167px -> 107px, and the --bar
     correction from 56 to 59 puts it at 110px. */
  --chrome: calc(var(--bar) + (2 * var(--pad)) + var(--card-border));

  /* 90vw is the cap; on a viewport wider in aspect than the report, height binds
     instead. min() picks whichever is smaller so the page never scrolls. */
  --w: min(90vw, calc((100vh - var(--chrome)) * var(--report-ratio)));

  /* Clear space between the card's edge and the viewport edge, and the gap the
     icon column may take out of it. The margin is symmetric, so this works the
     same on either side. The clamp is what stops the icons sliding off-screen at
     the narrow end: at 1920 the margin is ~96px and the gap gets its full 20px;
     at the 900px gate boundary the margin is ~45px and the gap collapses to 4px
     so a 40px icon still fits. */
  --margin: calc((100vw - var(--w)) / 2);
  --icon-gap: clamp(4px, calc(var(--margin) - var(--icon) - 4px), 20px);

  --green: #107C41;
  --green-hover: #0E6F3A;
  --ink: #242424;
  --ink-2: #616161;
  --ink-3: #707070;
  --line: #E0E0E0;
  --line-2: #D1D1D1;
  --surface: #FFFFFF;
  --page-bg: #FAFAFA;
  --grid: #F1F1F1;
  --bar-bg: #F5F5F5;
}

@supports (height: 100dvh) {
  :root { --w: min(90vw, calc((100dvh - var(--chrome)) * var(--report-ratio))); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background-color: var(--page-bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 96px 24px;
  color: var(--ink);
  font-family: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, Arial, sans-serif;
  overflow: hidden;              /* the page is the screen; nothing scrolls */
}

.page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- the workbook ---------- */

/* The card is the only thing in the flow, so `.page`'s centring puts equal
   space above and below it. The icon column hangs off the left in the margin. */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The card's 1px side / 3px vertical borders must sit OUTSIDE the iframe box,
   not eat into it. With plain `width: var(--w)` and border-box they ate 2px of
   width and 3px of height, which made the iframe 3px short of the report's
   1.88235 ratio — Power BI then scaled to fit the height and left a ~2px white
   column down each side. Adding the borders back here keeps the iframe exactly
   --w wide by (--w / ratio + --bar) tall. */
.card {
  position: relative;
  width: calc(var(--w) + 2px);
  height: calc((var(--w) / var(--report-ratio)) + var(--bar) + 3px);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--green);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.embed {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- loading state (behind the iframe) ---------- */

.placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
}

.placeholder-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--page-bg);
}

.placeholder-bar {
  height: var(--bar);
  background: var(--bar-bg);
  border-top: 1px solid var(--line);
}

.progress {
  width: 220px;
  height: 2px;
  background: #EBEBEB;
  overflow: hidden;
}

.progress span {
  display: block;
  width: 72px;
  height: 2px;
  background: var(--green);
  animation: sweep 1.6s ease-in-out infinite;
}

@keyframes sweep {
  0%   { transform: translateX(-72px); }
  100% { transform: translateX(220px); }
}

.placeholder p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Once the frame reports load, stop animating and drop the placeholder. */
.report-ready .placeholder { opacity: 0; transition: opacity .2s linear; }
.report-ready .progress span { animation: none; }

/* Stalled: the frame never fired load. The placeholder comes FORWARD, over the
   iframe, because a blocked frame may paint the browser's own opaque error page
   and hide anything behind it. */
.loading { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stalled { display: none; max-width: 460px; padding: 0 24px; text-align: center; }
.stalled p { margin: 0 0 10px; }
.stalled p:last-child { margin-bottom: 0; }
.stalled-head { font-weight: 600; color: var(--ink); }
.stalled a { color: var(--green); }

.report-stalled .loading { display: none; }
.report-stalled .stalled { display: block; }
.report-stalled .placeholder { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .progress span { animation: none; transform: translateX(0); }
  .report-ready .placeholder { transition: none; }
}

/* ---------- footer icons ---------- */

.links {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Desktop: a vertical pair in the right margin, bottom-aligned with the card.
   Out of the flow entirely, so it does not eat the height budget. */
.stage > .links {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: var(--icon-gap);
  flex-direction: column;
}

.links a {
  width: var(--icon);
  height: var(--icon);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--ink-2);
  text-decoration: none;
}

.links a:hover { background: #F0F0F0; color: var(--ink); }
.links a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- small screens ---------- */

.gate { display: none; }

@media (max-width: 899px), (pointer: coarse) and (max-width: 1279px) {

  body { overflow: auto; }
  .page { height: auto; min-height: 100dvh; padding: var(--pad); }

  .stage { display: none; }

  .gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 480px;
  }

  .gate-card {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  }

  .gate-bar {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--green);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
  }

  .gate-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; }
  .gate-body h1 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--ink); }
  .gate-body p  { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

  .gate-foot { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; justify-content: flex-end; }
  .gate-foot a { font-size: 14px; line-height: 40px; min-height: 40px; color: var(--green); text-decoration: underline; }
  .gate-foot a:hover { color: var(--green-hover); }
  .gate-foot a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

  .links-gate { width: auto; gap: 8px; }
  .links-gate a { width: 44px; height: 44px; }

  /* "Open it anyway" — no JavaScript involved. The report is forced to its
     design width and the page scrolls sideways. */
  #stage:target { display: flex; width: 2072px; }
  #stage:target ~ .gate { display: none; }
  #stage:target .card {
    width: calc(2072px + 2px);
    height: calc((2072px / var(--report-ratio)) + var(--bar) + 3px);
  }
  /* The stage is forced wider than the viewport here, so the side margins are
     negative and the icon column would sit off-screen. Put it back in flow. */
  #stage:target .links {
    position: static;
    flex-direction: row;
    justify-content: flex-end;
    width: calc(2072px + 2px);
    margin: 20px 0 0;
  }
}