/* liminal.css — the rooms of the mind. every page is a place; the panels float in it. */
/* set the place per page:  body { background-image: url('/assets/scene-<page>.jpg'); } */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background: #020604;
  font: 13.5px/1.7 'Courier New', Courier, monospace;
  color: #9ee8b4; text-transform: lowercase;
  padding: 96px 14px 30px;
}
/* the place itself. fixed pseudo-element, because iphones lie about fixed backgrounds. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: #020604 var(--scene) 36% 50% / cover no-repeat;
}

/* the room you are reading from */
#grain { position: fixed; inset: 0; pointer-events: none; z-index: 6;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }

a { color: #9ee8b4; }

/* ---- header ---- */
#hdr { position: fixed; top: calc(18px + env(safe-area-inset-top)); left: 24px; z-index: 7;
  text-shadow: 0 1px 8px rgba(0,0,0,.9); max-width: 46vw; }
#hdr h1 { font-size: 19px; letter-spacing: .12em; color: #4ade80;
  text-shadow: 0 0 8px rgba(74,222,128,.55), 0 1px 8px rgba(0,0,0,.9); font-weight: bold; }
#hdr h1 a { color: inherit; text-decoration: none; }
#hdr .sub { font-size: 12.5px; color: rgba(196,240,210,.8); margin-top: 3px; }
.backmain { margin-top: 7px; font-size: 12px; letter-spacing: .08em; }
.backmain a { color: rgba(196,240,210,.75); text-decoration: none;
  border-bottom: 1px solid rgba(158,232,180,.3); }
.backmain a:hover { color: #fff; border-bottom-color: #fff; }

#timebox { position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 22px; z-index: 7;
  background: rgba(1,12,5,.72); border: 1px solid rgba(74,222,128,.45);
  padding: 7px 16px 8px; text-align: center; }
#timebox .t { font-size: 19px; font-weight: bold; letter-spacing: .18em; color: #4ade80;
  text-shadow: 0 0 8px rgba(74,222,128,.6); }
#timebox .w { font-size: 11.5px; color: rgba(196,240,210,.75); margin-top: 1px; }
#timebox .w b { color: #4ade80; font-weight: bold; }

/* ---- panels ---- */
main { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 5; }
.panel {
  background: rgba(2,14,6,.76);
  border: 1px solid rgba(74,222,128,.34);
  box-shadow: 0 0 26px rgba(0,0,0,.65), inset 0 0 60px rgba(0,20,8,.35);
}
.panel.pad { padding: 16px 18px 14px; }
.panel h2 { font-size: 13.5px; font-weight: bold; color: #4ade80; letter-spacing: .1em;
  margin-bottom: 12px; text-shadow: 0 0 6px rgba(74,222,128,.4); }

.dim { color: rgba(158,232,180,.55); }
.bright { color: #4ade80; text-shadow: 0 0 6px rgba(74,222,128,.4); }
/* the red lines. typed, not written. */
.red { color: #ff6a52; text-shadow: 0 0 6px rgba(255,90,60,.35); }

/* ---- tables (logs) ---- */
.logscroll { max-height: 58vh; overflow-y: auto; }
.logscroll::-webkit-scrollbar { width: 11px; }
.logscroll::-webkit-scrollbar-track { background: rgba(0,0,0,.45); }
.logscroll::-webkit-scrollbar-thumb { background: rgba(74,222,128,.22); border: 1px solid rgba(74,222,128,.4); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: normal; font-size: 12px; letter-spacing: .1em;
  color: rgba(158,232,180,.55); padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(74,222,128,.3);
  position: sticky; top: 0; background: rgba(2,16,7,.95); }
td { padding: 9px 12px; border-bottom: 1px solid rgba(74,222,128,.14); vertical-align: top; }
td.n, td.d { color: rgba(158,232,180,.5); white-space: nowrap; }
tr.reply td { padding-top: 0; border-bottom: 1px solid rgba(74,222,128,.14);
  color: #ff6a52; text-shadow: 0 0 6px rgba(255,90,60,.35); font-size: 13px; }
tr:has(+ tr.reply) td { border-bottom: none; }

/* ---- forms ---- */
.srow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.srow label { width: 92px; flex: none; font-size: 12.5px; color: rgba(158,232,180,.8); }
.srow input, .srow select, .srow textarea { flex: 1; background: rgba(0,7,3,.85); border: 1px solid rgba(74,222,128,.35);
  color: #c9f5d6; font: 13px 'Courier New', monospace; padding: 7px 10px; }
.srow input:focus, .srow textarea:focus { outline: none; border-color: rgba(74,222,128,.7); }
.sbtn { text-align: right; margin: 4px 0 10px; }
button, .sbtn button { background: rgba(0,18,7,.85); border: 1px solid rgba(74,222,128,.6);
  color: #4ade80; font: bold 12.5px 'Courier New', monospace; letter-spacing: .12em;
  padding: 8px 22px; cursor: pointer; text-shadow: 0 0 6px rgba(74,222,128,.4); }
button:hover { background: rgba(2,30,12,.9); color: #7dffb0; }
.sfoot { font-size: 12.5px; color: rgba(196,240,210,.75); }

/* the interruption bar (mind.js) in this world */
.interrupt {
  position: fixed; top: -60px; left: 50%; transform: translateX(-50%);
  max-width: min(92vw, 620px); z-index: 99;
  background: rgba(1,12,5,.94); color: #4ade80; border: 1px solid rgba(74,222,128,.5);
  font: 13.5px 'Courier New', monospace;
  padding: 9px 16px; box-shadow: 0 4px 18px rgba(0,0,0,.7);
  transition: top .45s ease; text-shadow: 0 0 6px rgba(74,222,128,.6);
}
.interrupt.show { top: 10px; }

/* ---- nav ---- */
#nav { position: relative; z-index: 7; text-align: center;
  margin-top: 44px;
  padding: 10px 10px calc(6px + env(safe-area-inset-bottom));
  font-size: 13px; letter-spacing: .14em; line-height: 2; }
#nav a { color: rgba(196,240,210,.72); text-decoration: none; margin: 0 7px; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.9); }
#nav a:hover { color: #fff; }
#nav a.cur { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,.6); }
#nav .dot { color: rgba(158,232,180,.35); }

@media (max-width: 700px) {
  body { padding: 118px 8px 26px; }
  #hdr { left: 14px; max-width: 60vw; }
  #timebox { right: 12px; padding: 5px 12px 6px; }
  #timebox .t { font-size: 16px; }
  th, td { padding: 8px 8px; font-size: 12.5px; }
  .srow label { width: 78px; }
  #nav { font-size: 12px; letter-spacing: .08em; }
  #nav a { margin: 0 4px; }
}