/* The UI Designer's guide (/tools/ui-designer/guide): the three-picture flow and the two-column steps. Everything
   else (hero, steps, questions, keys) comes from site.css and tools.css. */

.guide-actions {
  margin-top: 26px;
}

.guide-file-note {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 13.5px;
}

.guide-section {
  padding-top: 0;
}

/* Design → copy → paste: three glass cards with their drawings, side by side, stacked on phones. */
.guide-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.guide-flow-tile {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 14px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: border-color var(--medium) var(--ease-out), transform var(--medium) var(--ease-out);
}

.guide-flow-tile:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
}

.guide-flow-art {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 92, 168, 0.1), transparent 70%), var(--surface-1);
}

.guide-flow-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.guide-flow-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.guide-flow-text {
  padding: 0 6px;
  color: var(--text-2);
  font-size: 14.5px;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.guide-grid .section-title-sm {
  margin-bottom: 14px;
}

/* Get the app: one glass card (the app's icon, one line, the Install button) with the steps for each device in small
   glass tiles under it, four side by side, two on tablets, one on phones. */
.guide-app {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 22px;
  padding: clamp(20px, 3.4vw, 34px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(92, 225, 245, 0.08), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(255, 92, 168, 0.09), transparent 60%),
    var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
}

.guide-app > * {
  position: relative;
  z-index: 1;
}

.guide-app-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.guide-app-icon {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 14px 34px -16px rgba(255, 92, 168, 0.8);
}

.guide-app-text {
  flex: 1 1 260px;
  min-width: 0;
}

.guide-app-text .section-title-sm {
  margin-bottom: 4px;
}

.guide-app-lead {
  color: var(--text-2);
  font-size: 15px;
}

.guide-app-button {
  flex: none;
}

.guide-app-devices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-app-device {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
}

.guide-app-device-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
}

.guide-app-device-icon .icon {
  width: 18px;
  height: 18px;
}

.guide-app-device-title {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.guide-app-device-how {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
}

.guide-app-steps {
  display: grid;
  gap: 3px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: 14px;
}

@media (max-width: 560px) {
  .guide-app-button {
    width: 100%;
    justify-content: center;
  }
}

/* The latest release: one glass card like the site's cards (soft cyan and pink light in its corners, the pointer glow),
   with the NC logo, the name and date, and one line about it. */
.guide-release {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(92, 225, 245, 0.09), transparent 60%),
    radial-gradient(70% 120% at 100% 100%, rgba(255, 92, 168, 0.1), transparent 60%),
    var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  transition: border-color var(--medium) var(--ease-out), transform var(--medium) var(--ease-out);
}

.guide-release > * {
  position: relative;
  z-index: 1;
}

.guide-release:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
}

.guide-release-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.guide-release-logo {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 26px -12px rgba(255, 92, 168, 0.75);
}

.guide-release-titles {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.guide-release-title {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.guide-release-date {
  color: var(--text-3);
  font-size: 13.5px;
  font-weight: 600;
}

.guide-release-notes {
  color: var(--text-2);
  font-size: 15px;
}

.guide-release-foot {
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  color: var(--text-3);
  font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
  .guide-flow-tile,
  .guide-flow-tile:hover,
  .guide-release,
  .guide-release:hover {
    transition: none;
    transform: none;
  }
}

/* Connect an AI (MCP): the lines for each AI app, one under the other. */
.guide-mcp-code {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

.guide-mcp-code .code-head {
  letter-spacing: 0.04em;
  text-transform: none;
}

.guide-mcp-code pre {
  max-width: 100%;
}

.guide-mcp-code code {
  white-space: pre-wrap;
  word-break: break-all;
}