/* Components. Thick ink borders, hard offset shadows, soft irregular corners. */

/* --- button -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  min-height: var(--tap);
  padding: 10px 20px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

/* Pressing physically pushes the button into its own shadow. */
.btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-in);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: var(--shadow-in);
}

.btn--primary {
  background: var(--butter);
}
.btn--info {
  background: var(--peri);
}
.btn--danger {
  background: var(--coral);
}
.btn--ghost {
  background: transparent;
  box-shadow: none;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--surface);
  box-shadow: var(--shadow);
}

.btn--sm {
  min-height: 36px;
  padding: 4px 14px;
  font-size: 0.9rem;
  box-shadow: var(--shadow-in);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  min-width: var(--tap);
  padding: 8px;
}

.btn.is-busy {
  pointer-events: none;
  opacity: 0.7;
}

/* --- card ---------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--gap-lg);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Hand-drawn feel: only the hero card gets the irregular blob radius. */
.card--blob {
  border-radius: var(--r-blob);
  box-shadow: var(--shadow-lg);
}

.card--tilt {
  transform: rotate(-0.6deg);
}

.card--butter {
  background: var(--butter);
}
.card--mint {
  background: var(--mint);
}
.card--peri {
  background: var(--peri);
}
.card--lilac {
  background: var(--lilac);
}
.card--flat {
  box-shadow: none;
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: var(--gap);
}

/* --- header bar ---------------------------------------------------------- */

.topbar {
  position: sticky;
  top: var(--gap-sm);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 8px 8px 8px 18px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow);
  margin-bottom: var(--gap-lg);
}

.topbar__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
}

/* --- input --------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 16px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-input);
  background: var(--surface);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.input::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}

.input:focus {
  box-shadow: var(--shadow);
  transform: translate(-1px, -1px);
}

.input--mono {
  font-family: var(--font-mono);
  font-weight: 700;
}

select.input {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

/* --- badge / sticker ----------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 12px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
  transform: rotate(-3deg);
}

.badge--mint {
  background: var(--mint);
}
.badge--coral {
  background: var(--coral);
}
.badge--butter {
  background: var(--butter);
}
.badge--peri {
  background: var(--peri);
}
.badge--lilac {
  background: var(--lilac);
}
.badge--straight {
  transform: none;
}

/* --- chip (alias picker) -------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 4px 16px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-in);
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow);
}

.chip[aria-pressed='true'] {
  background: var(--butter);
  box-shadow: var(--shadow);
}

/* --- message list -------------------------------------------------------- */

.msg {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--gap);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.msg:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

.msg__top {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
}

.msg__sender {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.msg__time {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.msg__subject {
  margin-top: 2px;
  font-weight: 600;
}

.msg__preview {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* --- OTP ----------------------------------------------------------------- */

.otp {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-top: var(--gap-sm);
  padding: 10px 16px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-input);
  background: var(--butter);
}

.otp__code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  letter-spacing: 0.28em;
  /* letter-spacing adds trailing space; pull it back so it looks centred */
  margin-right: -0.28em;
}

/* --- squiggle divider ---------------------------------------------------- */

.squiggle {
  height: 12px;
  border: 0;
  margin: var(--gap) 0;
  background-repeat: repeat-x;
  background-size: 24px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6c3-6 6 6 9 0s6-6 9 0 6 6 6 0' fill='none' stroke='%231b1a17' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.6;
}

/* --- empty state --------------------------------------------------------- */

.empty {
  display: grid;
  place-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-xl) var(--gap);
  text-align: center;
  border: var(--bw) dashed var(--ink);
  border-radius: var(--r-blob);
  background: var(--paper-deep);
}

.empty__mark {
  width: 92px;
  height: 78px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-blob);
  background: var(--lilac);
  transform: rotate(-6deg);
}

/* --- reading sheet ------------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(27, 26, 23, 0.4);
  padding: 0;
}

.sheet__panel {
  width: 100%;
  max-width: 720px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  border: var(--bw-thick) solid var(--ink);
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  padding: var(--gap);
  border-bottom: var(--bw) solid var(--ink);
  background: var(--paper);
}

.sheet__body {
  padding: var(--gap);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet__frame {
  width: 100%;
  min-height: 320px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-input);
  background: var(--surface);
}

.sheet__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

@media (min-width: 640px) {
  .sheet {
    align-items: center;
    padding: var(--gap);
  }
  .sheet__panel {
    border-radius: var(--r-blob);
    max-height: 86dvh;
  }
}

/* --- admin rows ---------------------------------------------------------- */

.rowcard {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  padding: var(--gap);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-in);
}

.rowcard__main {
  min-width: 0;
  flex: 1 1 220px;
}

.rowcard__title {
  font-family: var(--font-display);
  font-weight: 800;
}

/* Inline confirm, so no browser confirm() dialog is ever needed. */
.confirm {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--gap-sm);
  padding: var(--gap-sm) var(--gap);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-input);
  background: var(--coral);
  font-weight: 600;
}

/* --- toast --------------------------------------------------------------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  width: min(92vw, 460px);
}

.toast {
  padding: 10px 18px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--mint);
  box-shadow: var(--shadow);
  font-weight: 600;
  text-align: center;
}

.toast--error {
  background: var(--coral);
  border-radius: var(--r-input);
  text-align: left;
}

/* --- loading ------------------------------------------------------------- */

.skeleton {
  height: 84px;
  border: var(--bw) dashed var(--ink);
  border-radius: var(--r-card);
  background: var(--paper-deep);
  opacity: 0.7;
}