/* The 10 Towers portal — "retro look, modern accessibility" (PORTAL.md).
 * 1998 on the surface; modern CSS underneath. Period palette (silver/teal,
 * underlined blue links, visited-purple), monospace flourishes, beveled chrome —
 * but real contrast, keyboard focus, and a responsive layout the original lacked.
 * Seed colours echo the recovered tentowers.net pages. */

:root {
  --bg:        #c0c0c0;   /* classic win9x silver */
  --paper:     #d9d9d9;
  --ink:       #1a1a1a;
  --teal:      #008080;   /* the period accent */
  --teal-dk:   #005f5f;
  --link:      #0000ee;
  --visited:   #551a8b;
  --bevel-lt:  #ffffff;
  --bevel-dk:  #808080;
  --bevel-dkr: #404040;
  --gold:      #b8860b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--teal);
  /* faux "desktop" backdrop */
  background-image:
    repeating-linear-gradient(45deg, #0000000a 0 2px, transparent 2px 6px);
  color: var(--ink);
  font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.wrap { max-width: 760px; margin: 1.5rem auto; padding: 0 1rem; }

/* a beveled "window" panel */
.window {
  background: var(--bg);
  border: 2px solid;
  border-color: var(--bevel-lt) var(--bevel-dkr) var(--bevel-dkr) var(--bevel-lt);
  box-shadow: 1px 1px 0 var(--bevel-dk);
  margin-bottom: 1.25rem;
}
.titlebar {
  background: linear-gradient(90deg, var(--teal-dk), var(--teal));
  color: #fff;
  font-weight: bold;
  padding: .3rem .6rem;
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Courier New", monospace;
  letter-spacing: .5px;
}
.titlebar .dots { font-family: monospace; opacity: .8; }
.window .body { padding: 1rem 1.1rem; }

h1, h2, h3 { font-family: "Times New Roman", Georgia, serif; color: var(--teal-dk); }
h1 { font-size: 1.7rem; margin: .2rem 0 .6rem; }
.tagline { font-style: italic; color: #333; margin-top: -.3rem; }

a { color: var(--link); }
a:visited { color: var(--visited); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;   /* keyboard a11y */
}

.masthead {
  text-align: center;
  font-family: "Courier New", monospace;
  color: var(--teal-dk);
  white-space: pre;
  font-size: 12px;
  line-height: 1.15;
  overflow-x: auto;
}

/* the classic "two doors" choice */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .doors { grid-template-columns: 1fr; } }

.btn, button {
  display: inline-block;
  font-family: Verdana, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  padding: .45rem .9rem;
  border: 2px solid;
  border-color: var(--bevel-lt) var(--bevel-dkr) var(--bevel-dkr) var(--bevel-lt);
  cursor: pointer;
}
.btn:active, button:active {
  border-color: var(--bevel-dkr) var(--bevel-lt) var(--bevel-lt) var(--bevel-dkr);
}
.btn.primary, button.primary {
  background: var(--teal); color: #fff; font-weight: bold;
}
.btn.big { display: block; text-align: center; padding: .9rem; font-weight: bold; }

input[type=text], input[type=email], input[type=password], input[type=search] {
  font-family: "Courier New", monospace;
  font-size: 15px;
  padding: .35rem .4rem;
  width: 100%;
  background: #fff;
  border: 2px solid;
  border-color: var(--bevel-dkr) var(--bevel-lt) var(--bevel-lt) var(--bevel-dkr);
}
label { font-weight: bold; display: block; margin: .8rem 0 .25rem; }
.field { margin-bottom: .6rem; }
.hint { font-size: .85rem; color: #444; margin: .2rem 0 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--bevel-dk); }
th { background: var(--teal-dk); color: #fff; }
tr:nth-child(even) td { background: #cfcfcf; }

.badge {
  font-family: monospace; font-size: 11px; padding: .05rem .4rem;
  border: 1px solid var(--bevel-dkr);
}
.badge.dormant { background: #ffe9a8; }
.badge.active  { background: #b6e8b6; }
.badge.vault   { background: #d9c6ff; }

.steps { list-style: none; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap;
         font-family: monospace; font-size: 12px; margin: 0 0 1rem; }
.steps li { padding: .15rem .5rem; border: 1px solid var(--bevel-dk); background: var(--paper); }
.steps li.on { background: var(--teal); color: #fff; font-weight: bold; }
.steps li.done { background: #b6e8b6; }

.notice { background: #fffbe6; border: 1px solid var(--gold); padding: .6rem .8rem; }
.error  { background: #ffd9d9; border: 1px solid #b00000; padding: .5rem .7rem; color: #6e0000; }
.choice { display: block; border: 2px solid var(--bevel-dk); background: var(--paper);
          padding: .6rem .8rem; margin-bottom: .5rem; cursor: pointer; }
.choice input { margin-right: .5rem; }
.choice .t { font-weight: bold; }

footer { text-align: center; font-size: 12px; color: #d6f5f5; padding: .5rem 0 2rem;
         font-family: monospace; }
footer .op { color: #b9e6e6; opacity: .7; }
hr { border: none; border-top: 1px solid var(--bevel-dk); }
code, .mono { font-family: "Courier New", monospace; }
.nowrap { white-space: nowrap; }

/* ---- operator admin console (#17) ---- */
.adminnav { background: var(--paper); border: 1px solid var(--bevel-dk);
            padding: .35rem .6rem; margin: 0 0 1rem; font-size: 12px; }
.adminnav a { margin-right: .15rem; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
@media (max-width: 540px) { .cards { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; align-items: center; text-decoration: none;
        background: var(--paper); color: var(--ink); padding: 1rem;
        border: 2px solid; border-color: var(--bevel-lt) var(--bevel-dkr) var(--bevel-dkr) var(--bevel-lt); }
.card .num { font-size: 2.2rem; font-weight: bold; font-family: "Times New Roman", serif;
             color: var(--teal-dk); line-height: 1; }
.card .lbl { font-size: 12px; margin-top: .3rem; text-align: center; }

.qitem { border: 2px solid var(--bevel-dk); background: var(--paper);
         padding: .6rem .8rem; margin-bottom: .8rem; }
.qhead { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.qhead strong { font-size: 1.05rem; }
.qhead .meta { margin-left: auto; font-size: 11px; color: #444; }
.badge.kind { background: #cfe3ff; }
.badge.sev-high { background: #ffb3b3; }
.badge.sev-med  { background: #ffe9a8; }
.badge.sev-low  { background: #d7d7d7; }
table.kv { width: 100%; font-size: 13px; margin: .2rem 0 .5rem; }
table.kv th { background: none; color: var(--teal-dk); text-align: right; width: 6.5rem;
              vertical-align: top; padding: .15rem .5rem .15rem 0; border: none; }
table.kv td { border: none; padding: .15rem 0; }
table.kv tr:nth-child(even) td { background: none; }
.excerpt { font-family: "Courier New", monospace; background: #fff;
           border: 1px solid var(--bevel-dk); padding: .2rem .4rem; }
.actions { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.actions input[type=text] { width: auto; flex: 1 1 12rem; }
.actions button { font-size: 13px; padding: .3rem .6rem; }
.actions button.danger { background: #b00000; color: #fff; font-weight: bold;
                         border-color: #ff8a8a #5e0000 #5e0000 #ff8a8a; }

/* ----- command reference (help) ---------------------------------------- */
.helplist { list-style: none; padding: 0; margin: .3rem 0 1rem; }
.helplist li { padding: .1rem 0; }
.helplist.cols {
  columns: 16rem 4; column-gap: 1.2rem;       /* newspaper-style multi-column */
}
.helplist.cols li { break-inside: avoid; }
.helplist .meta { color: #555; font-size: 12px; margin-left: .4rem; }
.helplist a { font-family: "Courier New", monospace; }
/* the help body is preserved 1998 fixed-width text — render it verbatim */
pre.help {
  background: #fff; color: var(--ink);
  border: 2px solid;
  border-color: var(--bevel-dk) var(--bevel-lt) var(--bevel-lt) var(--bevel-dk);
  padding: .8rem 1rem; margin: .6rem 0 0;
  font-family: "Courier New", monospace; font-size: 13px; line-height: 1.45;
  white-space: pre-wrap;            /* wrap the rare over-wide line, keep columns */
  overflow-x: auto;
}

/* ----- "Start here" newcomer panel ------------------------------------- */
.starter {
  background: #eef6f6; border: 2px solid;
  border-color: var(--bevel-lt) var(--bevel-dk) var(--bevel-dk) var(--bevel-lt);
  padding: .6rem .9rem 1rem; margin: .4rem 0 1.4rem;
}
.starter h2 { margin: .2rem 0 .1rem; }
.starter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .4rem 1.4rem; margin-top: .6rem;
}
.starter-group h3 {
  font-family: "Courier New", monospace; font-size: .95rem;
  color: var(--teal-dk); border-bottom: 1px solid var(--bevel-dk);
  margin: .2rem 0 .3rem; padding-bottom: .1rem;
}
.starter-group dl { margin: 0; }
.starter-group dt { margin-top: .25rem; }
.starter-group dt a { font-family: "Courier New", monospace; font-weight: bold; }

/* ----- in-browser play (#6) --------------------------------------------- */
.wrap.wide { max-width: 900px; }
.term-status {
  font-family: "Courier New", monospace; font-size: 12px;
  padding: .2rem .6rem; margin: 0;
}
.term-status.ok      { background: #eef6f6; color: var(--teal-dk); }
.term-status.waiting { background: #fff6d8; color: #7a5b00; }
.term-status.error   { background: #fde4e4; color: #8a1f1f; }
#term-wrap {
  background: #000;
  padding: 6px;
  border: 2px solid;
  border-color: var(--bevel-dk) var(--bevel-lt) var(--bevel-lt) var(--bevel-dk);
}
#term { height: 60vh; min-height: 320px; }
.starter-group dd { margin: 0 0 .15rem; font-size: 13px; color: #333; }

/* ----- player account (#28) --------------------------------------------- */
.chars { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.chars li {
  padding: .3rem .6rem; margin-bottom: .25rem;
  background: var(--paper);
  border: 2px solid;
  border-color: var(--bevel-lt) var(--bevel-dkr) var(--bevel-dkr) var(--bevel-lt);
}
.chars a { font-weight: bold; }
.you { color: var(--teal-dk); font-size: 13px; }
.primary-link { font-weight: bold; }
.signout { margin-top: 1.5rem; font-size: 13px; }

/* ----- login grants (#28) ------------------------------------------------ */
.linkfacts { margin: .6rem 0 1rem; }
.linkfacts dt { font-weight: bold; font-size: 13px; color: var(--teal-dk); }
.linkfacts dd { margin: 0 0 .5rem; }
.mono { font-family: "Courier New", monospace; }
.warn {
  background: #fff6d8; color: #7a5b00;
  border: 2px solid;
  border-color: var(--bevel-lt) var(--bevel-dkr) var(--bevel-dkr) var(--bevel-lt);
  padding: .5rem .7rem;
}
.denyform { margin-top: 1rem; }

/* claim prose in the vetting console (#28) */
.claimstory { white-space: pre-wrap; max-width: 46em; }

table.kv th { text-align: left; vertical-align: top; padding-right: 1rem;
              font-size: 13px; color: var(--teal-dk); white-space: nowrap; }
table.kv td { vertical-align: top; padding-bottom: .35rem; }

/* a copy-paste command line, e.g. the workstation vetting lookup (#28) */
pre.cmd {
  font-family: "Courier New", monospace; font-size: 13px;
  background: #1e1e1e; color: #e6e6e6;
  padding: .55rem .7rem; margin: .5rem 0;
  overflow-x: auto; white-space: pre;
  border: 2px solid;
  border-color: var(--bevel-dkr) var(--bevel-lt) var(--bevel-lt) var(--bevel-dkr);
}

/* the plain-language disclosure list on the reclaim wizard + done page (#28) */
ul.fieldlist { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
ul.fieldlist li { margin: .15rem 0; }
ul.fieldlist .mono { color: #666; font-size: .82rem; }