/* ═══════════════════════════════════════════════
   Not-clocked-in reminder — the modal that says your
   time is not landing on a job, and hands over the jobs.
   Classes are prefixed clr-. Behavior: assets/js/core/clock-reminder.js
   ═══════════════════════════════════════════════ */

.clr-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .42); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: var(--z-modal);
  animation: clr-fade .14s ease;
}

.clr-card {
  width: 420px; max-width: 100%;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: clr-rise .16s ease;
}

/* ─── Head ─── */
.clr-head {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.clr-mark {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--tint-warning);
  color: var(--color-warning);
}
.clr-headings { min-width: 0; }
.clr-title {
  font-family: var(--font-heading);
  font-size: var(--text-section-title); font-weight: 800;
  color: var(--text-primary);
  margin: 1px 0 5px;
}
.clr-lead {
  font-size: var(--text-body); line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}
.clr-lead strong {
  color: var(--text-primary);
  font-family: var(--font-mono); font-weight: 600;
}
.clr-since {
  font-size: var(--text-small); line-height: 1.4;
  color: var(--text-muted);
  margin: 6px 0 0;
}

/* ─── Body ─── */
.clr-body { padding: 14px 20px 4px; }
.clr-pick {
  font-size: var(--text-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.clr-tasks { display: flex; flex-direction: column; gap: 6px; }

.clr-task {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px 8px 10px;
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-md);
  transition: background .12s, border-color .12s;
}
.clr-task:hover:not(:disabled) { background: var(--bg-input); border-color: var(--border-hover); }
.clr-task:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.clr-task:disabled { cursor: default; opacity: .55; }
.clr-task--paid { border-left-color: var(--color-success); }
.clr-task--commission { border-left-color: var(--color-purple); }

.clr-task__main { flex: 1 1 auto; min-width: 0; }
.clr-task__title {
  display: block;
  font-size: var(--text-body); font-weight: 700;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clr-task__meta {
  display: block; margin-top: 2px;
  font-size: var(--text-small);
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clr-task__own {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--accent-bg); color: var(--accent);
  font-size: var(--text-tiny); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  vertical-align: 1px;
}
.clr-task__go {
  flex: 0 0 auto;
  font-size: var(--text-small); font-weight: 700;
  color: var(--accent);
}

.clr-note, .clr-err {
  font-size: var(--text-body); line-height: 1.45;
  margin: 0; padding: 10px 12px;
  border-radius: var(--radius-md);
}
.clr-note { background: var(--bg-input); color: var(--text-secondary); }
.clr-err { background: var(--tint-danger); color: var(--color-danger); margin-top: 8px; }

/* ─── Foot ─── */
.clr-foot {
  padding: 16px 20px 18px;
}
.clr-btns { display: flex; gap: 10px; }
.clr-btn {
  flex: 1 1 0; padding: 10px 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: var(--text-body); font-weight: 700;
  border-radius: var(--radius-md); cursor: pointer;
  text-decoration: none;
}
.clr-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.clr-btn--ghost {
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.clr-btn--ghost:hover { background: var(--bg-input); color: var(--text-primary); }
.clr-btn--go {
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  border: 1px solid transparent;
}
.clr-btn--go:hover { filter: brightness(.94); }

/* ─── Stepping out ─── */
.clr-step {
  margin: 12px 0 0;
  font-size: var(--text-small); line-height: 1.5;
  color: var(--text-muted);
}
.clr-link {
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: inherit; font-weight: 700;
  color: var(--color-info); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.clr-link:hover { color: var(--text-primary); }
.clr-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.clr-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }

/* ─── Away — an answer, not a nag, so it reads calmer ─── */
.clr-card--away .clr-mark { background: var(--tint-info); color: var(--color-info); }

/* The night option sits under Clear away on the check-in: a second answer,
   not a second ask, so it keeps the quiet weight of the step line above it. */
.clr-step--night { margin-top: 6px; }
.clr-link--night { color: var(--color-purple); }

/* ─── Night — the reminder saying good night, then leaving ─── */
.clr-card--night .clr-head { border-bottom: 0; }
.clr-card--night .clr-mark { background: var(--tint-info); color: var(--color-purple); }
.clr-card--night .clr-body, .clr-card--night .clr-foot { display: none; }

/* ─── Done state — the punch landed ─── */
.clr-card--done .clr-head { border-bottom: 0; }
.clr-card--done .clr-mark { background: var(--tint-success); color: var(--accent); }
.clr-card--done .clr-body, .clr-card--done .clr-foot { display: none; }

.clr-ico { display: flex; }
.clr-ico svg { width: 22px; height: 22px; }

@keyframes clr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes clr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .clr-overlay, .clr-card { animation: none; }
}

/* ─── Phone: sit it on the bottom, where a thumb is ─── */
@media (max-width: 560px) {
  .clr-overlay { align-items: flex-end; padding: 0; }
  .clr-card {
    width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .clr-head { padding: 16px 16px 12px; }
  .clr-body { padding: 12px 16px 4px; }
  .clr-foot { padding: 14px 16px 16px; }
  .clr-btns { flex-wrap: wrap; }
  .clr-btn { min-height: 44px; }
}