/* Slipway log: the dock under the 3D view. Folded it is one line with the newest entry; open it is a table
   (Time, Level, Step, What happened) that only draws the rows in sight. Every value comes from tokens.css. */

.log { position: relative; grid-column: 2; grid-row: 3; display: flex; flex-direction: column; min-width: 0; height: var(--log-h, var(--h-log)); max-height: 70vh; overflow: hidden; }
.log.is-folded { height: auto; }
.log__resize { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: var(--s-3); cursor: ns-resize; touch-action: none; }
.log__resize::after { content: ""; position: absolute; left: 50%; top: var(--s-1); width: var(--s-7); height: var(--stripe); translate: -50% 0; border-radius: var(--r-round); background: var(--line-control); }
.log__resize:hover::after, .log__resize:focus-visible::after { background: var(--cold); }
.log__resize:focus-visible { outline-offset: calc(var(--focus-w) * -1); }

.log__head { display: flex; align-items: center; gap: var(--s-3); flex: none; min-height: var(--h-log-head); padding: 0 var(--s-2); border-bottom: var(--hair) solid var(--line); }
.log__title { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; height: var(--h-mini); padding: 0 var(--s-3); border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink); }
.log__title .icon { color: var(--ink-3); }
.log__title:hover { background: var(--hull-raise-2); }
.log__title:active { background: var(--hull-sunk); }
.log__last { display: none; flex: 1; align-items: center; gap: var(--s-3); min-width: 0; font-size: var(--fs-small); color: var(--ink-2); }
.log__last .entry__time, .log__last .entry__level { flex: none; }
.log__last .entry__msg { flex: 1; min-width: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log__filters { display: flex; gap: var(--s-1); min-width: 0; }
.filter { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--h-mini); padding: 0 var(--s-3); border: var(--hair) solid var(--line-control); border-radius: var(--r-2); background: var(--hull-raise); color: var(--ink); font-size: var(--fs-small); white-space: nowrap; transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.filter .num { color: var(--ink-2); font-size: var(--fs-label); }
.filter:hover { background: var(--hull-raise-2); border-color: var(--line-bright); }
.filter:active { background: var(--hull-sunk); }
.filter[aria-pressed="false"] { border-style: dashed; background: transparent; color: var(--ink-3); }
.filter[aria-pressed="false"] .filter__word { text-decoration: line-through; }
.filter[aria-pressed="false"] .icon { color: var(--ink-3); }
.filter--success .icon { color: var(--cold); }
.filter--warning .icon { color: var(--warm); }
.filter--error .icon { color: var(--hot); }
.log__search { flex: 1 1 8rem; max-width: 16rem; min-width: 6rem; }
.log__search .input { height: var(--h-mini); font-size: var(--fs-small); }
.log__search > .icon { top: calc((var(--h-mini) - var(--icon)) / 2); }
.log__actions { display: flex; gap: var(--s-1); margin-left: auto; }
.log:not(.is-folded) #log-fold .icon { rotate: 180deg; }

.log__cols, .entry { display: grid; grid-template-columns: var(--w-time) var(--w-level) var(--w-step) minmax(0, 1fr) var(--h-switch); column-gap: var(--s-3); padding: 0 var(--s-3) 0 var(--s-3); }
.log__cols { flex: none; align-items: center; height: var(--h-row); border-bottom: var(--hair) solid var(--line); color: var(--ink-3); font: 500 var(--fs-small)/1 var(--font-ui); }
.log__body { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; font-size: var(--fs-small); overflow-anchor: none; }
.log__body:focus-visible { outline-offset: calc(var(--focus-w) * -1); }
.log__space { position: relative; min-height: 100%; }
.log__empty { padding: var(--s-4) var(--s-5); color: var(--ink-3); }

.entry { position: absolute; left: 0; right: 0; align-items: start; min-height: var(--h-row); border-left: var(--stripe) solid transparent; line-height: var(--h-row); }
.entry:hover { background: var(--hull-raise); }
.entry__time { color: var(--ink-3); font: 400 var(--fs-label)/var(--h-row) var(--font-num); white-space: nowrap; }
.entry__level { display: inline-flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-small)/var(--h-row) var(--font-ui); white-space: nowrap; }
.entry__step { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry__step .num { margin-right: var(--s-2); color: var(--ink-2); font-size: var(--fs-label); }
.entry__msg { padding: var(--s-2) 0; color: var(--ink); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.entry__level[data-level="info"] { color: var(--ink-3); }
.entry__level[data-level="success"] { color: var(--cold); }
.entry__level[data-level="warning"] { color: var(--warm); }
.entry__level[data-level="error"] { color: var(--hot); }
.entry--info .entry__msg { color: var(--ink-2); }
.entry--warning { border-left-color: var(--warm-line); background: var(--warm-wash); }
.entry--error { border-left-color: var(--hot); background: var(--hot-wash); }
.entry--error .entry__msg { font-weight: 600; }
.entry__more { display: grid; place-items: center; width: var(--h-switch); height: var(--h-row); padding: 0; border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink-2); }
.entry__more:hover { background: var(--hull-raise-2); color: var(--ink); }
.entry__more:focus-visible { outline-offset: calc(var(--focus-w) * -1); }
.entry.is-open .entry__more .icon { rotate: 180deg; }
.entry__detail { grid-column: 4 / 5; margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border-left: var(--hair) solid var(--line-bright); background: var(--hull-sunk); color: var(--ink-2); font: 400 var(--fs-label)/1.6 var(--font-num); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }

.log.is-folded .log__head { border-bottom: 0; }
.log.is-folded .log__body, .log.is-folded .log__cols, .log.is-folded .log__filters, .log.is-folded .log__search, .log.is-folded #log-follow, .log.is-folded .log__resize { display: none; }
.log.is-folded .log__last { display: flex; }

@media (max-width: 1279px) {
  .log__cols, .entry { grid-template-columns: var(--w-time) var(--w-level) 2rem minmax(0, 1fr) var(--h-switch); }
  .entry__stepname, .filter__word { display: none; }
  .filter { padding: 0 var(--s-2); }
}