/* Unfinished-order bar. Loaded by the homepage and by the page-shell pages, whose
   stylesheets disagree about which theme is the default and what their variables
   are called, so this paints itself in brand blue and stays legible either way. */

/* No stacking context of its own: the homepage header is sticky, and a bar that
   outranked it would slide over the header instead of under it on the way out. */
.cz-resume {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  color: #ffffff;
  font-family: inherit;
}

.cz-resume-inner {
  width: min(1400px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 0.7rem 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Pages that name a mount put the bar inside their own column, where a full-bleed
   strip would look like a mistake, so it becomes a card there instead. */
[data-cz-resume] .cz-resume {
  border-radius: 14px;
  margin-bottom: 1rem;
}
[data-cz-resume] .cz-resume-inner {
  width: 100%;
  padding: 0.7rem 1.1rem;
}

.cz-resume-icon {
  flex: 0 0 auto;
  display: inline-flex;
}
.cz-resume-icon svg {
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

.cz-resume-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.cz-resume-msg { font-weight: 600; }
.cz-resume-detail {
  opacity: 0.85;
  overflow-wrap: anywhere;
}
.cz-resume-detail::before { content: " "; }
.cz-resume-hint {
  display: block;
  font-size: 0.8rem;
  opacity: 0.85;
}
.cz-resume-hint-link {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 600;
}
.cz-resume-hint-link:hover { color: #ffffff; }

.cz-resume-cta {
  flex: 0 0 auto;
  background: #ffffff;
  color: #1d4ed8;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cz-resume-cta:hover {
  color: #1d4ed8;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(8, 25, 66, 0.28);
}

/* Secondary to the payment button: it carries the link to another machine rather
   than following it here. */
.cz-resume-copy {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease;
}
.cz-resume-copy:hover { background: rgba(255, 255, 255, 0.16); }
.cz-resume-copy:disabled { cursor: default; opacity: 0.75; }

/* Shown only when the clipboard is refused, so it has to be wide enough to read
   and select by hand. */
.cz-resume-url {
  flex: 1 1 260px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.5rem 0.7rem;
}

.cz-resume-dismiss {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.cz-resume-dismiss:hover { background: rgba(255, 255, 255, 0.28); }

/* On a phone the bar becomes two rows: the message beside the dismiss button, then
   the call to action across the bottom. Three things are given up to keep it from
   eating a fifth of the screen — the clock, which would hold a row of its own; the
   sign-in hint, whose job RP does anyway by answering a spent key with its login
   page; and a text width of its own, so `flex-basis` leaves room for the dismiss
   button on the same line rather than wrapping it. */
@media (max-width: 640px) {
  .cz-resume-inner {
    flex-wrap: wrap;
    gap: 0.55rem 0.75rem;
    padding: 0.7rem 0;
  }
  .cz-resume-icon { display: none; }
  .cz-resume-hint { display: none; }
  .cz-resume-text { flex: 1 1 60%; order: 1; }
  .cz-resume-dismiss { order: 2; }
  /* Bottom row shared, with the payment button given twice the room, because a
     phone is usually the machine being copied from rather than to. */
  .cz-resume-cta { flex: 2 1 55%; order: 3; text-align: center; }
  .cz-resume-copy { flex: 1 1 30%; order: 4; }
  .cz-resume-url { flex: 1 1 100%; order: 4; }
}