/* Falling purple-hexagon "matrix rain" background canvas (script/hexRain.js).
   Fixed + negative z-index: per CSS painting order, normal in-flow content
   (every card on the page) always paints above a negative-z-index
   positioned element, so this sits above the plain black background but
   behind every card with no z-index changes needed anywhere else.
   Two selectors on purpose: hexRain.js is now kept in sync from
   cdn.aytict.fi's aythexrain.js (see usr/share/aytict-fi/sync-cdn-assets.sh
   in packaging/deb), which names its canvas #ayt-hexrain-canvas instead of
   #hex-rain-bg. Keeping both here means this rule applies correctly
   whether the locally-deployed copy is still the original file or has
   already been synced from the CDN. */
#hex-rain-bg, #ayt-hexrain-canvas{
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  pointer-events:none;
}
html{
    margin:0;
    display:block;
    width:100vw;
    height:100vh;
    background-color: black;
    /* There used to be an inline data:image/png background here. Its
       base64 carried a stray '>' 836 characters in, so the whole URL was
       invalid: every browser on every page of the site refused it with
       net::ERR_INVALID_URL and fell back to the plain black background-color
       set above. It has been that way since the payload was first committed,
       so nothing on the site has ever displayed it, and the truncated
       bytes cannot be recovered. Removed, so the pages stop logging a
       console error for an image that was never going to appear. To put
       a centred watermark back, use the real asset:
           background-image: url('/img/hex-logo.png');
       (the falling hexagons are drawn by script/hexRain.js, not by this
       rule, so removing it leaves the animated background untouched). */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-attachment: fixed;
  }
  body{
    margin:auto;
    margin-top:1.5%;
    width:95%;
    height:95%;
    display:block;
    font-family:sans-serif;
  }
p{
  color:rgba(255,255,255,1.0);
}
/* Inline `code` - the previous rule forced display:block + a fixed 300px
   height onto every <code>, inline spans included, which only ever went
   unnoticed because no markdown doc had a fenced code block yet. */
code{
  color:#DDDDDD;
  background-color:rgba(15, 0, 20, 0.85);
  padding:2px 6px;
  border-radius:4px;
  font-family:monospace;
}
/* Fenced code blocks: a bit darker than the rgba(125,0,125,0.3) card
   background behind them, with its own scroll for long lines instead of
   overflowing the page. */
pre{
  background-color:rgba(15, 0, 20, 0.85);
  padding:14px;
  border-radius:10px;
  overflow-x:auto;
  margin:12px 0;
}
pre code{
  background:none;
  padding:0;
  border-radius:0;
  display:block;
  white-space:pre;
}
/* Syntax highlighting tokens produced by mdLoad.js's fenced-code
   highlighter (script/mdLoad.js). */
.tok-keyword{ color:#FF79C6; }              /* class, if, return, public, ... */
.tok-type{ color:#8BE9FD; }                 /* int, string, boolean, ... */
.tok-class{ color:#FFB86C; font-weight:bold; } /* PascalCase identifiers */
.tok-function{ color:#B48CFF; }             /* identifier(...) calls */
.tok-string{ color:#F1FA8C; }
.tok-number{ color:#BD93F9; }
.tok-comment{ color:#8A8A9A; font-style:italic; }
/* Tables rendered by mdLoad.js's parser (class="md-table") - shared by
   every page that uses it (index.php, docs.php), so a table looks the
   same wherever it's rendered rather than only where someone happened to
   copy-paste styling for it. */
.md-table{
  border-collapse:collapse;
  margin:12px 0;
  width:auto;
  max-width:100%;
}
.md-table th, .md-table td{
  border:1px solid rgba(255,0,255,0.5);
  padding:6px 12px;
  text-align:left;
  color:#DDDDDD;
}
.md-table th{
  background-color:rgba(80,0,80,0.5);
  color:#AAAAAA;
  font-weight:bold;
}
a{
  text-decoration:none;
  color:rgba(255,255,255,1.0);
}
a:hover{
  text-decoration:underline;
  color:rgba(200,0,200,0.8);
}
.container{
  grid-column:1;
  margin:auto;
  width:95%;
  height:95%;
  padding:10px;
  border:2px solid rgba(255, 0, 255, 1.0);
  border-radius:10px;
  background-color:rgba(125, 0, 125, 0.3);
}
/* The Latest Posts / doc-nav tabs / About Us "card" in the middle .main
   grid row. min-height:0 overrides the grid item's default min-height:auto
   (which otherwise lets it grow to fit its content no matter how tall,
   ignoring the 50% row track) so overflow-y actually clips at the box's own
   border instead of the content spilling past it into the footer below. */
#content-box{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Rendered markdown (mdLoad.js output inside #about_us). Headings and
   most text tags had no color rule at all before this - only <p> was
   explicitly set to white, so <h1>-<h6> and <li> inherited the browser's
   default black and were unreadable against this page's dark background
   (confirmed via getComputedStyle, not just by eye). */
#about_us h1, #about_us h2, #about_us h3,
#about_us h4, #about_us h5, #about_us h6{
  color:#AAAAAA;
}
#about_us p, #about_us li, #about_us td, #about_us th, #about_us blockquote{
  color:#DDDDDD;
}
.doc-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:15px;
}
.doc-nav-link{
  text-decoration:none;
  font-family:sans-serif;
  font-size:14px;
  color:white;
  padding:8px 14px;
  border:1px solid rgba(255,0,255,0.5);
  border-radius:8px;
  background-color:rgba(80,0,80,0.5);
  transition:background-color 0.2s, border-color 0.2s;
}
.doc-nav-link:hover{
  text-decoration:none;
  color:white;
  border-color:rgba(255,0,255,1.0);
  background-color:rgba(125,0,125,0.5);
}
.doc-nav-link.active{
  color:white;
  border-color:rgba(255,0,255,1.0);
  background-color:rgba(255,0,255,0.3);
  font-weight:bold;
}

/* --- Top-left hamburger menu + slide-out side menu --- */
.menu-toggle{
  position:fixed;
  top:15px;
  left:15px;
  z-index:1001;
  width:44px;
  height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  border:1px solid rgba(255,0,255,0.6);
  border-radius:8px;
  background-color:rgba(40,0,40,0.85);
  cursor:pointer;
}
.menu-toggle:hover{
  border-color:rgba(255,0,255,1.0);
  background-color:rgba(80,0,80,0.9);
}
.menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  background-color:white;
  border-radius:2px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2){
  opacity:0;
}
.menu-toggle.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
.side-menu-overlay{
  position:fixed;
  inset:0;
  background-color:rgba(0,0,0,0.55);
  z-index:999;
}
.side-menu{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:280px;
  max-width:80vw;
  overflow-y:auto;
  padding:70px 20px 20px 20px;
  background-color:rgba(30,0,30,0.97);
  border-right:2px solid rgba(255,0,255,1.0);
  box-shadow:2px 0 16px rgba(0,0,0,0.4);
  transform:translateX(-100%);
  transition:transform 0.25s ease;
  z-index:1000;
}
.side-menu.open{
  transform:translateX(0);
}
.menu-close{
  position:absolute;
  top:15px;
  right:15px;
  width:32px;
  height:32px;
  border:1px solid rgba(255,0,255,0.6);
  border-radius:6px;
  background-color:transparent;
  color:white;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.menu-close:hover{
  border-color:rgba(255,0,255,1.0);
  color:rgba(255,0,255,1.0);
}
.side-menu-list{
  list-style:none;
  margin:20px 0 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.side-menu-link{
  display:block;
  text-decoration:none;
  font-family:sans-serif;
  font-size:15px;
  color:white;
  padding:10px 12px;
  border:1px solid rgba(255,0,255,0.35);
  border-radius:8px;
  background-color:rgba(80,0,80,0.4);
  transition:background-color 0.2s, border-color 0.2s;
}
.side-menu-link:hover{
  text-decoration:none;
  color:white;
  border-color:rgba(255,0,255,1.0);
  background-color:rgba(125,0,125,0.6);
}
.side-menu-link.active{
  border-color:rgba(255,0,255,1.0);
  background-color:rgba(255,0,255,0.3);
  font-weight:bold;
}
.main{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns: 100%;
  grid-template-rows: 20% 50% 30%;
  padding-top: 10px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-color: rgba(0, 0, 0, 0.15);
}
#header{
  grid-column:1;
  grid-row:1;
  margin:auto;
  padding-bottom:20px;
  width:95%;
  height:100px;
  max-height:100px;
  display:grid;
  grid-template-columns:30% 40% 20% 10%;
  grid-template-rows:10px 80px 10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
#r1c1{
  max-height:50px;
  grid-column:1;
  grid-row:1;
}
#r1c2{
  max-height:50px;
  grid-column:2;
  grid-row:1;
}
#r1c3{
  max-height:50px;
  grid-column:3;
  grid-row:1;
}
#sign{
  margin-top:auto;
  /*margin-bottom:;*/
  text-align:center;
  align-content:center;
  font-family:sans-serif;
  color: white;
  vertical-align:middle;
  min-height:80px;
  max-height:80px;
  grid-column:1;
  grid-row:2;
}
#center{
  margin-top:auto;
  margin-bottom:auto;
  text-align:center;
  font-family:sans-serif;
  color:white;
  min-height:80px;
  max-height:80px;
  grid-column:2;
  grid-row:2;
}
#navi{
  margin-top:auto;
  margin-bottom:auto;
  min-height:60px;
  max-height:60px;
  text-align:center;
  vertical-align:middle;
  font-family:sans-serif;
  color:white;
  grid-column:4;
  grid-row:1;
}
.list{
  padding-top:0px;
  margin:0;
  vertical-align:middle;
  text-align:left;
}
.link{
  text-decoration:none;
  font-size:16px;
  color:white;
}
#link{
  text-decoration: none;
  font-size:16px;
  color: #FFFFFF;
}
#logo_img{
  max-height:90px;
  max-width:100%;
  /*
  margin-left:10%;
  float:left;
  */
  border:0px solid rgba(255,0,255,1.0);
  border-radius:10px;
}
#logo_img:hover{
  max-height:90px;
  max-width:100%;
  border:1px solid rgba(255,0,255,1.0);
  border-radius:10px;
}
#logo_link{
  grid-column:2;
}
#vimrc-container:hover{
  color:rgba(255,0,255,1.0);
}
#vim-colorscheme-purple-container:hover{
  color:rgba(255,0,255,1.0);
}
#logo{
  font-size:30px;
  font-family:sans-serif;
  text-decoration:none;
  letter-spacing:6px;
}
#logo:hover{
  font-size:30px;
  text-decoration:none;
  font-family:sans-serif;
  letter-spacing:6px;
  color:rgba(255,0,255,1.0);
}
#content{
  margin:auto;
  margin-top:20px;
  padding:20px;
  width: 90%;
  height: 80%;
  max-height:80%;
  display: grid;
  grid-template-columns: 30% 40% 30%;
  grid-template-rows: 20px 60px 20px;
  color: rgba(255, 255, 255, 1.0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#statement{
  grid-column: 2;
  grid-row: 2;
  text-align: center;
  font-size: 24px;
  font-family: sans-serif;
}
#current-project{
  grid-column:2;
  grid-row:1;
  text-decoration:underline;
  text-align:center;
  font-size:20px;
  font-family:sans-serif;
}
.footer{
  grid-column:1;
  grid-row:3;
  margin:auto;
  margin-top:20px;
  padding:10px;
  width:95%;
  height:auto;
  max-height:auto;
  display:block;
  font-family:sans-serif;
  color: rgba(255,255,255,1.0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.links{
  /* Three equal-width columns, always - Contact / Github / LinkedIn are
     each their own same-size box, side by side on every screen size,
     never stacking. */
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:15px;
  width:100%;
  max-width:940px;
  margin:auto;
}
.github{
  margin:0;
  width:100%;
  max-width:450px;
  height:auto;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:10px 8px;
}
/* .contact-table also carries the .github class in the markup, so it
   already gets the same box size/table-layout/border-spacing as the
   Github/LinkedIn table - the grid column above, not an independent
   max-width, is what actually controls each one's rendered width. */
.contact-cell{
  padding:10px 14px;
  box-sizing:border-box;
  vertical-align:middle;
  text-align:center;
  border:1px solid rgba(255,0,255,1.0);
  border-radius:10px;
}
.contact-name{
  margin:0;
  font-weight:bold;
}
.contact-email{
  /* Long, unbroken email addresses have no natural wrap point - without
     this they'd force the card wider than its box on narrow screens. */
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:15px;
}
.gh_tr{
  width:100%;
  height:auto;
  border:1px solid rgba(255,0,255,0.5);
  border-radius:10px;
}
.gh_td1{
  width:100%;
  height:50px;
  max-height:50px;
  padding:10px;
  box-sizing:border-box;
  vertical-align:middle;
  border:1px solid rgba(255,0,255,1.0);
  border-radius:10px;
}
.li_td1{
  width:100%;
  height:50px;
  max-height:50px;
  padding:10px;
  box-sizing:border-box;
  vertical-align:middle;
  border:1px solid rgba(255,0,255,1.0);
  border-radius:10px;
}
.gh_td2{
  width:100%;
  height:auto;
  padding:6px;
  box-sizing:border-box;
  vertical-align:middle;
  /* Icon + link as a wrapping flex row: on a wide table they sit side by
     side as before, but when the column is squeezed narrow (e.g. next to
     the equal-width contact card on a phone) the link text wraps onto its
     own line under the icon instead of being clipped by overflow:hidden. */
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(255,0,255,1.0);
  border-radius:10px;
  overflow:hidden;
}
.li_td2{
  width:100%;
  height:auto;
  padding:6px;
  box-sizing:border-box;
  vertical-align:middle;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(255,0,255,1.0);
  border-radius:10px;
  overflow:hidden;
}
#git{
  margin:auto;
  width:200px;
  height:50px;
  display:grid;
  grid-template-columns:50px 50px;
  grid-template-rows:50px;
}
.git-img{
  grid-column:1;
  margin:auto;
  width:50px;
  height:50px;
  max-width:50px;
  max-height:50px;
  vertical-align:middle;
  border:1px solid rgba(155,0,155,1.0);
  border-radius:10px;
}
.git-img:hover{
  border:1px solid rgba(255,0,255,1.0);
  border-radius:10px;
}
#git-link{
  grid-column:2;
  grid-row:1;
  margin:auto;
  text-decoration:none;
  vertical-align:middle;
  padding:2px;
  /* Scales down on narrow columns (e.g. beside the equal-width contact
     card on a phone) instead of relying on a fixed 18px that no longer
     fits and would otherwise get clipped. */
  font-size:clamp(12px, 4vw, 18px);
  color:white;
  max-width:100%;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#git-link:hover{
  text-decoration:underline;
  font-size:clamp(12px, 4vw, 18px);
  color:rgba(255,0,255,1.0);
}
#li{
  margin:auto;
  width:200px;
  height:50px;
  display:grid;
  grid-template-columns:50px 50px;
  grid-template-rows:50px;
}
#li-img{
  grid-column:1;
  margin:auto;
  width:50px;
  height:50px;
  max-width:50px;
  max-height:50px;
  vertical-align:middle;
  border:1px solid rgba(155,0,155,1.0);
  border-radius:10px;
}
#li-img:hover{
  border:1px solid rgba(255,0,255,1.0);
  border-radius:10px;
}
#li-link{
  grid-column:2;
  grid-row:1;
  margin:auto;
  text-decoration:none;
  vertical-align:middle;
  padding:2px;
  /* Scales down on narrow columns (e.g. beside the equal-width contact
     card on a phone) instead of relying on a fixed 18px that no longer
     fits and would otherwise get clipped. */
  font-size:clamp(12px, 4vw, 18px);
  color:white;
  max-width:100%;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#li-link:hover{
  text-decoration:underline;
  font-size:clamp(12px, 4vw, 18px);
  color:rgba(255,0,255,1.0);
}

/* --- login.php: same card/border language as .container, standalone
   layout since a single centered login card doesn't fit .main's
   header/content/footer 3-row grid. --- */
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:20px;
}
.login-card{
  width:100%;
  max-width:380px;
  padding:30px;
  box-sizing:border-box;
  border:2px solid rgba(255,0,255,1.0);
  border-radius:10px;
  background-color:rgba(125,0,125,0.3);
  text-align:center;
}
.login-title{
  color:#AAAAAA;
  margin-top:0;
  font-family:sans-serif;
}
.login-error{
  color:#ffb3b3;
  background-color:rgba(200,0,0,0.2);
  border:1px solid rgba(255,0,0,0.5);
  border-radius:6px;
  padding:8px 12px;
  font-size:14px;
  text-align:left;
}
.login-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
}
.login-form label{
  color:#DDDDDD;
  font-size:14px;
}
.login-form input{
  padding:10px;
  border-radius:6px;
  border:1px solid rgba(255,0,255,0.5);
  background-color:rgba(0,0,0,0.35);
  color:#fff;
  font-size:15px;
  box-sizing:border-box;
  width:100%;
}
.login-form input:focus{
  outline:none;
  border-color:rgba(255,0,255,1.0);
}
.login-form button{
  margin-top:6px;
  padding:10px;
  border:1px solid rgba(255,0,255,1.0);
  border-radius:6px;
  background-color:rgba(80,0,80,0.6);
  color:#fff;
  font-size:15px;
  cursor:pointer;
  transition:background-color 0.2s;
}
.login-form button:hover{
  background-color:rgba(125,0,125,0.7);
}
.login-back{
  margin-top:18px;
  margin-bottom:0;
  font-size:14px;
}

/* AytSSO is the way in, so its button is the page's primary action and the
   local form - where the server-side escape hatch has been turned on at all -
   is visibly the secondary one. */
.login-subtitle{
  color:#BBBBBB;
  font-size:14px;
  margin-top:-8px;
}
.login-hint{
  color:#AAAAAA;
  font-size:14px;
  text-align:left;
  margin-bottom:18px;
}
.login-sso{
  display:block;
  padding:12px;
  border:1px solid rgba(255,0,255,1.0);
  border-radius:6px;
  background-color:rgba(125,0,125,0.55);
  color:#FFFFFF;
  font-size:15px;
  text-decoration:none;
  transition:background-color 0.2s;
}
.login-sso:hover,
.login-sso:focus{
  background-color:rgba(170,0,170,0.7);
  text-decoration:none;
}
.login-sep{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 12px;
  color:#9d8fb6;
  font-size:13px;
}
.login-sep::before,
.login-sep::after{
  content:"";
  flex:1;
  height:1px;
  background-color:rgba(255,0,255,0.3);
}

/* --- docs.php ---
   Moved out of docs.php's own inline <style> blocks and style="..."
   attributes: this site's CSP (security.php) has no 'unsafe-inline' for
   style-src either, not just script-src, so none of that CSS was ever
   actually being applied - confirmed via the browser's own CSP violation
   reports, not just by inspection. */
.docs-user-email{
  color:#fff;
  font-size:0.8em;
  margin-right:15px;
}
.docs-logout-link{
  color:#ffb3ff;
  text-decoration:none;
}
.cookie-dialog{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  margin:0 auto;
  width:100%;
  max-width:420px;
  background:rgba(40,0,40,0.98);
  color:#fff;
  border-radius:12px 12px 0 0;
  box-shadow:0 -2px 16px rgba(0,0,0,0.2);
  z-index:9999;
  padding:24px 18px 18px 18px;
  text-align:center;
  font-size:1.1em;
  display:none;
}
.cookie-dialog.show{
  display:block;
}
.cookie-dialog button{
  margin:12px 8px 0 8px;
  padding:8px 22px;
  border:none;
  border-radius:6px;
  font-size:1em;
  cursor:pointer;
  background:#AA00AA;
  color:#fff;
  transition:background 0.2s;
}
.cookie-dialog button.decline{
  background:#444;
}
.cookie-dialog button:hover{
  background:#ff00ff;
  color:#fff;
}
.cookie-dialog button.decline:hover{
  background:#c00;
}
/* Same card language as index.php's .container (border/background/
   radius), split into a nav column and a content column rather than a
   second, differently-colored theme. Heading/text/code colors come from
   the shared #about_us/.md-table/pre/.tok-* rules above, not from
   anything here - docs.php's render target uses id="about_us" for
   exactly that reason. */
#docs-container{
  margin:auto;
  margin-top:2em;
  width:95%;
  max-width:900px;
  min-height:80vh;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2em;
  background:rgba(125,0,125,0.3);
  border:2px solid rgba(255,0,255,1.0);
  border-radius:10px;
  box-shadow:0 2px 12px #0002;
}
#docs-nav{
  padding:20px 10px 10px 10px;
  min-height:100%;
}
#docs-nav h3{
  margin-top:0;
  color:#AAAAAA;
  font-size:1.3em;
  letter-spacing:2px;
}
#docs-nav ul{
  list-style:none;
  padding:0;
  margin:0;
}
#docs-nav li{
  margin-bottom:0.5em;
}
#docs-nav a{
  display:block;
  color:#DDDDDD;
  text-decoration:none;
  font-size:1em;
  padding:6px 10px;
  border:1px solid rgba(255,0,255,0.35);
  border-radius:8px;
  transition:background 0.2s, border-color 0.2s;
}
#docs-nav a.active, #docs-nav a:hover{
  background:rgba(255,0,255,0.2);
  border-color:rgba(255,0,255,1.0);
  color:#fff;
  font-weight:bold;
}
#docs-content{
  padding:30px 20px 20px 20px;
  min-height:100%;
}
@media (max-width:700px){
  #docs-container{
    grid-template-columns:1fr;
    gap:0;
  }
  #docs-nav{
    min-height:auto;
  }
}

/* --- Admin single-page app (docs.php) ------------------------------------
   The shell reuses #docs-container / #docs-nav / #docs-content above; these
   rules cover what the modules render into it. Values shown here come from
   the public assessment form, so they are set as text by the JS, never as
   markup - see script/admin/app.js. */

.admin-nav-list{
  list-style:none;
  padding:0;
  margin:0 0 0.5em;
}
.admin-nav-list li{
  margin-bottom:0.5em;
}
.admin-nav-list a{
  display:block;
  color:#DDDDDD;
  text-decoration:none;
  font-size:0.95em;
  padding:6px 10px;
  border:1px solid rgba(255,0,255,0.35);
  border-radius:8px;
  word-break:break-all;
  transition:background 0.2s, border-color 0.2s;
}
.admin-nav-list a:hover,
.admin-nav-list a.active{
  background:rgba(255,0,255,0.2);
  border-color:rgba(255,0,255,1.0);
  color:#fff;
  text-decoration:none;
}
.admin-nav-list a.active{
  font-weight:bold;
}

#docs-content h2{
  color:#DDDDDD;
  margin-top:0;
}
#docs-content h3{
  color:#CCCCCC;
  margin-top:1.6em;
}

.admin-loading,
.admin-empty{
  color:#AAAAAA;
  font-style:italic;
}
.admin-hint{
  color:#BBBBBB;
  font-size:0.9em;
  line-height:1.6;
}
.admin-hint a{
  color:#DDDDDD;
}
.admin-error{
  color:#FFD9D9;
  background-color:rgba(120,20,20,0.55);
  border-left:3px solid #FF6B6B;
  border-radius:0 6px 6px 0;
  padding:10px 14px;
}
.admin-warn{
  color:#FFF0CC;
  background-color:rgba(110,80,0,0.45);
  border-left:3px solid #F0C04A;
  border-radius:0 6px 6px 0;
  padding:10px 14px;
  font-size:0.9em;
  line-height:1.6;
}

.admin-notice{
  margin:0 0 1.2em;
  padding:10px 14px;
  border-radius:0 6px 6px 0;
  font-size:0.95em;
}
.admin-notice-ok{
  color:#DDF7E8;
  background-color:rgba(20,90,55,0.5);
  border-left:3px solid #4AD08A;
}
.admin-notice-error{
  color:#FFE3E3;
  background-color:rgba(120,20,20,0.55);
  border-left:3px solid #FF6B6B;
}

/* Table cell behaviour. .md-table supplies the borders and header colours. */
.admin-table{width:100%;}
.admin-nowrap{white-space:nowrap;font-variant-numeric:tabular-nums;color:#CCCCCC;}
.admin-break{word-break:break-all;}
.admin-mono{font-family:monospace;font-size:0.9em;word-break:break-all;}
.admin-kv tbody th[scope="row"]{
  text-align:left;
  white-space:nowrap;
  color:#AAAAAA;
  background-color:rgba(80,0,80,0.25);
  width:170px;
}

.admin-badge{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  font-size:0.75em;
  font-weight:bold;
  color:#1A001A;
  background-color:#AAAAAA;
  white-space:nowrap;
}
.admin-badge-pending{background-color:#F0C04A;}
.admin-badge-running{background-color:rgba(255,0,255,1.0);color:#FFFFFF;}
.admin-badge-completed{background-color:#4AD08A;}
.admin-badge-failed{background-color:#FF6B6B;}

.admin-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:12px;
  margin:1em 0 1.5em;
}
.admin-tile{
  padding:14px;
  text-align:center;
  background-color:rgba(15,0,20,0.6);
  border:1px solid rgba(255,0,255,0.18);
  border-top:4px solid #AAAAAA;
  border-radius:10px;
}
.admin-tile-count{
  display:block;
  font-size:1.8em;
  font-weight:bold;
  color:#FFFFFF;
  font-variant-numeric:tabular-nums;
}
.admin-tile-label{
  display:block;
  margin-top:4px;
  font-size:0.75em;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#AAAAAA;
}
.admin-tile-pending{border-top-color:#F0C04A;}
.admin-tile-running{border-top-color:rgba(255,0,255,1.0);}
.admin-tile-completed{border-top-color:#4AD08A;}
.admin-tile-failed{border-top-color:#FF6B6B;}

.admin-action{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.admin-action .admin-hint{
  flex:1 1 240px;
  margin:0;
}

.admin-health{
  list-style:none;
  margin:0;
  padding:0;
}
.admin-health li{
  position:relative;
  padding:10px 0 10px 26px;
  font-size:0.95em;
  line-height:1.55;
  color:#DDDDDD;
  border-top:1px solid rgba(255,0,255,0.12);
}
.admin-health li::before{
  position:absolute;
  left:2px;
  font-weight:bold;
}
.admin-health li.is-ok::before{content:"\2713";color:#4AD08A;}
.admin-health li.is-warn::before{content:"!";color:#F0C04A;}
.admin-health li.is-fail::before{content:"\2717";color:#FF6B6B;}
.admin-health li.is-fail{color:#FFD9D9;}

.admin-pager{
  display:flex;
  gap:1em;
  align-items:center;
  flex-wrap:wrap;
  margin-top:0.5em;
  font-size:0.9em;
}
.admin-pager a{
  color:#DDDDDD;
  padding:5px 10px;
  border:1px solid rgba(255,0,255,0.35);
  border-radius:8px;
}
.admin-pager a:hover{
  text-decoration:none;
  border-color:rgba(255,0,255,1.0);
  background:rgba(255,0,255,0.2);
  color:#fff;
}
.admin-pager span{color:#AAAAAA;}

/* Content editor. */
.cms-editor{
  width:100%;
  min-height:400px;
  padding:14px;
  font-family:monospace;
  font-size:0.9em;
  line-height:1.6;
  color:#DDDDDD;
  background-color:rgba(10,0,14,0.85);
  border:1px solid rgba(255,0,255,0.35);
  border-radius:8px;
  resize:vertical;
}
.cms-editor:focus{
  outline:none;
  border-color:rgba(255,0,255,1.0);
  box-shadow:0 0 0 3px rgba(255,0,255,0.18);
}
.cms-editor[disabled]{opacity:0.6;}
.cms-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:1em 0;
}
.cms-button{
  padding:9px 18px;
  font-family:inherit;
  font-size:0.95em;
  color:#DDDDDD;
  background-color:rgba(80,0,80,0.4);
  border:1px solid rgba(255,0,255,0.35);
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.cms-button:hover:not([disabled]){
  color:#FFFFFF;
  background-color:rgba(255,0,255,0.2);
  border-color:rgba(255,0,255,1.0);
  text-decoration:none;
}
.cms-button[disabled]{opacity:0.45;cursor:not-allowed;}
.cms-back{color:#DDDDDD;}

@media (max-width:700px){
  .admin-action{flex-direction:column;align-items:flex-start;}
  .admin-table{display:block;overflow-x:auto;}
  .admin-nowrap{white-space:normal;}
  .admin-kv tbody th[scope="row"]{white-space:normal;width:auto;}
}

/* --- Language switcher (FI/EN), top right -------------------------------
   Mirrors .menu-toggle at top left, so the two fixed controls sit as a
   pair. It is a link, not a button with a script behind it: the site's CSP
   has no 'unsafe-inline', and a plain link also means the switcher works
   with JavaScript off and leaves no wrong-language flash - the server has
   already decided by the time the page is sent. */

.lang-switch{
  position:fixed;
  top:15px;
  right:15px;
  z-index:1001;
  display:flex;
  align-items:center;
  gap:2px;
  height:44px;
  padding:0 12px;
  border:1px solid rgba(255,0,255,0.6);
  border-radius:8px;
  background-color:rgba(40,0,40,0.85);
  font-size:0.95em;
  letter-spacing:0.05em;
  line-height:1;
}
.lang-switch:hover{
  border-color:rgba(255,0,255,1.0);
  background-color:rgba(80,0,80,0.9);
}
.lang-switch-current{
  color:#FFFFFF;
  font-weight:bold;
}
.lang-switch-current::after{
  content:"/";
  margin:0 4px;
  color:rgba(255,255,255,0.45);
  font-weight:normal;
}
.lang-switch-other{
  color:rgba(255,255,255,0.65);
  text-decoration:none;
}
.lang-switch-other:hover,
.lang-switch-other:focus{
  color:#FFFFFF;
  text-decoration:underline;
}

/* The admin header's own nav sits top right as well, so give it room to
   clear the switcher rather than letting the two overlap. */
#navi{
  margin-right:96px;
}

@media (max-width: 600px){
  .lang-switch{
    height:38px;
    padding:0 9px;
    font-size:0.85em;
  }
  #navi{
    margin-right:0;
  }
}

/* Which way this session came in. AytSSO is the intended one, so a local
   account is the state worth noticing rather than the other way round. */
.docs-auth-badge{
  display:inline-block;
  margin:0 4px;
  padding:1px 7px;
  border:1px solid rgba(120,255,160,0.5);
  border-radius:10px;
  background-color:rgba(0,90,40,0.35);
  color:#b6f2cd;
  font-size:11px;
  letter-spacing:0.04em;
  vertical-align:middle;
}
.docs-auth-badge.is-local{
  border-color:rgba(255,200,90,0.55);
  background-color:rgba(110,70,0,0.35);
  color:#ffdb9a;
}

/* The sign-in page's "AytSSO is not configured here" notice. It has to read
   as a state of the server rather than as a failed password, which is what
   an unstyled paragraph above a form gets mistaken for. */
.login-ref{
  display:block;
  margin-top:6px;
  font-family:monospace;
  font-size:12px;
  opacity:0.75;
}

.login-hint-warn{
  border:1px solid rgba(255,200,90,0.5);
  border-radius:6px;
  background-color:rgba(110,70,0,0.3);
  color:#ffdb9a;
  padding:10px 12px;
  font-size:13px;
}