/* Experience: the expandable work log (a table drawn as a list). */
.log{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.log-header, .log-row{
  display:grid;
  grid-template-columns:1.5fr 1.4fr 1fr 1fr 24px;
  gap:12px;
  padding:14px 18px;
  align-items:center;
  text-align:left;
}
.log-header{
  background:var(--bg-deep);
  font-family:var(--font-mono);
  font-size:var(--fs-xxs);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.log-entry{ border-bottom:1px solid var(--line); }
.log-entry:last-child{ border-bottom:none; }
.log-row{
  width:100%;
  background:var(--panel);
  border:none;
  color:var(--text);
  cursor:pointer;
  font-family:var(--font-body);
  font-size:var(--fs-md);
  transition:background 0.2s ease;
}
.log-row:hover{ background:var(--panel-hover); }
.log-row .role{ font-weight:600; }
.log-row .company, .log-row .location, .log-row .period{
  color:var(--text-dim);
  font-size:var(--fs-sm);
}
.log-row .period{ font-family:var(--font-mono); }
.chevron{
  color:var(--accent);
  transition:transform 0.25s ease;
  font-size:0.9rem;
  justify-self:end;
}
.log-entry.open .chevron{ transform:rotate(90deg); }

.log-detail{
  max-height:0;
  overflow:hidden;
  background:var(--bg-deep);
  transition:max-height 0.35s ease;
}
.log-entry.open .log-detail{ max-height:260px; }
.log-detail ul{
  list-style:none;
  padding:4px 18px 18px 18px;
}
.log-detail li{
  position:relative;
  padding-left:18px;
  margin-top:10px;
  font-size:var(--fs-md);
  color:var(--text);
  opacity:0.92;
}
.log-detail li::before{
  content:'·';
  position:absolute;
  left:0;
  color:var(--accent);
  font-size:1.3rem;
  line-height:0.7;
  top:2px;
}

@media (max-width:720px){
  .log-header{ display:none; }
  .log-row{ grid-template-columns:1fr 20px; grid-template-areas:"role chev" "company chev" "meta chev"; }
  .log-row .role{ grid-area:role; }
  .log-row .company{ grid-area:company; }
  .log-row .location, .log-row .period{ grid-area:meta; display:inline; }
  .log-row .location::after{ content:' — '; }
  .chevron{ grid-area:chev; }
}