/* H68k-CMS — light-blue/dark-blue IT-tech text theme.
   Fork of MAILBX1-CMS. Copyright (c) MAILBX1-CMS. Copyright (c) H68k-CMS.
   BSD-3-Clause. AS-IS, no warranty of any kind. */
*{box-sizing:border-box}

/* default knobs — tune here:
   --fw  font scale (1.35 = +35% per default)
   --ww  text-window width scale (1.35 = +35% per default)
   --mtx background plain-text opacity (0/1 matrix field) */
:root{
  --fw:1.35;
  --ww:1.35;
  --mtx:.07;
  --bg:#071c3f;
  --panel:rgba(11,38,80,.92);
  --line:#2e5ea8;
  --text:#dcecff;
  --dim:#9db8dc;
  --accent:#6db8ff;
  --accent2:#9ed2ff;
  --btn:#8ec9ff;
  --code:#0b2b55;
}
html{font-size:calc(15px * var(--fw))}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 12% -10%,#123566 0%,transparent 55%),
    radial-gradient(ellipse 80% 55% at 92% 112%,#0d2a58 0%,transparent 55%),
    linear-gradient(180deg,#08204a 0%,#071c3f 55%,#05142e 100%);
  font-family:"Cascadia Mono",ui-monospace,"DejaVu Sans Mono","Courier New",monospace;
  line-height:1.55;
  font-size:1.215rem;
}
.wrap{position:relative;z-index:1;max-width:calc(64rem * var(--ww));margin:0 auto;padding:0 1rem 2rem}
a{color:var(--accent2);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
h1,h2,h3{color:#eaf4ff;line-height:1.25;font-weight:700}
h1{font-size:1.35rem;border-bottom:1px solid var(--line);padding-bottom:.35rem}
h2{font-size:1.3rem;margin-top:1.8rem}
h3{font-size:1.25rem}
.body h2:first-child{margin-top:0}
p,ul,ol{margin:.6rem 0}
code,pre{background:var(--code);border:1px solid var(--line);border-radius:2px}
code{padding:0 .25rem}
pre{padding:.6rem;overflow:auto}
blockquote{margin:.6rem 0;padding:.2rem .8rem;border-left:3px solid var(--accent)}
hr{border:0;border-top:1px solid var(--line)}
img{max-width:100%;height:auto}

/* plain-text matrix background: abstract 0/1 digit field (real text),
   decorative and low contrast, drifting slowly and endless — never steals
   focus or clicks */
.mtx{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.mtx-flow{
  margin:0;padding:.4rem .8rem;border:0;background:transparent;border-radius:0;
  color:var(--accent);opacity:var(--mtx);
  font-family:inherit;font-size:.82rem;line-height:1.5;letter-spacing:.02em;
  white-space:pre-wrap;word-break:break-word;
  animation:mtx-drift 300s linear infinite;
}
@keyframes mtx-drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.mtx-flow{animation:none}}

/* header / nav */
.hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;padding:.9rem 0 .7rem;border-bottom:1px solid var(--line)}
.brand{color:var(--btn);font-weight:700;letter-spacing:.06em}
.tag{color:var(--dim);font-size:1.215rem}
.nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:.45rem}
.nav a{color:var(--text)}
.nav a::before{content:"[ ";color:#6f92c4}
.nav a::after{content:" ]";color:#6f92c4}
.nav a.on{color:var(--btn)}
.nav a.adm{color:var(--accent2);font-weight:700}

/* sheets */
main{padding-top:1rem}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:1rem 1.2rem;margin:0 0 1.2rem}
.sheet.narrow{max-width:calc(26rem * var(--ww))}
.meta{color:var(--dim);font-size:1.215rem;margin:.3rem 0 .9rem}
.body{max-width:calc(52rem * var(--ww))}

/* tables, forms */
.tbl{width:100%;border-collapse:collapse;font-size:1.215rem;margin:.5rem 0 1rem}
.tbl th,.tbl td{border:1px solid var(--line);padding:.35rem .55rem;text-align:left;vertical-align:top}
.tbl th{color:#cfe4ff;background:rgba(22,64,111,.7)}
.tbl a{margin-right:.55rem}
.form{display:flex;flex-direction:column;gap:.7rem;max-width:calc(42rem * var(--ww))}
.form label{display:flex;flex-direction:column;gap:.25rem;font-size:1.215rem;color:var(--accent2)}
.form input,.form select,.form textarea{
  font:inherit;color:#eaf4ff;background:var(--code);border:1px solid var(--line);border-radius:2px;padding:.45rem .55rem
}
.form input:focus,.form select:focus,.form textarea:focus{outline:1px solid var(--btn)}
button{
  font:inherit;font-size:1.215rem;color:#061c3f;background:var(--btn);border:0;border-radius:2px;
  padding:.42rem .9rem;cursor:pointer;align-self:flex-start
}
button:hover{background:#b3dcff}
.form input[type=checkbox]{width:auto}
.inline{display:inline-flex;gap:.45rem;align-items:center;margin-left:.45rem}
.mini{font-size:1.215rem;color:var(--dim)}
.flash{color:#061c3f;background:var(--btn);border-radius:2px;padding:.35rem .6rem;font-size:.85rem}
.flash.bad{color:#3a1010;background:#ff9d8f}

/* editor */
.ed{display:flex;flex-direction:column;gap:.5rem;max-width:calc(52rem * var(--ww))}
.ed-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between}
.ed-tools{display:flex;flex-wrap:wrap;gap:.25rem}
.ed-tools button{padding:.28rem .55rem;background:#16406f;color:#cfe4ff}
.ed-tools button:hover{background:#1d4f8c}
.ed-mode button{padding:.28rem .7rem;background:#16406f;color:var(--dim)}
.ed-mode button.on{background:#2e6bb8;color:#eaf4ff}
.ed-area{
  min-height:16rem;max-width:calc(52rem * var(--ww));padding:.7rem .8rem;border:1px solid var(--line);border-radius:2px;
  background:var(--code);color:#eaf4ff;font-size:1.215rem;overflow:auto
}
.ed-visual{line-height:1.5}
.ed-html{width:100%;resize:vertical;font-family:inherit;white-space:pre}

/* footer */
.ft{border-top:1px solid var(--line);padding:.7rem 0 0;color:var(--dim);font-size:1.215rem}

/* cookie gate: server-rendered, no JS — form post stores the consent cookie */
.consent{position:fixed;left:0;right:0;top:28vh;z-index:20;display:flex;justify-content:center;padding:0 1rem}
.consent-form{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;max-width:calc(30rem * var(--ww));
  padding:1.1rem 1.2rem;background:rgba(7,28,63,.97);
  border:1px solid var(--line);border-radius:3px;font-size:1.215rem;color:#cfe4ff
}

/* telnet plugin */
.tn-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0 .7rem}
.tn-bar button{padding:.32rem .7rem;background:#16406f;color:#cfe4ff}
.tn-bar button:hover{background:#1d4f8c}
.tn-out{
  min-height:18rem;max-height:60vh;overflow:auto;margin:0 0 .7rem;padding:.7rem .8rem;
  border:1px solid var(--line);border-radius:2px;background:#04122b;color:#a8d4ff;
  font-size:1.215rem;line-height:1.45;white-space:pre-wrap;word-break:break-all
}
.tn-form{display:flex;gap:.5rem;max-width:calc(52rem * var(--ww))}
.tn-form input{
  flex:1;font:inherit;color:#eaf4ff;background:var(--code);
  border:1px solid var(--line);border-radius:2px;padding:.45rem .55rem
}
.tn-form input:focus{outline:1px solid var(--btn)}
.plug{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;border:1px solid var(--line);border-radius:2px;padding:.55rem .7rem}
.plug-name{width:100%;color:#eaf4ff}

@media (max-width:40rem){
  .nav{margin-left:0;width:100%}
  .tbl{font-size:.8rem}
}