/*
 * Galaxy ID — documentation site.
 *
 * Same specification as the Keycloak theme: concept/dna/galaxy_id_dna_2.png.
 * The tokens below are that document's §03 colour system and §05 radii, so the
 * docs and the sign-in pages read as one product rather than two projects.
 */
@import url("montserrat.css");

:root{
  --blue:#0B3D91; --sky:#0EA5FF; --teal:#00C2AB;
  --green:#34C759; --orange:#F5A623; --red:#FF4D4F;
  --ink:#16325C; --ink2:#5B6B88; --ink3:#93A1B8;
  --bg:#FFFFFF; --panel:#F4F8FF; --line:#D9E3F0; --code:#F4F8FF;
  --note-bg:#F4F8FF; --note-line:#D9E3F0; --note-ink:#16325C;
  --accent:var(--blue);
  --r-lg:20px; --r-md:14px; --r-sm:12px;
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* Deep navy, not neutral grey — the brand does not go monochrome at night. */
    --ink:#E6ECF7; --ink2:#A9B7D0; --ink3:#7A8AA8;
    --bg:#0A142B; --panel:#101D3C; --line:#1E2F55; --code:#101D3C;
    --note-bg:#101D3C; --note-line:#1E2F55; --note-ink:#D7E2F5;
    --accent:#6FB6FF;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:400 15px/1.7 var(--font);
  background:var(--bg);color:var(--ink2);
  -webkit-font-smoothing:antialiased;
}
.shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}

/* nav ---------------------------------------------------------------------- */
nav{
  background:var(--panel);border-right:1px solid var(--line);
  padding:26px 20px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
nav .brand{display:inline-block;margin:0 0 4px;line-height:0}
nav .brand img{height:24px;width:auto;display:block}
@media (prefers-color-scheme:dark){
  /* The wordmark is dark blue on transparent and has no light variant. §04 of
     the brand spec forbids adding effects to it, so it gets the white ground
     it was drawn for rather than a filter. */
  :root:not([data-theme="light"]) nav .brand{
    background:#fff;padding:9px 13px;border-radius:12px;
  }
}
nav .sub{font-size:11.5px;color:var(--ink3);margin:8px 0 18px}
nav h4{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);
  margin:22px 0 7px;font-weight:700;
}
nav a{
  display:block;padding:7px 11px;margin:0 -11px;border-radius:10px;
  color:var(--ink2);text-decoration:none;font-size:13.5px;font-weight:500;
}
nav a:hover{background:rgba(11,61,145,.07);color:var(--ink)}
nav a[aria-current="page"]{background:var(--blue);color:#fff;font-weight:600}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) nav a:hover{background:rgba(111,182,255,.12)}
  :root:not([data-theme="light"]) nav a[aria-current="page"]{background:#1B3D7A}
}

/* content ------------------------------------------------------------------ */
main{padding:40px 48px 80px;max-width:960px;min-width:0}
article{min-width:0}
h1{font:700 30px/1.25 var(--font);color:var(--blue);margin:0 0 8px;letter-spacing:-.02em}
h2{font:700 21px/1.3 var(--font);color:var(--blue);
  margin:38px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
h3{font:600 16px/1.4 var(--font);color:var(--ink);margin:24px 0 8px}
h4{font:600 14px/1.4 var(--font);color:var(--ink);margin:18px 0 6px}
p,li{color:var(--ink2)}
li{margin:3px 0}
strong{color:var(--ink);font-weight:600}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:30px 0}

blockquote{
  margin:20px 0;padding:14px 18px;border-radius:var(--r-md);
  background:var(--note-bg);border:1px solid var(--note-line);
  border-left:3px solid var(--sky);color:var(--note-ink);
}
blockquote p{color:inherit;margin:6px 0}
blockquote p:first-child{margin-top:0}
blockquote p:last-child{margin-bottom:0}
blockquote strong{color:inherit}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--code);padding:2px 6px;border-radius:6px;color:var(--ink);
  border:1px solid var(--line);
}
pre{background:var(--code);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;overflow-x:auto}
pre code{background:none;padding:0;border:0;font-size:12.5px;line-height:1.6}

.tw{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--r-md)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
.tw table{border:0}
th,td{border-bottom:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
th{background:var(--panel);font-weight:600;color:var(--ink);white-space:nowrap;
  font-size:12.5px;letter-spacing:.01em}
tr:last-child td{border-bottom:0}
td{color:var(--ink2)}
td strong{color:var(--ink)}

.mermaid{
  margin:22px 0;padding:18px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-md);overflow-x:auto;
}
.docfoot{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink3)}
.lang{
  display:inline-block;margin:0 0 6px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  text-decoration:none;font-size:12.5px;font-weight:600;
}
.lang:hover{border-color:var(--sky);color:var(--accent);text-decoration:none}
.notice{
  margin:0 0 24px;padding:12px 16px;border-radius:var(--r-md);
  background:var(--note-bg);border:1px solid var(--note-line);
  border-left:3px solid var(--orange);color:var(--note-ink);font-size:13px;
}
.hint{font-size:11px;color:var(--ink3);font-weight:600}
td.muted{color:var(--ink3);font-size:12.5px}

@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  nav{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  main{padding:26px 18px 60px}
  h1{font-size:25px}
}