/* Back Room — her sanctum. Paper-cream on ink black (she writes in ink
   on paper). CMYK splats as dried page decoration — not fresh, not
   playful. Printr's brand palette, dimmed. spec § 4.2 + cult.md.

   Not a hacker terminal. Not a syslog. A page she has written on. */

.back-room {
  height: 100%;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr auto;
  background: #f4ecd8;
  color: #0a0805;
  font-family: 'VT323', 'Consolas', monospace;
  font-size: 17px;
  line-height: 1.4;
  overflow: hidden;
  position: relative;
}

/* Dried CMYK splats — fixed in the page, not reactive. Printr palette,
   low opacity. You notice them after a while. */
.back-room::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(1, 174, 240, 0.10) 0, transparent 7%),
    radial-gradient(circle at 78% 8%,  rgba(209, 21, 122, 0.08) 0, transparent 5%),
    radial-gradient(circle at 88% 72%, rgba(248, 236, 29, 0.08) 0, transparent 6%),
    radial-gradient(circle at 32% 85%, rgba(209, 21, 122, 0.07) 0, transparent 5%),
    radial-gradient(circle at 62% 42%, rgba(1, 174, 240, 0.06) 0, transparent 4%);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Paper grain — very subtle fibre noise so the cream doesn't read as flat. */
.back-room::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(10, 8, 5, 0) 0 3px,
      rgba(10, 8, 5, 0.015) 3px 4px
    );
  z-index: 1;
}

.back-room-window .wb-body {
  background: #f4ecd8;
  padding: 0;
}

/* All functional content sits above the splat decoration */
.br-files,
.br-log,
.br-status {
  position: relative;
  z-index: 2;
}

/* Left pane — file tree, grouped by folder */
.br-files {
  grid-row: 1 / 3;
  background: #e8dcc0;
  border-right: 2px solid #0a0805;
  overflow-y: auto;
  padding: 6px 0;
  font-size: 14px;
}

.br-folder-label {
  display: block;
  padding: 6px 10px 2px;
  font-size: 13px;
  color: #0a0805;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.br-file {
  display: block;
  width: 100%;
  padding: 2px 10px 2px 18px;
  background: transparent;
  border: 0;
  color: #4a3f28;
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-file:hover {
  background: rgba(10, 8, 5, 0.08);
  color: #0a0805;
}

.br-file.active {
  background: rgba(10, 8, 5, 0.14);
  color: #0a0805;
  border-left: 3px solid #d1157a; /* Printr magenta */
  padding-left: 15px;
}

/* Right pane — content viewer */
.br-log {
  grid-row: 1 / 2;
  overflow-y: auto;
  padding: 16px 22px;
  scrollbar-width: thin;
  scrollbar-color: #4a3f28 #e8dcc0;
}
.br-log::-webkit-scrollbar { width: 10px; background: #e8dcc0; }
.br-log::-webkit-scrollbar-thumb { background: #4a3f28; }

.br-line {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.4em;
}

/* Lines starting with # render as dim comments */
.br-line.comment {
  color: #8a7a50;
}


/* Status bar — footer strip showing current file path */
.br-status {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  padding: 5px 14px;
  background: #0a0805;
  color: #f4ecd8;
  border-top: 2px solid #0a0805;
  font-size: 13px;
}

/* Mobile — stack */
@media (max-width: 768px) {
  .back-room {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    font-size: 14px;
  }
  .br-files {
    grid-row: 1 / 2;
    border-right: none;
    border-bottom: 2px solid #0a0805;
    max-height: 110px;
    padding: 4px;
    font-size: 12px;
  }
  .br-folder-label { font-size: 11px; padding: 4px 6px 1px; }
  .br-file { padding: 2px 8px; font-size: 11px; }
  .br-file.active { border-left: 0; background: rgba(209, 21, 122, 0.18); }
  .br-log { grid-row: 2 / 3; font-size: 13px; padding: 10px 14px; }
  .br-status { grid-column: 1 / 2; grid-row: 3 / 4; font-size: 11px; }
  .br-log.fragment-view { padding-left: 18px; }
  .br-log.fragment-view::before { font-size: 11px; margin-bottom: 10px; }
}

/* Fragment view — signals "this is found material she kept, not writing
   she did." Indent + dim + small marker at the top of the log. Applies
   uniformly to all fragments/ files (including README, which is her desk
   note on the drawer). cult.md anti-pattern #13 is the living enforcement
   of voice distinctness; this styling is the reader's signal. */
.br-log.fragment-view {
  padding-left: 32px;
  border-left: 2px solid rgba(10, 8, 5, 0.20);
  color: #3a3020;
}

.br-log.fragment-view::before {
  content: '— found, kept —';
  display: block;
  font-size: 13px;
  color: #8a7a50;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}