/* ==========================================================================
   SAMPLE SHELL
   ==========================================================================
   The two things every design sample shares: the bar that says it is a sample,
   and the phone frame some of them are shown inside. Everything else about a
   sample — its palette, its type, its whole visual language — belongs to that
   sample alone, which is the point of having several.
   ========================================================================== */

/* ------------------------------------------------------------ the label --- */

/*
 * Permanent, and deliberately not subtle. Nobody should be able to screenshot
 * one of these and present it as a real company's work. It sticks to the top
 * so it cannot be scrolled away and cropped out.
 */
.sflag {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .6rem clamp(1rem, 4vw, 2rem);
  background: #05060a;
  color: #cdd2e2;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .03em;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sflag b { color: #8b7cf6; font-weight: 500; }
/*
 * `a[href]`, not `a`. This bar lives inside each sample's own scope, so a
 * palette rule such as `.phm a { color: var(--blue) }` ties on specificity
 * and wins on source order - which is how the link ended up dark blue on a
 * near-black bar at 3:1. The attribute selector settles it without
 * !important, and the bar looks the same on every sample by construction.
 */
.sflag a[href] {
  margin-left: auto;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  white-space: nowrap;
}
.sflag a[href]:hover { border-bottom-color: #fff; }
/* The bar is near-black, so it keeps a white ring rather than the sample's
   brand colour - several of which would be invisible against it. */
.sflag a[href]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 46rem) {
  .sflag a[href] { margin-left: 0; }
}

/* ----------------------------------------------------------- the phone --- */

/*
 * A drawn handset, not a photograph of one. It scales without going soft, it
 * weighs nothing, and it recolours with whatever sample it is standing in.
 */
.phone {
  --phone-w: 260px;
  --phone-r: 34px;
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 9 / 19.5;
  border-radius: var(--phone-r);
  padding: 8px;
  background: linear-gradient(160deg, #2a2d38, #14161d 40%, #2a2d38);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -25px rgba(0, 0, 0, .85);
  flex: none;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--phone-r) - 8px);
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* The cut-out. Drawn rather than left out, because its absence is the first
   thing that makes a mock handset look wrong. */
.phone__notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 18px;
  border-radius: 99px;
  background: #05060a;
  z-index: 5;
}
.phone__bar {
  position: absolute;
  bottom: 7px; left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .35);
  z-index: 5;
}

/* ------------------------------------------------------------ scroll it --- */

/* Wide sample UIs get their own scroller rather than making the page scroll
   sideways. */
.sample-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

/* --------------------------------------------------------------- a11y --- */

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

@media (prefers-reduced-motion: reduce) {
  .phone__screen *, .phone__screen *::before, .phone__screen *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------- the page itself --- */

/*
 * The site's own stylesheet reserves a 9px scrollbar gutter on <html>, which
 * is painted from the portfolio's dark background — and a sample's scoped
 * palette can never reach up there to change it. Left alone, every light
 * specimen gets a thin dark sliver down its right-hand edge.
 *
 * So each sample declares its page colour once, here, where the fact that
 * this is about <html> rather than about the sample is obvious.
 */
html:has(.est), body:has(.est) { background: #faf7f2; }
html:has(.phm), body:has(.phm) { background: #f4f6f9; }
html:has(.stn), body:has(.stn) { background: #0b0f14; }
html:has(.mtr), body:has(.mtr) { background: #08090b; }
html:has(.spl), body:has(.spl) { background: #0a0b10; }