/* Xcelerator Dental — design showcase shell.
   The chrome is deliberately dark so the client's design reads as the
   artwork on the wall rather than part of our furniture.

   Palette and type are lifted from the live XD site
   (xcelerator-dental-new.webflow.io); the comment on each token is the
   variable name it carries there, so the two stay traceable. */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap");

:root {
  /* Brand */
  --xd-yellow: #ffd102;          /* --ffd102 — the CTA yellow */
  --xd-yellow-hover: #ffdb3d;    /* lifted for hover; not a site token */
  --xd-on-yellow: #191818;       /* --dark — text on yellow */

  /* Chrome, darkest to lightest */
  --chrome-900: #0b0e13;         /* --dark-black */
  --chrome-800: #191818;         /* --dark — their footer surface */
  --chrome-700: #24272b;         /* --tab-selected */
  --chrome-600: #313337;         /* --grey-line */

  /* Text */
  --ink-100: #f6f6f6;            /* --haze */
  --ink-300: #d1d1d1;            /* --grey-3 */
  --ink-500: #a3a3a3;            /* --grey-2 */

  --bar-height: 64px;
  --rail-width: 248px;
  --radius: 10px;
  --pill: 999px;                 /* their buttons are full pills (38px on a 60px control) */

  --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  font-family: var(--font);
  background: var(--chrome-900);
  color: var(--ink-100);
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------- shared bits */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--pill);
  padding: 11px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--xd-yellow);
  color: var(--xd-on-yellow);
}

/* The site's primary CTAs carry a leading arrow. Cheap to echo, and it is
   the single most recognisable thing about an XD button. */
.btn--primary::before {
  content: "\2192";
  font-size: 15px;
  line-height: 1;
}

.btn--primary:hover {
  background: var(--xd-yellow-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-300);
  border: 1px solid var(--chrome-600);
  padding: 9px 16px;
}

.btn--ghost:hover {
  background: var(--chrome-700);
  color: var(--ink-100);
}

.btn--icon {
  gap: 7px;
}

.btn__icon {
  width: 13px;
  height: 13px;
  flex: none;
}

.btn:focus-visible,
.rail__link:focus-visible,
.gate__input:focus-visible {
  outline: 2px solid var(--xd-yellow);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ app layout */

.app {
  display: grid;
  grid-template-rows: var(--bar-height) 1fr;
  grid-template-columns: var(--rail-width) 1fr;
  grid-template-areas:
    "bar  bar"
    "rail stage";
  height: 100dvh;
}

/* Top bar ---------------------------------------------------------------- */

.bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--chrome-800);
  border-bottom: 1px solid var(--chrome-600);
}

.bar__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.bar__logo {
  height: 22px;
  width: auto;
  display: block;
}

.bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.bar__client {
  padding-left: 14px;
  border-left: 1px solid var(--chrome-600);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Left rail -------------------------------------------------------------- */

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  background: var(--chrome-800);
  border-right: 1px solid var(--chrome-600);
  overflow-y: auto;
}

.rail__heading {
  margin: 0;
  padding: 22px 20px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.rail__list {
  list-style: none;
  margin: 0;
  padding: 0 12px;
}

.rail__link {
  display: block;
  padding: 10px 17px;
  margin-bottom: 4px;
  border-radius: var(--pill);
  /* Transparent by default so the selected state only changes the colour and
     never nudges the layout by a pixel. */
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-300);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rail__link:hover {
  background: var(--chrome-700);
  color: var(--ink-100);
}

.rail__link[aria-current="page"] {
  background: var(--chrome-700);
  border-color: var(--xd-yellow);
  color: #fff;
}

.rail__foot {
  margin-top: auto;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--chrome-700);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-500);
}

/* Stage ------------------------------------------------------------------ */

.stage {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--chrome-900);
}



/* The viewport is the visible window. The iframe inside it is always laid
   out at the full desktop width and then scaled down to fit, so the client
   sees the real desktop design rather than a mobile reflow. */
.stage__viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #fff;
}

.stage__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
  background: #fff;
}

.stage__viewport:fullscreen {
  background: #fff;
}

/* Shown by shell.js when a design file fails to load. */
.stage__error {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
  background: var(--chrome-900);
  color: var(--ink-300);
}

.stage__error[data-visible="true"] {
  display: flex;
}

.stage__error strong {
  font-size: 16px;
  color: var(--ink-100);
}

.stage__error code {
  font-size: 12px;
  color: var(--ink-500);
  word-break: break-all;
}

/* ------------------------------------------------------- password gate */

.gate-body {
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--chrome-900);
}

.gate {
  width: 100%;
  max-width: 380px;
  padding: 36px 32px 32px;
  background: var(--chrome-800);
  border: 1px solid var(--chrome-600);
  border-radius: var(--radius);
  text-align: center;
}

.gate__logo {
  height: 24px;
  width: auto;
  margin-bottom: 26px;
}

.gate__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.gate__lede {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
}

.gate__error {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 91, 91, 0.12);
  border: 1px solid rgba(255, 91, 91, 0.3);
  font-size: 13px;
  color: #ff9a9a;
}

.gate__form {
  text-align: left;
}

.gate__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.gate__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--chrome-600);
  border-radius: var(--pill);
  background: var(--chrome-700);
  color: var(--ink-100);
  font: inherit;
  font-size: 15px;
}

.gate__submit {
  width: 100%;
  margin-top: 16px;
  padding: 12px 18px;
}

/* --------------------------------------------------------- internal index */

.index {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.index__logo {
  height: 24px;
  width: auto;
  margin-bottom: 30px;
}

.index__title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 600;
}

.index__lede {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-500);
}

.index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.index__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--chrome-600);
  border-radius: var(--radius);
  background: var(--chrome-800);
  color: var(--ink-100);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.index__card:hover {
  background: var(--chrome-700);
  border-color: var(--xd-yellow);
}

.index__card span {
  font-size: 13px;
  color: var(--ink-500);
}

/* ----------------------------------------------------------- narrow view */

/* The design itself stays locked to desktop — that is the whole point — but the
   chrome around it should look built for a phone rather than squeezed into one. */
@media (max-width: 760px) {
  :root {
    --bar-height: 56px;
  }

  .app {
    grid-template-rows: var(--bar-height) auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "bar"
      "rail"
      "stage";
  }

  .bar {
    gap: 10px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .bar__logo {
    height: 18px;
  }

  /* The client's name is already the headline of the page they came from. */
  .bar__client {
    display: none;
  }

  .bar__actions {
    gap: 8px;
  }

  /* Full screen collapses to its icon; the CTA keeps its words, because it is
     the only thing on this page we actually want them to press.
     Sizes here are set for thumbs, not cursors — 44px is the smallest target
     that is comfortable to hit on a phone. */
  .btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .btn--icon .btn__label {
    display: none;
  }

  .btn__icon {
    width: 15px;
    height: 15px;
  }

  .btn--primary {
    padding: 13px 18px;
    font-size: 13px;
  }

  .rail {
    position: relative;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--chrome-600);
    overflow: hidden;
  }

  /* Faded edges say "there is more this way". shell.js sets the flags; without
     them a row that merely runs past the edge just reads as clipped. */
  .rail::before,
  .rail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .rail::before {
    left: 0;
    background: linear-gradient(to right, var(--chrome-800), transparent);
  }

  .rail::after {
    right: 0;
    background: linear-gradient(to left, var(--chrome-800), transparent);
  }

  .rail[data-fade-start="true"]::before,
  .rail[data-fade-end="true"]::after {
    opacity: 1;
  }

  .rail__heading,
  .rail__foot {
    display: none;
  }

  /* One swipeable row of pills. The scrollbar is hidden because on a phone it
     is a scrollbar over a three-item list, which just looks broken. */
  .rail__list {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 10px max(16px, env(safe-area-inset-right)) 10px
      max(16px, env(safe-area-inset-left));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .rail__list::-webkit-scrollbar {
    display: none;
  }

  .rail__list > li {
    flex: none;
  }

  .rail__link {
    margin-bottom: 0;
    padding: 12px 18px;
    white-space: nowrap;
  }
}

/* Phones in landscape have almost no height to spare, so give it all to the
   design rather than to our own furniture. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  :root {
    --bar-height: 48px;
  }

  .rail__list {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .rail__link {
    padding: 7px 14px;
    font-size: 13px;
  }
}