/* ══════════════════════════════════════════════════════════════
   wk-log-receipt.css — THE receipt, shown after every time log.

   A report, not a toast: full-height sheet, masthead, stat row, then a
   section per project holding the app's real task cards. Uses the app's
   own tokens (--c-blue is the tenant colour, --c-green, --ink*, --border)
   so it inherits branding everywhere it's shown.

   ⚠️ The tenant theme forces `border-radius: var(--wt-theme-btn-radius)
   !important` on every <button> via a 5-pseudo-class selector, which outranks
   a plain class. Anything here whose SHAPE is semantic (the round tick, the
   pill buttons, the circular ×) is therefore id-scoped at the bottom of this
   file — that's the only way to win the cascade.
   ══════════════════════════════════════════════════════════════ */

.wklr-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
  opacity: 0; transition: opacity .22s ease;
}
.wklr-overlay.is-open { opacity: 1; }
.wklr-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .58); backdrop-filter: blur(5px); }
body.wklr-open { overflow: hidden; }

.wklr-sheet {
  position: relative; margin: auto;
  width: min(1080px, 96vw); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--card, #fff); border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(15, 23, 42, .32), 0 4px 18px rgba(15, 23, 42, .10);
  transform: translateY(18px) scale(.985); opacity: 0;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.wklr-overlay.is-open .wklr-sheet { transform: none; opacity: 1; }

/* ── masthead ───────────────────────────────────────────────── */
.wklr-mast {
  position: relative; flex-shrink: 0;
  display: flex; align-items: flex-start; gap: 14px;
  /* Was 26/22. The masthead is the smallest part of a receipt's job. */
  padding: 16px 22px 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(22, 163, 74, .13) 0%, transparent 55%),
    linear-gradient(180deg, #f8fbf9 0%, var(--card, #fff) 100%);
  border-bottom: 1px solid var(--border-s, #eef2f7);
  overflow: hidden;
}
/* One slow sheen across the masthead so the moment lands. */
.wklr-mast-glow {
  position: absolute; inset: -40% -10% auto; height: 220%;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translateX(-60%);
  animation: wklrSheen 1.5s cubic-bezier(.4, 0, .2, 1) .15s 1 both;
  pointer-events: none;
}
@keyframes wklrSheen { to { transform: translateX(60%); } }
.wklr-mast-body { position: relative; flex: 1; min-width: 0; }

.wklr-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-green-ink, #15803d);
}
.wklr-tick {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--c-green, #16a34a); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
  animation: wklrPop .42s cubic-bezier(.22, 1.4, .36, 1) both;
}
@keyframes wklrPop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
/* ── The header earns its height or it doesn't get it ──────────
   Tyler: "your summary at the top takes up way too much header space. We don't
   need the summary anymore… just don't take up so much header space." This is a
   RECEIPT — the thing you came to read is the list of what got logged, and the
   masthead was pushing all of it below the fold. So the title is smaller, the
   recap is two lines with the rest on hover, and the identity row folds onto the
   same line instead of claiming one of its own. Kept, but shrunk. */
.wklr-title {
  margin: 6px 0 0; font-size: 19px; font-weight: 800; line-height: 1.25;
  letter-spacing: -.015em; color: var(--ink, #0f172a);
}
.wklr-recap {
  margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink2, #64748b); max-width: 74ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The whole recap is still there for anyone who wants it — one click, no reflow
   of the list below until they ask for it. */
.wklr-recap.is-open { -webkit-line-clamp: unset; display: block; }
.wklr-recap--more { cursor: pointer; }
.wklr-recap--more:hover { color: var(--ink, #0f172a); }

.wklr-idrow { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-top: 9px; }
.wklr-logos { display: inline-flex; align-items: center; }
.wklr-logos .wklr-logo { margin-right: -7px; box-shadow: 0 0 0 2.5px var(--card, #fff); }
.wklr-logos .wklr-logo:last-child { margin-right: 0; }
.wklr-logo {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
}
/* A COMPANY LOGO IS NOT A PHOTO. `cover` cropped every wide mark to fill the
   square — the VisionOne wordmark lost its ends. Contain it, on a plain card
   surface, with a hairline so a white logo still reads as a tile. */
.wklr-logo.is-img { background: var(--card, #fff); box-shadow: inset 0 0 0 1px var(--border-s, #eef2f7); }
.wklr-logo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px;
  box-sizing: border-box; }
/* A face IS a photo — fill it, no padding. */
.wklr-face.is-img { background: var(--card, #fff); }
.wklr-face img { object-fit: cover; padding: 0; }
.wklr-logo--sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.wklr-logo--sm img { padding: 2px; }

.wklr-by { display: inline-flex; align-items: center; gap: 8px; }
.wklr-by-t { display: flex; flex-direction: column; line-height: 1.25; }
.wklr-by-l { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3, #94a3b8); }
.wklr-by-n { font-size: 12.5px; font-weight: 750; color: var(--ink, #0f172a); }
/* Inline, so "Logged by Tyler Bonahoom" is one line in the identity row. */
.wklr-by-n .wklr-by-l { margin-right: 2px; }

/* ── faces ──────────────────────────────────────────────────── */
.wklr-faces { display: inline-flex; align-items: center; flex-shrink: 0; }
.wklr-faces .wklr-face { margin-right: -6px; }
.wklr-faces .wklr-face:last-child { margin-right: 0; }
.wklr-face {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  color: #fff; font-size: 9.5px; font-weight: 800;
  box-shadow: 0 0 0 2px var(--card, #fff);
}
.wklr-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wklr-face--lg { width: 32px; height: 32px; font-size: 11px; }
.wklr-face--more { background: var(--ink4, #cbd5e1) !important; color: var(--ink2, #475569); }
.wklr-face.is-client { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3.5px #a78bfa; }

/* ── scroll body ────────────────────────────────────────────── */
.wklr-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 26px 26px; }

/* ── stat row ───────────────────────────────────────────────── */
.wklr-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.wklr-stat {
  border: 1px solid var(--border-s, #eef2f7); border-radius: 14px;
  padding: 14px 16px; background: var(--surface, #f8fafc);
  animation: wklrRise .38s cubic-bezier(.22, 1, .36, 1) both;
}
.wklr-stat-v {
  font-size: 24px; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink, #0f172a); font-variant-numeric: tabular-nums;
}
.wklr-stat-l {
  margin-top: 4px; font-size: 10.5px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink3, #94a3b8);
}
.wklr-stat--hero {
  background: linear-gradient(160deg, rgba(22, 163, 74, .11), rgba(22, 163, 74, .04));
  border-color: rgba(22, 163, 74, .28);
}
.wklr-stat--hero .wklr-stat-v { color: var(--c-green-ink, #15803d); font-size: 27px; }
/* `--money` is deliberately gone with the "$X of value" tile it styled — the
   stat row counts work, not takings. See the comment on the row in the JS. */
.wklr-stat--done .wklr-stat-v { color: var(--c-green-ink, #15803d); }
@keyframes wklrRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── what this changed ─────────────────────────────────────── */
.wklr-changed {
  border: 1px solid var(--border-s, #eef2f7); border-left: 3px solid var(--c-green, #16a34a);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; background: var(--card, #fff);
}
.wklr-changed-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink3, #94a3b8); margin-bottom: 8px;
}
.wklr-changed-l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wklr-changed-l li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink2, #475569);
}
.wklr-changed-l svg { color: var(--c-green, #16a34a); flex-shrink: 0; margin-top: 2px; }
.wklr-changed-l b { color: var(--ink, #0f172a); font-weight: 800; }

/* ── project sections ──────────────────────────────────────── */
.wklr-body { display: flex; flex-direction: column; gap: 16px; }
.wklr-pj {
  border: 1px solid var(--border-s, #eef2f7); border-radius: 16px; overflow: hidden;
  background: var(--card, #fff);
  animation: wklrRise .4s cubic-bezier(.22, 1, .36, 1) both;
}
.wklr-pj-head {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  background: var(--surface, #f8fafc); border-bottom: 1px solid var(--border-s, #eef2f7);
}
.wklr-pj-id { flex: 1; min-width: 0; }
.wklr-pj-nm {
  font-size: 15px; font-weight: 780; color: var(--ink, #0f172a); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wklr-pj-sub { font-size: 11.5px; font-weight: 600; color: var(--ink3, #94a3b8); margin-top: 2px; }
.wklr-pj-nums { text-align: right; flex-shrink: 0; }
.wklr-pj-h { font-size: 17px; font-weight: 800; color: var(--ink, #0f172a); font-variant-numeric: tabular-nums; }
.wklr-pj-v { font-size: 11.5px; font-weight: 750; color: var(--c-blue, #2563eb); margin-top: 1px; }
.wklr-pj-pct {
  font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink3, #94a3b8); margin-top: 2px;
}
/* Share of the day this project took — the split, without a chart. Only drawn
   when there IS a split (see projectSection), and deliberately hairline: it
   annotates the section, it isn't a heading rule. */
.wklr-pj-bar { height: 2px; background: var(--border-s, #eef2f7); }
.wklr-pj-bar span {
  display: block; height: 100%; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, rgba(37, 99, 235, .55), rgba(37, 99, 235, .85));
  transform-origin: left; animation: wklrGrow .55s cubic-bezier(.22, 1, .36, 1) .1s both;
}
@keyframes wklrGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wklr-pj-rows { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

/* ── one logged entry ──────────────────────────────────────── */
.wklr-row {
  border: 1px solid var(--border-s, #eef2f7); border-radius: 14px; padding: 10px 12px 12px;
  background: var(--card, #fff);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
  animation: wklrRise .4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--wklr-i, 0) * 45ms);
}
.wklr-row[data-open-task] { cursor: pointer; }
.wklr-row[data-open-task]:hover {
  border-color: #c7d2fe; box-shadow: 0 8px 22px rgba(15, 23, 42, .09); transform: translateY(-1px);
}
.wklr-row[data-open-task]:focus-visible { outline: 2px solid var(--c-blue, #2563eb); outline-offset: 2px; }
.wklr-row.is-done { background: linear-gradient(180deg, rgba(22, 163, 74, .045), transparent 60%); }

.wklr-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.wklr-row-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.wklr-tag {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--surface, #f1f5f9); color: var(--ink2, #64748b);
}
.wklr-tag--new { background: #eef2ff; color: #4338ca; }
.wklr-tag--plan { background: #f1f5f9; color: #475569; }
.wklr-tag--done { background: var(--c-green-bg, #defbe6); color: var(--c-green-ink, #15803d); }
.wklr-tag--ws {
  background: transparent; color: var(--ink3, #94a3b8);
  border: 1px dashed var(--border, #e2e8f0); text-transform: none; letter-spacing: 0;
  font-size: 10.5px; font-weight: 700; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wklr-row-nums { display: flex; align-items: baseline; gap: 9px; flex-shrink: 0; }
.wklr-rate { font-size: 10.5px; font-weight: 700; color: var(--ink3, #94a3b8); }
.wklr-hrs {
  font-size: 15px; font-weight: 800; color: var(--ink, #0f172a); font-variant-numeric: tabular-nums;
}
.wklr-amt { font-size: 12.5px; font-weight: 800; color: var(--c-blue, #2563eb); font-variant-numeric: tabular-nums; }

/* The real task card sits inside untouched — only its outer spacing is ours. */
.wklr-row-card > * { margin: 0 !important; }

.wklr-row-who {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding-top: 9px; border-top: 1px dashed var(--border-s, #eef2f7);
}
.wklr-row-who-l {
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3, #94a3b8); flex-shrink: 0;
}
.wklr-row-who-n {
  font-size: 11.5px; font-weight: 650; color: var(--ink2, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Project- / stream-level time: no task record, same frame. */
.wklr-plain { padding: 2px 2px 0; }
.wklr-plain-t { font-size: 14px; font-weight: 700; color: var(--ink, #0f172a); line-height: 1.35; }
.wklr-plain-d { font-size: 12.5px; color: var(--ink2, #64748b); line-height: 1.5; margin-top: 4px; }
.wklr-plain-m {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink3, #94a3b8); margin-top: 7px;
}

.wklr-empty {
  padding: 40px 20px; text-align: center; font-size: 13.5px; color: var(--ink2, #64748b);
  border: 1px dashed var(--border, #e2e8f0); border-radius: 14px;
}

/* ── footer ─────────────────────────────────────────────────── */
.wklr-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-top: 1px solid var(--border-s, #eef2f7);
  background: var(--card, #fff);
}
.wklr-foot-note { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink2, #64748b); }
.wklr-foot-note b { color: var(--ink, #0f172a); font-weight: 800; }
.wklr-btn {
  border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff); color: var(--ink, #0f172a);
  font: 700 13px/1 inherit; padding: 11px 18px; cursor: pointer; flex-shrink: 0;
  transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.wklr-btn:hover { background: var(--surface, #f8fafc); border-color: var(--ink4, #cbd5e1); }
.wklr-btn:active { transform: translateY(1px); }
.wklr-btn--primary {
  background: var(--c-green, #16a34a); border-color: var(--c-green, #16a34a); color: #fff;
  box-shadow: 0 3px 12px rgba(22, 163, 74, .28);
}
.wklr-btn--primary:hover { background: var(--c-green-d, #15803d); border-color: var(--c-green-d, #15803d); }
.wklr-btn--danger { color: #b91c1c; border-color: #fecaca; }
.wklr-btn--danger:hover { background: #fef2f2; border-color: #fca5a5; }
.wklr-btn[disabled] { opacity: .6; cursor: default; }

.wklr-x {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff);
  color: var(--ink2, #64748b); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s ease, color .14s ease;
}
.wklr-x:hover { background: var(--surface, #f1f5f9); color: var(--ink, #0f172a); }

/* ── shape overrides ────────────────────────────────────────────
   The tenant theme's `button:not(…):not(…):not(…):not(…):not(…)` rule pins a
   radius on EVERY button at specificity (0,5,1) — an id here is the only thing
   that beats it. Every shape below is semantic, not decorative. */
#wkLogReceiptOverlay .wklr-btn { border-radius: 11px !important; }
#wkLogReceiptOverlay .wklr-x { border-radius: 50% !important; }
#wkLogReceiptOverlay .wklr-tick { border-radius: 50% !important; }

/* ── narrow screens ─────────────────────────────────────────── */
@media (max-width: 620px) {
  .wklr-overlay { padding: 0; }
  .wklr-sheet { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .wklr-mast { padding: 20px 18px 18px; }
  .wklr-title { font-size: 21px; }
  .wklr-scroll { padding: 16px 14px 20px; }
  .wklr-foot { padding: 12px 14px; flex-wrap: wrap; }
  .wklr-foot-note { flex: 1 0 100%; margin-bottom: 4px; }
  .wklr-btn { flex: 1; text-align: center; justify-content: center; }
  .wklr-pj-head { flex-wrap: wrap; }
}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wklr-overlay, .wklr-sheet { transition: none; }
  .wklr-mast-glow { display: none; }
  .wklr-tick, .wklr-stat, .wklr-pj, .wklr-row, .wklr-pj-bar span { animation: none; }
}

/* ── dark theme ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  html[data-theme="dark"] .wklr-mast {
    background: linear-gradient(180deg, rgba(22, 163, 74, .08) 0%, var(--card, #0f172a) 100%);
  }
  html[data-theme="dark"] .wklr-mast-glow { display: none; }
}