/* dmcal — shared styles. Mobile-first, clean light theme. */

:root {
  --page:       #f6f7f9;   /* page background     */
  --surface:    #ffffff;   /* cards               */
  --surface-2:  #eef1f4;   /* raised / preview    */
  --line:       #e3e7ec;   /* borders             */
  --line-strong:#d3d9e0;   /* stronger borders    */

  --text:       #1a2130;   /* primary text        */
  --muted:      #5b6675;   /* secondary text      */

  --accent:     #2f6fd0;   /* primary accent      */
  --accent-2:   #285fb8;   /* accent gradient end */
  --accent-ink: #ffffff;   /* text on accent      */
  --success:    #1f9d6b;   /* confirmation        */

  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 28px -14px rgba(16, 24, 40, 0.18);

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(1000px 520px at 90% -20%, rgba(47, 111, 208, 0.06), transparent 60%),
    var(--page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

/* ---- brand ---- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand .dot {
  width: 11px; height: 11px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(47, 111, 208, 0.14);
}

/* ---- typography ---- */
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(28px, 7vw, 36px);
  margin: 22px 0 10px;
}
h1 .hi { color: var(--accent); }
.lede { color: var(--muted); font-size: 16px; margin: 0 0 26px; }

/* ---- card ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 18px; }

/* ---- forms ---- */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 7px;
}
input, select {
  width: 100%;
  min-width: 0; /* allow shrinking inside grid/flex */
  max-width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: #9aa4b2; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 111, 208, 0.18); }
select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .two { grid-template-columns: 1fr; } }

/* participant control — single input group: "me + [N] guests" */
.guest-input {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.guest-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 111, 208, 0.18); }
.guest-input .adorn {
  display: flex; align-items: center;
  padding: 0 14px;
  color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap;
  background: var(--surface-2);
}
.guest-input .adorn:first-child { border-right: 1px solid var(--line); }
.guest-input .adorn:last-child { border-left: 1px solid var(--line); }
.guest-input input {
  flex: 1 1 auto;
  width: auto; min-width: 0;
  border: none; background: transparent;
  text-align: center; font-weight: 600;
  padding: 13px 8px;
  -moz-appearance: textfield;
}
.guest-input input:focus { outline: none; box-shadow: none; }
.guest-input input::-webkit-outer-spin-button,
.guest-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* info tooltip (shows on hover / keyboard focus) */
.info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%;
  background: var(--line); color: var(--muted);
  font-size: 10px; font-weight: 700; font-style: normal; cursor: help;
}
.info::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 0;
  width: 210px; padding: 8px 11px; border-radius: 9px;
  background: var(--text); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  text-align: left; white-space: normal; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity 0.15s; pointer-events: none; z-index: 20;
}
.info:hover::after, .info:focus::after, .info:focus-visible::after { opacity: 1; visibility: visible; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  transition: transform 0.12s, filter 0.15s, background 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: #e5e9ee; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-google {
  background: #fff; color: #1f1f1f; border-color: var(--line-strong);
  font-weight: 600;
}
.btn-google:hover { background: #f7f8fa; }
.btn-google svg { width: 18px; height: 18px; }

/* ---- focus visibility (keyboard) ---- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- misc ---- */
.hint { font-size: 13px; color: var(--muted); margin-top: 14px; }
.hint a { color: var(--accent); }
.hidden { display: none !important; }

.event-brief {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.event-brief .t { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.event-brief .when { color: var(--muted); font-size: 14px; }

/* ---- chat-bubble link preview (organizer result) ---- */
.phone {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 14px 18px;
  margin: 6px 0 16px;
}
.phone .chat-meta { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 14px; letter-spacing: 0.03em; }
.bubble {
  max-width: 88%;
  margin-left: auto;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  padding: 12px 14px;
  border-radius: 18px 18px 5px 18px;
  box-shadow: 0 6px 16px -8px rgba(47, 111, 208, 0.5);
  animation: pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.bubble .msg { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.bubble .url { font-size: 13px; word-break: break-all; opacity: 0.94; }
.bubble .tail-time { display: block; text-align: right; font-size: 11px; opacity: 0.75; margin-top: 5px; }

@keyframes pop { from { transform: scale(0.95) translateY(5px); opacity: 0; } to { transform: none; opacity: 1; } }

.copy-row { display: flex; gap: 10px; }
.copy-row .btn { flex: 1; }

/* ---- status / alerts ---- */
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}
.alert-error { background: #fdecec; border: 1px solid #f3c2c2; color: #b42318; }
.inline-error { color: #b42318; font-size: 13px; margin-top: 7px; min-height: 1em; }

/* ---- success / confirmation ---- */
.done { text-align: center; padding: 8px 0 4px; }
.done .check {
  width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(31, 157, 107, 0.12);
  border: 1px solid rgba(31, 157, 107, 0.45);
  display: grid; place-items: center;
  color: var(--success);
  animation: pop 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.done .check svg { width: 28px; height: 28px; }
.done h2 { font-family: var(--font-display); font-size: 25px; letter-spacing: -0.02em; margin: 0 0 8px; }
.done p { color: var(--muted); margin: 0; }

/* ---- dashboard (your events) ---- */
.event-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.event-item.ended { opacity: 0.6; }
.ei-main { flex: 1 1 auto; min-width: 0; }
.ei-title { font-weight: 700; font-size: 16px; }
.ei-tag {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); padding: 1px 8px; border-radius: 999px;
  vertical-align: middle; margin-left: 5px;
}
.ei-tag.cancelled { color: #b42318; background: #fdecec; }
.ei-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ei-link { color: var(--accent); font-size: 12px; margin-top: 6px; word-break: break-all; }
.ei-actions { display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto; }
.btn-mini {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  white-space: nowrap;
}
.btn-mini:hover { background: #e5e9ee; }
.btn-mini.danger { color: #b42318; border-color: #f3c2c2; background: #fdecec; }
.btn-mini.danger:hover { background: #fbdcdc; }
.btn-mini[disabled] { opacity: 0.6; cursor: default; }

.footer { text-align: center; color: #9aa4b2; font-size: 12px; margin-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}