*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #eef1f4;
  font-family: Arimo, Arial, Helvetica, sans-serif;
  color: #23384a;
}

/* ── BGC brand → WA color tokens ── */
:root {
  --wa-color-brand-50: #f0f5fb;
  --wa-color-brand-100: #dce8f4;
  --wa-color-brand-200: #b6cfe7;
  --wa-color-brand-300: #80aad3;
  --wa-color-brand-400: #5a8fc7;
  --wa-color-brand-500: #3d6ea5;
  --wa-color-brand-600: #2d5585;
  --wa-color-brand-700: #1c3f63;
  --wa-color-brand-800: #122a42;
  --wa-color-brand-900: #091624;
  --wa-color-brand-950: #050e19;

  --wa-color-success-50: #eaf6ee;
  --wa-color-success-100: #c6e8d2;
  --wa-color-success-200: #92d3b3;
  --wa-color-success-300: #5cba8d;
  --wa-color-success-400: #3dba82;
  --wa-color-success-500: #2e9e6c;
  --wa-color-success-600: #1e7a4d;
  --wa-color-success-700: #155737;
  --wa-color-success-800: #0d3624;
  --wa-color-success-900: #061d13;
  --wa-color-success-950: #030f0a;

  --wa-color-warning-50: #fdf6ea;
  --wa-color-warning-100: #f7e8c4;
  --wa-color-warning-200: #eed091;
  --wa-color-warning-300: #e5b85f;
  --wa-color-warning-400: #e0a832;
  --wa-color-warning-500: #cf8f25;
  --wa-color-warning-600: #a67020;
  --wa-color-warning-700: #7d5219;
  --wa-color-warning-800: #543612;
  --wa-color-warning-900: #2b1c09;
  --wa-color-warning-950: #160e04;

  --wa-color-danger-50: #fdf0ed;
  --wa-color-danger-100: #f5d5cf;
  --wa-color-danger-400: #c96050;
  --wa-color-danger-500: #b04a3a;
  --wa-color-danger-600: #8a3a2d;
  --wa-color-danger-700: #63291f;
}

/* ── Banner ── */
.banner {
  background: linear-gradient(180deg, #d4ebfa, #a0d0ee);
  padding: 16px 18px 12px;
  text-align: center;
}
.banner__inner {
  max-width: 680px;
  margin: 0 auto;
}
.banner__name {
  font-weight: 800;
  color: #1c3f63;
  font-size: 19px;
  letter-spacing: 0.3px;
}
.banner__state {
  color: #cf8f25;
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 700;
  margin-top: 2px;
}

/* ── Main ── */
main {
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 16px 70px;
}

.signin-bar {
  background: #fff;
  border: 1px solid #e1e7ec;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #56697a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.signin-bar form {
  margin: 0;
}
.signin-bar b {
  color: #1c3f63;
}

h1 {
  font-size: 21px;
  font-weight: 800;
  color: #1c3f63;
  margin: 0 0 4px;
}
.page-desc {
  font-size: 13.5px;
  color: #6a7a89;
  margin: 0 0 18px;
  line-height: 1.5;
}

/* ── Day cards ── */
.day-card {
  background: #fff;
  border: 1px solid #e1e7ec;
  border-radius: 13px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(20, 40, 60, 0.05);
}
.day-card--joined {
  border-color: #bfe2cb;
}
.day-card--nofly {
  background: #faf7f0;
  border-color: #e7ddcb;
}

.day-card__header {
  background: #f3f7fb;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e7edf2;
}
.day-card__header--joined {
  background: #eef8f1;
  border-bottom-color: #cfe6d6;
}
.day-card__header--nofly {
  background: #faf7f0;
  border-bottom: none;
}

.day-date {
  font-size: 17px;
  font-weight: 800;
  color: #1c3f63;
}
.day-date--nofly {
  color: #9a8a6a;
}
.day-meta {
  font-size: 12.5px;
  color: #8a99a8;
  margin-top: 1px;
}
.day-meta--nofly {
  color: #a8997d;
}

/* Toolbar */
.toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 15px;
  align-items: stretch;
}
.toolbar wa-button {
  flex: 1;
}
.toolbar wa-button.no-grow {
  flex: none;
}
.email-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex: none;
  text-decoration: none;
  color: #3d6ea5;
  border: 1px solid #d4dde6;
  border-radius: 8px;
  font-size: 18px;
}

/* Member rows */
.member-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px;
  border-top: 1px solid #f1f4f7;
}
.member-row--me {
  background: #f3faf5;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar--default {
  background: #dce6ef;
  color: #3d6ea5;
}
.avatar--me {
  background: #2e9e6c;
  color: #fff;
}

.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 13.5px;
  color: #23384a;
  font-weight: 600;
}
.member-note {
  font-size: 12px;
  color: #8a99a8;
  font-style: italic;
  margin-top: 1px;
}
.member-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 160px;
}
.email-btn--small {
  width: 28px;
  height: 28px;
  font-size: 14px;
  flex: none;
}

.nofly-body {
  padding: 0 15px 12px;
  font-size: 12.5px;
  color: #8a7c5e;
  line-height: 1.55;
}

/* Dashed "new day" button */
.new-day-btn {
  width: 100%;
}
.new-day-btn::part(base) {
  border-style: dashed;
  border-color: #b6c4d2;
}

/* Popups (native <dialog>, opened via data-dialog) */
dialog {
  border: none;
  border-radius: 13px;
  padding: 18px;
  width: min(360px, 90vw);
  box-shadow: 0 8px 24px rgba(20, 40, 60, 0.18);
}
dialog::backdrop {
  background: rgba(20, 40, 60, 0.35);
}
dialog form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
dialog label {
  font-size: 13px;
  color: #56697a;
  display: block;
}
dialog input[type="text"],
dialog input[type="date"] {
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  font: inherit;
  font-size: 16px; /* iOS zooms in on focus below this */
  border: 1px solid #d4dde6;
  border-radius: 8px;
  box-sizing: border-box;
}
dialog fieldset {
  border: 1px solid #e1e7ec;
  border-radius: 8px;
  padding: 8px 10px;
}
dialog fieldset legend {
  font-size: 12px;
  color: #8a99a8;
  padding: 0 4px;
}
dialog fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-right: 12px;
}

/* Login form — same look as the dialog forms above, but sitting in the page
   flow rather than a popup. */
.form-card {
  background: #fff;
  border-radius: 13px;
  padding: 18px;
  width: min(360px, 90vw);
  box-shadow: 0 8px 24px rgba(20, 40, 60, 0.18);
  margin: 0 auto;
}
.form-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-card label {
  font-size: 13px;
  color: #56697a;
  display: block;
}
.form-card input[type="email"] {
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  font: inherit;
  border: 1px solid #d4dde6;
  border-radius: 8px;
  box-sizing: border-box;
}