/* The Daily Wave on the website (/daily-wave): makes the app's cards, buttons, fields and lists look like the rest of
   the Contingent website (css/style.css). Loaded after styles.css. The newsletter pages themselves keep their own design. */

.dw-site {
  font-size: 1rem;
  background: transparent;
  color: var(--ink, #1B1A33);
  line-height: 1.6;
  --r: 18px;
  --r-sm: 10px;
  --r-lg: 18px;
  --line-strong: #D8EEF2;
  --shadow-sm: none;
}
.dw-site .dw-loading { color: #555; }

/* The page has its own heading at the top, so the app's own banners and "Editions" header aren't needed */
.dw-site .hero-section { display: none; }

/* Cards: white, 2px pale-teal border, rounded, no shadow (like .card on the website) */
.dw-site .card,
.dw-site .qa-card,
.dw-site .sub-card {
  background: #fff;
  border: 2px solid #D8EEF2;
  border-radius: 18px;
  box-shadow: none;
}
.dw-site .card-pad { padding: 24px; }
.dw-site .qa-card { padding: 24px; transform: none; }
.dw-site .qa-card:hover,
.dw-site .sub-card:hover { box-shadow: none; transform: none; border-color: #00B5CC; }
.dw-site .qa-card .qa-title,
.dw-site .card-title,
.dw-site .modal-head h3 {
  font-family: "Baloo 2", system-ui, sans-serif;
  color: #28265C;
  font-size: 1.25rem;
  line-height: 1.15;
}
.dw-site .qa-card .qa-desc { font-size: 0.95rem; color: #555; }
.dw-site .grid-2 { gap: 24px; }

/* Buttons: rounded pills, bold (like .btn on the website). Red for the main action, teal for others. */
.dw-site .btn {
  border-radius: 999px;
  font-weight: 800;
  padding: 12px 24px;
  font-size: 0.95rem;
  border-width: 2px;
  box-shadow: none;
}
/* A button with no colour of its own: white with a pale border */
.dw-site .btn { background: #fff; color: #28265C; border-color: #D8EEF2; }
.dw-site .btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.dw-site .btn-lg { padding: 14px 28px; font-size: 1rem; }
.dw-site .btn-icon { padding: 8px; min-width: 40px; min-height: 40px; }
.dw-site .btn-primary { background: #FF0D40; color: #fff; }
.dw-site .btn-primary:hover { background: #e00b39; box-shadow: none; }
.dw-site .btn-cyan,
.dw-site .btn-dark { background: #048A9C; color: #fff; }
.dw-site .btn-cyan:hover,
.dw-site .btn-dark:hover { background: #037483; }
.dw-site .btn-ghost { background: #fff; color: #28265C; border-color: #D8EEF2; }
.dw-site .btn-ghost:hover { background: #fff; border-color: #00B5CC; }

/* Fields: like the website's forms (JSL application) */
.dw-site .field-label { font-weight: 700; color: #28265C; font-size: 1rem; margin-bottom: 8px; }
.dw-site .input,
.dw-site .textarea,
.dw-site .select {
  padding: 12px 14px;
  border: 2px solid #D8EEF2;
  border-radius: 10px;
  font-size: 1rem;
  color: #1B1A33;
}
.dw-site .input:focus,
.dw-site .textarea:focus,
.dw-site .select:focus { outline: none; border-color: #00B5CC; box-shadow: 0 0 0 3px rgba(0, 181, 204, 0.18); }

/* Deadline and event-mode notices: soft teal panels */
.dw-site .deadline-banner,
.dw-site .mode-banner {
  border-radius: 18px;
  box-shadow: none;
}

/* Editions: cards like the rest of the website */
.dw-site .editions-gallery { gap: 24px; }
.dw-site .edition-thumb {
  border: 2px solid #D8EEF2;
  border-radius: 18px;
  box-shadow: none;
}
.dw-site .edition-thumb:hover { transform: none; box-shadow: none; border-color: #00B5CC; }
.dw-site .edition-thumb-date { font-family: "Baloo 2", system-ui, sans-serif; color: #28265C; font-size: 1.25rem; }
.dw-site .edition-thumb-cta { color: #048A9C; }

/* Dialogs (reading an edition, after sending a story) */
.dw-site .modal { border-radius: 18px; }
.dw-site .modal-overlay { background: rgba(40, 38, 92, 0.6); }

/* Photo picker: the drop area is a label for a visually hidden file box (tapping it opens the phone's photo picker) */
.dw .dropzone { display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dw .dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.dw .dz-input:focus-visible + .dropzone { outline: 3px solid #00B5CC; outline-offset: 2px; }
.dw .dz-status { font-weight: 700; color: #048A9C; margin-top: 8px; }
.dw .dz-status:empty { display: none; }

/* "People in this photo" choices: wrap onto two lines (or stack) on phones instead of running off the screen */
.dw .subject-method-row { flex-wrap: wrap; }
.dw .subject-method-row .btn { white-space: normal; text-align: center; justify-content: center; min-width: 0; flex: 1 1 150px !important; line-height: 1.3; }
/* Names of people in a photo: on phones the name gets the full width, with unit and remove underneath */
@media (max-width: 520px) {
  .dw .subject-person { flex-wrap: wrap; }
  .dw .subject-person > div:first-child { flex: 1 1 100% !important; }
}