/*
  HR-VEND user guide.

  Built on the same design system as the rest of marketing/ - the tokens are
  restated here rather than imported so this directory can be served on its
  own, but every value matches `marketing/styles.css`. If one moves, move both.

  The rules that shape it, carried over from the marketing site:
    - White canvas. The action layer is monochrome #111111; the cyan is a
      brand accent for links and marks, never a button.
    - Inter throughout. Display type is 600 with negative tracking; nothing
      is 700.
    - Radius is hierarchical: 8px controls, 12px cards, 16px the screenshot
      frame. Nothing rounder.
    - Hairlines separate surfaces. A shadow is for something that floats.
*/

:root {
  --primary: #111111;
  --primary-active: #242424;
  --brand-accent: #00AED8;

  --canvas: #FFFFFF;
  --surface-soft: #F8F9FA;
  --surface-card: #F5F5F5;
  --surface-strong: #E5E7EB;
  --hairline: #E5E7EB;
  --hairline-soft: #F3F4F6;

  --ink: #111111;
  --body: #374151;
  --muted: #6B7280;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-card: 12px;
  --radius-shot: 16px;

  --nav-w: 284px;
  --top-h: 60px;

  --shadow-pop: 0 8px 24px rgba(16, 24, 40, .12);
  --shadow-shot: 0 12px 32px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 15px/1.65 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit }

.ug-skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius);
}
.ug-skip:focus { left: 12px; top: 12px; z-index: 60 }

/* ------------------------------------------------------------------ header */

.ug-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  height: var(--top-h); padding: 0 24px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.ug-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; color: var(--ink) }
.ug-brand span { font-size: 14px; color: var(--muted); border-left: 1px solid var(--hairline); padding-left: 10px }

.ug-cta {
  margin-left: auto; font-size: 14px; font-weight: 500; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.ug-cta:hover { color: var(--ink) }

.ug-burger { display: none; background: none; border: 0; padding: 6px; color: var(--ink) }
.ug-burger svg { width: 22px; height: 22px }

/* ------------------------------------------------------------------ search */

.ug-search { position: relative; flex: 1 1 460px; max-width: 460px }
.ug-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted) }
.ug-search input {
  width: 100%; height: 38px; padding: 0 40px 0 36px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface-soft); font: inherit; font-size: 14px; color: var(--ink);
}
.ug-search input:focus {
  outline: none; background: var(--canvas);
  border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(0, 174, 216, .16);
}
.ug-search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 500 11px/1 Inter, sans-serif; color: var(--muted);
  border: 1px solid var(--hairline); border-bottom-width: 2px;
  border-radius: 4px; padding: 3px 6px; background: var(--canvas);
}

#ug-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 62vh; overflow-y: auto;
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop); padding: 6px;
}
#ug-results a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); text-decoration: none }
#ug-results a:hover, #ug-results a.on { background: var(--surface-soft) }
#ug-results strong { display: block; font-size: 14px; font-weight: 500; color: var(--ink) }
#ug-results small { font-size: 12px; color: var(--muted) }
#ug-results .ug-none { padding: 14px 12px; font-size: 14px; color: var(--muted) }

/* ------------------------------------------------------------------- shell */

.ug-shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); align-items: start }

.ug-nav {
  position: sticky; top: var(--top-h);
  height: calc(100vh - var(--top-h)); overflow-y: auto;
  padding: 24px 16px 48px;
  border-right: 1px solid var(--hairline);
}
.ug-nav-section + .ug-nav-section { margin-top: 24px }
.ug-nav h4 {
  margin: 0 0 6px; padding: 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.ug-nav ul { list-style: none; margin: 0; padding: 0 }

.ug-nav a, .ug-nav summary {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--body); text-decoration: none; cursor: pointer;
}
.ug-nav a:hover, .ug-nav summary:hover { background: var(--surface-soft); color: var(--ink) }
.ug-nav a.on { background: rgba(0, 174, 216, .10); color: var(--ink); font-weight: 500 }
.ug-nav details > ul { margin: 2px 0 6px; padding-left: 34px }
.ug-nav details > ul a { padding: 5px 10px; font-size: 13.5px; color: var(--muted) }
.ug-nav details > ul a:hover, .ug-nav details > ul a.on { color: var(--ink) }
.ug-nav summary { list-style: none; font-weight: 500; color: var(--ink) }
.ug-nav summary::-webkit-details-marker { display: none }
.ug-nav summary::after {
  content: ''; margin-left: auto; width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.ug-nav details[open] > summary::after { transform: rotate(45deg) }
.ug-icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--muted) }
.ug-nav a.on .ug-icon, .ug-nav summary:hover .ug-icon { color: var(--ink) }

/* -------------------------------------------------------------------- main */

.ug-main { padding: 40px 56px 96px; max-width: 900px }

.ug-crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px }
.ug-crumbs a { text-decoration: none; color: var(--muted) }
.ug-crumbs a:hover { color: var(--ink) }
.ug-crumbs span { margin: 0 2px }

.ug-main h1 {
  margin: 0 0 12px; font-size: 36px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.15; color: var(--ink);
}
.ug-main h2 {
  margin: 40px 0 12px; font-size: 20px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}

.ug-lede { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0 0 8px }
.ug-todo { color: var(--muted); font-style: italic }
.ug-where { font-size: 14px; color: var(--muted); margin: 0 0 28px }
.ug-where code {
  font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: 5px; padding: 2px 6px;
}

/* ------------------------------------------------------- the screenshot */

/*
  The frame is the point of this file. A raw PNG of a dense admin screen on a
  white page reads as a mistake; sitting it on a soft gradient with a hairline
  and a real shadow makes it read as a product shot. The gradient is the app's
  own floor colour rather than a decorative wash, so it looks like the product
  rather than like a template.
*/
.ug-shot { margin: 0 0 8px }
.ug-shot-frame {
  padding: 22px;
  border-radius: var(--radius-shot);
  background: linear-gradient(160deg, #F3F7FA 0%, #F8F9FA 45%, #EFF4F7 100%);
  border: 1px solid var(--hairline);
}
.ug-shot img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--surface-strong);
  box-shadow: var(--shadow-shot); background: var(--canvas);
}
.ug-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center }

.ug-block blockquote {
  margin: 0 0 12px; padding: 14px 18px;
  background: var(--surface-soft);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius);
  font-size: 14.5px; color: var(--body);
}

.ug-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.ug-chips li {
  padding: 6px 12px; font-size: 13.5px; color: var(--body);
  background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: 999px;
}

/* ----------------------------------------------------------------- landing */

.ug-hero { padding-bottom: 8px }
.ug-hero h1 { font-size: 44px }
.ug-home-section { margin-top: 44px }
.ug-home-section h2 { margin-bottom: 16px }
.ug-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px }
.ug-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; text-decoration: none;
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--canvas); transition: border-color .15s ease, transform .15s ease;
}
.ug-card:hover { border-color: var(--surface-strong); transform: translateY(-1px) }
.ug-card-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 10px; background: var(--surface-soft); color: var(--ink);
}
.ug-card-icon .ug-icon { width: 19px; height: 19px; color: inherit }
.ug-card-body { display: flex; flex-direction: column; min-width: 0 }
.ug-card strong { font-size: 14.5px; font-weight: 600; color: var(--ink) }
.ug-card small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

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

@media (max-width: 1020px) {
  .ug-shell { grid-template-columns: 1fr }
  .ug-nav {
    position: fixed; inset: var(--top-h) auto 0 0; width: 300px; z-index: 45;
    background: var(--canvas); transform: translateX(-100%); transition: transform .2s ease;
  }
  .ug-nav.open { transform: none; box-shadow: var(--shadow-pop) }
  .ug-burger { display: block }
  .ug-cta { display: none }
  .ug-main { padding: 28px 20px 72px }
  .ug-main h1 { font-size: 30px }
  .ug-hero h1 { font-size: 34px }
  .ug-shot-frame { padding: 12px }
}

@media (prefers-reduced-motion: reduce) {
  .ug-nav, .ug-card, .ug-nav summary::after { transition: none }
}