/* This Could Have Been an Email — styles */
:root {
  --desk: #ece8df;
  --window: #fffdf8;
  --chrome: #f4f1ea;
  --ink: #1a1a1a;
  --ink-soft: #6b665d;
  --rule: #e2ddd2;
  --re: #c8361b;
  --re-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 18px 50px -12px rgb(60 40 10 / 28%);

  /* Provider nods: colors only, no logos */
  --g-blue: #4285f4;
  --g-red: #ea4335;
  --g-yellow: #f9ab00;
  --g-green: #34a853;
  --outlook: #0f6cbd;
  --yahoo: #6001d2;
  --icloud: #2f7fd9;
  --proton: #6d4aff;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --geo: "Outfit", var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --desk: #121110;
    --window: #1c1b19;
    --chrome: #242320;
    --ink: #eeeae2;
    --ink-soft: #9c978d;
    --rule: #33312d;
    --re: #e0482a;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 24px 60px -16px rgb(0 0 0 / 70%);

    --g-blue: #6ea2f7;
    --g-red: #f06c5f;
    --g-yellow: #fbc02d;
    --g-green: #4cbb6c;
    --outlook: #3a8fe0;
    --yahoo: #a26bff;
    --icloud: #5ba8f5;
    --proton: #8f75ff;
  }
}

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

body {
  font-family: var(--sans);
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--desk);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 3rem 1rem 1.5rem;
}

/* Pointer hint (outside the window) ------------------------------------- */
.stage {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  max-width: 44rem;
}

.hint {
  position: absolute;
  z-index: 1;
  display: flex;
  color: var(--re);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-weight: 600;
  line-height: 0.95;
  pointer-events: none;
}

.hint[hidden] { display: none; }
.hint-text { display: block; }

/* Narrow: no margin to sit in, so it's scribbled in the empty end of the
   From row with the arrow dropping into the To: line */
.hint {
  right: 1.1rem;
  top: 2.75rem;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.35rem;
  white-space: nowrap;
}
.hint-text { transform: rotate(-3deg); }
.hint-arrow { width: 2.2rem; height: 1.1rem; margin: 0.1rem 0 0 -1.2rem; transform: rotate(125deg); }

/* Wide: sits in the margin left of the window, arrow pointing right at To: */
@media (min-width: 66rem) {
  .hint {
    right: calc(100% + 0.4rem);
    left: auto;
    top: 4.5rem;
    flex-direction: row;
    align-items: center;
    gap: 0.1rem;
    font-size: 1.5rem;
    white-space: normal;
  }
  .hint-text { width: 6.5rem; text-align: right; }
  .hint-arrow { width: 3.2rem; height: 1.6rem; margin: 0.9rem 0 0; transform: rotate(10deg); }
}

/* Window chrome --------------------------------------------------------- */
.window {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 44rem;
  background: var(--window);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
}

.lights { display: flex; gap: 6px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.titlebar-title { flex: 1; font-weight: 600; }
.titlebar-tools { color: var(--ink-soft); font-size: 0.75rem; letter-spacing: 0.05em; }

/* Header fields --------------------------------------------------------- */
.field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.9rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}

.field-label { width: 3.75rem; flex: none; color: var(--ink-soft); }
.field-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.field-to { position: relative; }
.field-to:focus-within { box-shadow: inset 3px 0 0 var(--re); }

.field-input {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}

.field-input::placeholder { color: var(--ink-soft); opacity: 0.75; }
.field-input[aria-invalid="true"] { color: var(--re); }

.field-cc { color: var(--ink-soft); font-size: 0.85rem; padding: 0.25rem; }
.field-cc:hover { color: var(--ink); text-decoration: underline; }

.re-mark {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.8em;
  line-height: 1;
  padding: 0.28em 0.42em;
  border-radius: 5px;
  background: var(--re);
  color: var(--re-ink);
  vertical-align: 0.08em;
}

.field-subject { font-weight: 600; }

/* Body ------------------------------------------------------------------ */
.body {
  padding: 2rem 1.25rem 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.body p + p { margin-top: 0.85rem; }
.signoff { color: var(--ink-soft); }

/* Wordmark: one provider per word, "Email" is a collage of all of them */
.wordmark {
  margin-bottom: 1.75rem;
  font-weight: 400;
  font-size: clamp(2.3rem, 7.5vw, 4.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.wm-line { display: block; }
.wm-word { display: inline-block; margin-right: 0.22em; }
.wm-word b { font-weight: inherit; display: inline-block; }

.wm-gmail { font-family: var(--geo); font-weight: 500; }
.wm-gmail b:nth-child(1) { color: var(--g-blue); }
.wm-gmail b:nth-child(2) { color: var(--g-red); }
.wm-gmail b:nth-child(3) { color: var(--g-yellow); }
.wm-gmail b:nth-child(4) { color: var(--g-green); }

.wm-outlook { font-family: "Segoe UI", var(--geo); font-weight: 600; color: var(--outlook); }

.tile {
  width: 0.95em;
  margin-right: 0.04em;
  border-radius: 0.14em;
  background: var(--outlook);
  color: #fff;
  font-family: "Segoe UI", var(--geo);
  font-weight: 600;
  font-style: normal;
  text-align: center;
  font-size: 0.85em;
  line-height: 1.12;
  vertical-align: 0.06em;
}

.wm-yahoo { font-family: "Rubik", var(--sans); font-style: italic; font-weight: 800; color: var(--yahoo); }
.wm-icloud { font-family: var(--geo); font-weight: 200; color: var(--icloud); }
.wm-aol { font-family: var(--geo); font-weight: 800; letter-spacing: -0.03em; }

.wm-collage { margin-right: 0; }
.wm-collage b { transform: rotate(var(--tilt, 0deg)); }
.c-outlook { --tilt: -4deg; }
.c-gmail {
  --tilt: 3deg;
  font-family: var(--geo);
  font-weight: 600;
  background: linear-gradient(90deg, var(--g-blue) 0 25%, var(--g-red) 25% 50%, var(--g-yellow) 50% 75%, var(--g-green) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-yahoo { --tilt: -2deg; font-family: "Rubik", var(--sans); font-style: italic; font-weight: 800; color: var(--yahoo); }
.c-icloud { --tilt: 4deg; font-family: var(--geo); font-weight: 200; color: var(--icloud); }
.c-proton { --tilt: -3deg; font-family: var(--geo); font-weight: 800; color: var(--proton); }
.wm-collage .tile { --tilt: -4deg; }

/* Toolbar --------------------------------------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--rule);
}

.send {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.4rem;
  border-radius: 999px;
  background: var(--re);
  color: var(--re-ink);
  font-weight: 600;
  font-size: 1rem;
}

.send:hover { filter: brightness(1.08); }
.send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.send:disabled { opacity: 0.6; cursor: progress; }

.toolbar-icons { display: flex; gap: 0.9rem; color: var(--ink-soft); font-size: 0.95rem; }
.toolbar-icons span:first-child { font-weight: 700; text-decoration: underline; }

.status { flex-basis: 100%; font-size: 0.875rem; color: var(--ink-soft); min-height: 1.3em; }
.status.is-error { color: var(--re); }

.signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Sending + sent -------------------------------------------------------- */
.window.is-sending { animation: fly 0.55s cubic-bezier(0.5, 0, 0.75, 0) forwards; }

@keyframes fly {
  to { transform: translate(40%, -70%) scale(0.35) rotate(-6deg); opacity: 0; }
}

.field-to.is-shaking { animation: shake 0.3s; }

@keyframes shake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.sent { animation: land 0.35s ease-out; }

@keyframes land {
  from { transform: translateY(12px); opacity: 0; }
}

.sent-body { padding: 2.5rem 1.25rem 2rem; text-align: center; }
.sent-body h2 { font-family: var(--geo); font-weight: 600; font-size: 1.9rem; margin-bottom: 0.35rem; }
.sent-body > p { color: var(--ink-soft); }

.sent-check {
  width: 3rem; height: 3rem;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--g-green);
  color: #fff;
}

.inbox-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-align: left;
  font-size: 0.92rem;
}

.inbox-from { font-weight: 700; flex: none; }
.inbox-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-to { color: var(--ink-soft); }
.inbox-time { color: var(--ink-soft); font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .window.is-sending, .sent, .field-to.is-shaking { animation: none; }
}

/* Footer ---------------------------------------------------------------- */
.foot {
  padding: 1.25rem 1rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* Phones ---------------------------------------------------------------- */
@media (max-width: 34rem) {
  .desk { padding: 1rem 1rem 0.5rem; align-items: start; }
  .field { padding: 0 1rem; gap: 0.5rem; }
  .field-label { width: 3.4rem; }
  .field-cc { display: none; }
  .body { padding: 1.5rem 1rem 1.25rem; font-size: 1rem; }
  .toolbar { padding: 0.9rem 1rem 1rem; }
  .send { flex: 1; justify-content: center; }
  .titlebar-tools { display: none; }
  .inbox-row .re-mark { display: none; }
}