/* log: rules no other view shares. Loads after app.css in the same layer. */
@layer app {
  /* ---------- log ---------- */
  .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .log { list-style: none; padding: 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; box-shadow: var(--inner); }
  .log li { display: grid; grid-template-columns: 48px 64px 92px minmax(0, 1fr) 44px; gap: 12px; align-items: center; min-height: 52px; padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .log li > .mono { font: 400 21px/1 var(--f-led); color: var(--amber); }
  .log li > .mono.dim { color: var(--mute); }
  .log li:last-child { border-bottom: 0; }
  .log .log-head { min-height: 34px; font: 600 9.5px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); background: var(--sunk); }
  .log .k-period_start, .log .k-period_end { background: var(--panel-3); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--phos); }
  .log .k-stat { box-shadow: inset 3px 0 var(--amber); }
  .log .k-stat.is-away { box-shadow: inset 3px 0 var(--cyan); }
  .log .k-sub { box-shadow: inset 3px 0 var(--phos); }
  .log .k-pos, .log .k-formation { box-shadow: inset 3px 0 var(--mute); }
  @media (max-width: 640px) {
    .log li { grid-template-columns: 40px 56px minmax(0, 1fr) 44px; }
    .log li > :nth-child(3) { display: none; }
  }
  .log-live { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--tally) 45%, var(--line-2)); border-radius: var(--r); }
  .log-live .live-dot { align-self: center; }
  .log-live b { font: 400 22px/1 var(--f-slate); letter-spacing: .04em; text-transform: uppercase; }
  .log-live [data-live=clock] { font: 400 30px/.8 var(--f-led); color: var(--phos); text-shadow: var(--glow-p); }
  .log-live small { margin-left: auto; font-size: 11.5px; color: var(--mute); }
  .log .log-sec { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; background: var(--sunk); font: 700 10px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line-2); }
  .log .log-sec.is-now { color: var(--bone); box-shadow: inset 3px 0 var(--tally); }
}