/* Components shared across sections: phone, messages, the message slip and its pad, stamp,
   check boxes, notifications, labels and notes. Adapted from Hero v3 and scroll-story-v1. */

/* ---------- Labels ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: 2px;
  color: var(--copy);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tag-caller { margin: 0 0 10px 6px; background: var(--ink); }
.tag-team {
  position: absolute;
  z-index: 4;
  top: -13px;
  right: 16px;
  background: var(--ballpoint);
  box-shadow: 0 6px 14px -8px rgba(15, 29, 40, 0.6);
  transition: transform 700ms var(--ease-paper);
}

.scene-note {
  display: flex;
  gap: 10px;
  max-width: 54ch;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.scene-note svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* ---------- Phone ---------- */

.phone {
  position: relative;
  width: 100%;
  padding: 8px;
  border-radius: 30px;
  background: var(--phone);
  box-shadow: 0 2px 2px rgba(15, 29, 40, 0.18), 0 24px 48px -20px rgba(15, 29, 40, 0.55);
}
.phone-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-radius: 22px 22px 0 0;
  background: #E7ECEE;
  border-bottom: 1px solid #D3DBDF;
}
/* Older messages fade out under the header */
.phone-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 26px;
  background: linear-gradient(var(--screen), rgba(243, 246, 247, 0));
  pointer-events: none;
}
.phone-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--phone-avatar);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
}
.phone-name { font-size: 0.875rem; font-weight: 700; line-height: 1.25; }
.phone-name span { display: block; font-weight: 400; color: var(--ink-soft); }

/* Messages */
.msg { max-width: 84%; padding: 9px 12px; border-radius: 16px; font-size: 0.875rem; line-height: 1.38; }
.msg-biz {
  align-self: flex-start;
  background: var(--bubble-biz);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 0 #D3DBDF;
}
.msg-caller {
  align-self: flex-end;
  background: var(--bubble-caller);
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
  transition: box-shadow 400ms ease;
}
.msg-caller.is-copied { box-shadow: 0 0 0 2px var(--screen), 0 0 0 3.5px var(--ballpoint); }
.msg-staff .msg-from { color: var(--ballpoint); }
.msg-from {
  display: block;
  margin-bottom: 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.msg-note {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
}
.msg-note--missed { color: var(--print); }
.msg-note--takeover { color: var(--ballpoint); }
.msg-note svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.typing {
  display: none;
  align-self: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  background: var(--bubble-biz);
  box-shadow: 0 1px 0 #D3DBDF;
}
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-soft);
  animation: dot 1s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot {
  0%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

/* ---------- Notifications (hero lock screen, Why 02) ---------- */

.note-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--print);
  color: #FFFFFF;
}
.note-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- The pad and the slip ---------- */

.sheet {
  position: absolute;
  inset: 0;
  background-color: var(--paper-under);
  background-image: url("../assets/paper-grain.svg");
  -webkit-mask: var(--perforation);
  mask: var(--perforation);
}
.sheet-2 {
  background-color: var(--paper-under-2);
  transform: translate(9px, 10px) rotate(0.7deg);
  box-shadow: var(--shadow-paper);
}
.sheet-1 { transform: translate(4px, 5px) rotate(0.3deg); }
.sheet-print {
  padding: 34px 22px 0;
  font-family: var(--font-slip);
  font-weight: 850;
  font-variation-settings: "wdth" 66;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.375rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--print);
}

.slip {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 36px 22px 22px;
  background-color: var(--paper);
  background-image: url("../assets/paper-grain.svg");
  color: var(--ink);
  box-shadow: var(--shadow-paper);
  -webkit-mask: var(--perforation);
  mask: var(--perforation);
  transform-origin: 30% 0;
  transition: transform 700ms var(--ease-paper);
}
.slip-serial {
  position: absolute;
  top: 12px;
  left: 22px;
  font-family: var(--font-data);
  font-variation-settings: "wdth" 80;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--print);
}
.slip-form {
  position: absolute;
  top: 12px;
  right: 22px;
  display: none;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variation-settings: "wdth" 75;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--print);
}
.slip-head { padding-bottom: 12px; border-bottom: 2px solid var(--print); }
.slip-title {
  font-family: var(--font-slip);
  font-weight: 850;
  font-variation-settings: "wdth" 66;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.375rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--print);
}
.slip-sub { margin-top: 8px; font-size: 0.875rem; font-weight: 600; color: var(--print); }
.slip-sub [data-slip-state] { color: var(--ballpoint); }
.slip-sub [data-slip-state].is-heat { color: var(--print); }

.slip-meta { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 0 12px; }
.slip-meta div,
.slip-lines .line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--print-soft);
}
.slip dt {
  flex: none;
  font-weight: 700;
  font-variation-settings: "wdth" 75;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--print);
}
.slip dd { min-width: 0; }

.ink {
  font-family: var(--font-data);
  font-variation-settings: "wdth" 85;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ballpoint);
}
.slip-meta dd:not(.ink) { font-weight: 650; font-size: 0.9375rem; }

.slip-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  padding: 4px 0 14px;
  font-size: 0.875rem;
  font-weight: 600;
}
.slip-checks li { display: flex; align-items: center; gap: 10px; }

.box {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--print);
  background: rgba(255, 255, 255, 0.35);
}
.box svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--ballpoint);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 0;
}

.slip-lines .line { flex-direction: column; gap: 2px; padding-top: 10px; }
.slip-lines .ink { font-size: 0.9375rem; }

/* Narrow screens: the stamp sits in the flow so it never covers text */
.stamp {
  position: relative;
  width: max-content;
  margin: 16px 6px 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px 7px;
  border: 3px double var(--ballpoint);
  border-radius: 4px;
  color: var(--ballpoint);
  font-weight: 850;
  font-variation-settings: "wdth" 70;
  font-size: 1.375rem;
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-7deg);
  opacity: 0.86;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.stamp::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--ballpoint);
  border-radius: 8px;
  opacity: 0;
}
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-2deg) scale(1.7); filter: blur(3px); }
  55% { opacity: 0.95; transform: rotate(-7deg) scale(0.96); filter: blur(0); }
  100% { opacity: 0.86; transform: rotate(-7deg) scale(1); }
}
@keyframes ink-spread {
  0% { opacity: 0.5; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(1.22); }
}

.slip-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--print-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--print);
}
.slip-mark { flex: none; width: 24px; height: auto; margin-top: 1px; }

/* A blank slip: printed form, nothing written on it */
.slip-blank .slip-title { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.125rem); }
.slip-blank .slip-sub span { color: var(--print); opacity: 0.8; }
.blank-lines { margin-top: 14px; }
.blank-lines div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 36px;
  padding-top: 12px;
  border-bottom: 1px solid var(--print-soft);
}
.blank-lines dt {
  flex: none;
  font-weight: 700;
  font-variation-settings: "wdth" 75;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--print);
}
.blank-lines dd { margin: 0; min-width: 0; }

/* Words flying from the phone onto the ticket (desktop story) */
.flyer {
  position: fixed;
  z-index: 20;
  margin: 0;
  padding: 9px 12px;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  background: var(--bubble-caller);
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.38;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (min-width: 560px) {
  .slip { padding: 38px 30px 24px; }
  .slip-serial { left: 30px; }
  .slip-form { display: block; right: 30px; }
  .slip-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .slip-checks { font-size: 0.9375rem; gap: 10px 18px; }
  .sheet-print { padding: 38px 30px 0; }
}