/* Portalis documentation — same visual language as the marketing site and the
   Pharos docs: mono uppercase labels, a hairline grid, near-square corners.
   Self-contained on purpose: docs.portalis.sh serves static files only. */

:root {
  --bg:      #fbfcfe;
  --bg-tint: #f2f6fb;
  --card:    #ffffff;
  --ink:     #0e1726;
  --ink-2:   #475467;
  --ink-3:   #667085;
  --line:    #e8edf4;
  --line-2:  #d6e0ed;
  --blue:    #0079d2;
  --blue-hi: #2ea3ff;
  --blue-soft: #e8f3fc;
  --navy:    #0a1729;
  --navy-2:  #0e2036;
  --green:   #12b76a;
  --green-ink: #027a48;
  --amber:   #f79009;
  --amber-ink: #b54708;
  --red:     #d92d20;

  --display: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 4px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; }
h3 { font-size: 1.06rem; }
h4 { font-size: .95rem; }
a { color: var(--blue); }

.wrap { width: min(1240px, 100% - 2.6rem); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff; padding: .6rem 1rem; text-decoration: none;
}
.skip:focus { left: .6rem; top: .6rem; }

/* ---------- mono label -------------------------------------------------- */
.eyebrow, .docs-nav b, thead th, .foot-grid b, .foot-end, .fig-cap {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ---------- top bar ----------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: #fbfcfeeb;
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 1.5rem; padding-block: .7rem; }
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  letter-spacing: -.03em; color: var(--ink); text-decoration: none;
}
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.nav-links { display: flex; align-items: center; gap: 1.15rem; margin-left: auto; }
.nav-links a { font-size: .9rem; color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--blue); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--body); font-weight: 600; font-size: .88rem;
  border-radius: var(--r); text-decoration: none; border: 1px solid transparent;
  padding: .5rem .95rem; transition: background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #0068b6; }
.btn-plain { border-color: var(--line-2); color: var(--ink); background: var(--card); }
.btn-plain:hover { background: var(--bg-tint); }

/* ---------- docs layout ------------------------------------------------- */
.docs {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-block: 2.6rem 5rem;
  align-items: start;
}
.docs-nav {
  position: sticky; top: 84px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 110px); overflow-y: auto;
  border-right: 1px solid var(--line); padding-right: .8rem;
}
.docs-nav b { color: var(--ink-3); margin: 1.25rem 0 .35rem; }
.docs-nav b:first-child { margin-top: 0; }
.docs-nav a {
  font-size: .875rem; color: var(--ink-2); text-decoration: none;
  padding: .3rem 0 .3rem .75rem; border-left: 2px solid transparent; margin-left: -1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.docs-nav a:hover { color: var(--ink); }
.docs-nav a.on { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }

.docs-body { min-width: 0; max-width: 82ch; }
.docs-body .lead { color: var(--ink-2); font-size: 1.06rem; margin-top: .9rem; }
.docs-body h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem);
  margin: 3.4rem 0 1rem; padding-top: 1.4rem;
  border-top: 1px solid var(--ink); scroll-margin-top: 92px;
}
.docs-body h3 { margin: 2rem 0 .6rem; scroll-margin-top: 92px; }
.docs-body h4 { margin: 1.5rem 0 .45rem; color: var(--ink); }
.docs-body p { margin: 0 0 1rem; color: var(--ink-2); }
.docs-body ul, .docs-body ol { color: var(--ink-2); padding-left: 1.15rem; margin: 0 0 1rem; }
.docs-body li { margin-bottom: .4rem; }
.docs-body li > ul, .docs-body li > ol { margin-top: .4rem; }
.docs-body strong, .docs-body b { color: var(--ink); font-weight: 600; }

code {
  font-family: var(--mono); font-size: .84em;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: 3px; padding: .1em .35em; color: var(--ink);
}
pre {
  font-family: var(--mono); font-size: .81rem; line-height: 1.8;
  background: var(--navy); color: #cfe0f0;
  border-radius: var(--r); padding: 1rem 1.1rem;
  overflow-x: auto; margin: 1.2rem 0;
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
pre .k { color: var(--blue-hi); }
pre .c { color: #7e9ab5; }
pre .s { color: #6ee7a8; }

/* ---------- notes ------------------------------------------------------- */
.note {
  display: grid; grid-template-columns: 92px 1fr; gap: 1rem;
  border-top: 2px solid var(--blue); background: var(--card);
  padding: 1rem 0 1.1rem; color: var(--ink-2); font-size: .93rem;
  margin: 1.4rem 0;
}
.note > span[aria-hidden] {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--blue);
}
.note > span[aria-hidden]::after { content: " NOTE"; }
.note p { margin: 0 0 .5rem; }
.note p:last-child { margin-bottom: 0; }
.note b { color: var(--ink); }
.note.warn { border-top-color: var(--amber); }
.note.warn > span[aria-hidden] { color: var(--amber-ink); }
.note.warn > span[aria-hidden]::after { content: " CAUTION"; }

/* ---------- screenshots ------------------------------------------------- */
figure.shot { margin: 1.6rem 0 2rem; }
figure.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--card);
}
figure.shot figcaption {
  margin-top: .6rem; color: var(--ink-3); font-size: .84rem;
}

/* ---------- tables ------------------------------------------------------ */
.tablewrap { overflow-x: auto; border-top: 1px solid var(--ink); margin: 1.4rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .92rem; }
th, td { text-align: left; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--ink-3); padding-block: .7rem; border-bottom: 1px solid var(--line-2); }
tbody th { font-weight: 500; color: var(--ink); width: 30%; }
td { color: var(--ink-2); }

/* ---------- steps ------------------------------------------------------- */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding-left: 2.4rem; margin-bottom: .9rem;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: .1rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  display: grid; place-items: center;
}

/* ---------- footer ------------------------------------------------------ */
.foot { background: var(--navy); color: #b9c8da; border-top: 1px solid var(--navy-2); margin-top: 2rem; }
.foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding-block: 2.4rem 1.6rem; }
.foot-grid b { display: block; color: #5d7794; margin-bottom: .7rem; }
.foot-grid a, .foot-grid span { display: block; color: #b9c8da; text-decoration: none; font-size: .88rem; line-height: 2; }
.foot-grid a:hover { color: #fff; }
.foot-end {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  border-top: 1px solid var(--navy-2); padding-block: .9rem; color: #4f6a88;
}

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 980px) {
  .docs { grid-template-columns: 1fr; }
  .docs-nav {
    position: static; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding-right: 0; padding-bottom: 1.2rem; margin-bottom: 1rem;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .1rem 1.2rem;
  }
  .docs-nav b { grid-column: 1 / -1; }
  .nav-links { display: none; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .note { grid-template-columns: 1fr; gap: .3rem; }
}