/* AdaLogic lab — layout pack (auto-linked by the engine after alb-chrome.css).
   Home of the page-specific components: badges, denizen cards, forum threads,
   event cards, the Armoury, the Trial quiz, and the auth stub. */

@font-face {
  font-family: "ALB";
  src: url("fonts/alb.ttf") format("truetype");
}

/* Hush the PlayStation shapes on this site — the CRT is ours now. */
body.skin-on .psx-btn[data-sym]::before {
  content: "";
}

/* ---- page titles / section heads ------------------------------------------ */

#pageTitleH1 {
  font-family: "ALB", "Courier New", Courier, monospace;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 3px double #c0392b;
  padding-bottom: 0.15em;
}

/* ---- badges ---------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-size: 0.72em;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px 2px;
  margin-right: 4px;
  border: 1px solid #3a3228;
  color: #c9a86a;
  background: #17120d;
  vertical-align: middle;
}
.badge.pron {
  color: #d8cfc2;
  border-color: #c0392b;
}
.badge.role {
  color: #ff9d6f;
  border-color: #7a4a2a;
}
.badge.trans {
  color: #7fd3ff;
  border-color: #40618a;
}
.badge.status {
  color: #7dd3fc;
  border-color: #0369a1;
}
.badge.status.resting {
  color: #9a8f82;
  border-color: #4a443c;
}

/* ---- denizen cards --------------------------------------------------------- */

.denizencard {
  background: linear-gradient(165deg, #211a12, #151009 60%);
  border: 2px solid #3a3228;
  border-left: 6px solid #c0392b;
  outline: 1px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  padding: 10px 16px 14px;
  margin: 1em 0;
}
.denizencard h3 {
  margin: 0 0 0.15em;
}
.denizencard .given {
  font-size: 0.8em;
  color: #8a7d68;
}
.denizencard .blurb {
  margin: 0.55em 0;
  font-size: 0.95em;
}
.denizencard .skills {
  margin: 0.4em 0 0;
  padding-left: 1.2em;
  font-size: 0.85em;
  color: #b7a98f;
}
.denizencard .skills li {
  margin: 0.1em 0;
}
.denizencard.featured {
  border-left-color: #c9a86a;
}

/* ---- forum ----------------------------------------------------------------- */

.forumcat {
  margin: 1.4em 0 0.2em;
  color: #c0392b;
}
.thread-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  background: linear-gradient(90deg, #1d1710, #14100a);
  border-bottom: 1px solid #2a2118;
  border-left: 4px solid #7a4a2a;
  padding: 8px 12px;
  margin: 0 0 2px;
}
.thread-row .ttitle {
  flex: 1 1 320px;
  font-weight: 700;
}
.thread-row .ttitle.locked {
  color: #9a8f82;
}
.thread-row .tmeta {
  font-size: 0.78em;
  color: #8a7d68;
  white-space: nowrap;
}
.thread-row.pinned {
  border-left-color: #c0392b;
}
.thread-actions p,
.panel-stub {
  font-size: 0.85em;
  color: #b7a98f;
}
.panel-stub {
  border: 1px dashed #3a3228;
  padding: 6px 10px;
}

/* ---- events ---------------------------------------------------------------- */

.event-card {
  background: linear-gradient(165deg, #211a12, #151009);
  border: 2px solid #3a3228;
  border-left: 6px solid #3a3228;
  outline: 1px solid #000;
  padding: 8px 14px 12px;
  margin: 0.9em 0;
}
.event-card.celebratory {
  border-left-color: #c9a86a;
}
.event-card h3 {
  margin: 0 0 0.15em;
}
.event-card .ev-meta {
  font-size: 0.8em;
  color: #8a7d68;
  margin: 0.3em 0;
}
.event-card .ev-desc {
  margin: 0.35em 0;
  font-size: 0.95em;
}
.event-card .ev-foot {
  font-size: 0.78em;
  color: #c9a86a;
}

/* ---- skill list --------------------------------------------------- */
.skill-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
.skill-list li {
  margin: 4px 0;
  padding: 4px 10px;
  background: #160f0a;
  border-left: 3px solid #c0392b;
}
.skill-list .skill-lvl {
  float: right;
  color: #ff9d6f;
  font-size: 0.8em;
}

/* ---- quiz nav (shared: auth + skill ledger) ---------------------------- */
.quiz-nav {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.quiz-nav button {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8em;
  text-transform: uppercase;
  background: #0c0906;
  color: #c9a86a;
  border: 1px solid #3a3228;
  padding: 4px 12px;
}
/* ---- auth stub dialog --------------------------------------------------------- */

#authDialog {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: rgba(8, 5, 3, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
#authDialog[hidden] {
  display: none;
}
.auth-box {
  max-width: 480px;
  width: 90%;
  background: linear-gradient(165deg, #211a12, #120d08);
  border: 2px solid #3a3228;
  outline: 1px solid #c0392b;
  box-shadow: 0 0 60px rgba(192, 57, 43, 0.4);
  padding: 20px 24px;
  color: #d8cfc2;
}
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.auth-tabs button {
  font-family: "ALB", "Courier New", Courier, monospace;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #0c0906;
  color: #c9a86a;
  border: 1px solid #3a3228;
  padding: 4px 14px;
}
.auth-tabs button.on {
  color: #fff;
  border-color: #c0392b;
}
.auth-box label {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8em;
  text-transform: uppercase;
  margin: 10px 0 3px;
  color: #c9a86a;
}
.auth-box input,
.auth-box select {
  width: 100%;
  box-sizing: border-box;
  background: #17110b;
  color: #d8cfc2;
  border: 1px solid #3a3228;
  font-family: "Courier New", Courier, monospace;
  padding: 5px;
}
.auth-box .stub-note {
  margin-top: 14px;
  font-size: 0.8em;
  color: #ff9d6f;
  border: 1px dashed #7a4a2a;
  padding: 6px 10px;
}
.auth-close {
  float: right;
  background: none;
  border: none;
  color: #8a7d68;
  font-size: 1.3em;
  cursor: pointer;
}
.auth-sticky {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 200;
  background: #101018;
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 11px;
  padding: 5px 10px;
  letter-spacing: 0.08em;
}

/* ---- misc house styles --------------------------------------------------------- */

.house-signpost {
  background: #0f0c09;
  border: 1px solid #3a3228;
  padding: 8px 12px;
  margin: 1.2em 0;
  font-size: 0.9em;
}
.house-signpost dt {
  font-family: "ALB", "Courier New", Courier, monospace;
  color: #c9a86a;
  font-size: 0.9em;
  text-transform: uppercase;
}
.house-signpost dd {
  margin: 2px 0 10px;
}

/* Mindful Mode: stillness for photosensitive and easily-scrambled heads. */
body.mindful .blink,
body.mindful .marquee > *:first-child,
body.mindful #blogTitleH1,
body.mindful #postTitleH1,
body.mindful .skin-glow,
body.mindful .quiz-result .result-title {
  animation: none !important;
  text-shadow: none !important;
}
body.mindful.psx-on #container,
body.mindful #container {
  animation: none !important;
  transform: none;
}

#hitcounter {
  margin-top: 2em;
}

/* ---- active nav + base system buttons (works even before SKIN:ON) ------------ */

#header li a.navlink-current {
  color: #fff;
  text-shadow: 0 0 6px rgba(192, 57, 43, 0.9);
}
.skin-sysbtn {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  background: #0c0906;
  color: #c9a86a;
  border: 1px solid #3a3228;
  padding: 1px 7px;
  margin-left: 6px;
}

/* ---- lab meters -------------------------------------------------------- */
.meter {
  height: 8px;
  background: #241a12;
  border: 1px solid #3a3228;
  margin: 2px 0 10px;
}
.meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7a0f14, #c0392b);
}

/* ---- house sidebar + desktop layout ---------------------------------------------
   Mobile keeps the single stacked column. From 900px up the page spreads out
   and the engine-injected #houseside fills the right-hand space that used to
   be dead air. Pure CSS reflow — no page markup changes. */

#houseside {
  min-width: 0;
}
.house-panel {
  background: linear-gradient(165deg, #1d1710, #120d08);
  border: 1px solid #3a3228;
  outline: 1px solid #000;
  padding: 8px 12px 12px;
  margin: 0 0 14px;
}
.house-panel h3 {
  margin: 0.2em 0 0.4em;
  color: #c0392b;
  border-bottom: 1px dashed #3a3228;
}
.house-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85em;
}
.house-list li {
  margin: 0.35em 0;
}
.house-note {
  font-size: 0.8em;
  color: #b7a98f;
  margin: 0.3em 0;
}

@media (max-width: 899.98px) {
  #content {
    display: block;
  }
}

@media (min-width: 900px) {
  #container {
    width: 94%;
    max-width: 1280px;
  }
  #content {
    display: block;
  }
  #houseside {
    display: none;
  }
}
/* ---- shared notes ------------------------------------------------------ */
.crisis-note {
  color: #9a8f82;
  font-size: 0.9rem;
  font-style: italic;
}
/* ---- registry file dates ------------------------------------------------ */
.psx-filedate {
  color: #6e645c;
  font-size: 0.78rem;
}
/* ---- Phase 2: forum threads -------------------------------------------------- */

.btn-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.btn-reset.ttitle {
  color: #e0c9a8;
}
button.btn-reset.ttitle:hover {
  color: #fff;
  text-decoration: underline;
}
button.btn-reset.ttitle.locked {
  color: #9a8f82;
}
#threadPane {
  margin-top: 1.2em;
  border: 1px solid #2c2430;
  background: #0c0a0f;
  padding: 0.9em 1.1em;
}
.thread-open h3 {
  margin: 0 0 0.3em;
  color: #e0c9a8;
}
.rep-line {
  border-left: 2px solid #322a38;
  padding: 0.35em 0.7em;
  margin: 0.4em 0;
  font-size: 0.9rem;
}
.rep-line.orig {
  border-left-color: #7a0f14;
}
.rep-line.seed {
  border-left-color: #3f3a46;
  color: #d8c7b4;
}
.rep-line.local {
  border-left-color: #0369a1;
}
.exit-line {
  color: #9a8f82;
}

/* ---- Phase 3: chronicles, calendar, founders, lexicon -------------------------------- */

.chron-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 0.8em;
}
.chron-entry details {
  padding: 0.2em 0;
}
.chron-entry summary {
  cursor: pointer;
  list-style: "» ";
  color: #d8cfc2;
}
.chron-entry summary:hover {
  color: #ff9d6f;
}
.chron-body p {
  margin: 0.5em 0 0;
  padding-left: 0.9em;
  border-left: 3px solid #3a3228;
  color: #d8cdb8;
}
.chron-line li {
  margin-bottom: 0.4em;
}
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8em;
  margin: 0.6em 0;
}
.roster-grid .denizencard {
  margin: 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.8em;
}
.cal-month {
  border: 1px solid #26222c;
  padding: 0.6em 0.8em;
  background: rgba(13, 10, 6, 0.4);
}
.cal-month.today {
  border-color: #c0392b;
  box-shadow: 0 0 10px rgba(192, 57, 43, 0.25);
}
.cal-month h3 {
  margin: 0 0 0.4em;
  font-family: "ALB", "Courier New", Courier, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85em;
  color: #c9a86a;
}
.cal-item {
  margin: 0.4em 0;
  font-size: 0.9em;
}
.cal-item.obs strong {
  color: #ff9d6f;
}
.cal-item.ev em {
  font-size: 0.85em;
  color: #d8cdb8;
}

.lex-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lex-entry {
  margin: 0.7em 0;
  padding-left: 0.8em;
  border-left: 3px solid #26222c;
}
.lex-entry dl {
  margin: 0;
}
.lex-entry dt {
  margin-bottom: 0.15em;
}
.lex-entry dd {
  margin: 0;
  color: #d8cdb8;
}
.lex-focus {
  margin: 1em 0;
  border: 1px dashed #3a3228;
  padding: 0.7em 0.9em;
}
.lex-focus h2 {
  margin-top: 0;
}
body.mindful .cal-month.today {
  box-shadow: none;
}

/* ---- Phase 4: the Skill Ledger (self-assessment) -------------------------------------------- */

.skill-form {
  margin: 0.5em 0 0.8em;
}
.skill-row {
  margin: 0.7em 0;
  padding-left: 0.6em;
  border-left: 3px solid #26222c;
}
.assess-rating {
  margin-top: 0.35em;
}
.assess-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin: 0 0.9em 0.25em 0;
  font-size: 0.85em;
  color: #d8cdb8;
}
.assess-opt input[type="radio"] {
  accent-color: #c9a86a;
}
.assess-line {
  display: block;
  margin: 0.6em 0;
  font-size: 0.9em;
  color: #d8cfc2;
}
.assess-line input {
  display: block;
  box-sizing: border-box;
  width: min(30em, 100%);
  margin-top: 0.3em;
  padding: 0.45em 0.6em;
  background: #0d0a06;
  color: #d8cfc2;
  border: 1px solid #3a3228;
  font-family: inherit;
}

/* ---- Phase 4: the Gear-Shelf (gear & vendor guide) --------------------------------------------- */

.gear-kit {
  margin: 0 0 0.7em;
}
.gear-item {
  margin: 0.4em 0;
  padding-left: 0.6em;
  border-left: 3px solid #26222c;
}
.vendor-card {
  margin: 0.5em 0;
  padding-left: 0.6em;
  border-left: 3px solid #26222c;
}

/* ---- polish A: stop 100vw overlays widening the page on phones ------------- */
html,
body {
  overflow-x: hidden;
}
@media (max-width: 420px) {
  .marquee > *:first-child {
    font-size: 0.85em;
    letter-spacing: 0;
  }
}

/* ---- polish C: compact shell + steady heading scale --------------------- */
/* The theme leans on an 18px Courier base; slip it to 15px so more fits and
   keep the red 8x7 pixel headings from dominating the fold. */
body { font-size: 15px; }
p { line-height: 1.45; }
h1 { font-size: 1.4em; }
h2 { font-size: 1.13em; }
h3 { font-size: 1em; }
h4 { font-size: 0.93em; }
#header li { font-size: 1em; }
#postlistdiv ul,
#recentpostlistdiv ul { font-size: 1.05em; }

body.psx-on .psx-memcard {
  font-size: 11px;
}
body.psx-on .psx-hud-res {
  font-size: 11px;
  line-height: 1.4;
}

/* ---- polish D: focus is styled before SKIN:ON too -------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #c9a86a;
  outline-offset: 2px;
}

/* ---- polish A (forum): psx leaks navy panel headings onto the dark board --------- */
body.psx-on .psx-panel h3 {
  color: #c0392b;
}

/* ---- polish C (forum): comfort tap targets on phones ------------------------------ */
@media (max-width: 479.98px) {
  .thread-row {
    padding: 10px 12px;
  }
  .thread-row .ttitle {
    padding: 0.45em 0;
    min-height: 44px;
  }
}

/* ---- polish A+B (events): sitewide mobile controls + ev-meta readability ------ */
.ev-meta {
  line-height: 1.8;
}
@media (max-width: 479.98px) {
  .quiz-nav .begin,
  .quiz-nav button,
  .opt,
  .skin-sysbtn {
    min-height: 44px;
  }
}

/* ==========================================================================
   Phase 6.4 — 2000s-forum chrome: the top bar
   Flat primary links + one "More" dropdown, dark terminal voice.
   ========================================================================== */

.fcbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 36px;
  background: #0d0a07;
  border: 1px solid #241b12;
  border-width: 0 0 1px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.fcbrand-logo {
  height: 18px;
  width: auto;
  margin-right: 7px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

.fcbrand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 10px;
  font-family: "alb", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #f0c97c;
  background: #160f08;
  border-right: 1px solid #241b12;
  white-space: nowrap;
  text-decoration: none;
  align-self: stretch;
}

.fcbar a.fcbrand:hover,
.fcbar a.fcbrand:focus-visible {
  color: #ffd9a0;
}

.fcnav {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
}

.fcmain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow: hidden;
  scrollbar-width: none;
}
.fcmain::-webkit-scrollbar {
  display: none;
}

.fcmain li {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ftab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 6px;
  background: transparent;
  border: 0;
  border-right: 1px solid #1d1510;
  color: #cbb89a;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
}

.ftab:hover,
.ftab:focus-visible {
  background: #19110b;
  color: #ffe0b0;
}

.ftab-current {
  color: #ff9d6f;
  background: #19110b;
  box-shadow: inset 0 -2px 0 #ff9d6f;
}

.fcsys {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 6px;
  border-left: 1px solid #1d1510;
  flex: 0 0 auto;
  align-self: stretch;
}

.fcsys .skin-sysbtn {
  min-height: 0;
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
}

/* mobile: same single strip, just tighter */
@media (max-width: 719.98px) {
  .fcbar {
    height: 32px;
  }
  .fcnav a {
    padding: 0 8px;
    font-size: 0.72rem;
  }
}

/* tablet: tighten brand + system buttons so all tabs fit */
@media (min-width: 720px) and (max-width: 1099.98px) {
  .fcbrand {
    font-size: 12px;
    padding: 0 10px;
    letter-spacing: 1px;
  }
  .fcsys .skin-sysbtn {
    min-height: 28px;
    padding: 3px 6px;
    font-size: 10px;
  }
}

@media (max-width: 479.98px) {
  .fcbrand {
    font-size: 12px;
    padding: 0 10px;
    letter-spacing: 1px;
  }
  .fcsys .skin-sysbtn {
    min-height: 44px;
    min-width: 62px;
    font-size: 10px;
    padding: 4px 6px;
  }
}

/* ---- full-bleed layout: fill the window, ~20px from the edges ------- */

#container {
  width: calc(100vw - 40px);
  max-width: none;
  margin: 14px auto;
}

#header {
  padding: 0 20px;
}

#content {
  padding: 10px 20px 20px;
}

/* ---- very small screens: use nearly all the width ---------------------- */
@media (max-width: 479.98px) {
  #container {
    width: calc(100vw - 24px);
    margin: 8px auto;
  }
  #content {
    padding: 8px 10px 14px;
  }
}