/* The stylesheet for every page the documentation and the platform serve.
 *
 * Served from /assets/docs.css (and /docs/assets/docs.css). The static
 * cookbook pages and the pages the service renders link this same file, so a
 * change lands on all of them at once.
 *
 * Deliberately plain: one typeface for text, one ink colour for text, a
 * light grey for rules and table borders, and the syntax colours of the
 * pygments "friendly" style inside code blocks. Emphasis comes from weight
 * and structure, never from a second text colour. */

:root {
  --bg: #ffffff;
  --bg2: #f6f6f6;          /* table heads, code blocks, banners */
  --ink: #171717;          /* every piece of text */
  --line: #dddddd;         /* table borders, rules */
  --line2: #e8e8e8;        /* the lighter rule under the bar and the sidebar */
  --sel: #e4e4e4;
  --sans: "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --radius: 8px;
  --page-width: 1200px;
  --gutter: clamp(24px, 5vw, 72px);
  --side-w: 220px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
::selection { background: var(--sel); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* --- Top bar -------------------------------------------------------------
   nums.world's header as its inner pages draw it (Navigation.tsx with
   headerSeparated, homepage.module.css): sticky, white like the front page,
   with a #dcdcdc rule,
   88px tall (76 at 850px, 72 at 640px), the 96px wordmark, links 76px after
   it in #666 that darken on hover, the current one in ink with a #aaa
   underline 7px down, and a two-line menu under 850px. Copied rather than
   restyled so the two bars read as one company's. What this bar adds is the
   "API" label after the wordmark and the dashboard button at the far end. */
:root { --nav-h: 88px; }
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #dcdcdc;
}
.skip { position: absolute; top: -100px; left: 20px; padding: 12px 20px; background: #fff; z-index: 60; }
.skip:focus { top: 10px; }
.nav-inner {
  position: relative;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--page-width);
  margin-inline: auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 56px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 44px; }
.brand-home { display: inline-flex; align-items: center; width: 96px; text-decoration: none; }
.brand-home img { display: block; width: 100%; height: auto; }
.brand-tag {
  padding-left: 12px;
  border-left: 1px solid #c8c8c8;
  font-size: 14px;
  line-height: 16px;
  text-decoration: none;
}
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: 20px; flex: 1; min-width: 0; }
.nav-links a { padding-block: 13px; font-size: 14px; color: #666; text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current], .nav-menu nav a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-underline-offset: 7px;
}
.nav-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav-dash {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-dash:hover, .nav-dash[aria-current] { background: var(--ink); color: var(--bg); }
.nav-menu { display: none; }
.nav-menu summary {
  list-style: none; width: 32px; height: 44px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span { display: block; width: 22px; height: 1px; background: var(--ink); transition: transform .15s; }
.nav-menu[open] summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-menu[open] summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-menu nav {
  position: absolute; top: 100%; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
  padding: 16px 24px 24px;
  background: #ffffff;
  border-bottom: 1px solid #dcdcdc;
  display: flex; flex-direction: column;
}
.nav-menu nav a { padding-block: 14px; font-size: 16px; border-bottom: 1px solid #eee; text-decoration: none; }
@media (max-width: 1100px) { .nav-inner { gap: 36px; } .nav-links { gap: 24px; } }
@media (max-width: 850px) {
  :root { --nav-h: 76px; }
  .nav-inner { gap: 30px; }
  .nav-links { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 640px) {
  :root { --nav-h: 72px; --gutter: 24px; }
  .brand-home { width: 88px; }
}

/* --- Footer ----------------------------------------------------------------
   nums.world's footer, as it is: the wordmark and the copyright line. */
.site-foot { background: #f7f7f7; border-top: 1px solid #e4e4e4; }
/* A short page keeps the footer at the bottom of the window, not halfway up. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .frame { flex: 1 0 auto; }
.site-foot-row {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--page-width);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 112px; padding-block: 36px;
}
.site-foot-brand { display: block; flex-shrink: 0; width: 80px; }
.site-foot-brand img { display: block; width: 100%; height: auto; }
.copyright {
  color: #737373;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px; letter-spacing: .05em; white-space: nowrap;
}
@media (max-width: 640px) {
  .site-foot-row { min-height: 88px; padding-block: 24px; gap: 16px; }
  .site-foot-brand { width: 72px; }
  .copyright { font-size: 10px; letter-spacing: .03em; }
}

/* --- Frame --------------------------------------------------------------- */
.frame {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 40px 0 96px;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.side {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  font-size: 14px;
}
.side-group + .side-group { margin-top: 24px; }
.side-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}
.side a {
  display: block;
  padding: 4px 0 4px 12px;
  margin-left: -1px;
  border-left: 1px solid var(--line);
  text-decoration: none;
}
.side a:hover { text-decoration: underline; text-underline-offset: 3px; }
.side a[aria-current] {
  font-weight: 600;
  border-left: 2px solid var(--ink);
  padding-left: 11px;
}
.doc { max-width: 740px; min-width: 0; }

/* Every problem document's `type` is the reference plus #<code>, so the row a
   link lands on has to be visible below the fixed bar, and marked briefly so
   the reader can see which of twenty rows they came for. */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
@keyframes landed {
  from { background: var(--sel); }
  to   { background: transparent; }
}
tr:target td { animation: landed 2s ease-out 1 both; }
@media (prefers-reduced-motion: reduce) {
  tr:target td { animation: none; background: var(--sel); }
}

/* --- Type ----------------------------------------------------------------
   One scale for every page, the terms included. */
h1 {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
h2 {
  font-weight: 500;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}
h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  margin: 28px 0 8px;
}
h1:lang(ko), h2:lang(ko), h3:lang(ko) { letter-spacing: 0; }
p { margin: 0 0 14px; }
/* Kept for any page that still marks an introduction this way: it is set as
   ordinary body text, not as a grey aside. */
.lead { margin: 0 0 14px; }
.lead > p:last-child { margin-bottom: 14px; }
.doc p a:not(.oauth-button), .doc li a, .doc td a, .lead a {
  text-decoration: underline;
  text-decoration-color: #999999;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.doc p a:not(.oauth-button):hover, .doc li a:hover, .doc td a:hover, .lead a:hover {
  text-decoration-color: var(--ink);
}
strong { font-weight: 600; }
small { font-size: 14px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
/* A heading straight after a rule takes the rule's place rather than adding
   its own space above it. */
hr + h2 { margin-top: 0; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }

.eyebrow { font-size: 13px; font-weight: 600; }

/* --- Code ----------------------------------------------------------------
   Light blocks with the pygments "friendly" colours from pygments.css. A
   plain <pre> looks the same as a highlighted one, minus the colours. */
code, pre, kbd { font-family: var(--mono); }
p code, li code, td code, th code {
  background: var(--bg2);
  border: 1px solid var(--line2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.86em;
  white-space: nowrap;
}
pre, .hl {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--bg2) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}
pre code, .hl pre { background: none; padding: 0; border: 0; font-size: inherit; }
.hl pre { margin: 0; overflow: visible; line-height: 1.6; background: transparent !important; border: 0; }
/* Recorded output is printed, not written, so it carries no syntax colour. */
.hl.out { background: var(--bg) !important; }
.hl.out span { color: var(--ink) !important; font-weight: 400 !important; font-style: normal !important; }
.label { font-size: 14px; font-weight: 600; margin: 0 0 8px; }

/* --- Tables --------------------------------------------------------------
   Every cell bordered, the head row lightly shaded. Wrapped in a scroller by
   the renderer so a wide table never widens the page. */
.tw { overflow-x: auto; margin: 0 0 22px; }
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.tw table { margin: 0; }
th, td {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--line);
  vertical-align: top;
}
th, thead th { background: var(--bg2); font-weight: 600; }
thead th { white-space: nowrap; }
/* Two-column tables of figures: the figure on the right, in tabular digits. */
.facts td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Page furniture ------------------------------------------------------ */
.nearby {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.nearby a { text-decoration: none; font-weight: 600; }
.nearby a:hover { text-decoration: underline; }
.foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.banner {
  padding: 16px 18px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 24px;
}
.banner p:last-child { margin-bottom: 0; }

/* --- Narrow --------------------------------------------------------------
   Under 850px the bar's menu carries the way to every page, as it does on
   nums.world, so the sidebar goes rather than becoming a second menu above
   the article. The cookbook's own index lists its examples. */
@media (max-width: 850px) {
  .frame { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 28px; }
  .side { display: none; }
  .nearby { flex-direction: column; gap: 10px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 26px; }
  h2 { font-size: 19px; }
}

/* --- Sign-in, sign-up and key pages -------------------------------------- */
.oauth { margin: 22px 0 10px; }
.oauth-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.oauth-button:hover { background: var(--ink); color: var(--bg); }
.oauth-note { font-size: 15px; margin: 0 0 22px; }
.oauth-or {
  font-size: 15px;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
form#signup p { margin: 0 0 16px; }
form#signup label { font-weight: 500; }
form#signup small { font-weight: 400; }
input[type=text], input[type=email] {
  width: 100%;
  max-width: 420px;
  padding: 7px 9px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input[type=text]:focus, input[type=email]:focus { outline: none; border-color: var(--ink); }
button {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
}
button:hover:not([disabled]) { background: #333333; }
button[disabled] { opacity: .55; cursor: default; }
/* Off-screen rather than hidden: it is the field only a robot fills in. */
.field-note { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#notice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
/* The key itself. Shown once, so it has to be selectable and unwrapped. */
pre.key { font-size: 1rem; word-break: break-all; white-space: pre-wrap; }
.doc pre { line-height: 1.6; }
@media (max-width: 640px) {
  /* A path or a code in a table cell stays one piece; the table scrolls. */
  p code, li code { white-space: normal; overflow-wrap: anywhere; }
  td code { white-space: nowrap; }
}