/* Shared frame for the example pages (/work/...). Each example is a full page in its client's own
   style; this file only adds the portfolio's thin bar on top, the case notes drawer, and the
   entrance. The bar and drawer keep the portfolio's look (dark, monochrome, 2px corners) so it is
   always clear which part is the example and which part is me talking about it. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2?v=8R1ym7Ck2D") format("woff2");
}

:root {
  --ex-bar: 44px;
  --ex-bg: #0b0b0c;
  --ex-surface: #111113;
  --ex-line: #2c2c30;
  --ex-text: #ededee;
  --ex-soft: #c7c7ca;
  --ex-muted: #8b8b90;
  --ex-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ex-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-padding-top: var(--ex-bar);
}

body {
  margin: 0;
  padding-top: var(--ex-bar);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

/* Smooth scrolling and the custom scrollbar come from the portfolio (lab/lab.js, lab/scrollbar.js);
   here the bar starts below the portfolio bar, sits above the examples' sticky headers but under their
   drawers, and takes each theme's colors */
:root {
  --sb-top: var(--ex-bar);
  --sb-z: 65;
}

html[data-theme="light"] {
  --sb-line: rgba(20, 20, 20, 0.14);
  --sb-thumb: rgba(20, 20, 20, 0.42);
  --sb-thumb-strong: rgba(20, 20, 20, 0.72);
}

html[data-theme="dark"] {
  --sb-line: rgba(255, 255, 255, 0.12);
  --sb-thumb: rgba(255, 255, 255, 0.5);
  --sb-thumb-strong: rgba(255, 255, 255, 0.85);
}

/* ---------- The portfolio bar ---------- */
.ex-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--ex-bar);
  padding: 0 16px;
  border-bottom: 1px solid var(--ex-line);
  background: var(--ex-bg);
  color: var(--ex-soft);
  font-size: 0.8125rem;
  line-height: 1;
  color-scheme: dark;
}

.ex-bar a,
.ex-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ex-soft);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s var(--ex-ease), transform 0.45s var(--ex-ease-out);
}

.ex-bar a:hover,
.ex-bar button:hover {
  color: var(--ex-text);
  transform: scale(1.06);
}

.ex-bar a:focus-visible,
.ex-bar button:focus-visible {
  outline: 1px solid var(--ex-text);
  outline-offset: 4px;
  border-radius: 2px;
}

.ex-bar svg {
  width: 14px;
  height: 14px;
}

.ex-back {
  justify-self: start;
}

.ex-title {
  margin: 0;
  color: var(--ex-muted);
  white-space: nowrap;
}

.ex-title span {
  margin-right: 10px;
  color: var(--ex-text);
  font-variant-numeric: tabular-nums;
}

.ex-tools {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 22px;
}

/* Light / dark: "Dark mode" with a small switch (the square moves across when it is on) */
.ex-switch {
  position: relative;
  width: 22px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.ex-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: currentColor;
  transition: transform 0.35s var(--ex-ease-out);
}

.ex-theme[aria-pressed="true"] .ex-switch::after {
  transform: translateX(10px);
}

.ex-notes-open {
  gap: 0 !important; /* "Case" and "notes" are separate pieces of text; only the square gets a gap */
}

/* the small square, like the markers on the portfolio */
.ex-notes-open::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 8px;
  background: currentColor;
}

@media (max-width: 560px) {
  .ex-bar {
    padding: 0 14px;
  }

  .ex-title {
    display: none;
  }

  /* the switch alone on phones; its name stays for screen readers */
  .ex-theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ex-tools {
    gap: 18px;
  }

  .ex-bar {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Case notes drawer ---------- */
.ex-scrim {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(11, 11, 12, 0.6);
  opacity: 0;
  transition: opacity 0.4s var(--ex-ease);
}

.ex-notes {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  border-left: 1px solid var(--ex-line);
  background: var(--ex-bg);
  color: var(--ex-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
  color-scheme: dark;
  transform: translateX(100%);
  transition: transform 0.5s var(--ex-ease-out);
}

.is-notes-open .ex-scrim {
  opacity: 1;
}

.is-notes-open .ex-notes {
  transform: none;
}

.ex-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ex-bar);
  padding: 0 24px;
  border-bottom: 1px solid var(--ex-line);
  font-size: 0.8125rem;
  color: var(--ex-muted);
}

.ex-notes-close {
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ex-soft);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.25s var(--ex-ease);
}

.ex-notes-close:hover {
  color: var(--ex-text);
}

.ex-notes-close:focus-visible,
.ex-show:focus-visible {
  outline: 1px solid var(--ex-text);
  outline-offset: 4px;
  border-radius: 2px;
}

.ex-notes-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 40px;
  overscroll-behavior: contain;
}

.ex-notes h2 {
  margin: 0;
  color: var(--ex-text);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ex-notes h3 {
  margin: 28px 0 8px;
  color: var(--ex-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ex-notes p {
  margin: 0 0 12px;
}

.ex-disclaimer {
  margin-top: 10px !important;
  color: var(--ex-muted);
  font-size: 0.8125rem;
}

.ex-points {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ex-points li {
  padding: 14px 0;
  border-top: 1px solid #1e1e21;
}

.ex-points li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.ex-points strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ex-text);
  font-weight: 500;
}

.ex-show {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ex-text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.25s var(--ex-ease);
}

.ex-show::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  border: 1px solid currentColor;
  vertical-align: 1px;
}

.ex-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ex-skills li {
  padding: 2px 9px;
  border: 1px solid var(--ex-line);
  border-radius: 2px;
  color: var(--ex-muted);
  font-size: 0.75rem;
}

/* "Show me": a frame drawn around the part of the page a note talks about. Two thin lines (dark and
   light) so it reads on any background; no glow */
.ex-spot {
  position: absolute;
  z-index: 999;
  border: 1px solid #0b0b0c;
  outline: 1px solid #ededee;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.35s var(--ex-ease), transform 0.5s var(--ex-ease-out);
}

.ex-spot.is-on {
  opacity: 1;
  transform: none;
}

/* Switching light and dark: a short crossfade (View Transitions, where the browser has them) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

/* ---------- Entrance ----------
   The card on the portfolio grows to fill the screen in this page's background color; then the
   page arrives on that same color and its content rises in (example.js adds .is-in) */
.js .ex-stage {
  opacity: 0;
  transform: translateY(18px);
}

.js.is-in .ex-stage {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ex-ease), transform 0.9s var(--ex-ease-out);
}