/* ══════════════════════════════════════════════════════════════════════════
   wk-code-log.css — CODE, the fourth grain of Time & Billing.

   Reads as a short written report, not a feed: the day's sentence first, then
   one card per app, and the commits themselves folded away behind a disclosure.
   The prose is the largest type on the panel because the prose IS the answer —
   see the header of wk-code-log.js.

   🚨 SHAPE-SEMANTIC BUTTONS ARE ID-SCOPED. The tenant theme forces
   `border-radius: var(--wt-theme-btn-radius) !important` on EVERY <button> via
   a selector carrying five pseudo-classes — specificity (0,5,1), which beats a
   plain class even with !important. Anything here whose shape means something
   (the pill on the re-write button) has to win from `#finTimeCodeBody`, and
   `<summary>` is styled rather than a <button> for the same reason.
   ══════════════════════════════════════════════════════════════════════════ */

.wkcl-wrap { display: flex; flex-direction: column; gap: 18px; padding: 2px 0 10px; }

/* ── the head ───────────────────────────────────────────────────────────── */
.wkcl-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.wkcl-head-id { min-width: 0; }
.wkcl-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
/* The disclaimer is not small print. It is the one sentence that stops somebody
   reading this panel as a second, competing record of how long the day took. */
.wkcl-sub { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink3); max-width: 62ch; }
.wkcl-head-facts { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.wkcl-head-facts > span {
  font-size: 11px; font-weight: 650; color: var(--ink2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#finTimeCodeBody .wkcl-refresh {
  border: 1px solid var(--border); background: var(--border-s); color: var(--ink2);
  font-size: 11px; font-weight: 650; padding: 5px 12px;
  border-radius: 999px !important; cursor: pointer; transition: background .15s, color .15s;
}
#finTimeCodeBody .wkcl-refresh:hover { background: var(--surf); color: var(--c-blue); }

/* ── a day ──────────────────────────────────────────────────────────────── */
.wkcl-day { display: flex; flex-direction: column; gap: 10px; }
.wkcl-day-head { display: flex; align-items: baseline; gap: 10px; }
.wkcl-day-date { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.wkcl-day-span { font-size: 11px; color: var(--ink4); font-variant-numeric: tabular-nums; }
/* The day in one sentence, and the biggest text on the panel on purpose. */
.wkcl-headline {
  margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 600; color: var(--ink);
  max-width: 78ch;
}

/* ── one app ────────────────────────────────────────────────────────────── */
.wkcl-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
}
/* Unfiled is a loose end, so it reads like one — quieter, not alarming. Amber
   here would say "something is wrong with this person's day", when what is
   actually missing is one declaration in the Repo Library. */
.wkcl-card.is-unfiled { background: var(--border-s); border-style: dashed; box-shadow: none; }
.wkcl-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.wkcl-card-id { display: flex; align-items: baseline; gap: 9px; min-width: 0; flex-wrap: wrap; }
.wkcl-card-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.wkcl-card-where { font-size: 11px; font-weight: 600; color: var(--c-blue); }
.wkcl-card-counts {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 650; color: var(--ink4);
  font-variant-numeric: tabular-nums;
}
.wkcl-sum { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink); max-width: 82ch; }
.wkcl-sum--none { color: var(--ink4); font-style: italic; }
.wkcl-items { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.wkcl-items li { font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.wkcl-unfiled { margin: 2px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink3); max-width: 74ch; }

/* ── the actions, folded away ───────────────────────────────────────────── */
.wkcl-acts { margin-top: 2px; }
.wkcl-acts > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; color: var(--ink3);
  padding: 3px 10px; border-radius: 999px; background: var(--border-s);
  transition: color .15s, background .15s;
}
.wkcl-acts > summary::-webkit-details-marker { display: none; }
.wkcl-acts > summary::after { content: '▾'; font-size: 9px; opacity: .7; }
.wkcl-acts[open] > summary::after { content: '▴'; }
.wkcl-acts > summary:hover { color: var(--c-blue); }
.wkcl-act-list { margin: 9px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.wkcl-act {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px;
  align-items: baseline; padding: 3px 0; font-size: 11.5px; line-height: 1.5;
  border-top: 1px solid var(--border-s);
}
.wkcl-act:first-child { border-top: 0; }
.wkcl-act-t { color: var(--ink4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wkcl-act-msg { color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
a.wkcl-act-msg { text-decoration: none; }
a.wkcl-act-msg:hover { color: var(--c-blue); text-decoration: underline; }
.wkcl-act-meta { color: var(--ink4); font-size: 10.5px; white-space: nowrap; }
/* A cache-buster bump is real and it is logged. It is just not what the day was
   about, so it recedes rather than disappearing — see looksTrivial(). */
.wkcl-act.is-house .wkcl-act-msg, .wkcl-act.is-house .wkcl-act-t { opacity: .55; }
.wkcl-trunc { margin: 8px 0 0; font-size: 11px; color: var(--ink4); }

/* ── notices ────────────────────────────────────────────────────────────── */
.wkcl-notice {
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--border-s); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink2);
}
.wkcl-notice.is-warn { background: var(--c-amber-bg, var(--border-s)); border-color: var(--c-amber-soft, var(--border)); color: var(--ink); }
.wkcl-notice.is-soft { font-size: 11.5px; color: var(--ink3); }

@media (max-width: 640px) {
  .wkcl-act { grid-template-columns: 48px minmax(0, 1fr); }
  .wkcl-act-meta { grid-column: 2; }
  .wkcl-head { flex-direction: column; align-items: stretch; gap: 12px; }
}

@media print {
  /* The commits are working-out; a printed timesheet wants the written record. */
  .wkcl-acts, .wkcl-refresh { display: none !important; }
  .wkcl-card { break-inside: avoid; box-shadow: none; }
}

/* 🚨 `hidden` NEEDS A CSS PARTNER HERE, and this is why the search box stayed
   up in Code view on the first build. The UA rule is `[hidden]{display:none}`
   at (0,1,0); `.fin-tb-search{display:flex}` is also (0,1,0) but it is an
   AUTHOR rule, so it wins and the property does nothing. Same class of bug as
   `.wkdl-mini[hidden]` in the day-log wizard. The two controls that narrow ROWS
   are the only ones taken down — the period and the consultant still mean
   exactly what they mean on the other three grains. */
.fin-tb-search[hidden],
#finTimeScopePick[hidden] { display: none !important; }