/* ==========================================================================
   app-console.css — the system log window.

   A NeXT Console is paper, not a terminal: the machine writing to a page
   rather than talking to you. Everything scannable is carried by weight and
   by two colours, so a thousand identical graph lines stay ignorable and the
   four that are not stand out without shouting.
   ========================================================================== */

.clog {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; direction: rtl;              /* scrollbar on the left */
  background: var(--paper);
  border-top: 1px solid var(--lo);
  border-left: 1px solid var(--lo);
  box-shadow: inset -1px 0 0 var(--hi);
  padding: 4px 0 6px;
  scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt);
  outline: none;
}
.clog > * { direction: ltr; }
.clog::-webkit-scrollbar { width: 15px; }
.clog::-webkit-scrollbar-track {
  background: var(--gray-lt);
  box-shadow: inset 1px 0 0 var(--lo), inset -1px 0 0 var(--hi);
}
.clog::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-top: 1px solid var(--hi); border-left: 1px solid var(--hi);
  border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo);
}

.cline {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 7px;
  padding: 0 9px 0 10px;
  font-family: var(--mono);
  font-size: 11px; line-height: 1.55;
  color: #24201b;
  border-left: 3px solid transparent;
}
.cline .t { color: var(--lo); opacity: .85; white-space: pre; }
.cline .h { color: var(--lo); opacity: .6; }
.cline .d { color: var(--ink); font-weight: 600; white-space: nowrap; }
.cline .m { flex: 1 1 22ch; min-width: 0; word-break: break-word; }

/* a warning is amber and an error is rust, both at document weight rather
   than screen weight, because this surface is paper */
.cline[data-lv="warn"] { background: rgba(229, 138, 60, .10); border-left-color: var(--amber); }
.cline[data-lv="warn"] .m,
.cline[data-lv="warn"] .d { color: var(--amber-dim); }
.cline[data-lv="err"] { background: rgba(143, 58, 38, .12); border-left-color: var(--rust); }
.cline[data-lv="err"] .m,
.cline[data-lv="err"] .d { color: var(--rust); }

/* the observer's own lines are the ones worth being able to find */
.cline[data-cat="observer"] .d { color: #0d2f8f; }

/* filtering is a class on the container: no relayout, no re-render */
.clog[data-filter="kernel"]   .cline:not([data-cat="kernel"]),
.clog[data-filter="graph"]    .cline:not([data-cat="graph"]),
.clog[data-filter="observer"] .cline:not([data-cat="observer"]),
.clog[data-filter="errors"]   .cline[data-lv=""] { display: none; }

/* a new line lands lit and settles. Nothing moves; only the ground fades. */
@keyframes cline-in { from { background-color: rgba(0, 0, 0, .10); } to { background-color: transparent; } }
.cstream > .cline:last-child { animation: cline-in 1.1s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .cstream > .cline:last-child { animation: none; }
}

/* At a phone width a syslog line cannot keep four columns. It keeps the
   header on one line and gives the message the whole width underneath. */
@media (max-width: 460px) {
  .cline { display: block; font-size: 10.5px; padding: 1px 6px 2px 10px; }
  .cline .t { margin-right: 6px; }
  .cline .h { display: none; }
  .cline .d { display: inline; }
  .cline .m { display: block; padding-left: 8px; }
}

/* A log line you can attach to. The only visible difference is that the
   cursor changes and the tag lights — which is as much of a signpost as
   a process nobody started should get. */
.cline.live { cursor: pointer; }
.cline.live .d { color: var(--amber); }
.cline.live:hover, .cline.live:focus {
  background: rgba(229,138,60,.10); outline: none;
}
.cline.live:hover .m, .cline.live:focus .m { color: var(--bone); }