/* Ohjesivujen tyyli. Sama merikarttojen kieli kuin muussa työkalussa:
   syvä karttasininen pohja, paperinvaalea teksti, magenta korostuksena. */
:root{
  --deep:#08161f;
  --mid:#0e2331;
  --raise:#143142;
  --line:#1e4155;
  --line-soft:#16323f;
  --paper:#ece4d2;
  --dim:#8ba4b1;
  --dimmer:#5d7683;
  --beacon:#e0218a;
  --s3:#3faa5a; --s4:#e5c04b; --s5:#e8622c;
  --fd:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --fb:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--deep);color:var(--paper);
  font-family:var(--fb);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.doc{max-width:820px;margin:0 auto;padding:32px 24px 96px}

.docnav{margin-bottom:28px;font-size:.9rem}
.docnav a{color:var(--dim);text-decoration:none}
.docnav a:hover{color:var(--beacon)}

h1,h2,h3,h4{font-family:var(--fd);line-height:1.25;margin:0}
h1{font-size:1.95rem;margin-bottom:8px;letter-spacing:-.02em}
h2{
  font-size:1.25rem;margin:44px 0 14px;padding-bottom:8px;
  border-bottom:1px solid var(--line-soft);
}
h3{font-size:1.05rem;margin:28px 0 10px;color:var(--paper)}
h4{font-size:.95rem;margin:22px 0 8px;color:var(--dim)}

p{margin:0 0 14px}
a{color:var(--beacon);text-decoration:none}
a:hover{text-decoration:underline}
strong{color:#fff;font-weight:600}

ul,ol{margin:0 0 16px;padding-left:24px}
li{margin:7px 0}
li::marker{color:var(--dimmer)}

code{
  font-family:var(--fm);font-size:.87em;
  background:var(--raise);border:1px solid var(--line-soft);
  border-radius:4px;padding:1px 6px;color:var(--paper);
  overflow-wrap:break-word;
}
pre{
  background:var(--mid);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;margin:0 0 18px;overflow-x:auto;
}
pre code{background:none;border:0;padding:0;font-size:.85rem;line-height:1.55}

blockquote{
  margin:0 0 18px;padding:12px 16px;
  background:var(--mid);border-left:3px solid var(--beacon);
  border-radius:0 8px 8px 0;color:var(--dim);
}
blockquote p:last-child{margin-bottom:0}

hr{border:0;border-top:1px solid var(--line-soft);margin:36px 0}

/* Leveät taulukot vierivät omassa laatikossaan, ei koko sivu. */
.tablewrap{overflow-x:auto;margin:0 0 20px}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{
  text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line-soft);vertical-align:top;
}
th{
  font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dimmer);font-weight:500;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}

@media (max-width:640px){
  .doc{padding:22px 16px 72px}
  h1{font-size:1.6rem}
  h2{font-size:1.12rem}
}