/* Shared styles: colour tokens, controls, auth card, app shell. System fonts only. */
:root {
  --bg: #faf5f2; --surface: #ffffff; --ink: #2b1d1d; --muted: #7b6864; --line: #ecdad5;
  --accent: #c4483f; --accent-soft: #f9dcd6; --accent-text: #a63a32; --on-accent: #ffffff;
  --field: #fffdfc; --err: #9b1c1c; --err-bg: #fdecec; --ok: #2f7d4f;
  --display: Georgia, 'Times New Roman', serif;
  --body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color-scheme: light dark; /* native pickers and scrollbars follow the phone's light or dark setting */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181211; --surface: #231a19; --ink: #f7ece9; --muted: #b9a29d; --line: #3b2c2a;
    --accent: #ef7268; --accent-soft: #3b2421; --accent-text: #ef7268; --on-accent: #2a0f0c;
    --field: #1d1514; --err: #ffb4b4; --err-bg: #3a1a1a; --ok: #7fd1a0;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 16px 16px 110px;
  background: var(--bg); color: var(--ink);
  font: 16px/1.45 var(--body);
}
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2 { font-family: var(--display); line-height: 1.15; margin: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }
p { margin: 0; }
[hidden] { display: none !important; } /* so a class that sets display never keeps a hidden element on screen */
.muted { color: var(--muted); }

/* Controls */
label.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-weight: 600; font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=time], textarea, select {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 1rem;
  background: var(--field); border: 1.5px solid var(--line); border-radius: 12px; font-weight: 400;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
::placeholder { color: var(--muted); opacity: 1; } /* the browsers' own grey is too faint on the dark field */
/* Date and time: native pickers in the app colour; no extra padding, so the 48px minimum height decides the height. */
input[type=date], input[type=time] { accent-color: var(--accent); padding-block: 0; }
/* iOS Safari gives these two an intrinsic minimum width and centres the value. Drop the native look so they shrink
   into their grid cell and read left to right like the text fields; min-height keeps an empty one 48px tall. */
input[type=date], input[type=time] {
  -webkit-appearance: none; appearance: none; min-width: 0; width: 100%; max-width: 100%; min-height: 48px;
  text-align: left; text-align-last: left;
}
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; min-width: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; font-weight: 600;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.block { width: 100%; }
.btn:active { transform: translateY(1px); }
.notice {
  margin-bottom: 16px; padding: 10px 12px;
  border: 1.5px solid var(--err); border-radius: 12px; background: var(--err-bg); color: var(--err);
}
.panel { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }

/* Sign-in and first-run card */
body.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-bottom: 16px; }
.card { width: 100%; max-width: 400px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.card h1 { margin-bottom: 4px; }
.card h2 { margin: 16px 0; font-size: 1.15rem; }

/* App shell */
.app { max-width: 1040px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { min-width: 0; font-family: var(--display); font-size: 1.4rem; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.tab[hidden] { display: none; }
.cols { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }

.tabbar {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100% - 24px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 8px 2px 6px; cursor: pointer;
  border: 0; border-radius: 16px; background: none; color: var(--muted);
  font-size: .75rem; font-weight: 600;
}
.tabbar svg { width: 22px; height: 22px; }
.tabbar button[aria-selected=true] { background: var(--accent-soft); color: var(--accent-text); }

.toast {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px); padding: 12px 18px;
  background: var(--ink); color: var(--bg); border-radius: 14px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.toast[hidden] { display: none; }

/* Ad editor */
.editor { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.panel h2 { margin-bottom: 4px; }
fieldset.field { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pair > * { min-width: 0; margin-bottom: 0; }
textarea { resize: vertical; line-height: 1.45; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; margin: 0; }
.pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: 99px; background: var(--field); font-weight: 600;
}
.pill input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.pill input:checked + span::before { content: "\2713\00a0"; }
.pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.row .btn { flex: 1 1 140px; }
.btn:disabled { opacity: .5; cursor: default; }
.state { color: var(--muted); font-size: .9rem; }

/* Flyer preview and the phone switch */
.flyer {
  display: block; width: 100%; max-width: 440px; height: auto; aspect-ratio: 2 / 3; margin-inline: auto;
  background: #fbf3ee; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.previewcol { display: flex; flex-direction: column; gap: 14px; }
.previewcol .btn { max-width: 440px; margin-inline: auto; }
.previewcol .row { width: 100%; max-width: 440px; margin-inline: auto; } /* the two save buttons, as wide as the flyer */
.previewcol .row .btn { flex: 1 1 0; min-width: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--accent-soft); border-radius: 14px; }
.seg button { min-height: 44px; border: 0; border-radius: 11px; background: none; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#tab-ad:not([hidden]), #tab-send:not([hidden]) { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 899px) {
  .cols[data-view=edit] .previewcol { display: none; }
  .cols[data-view=see] .editor { display: none; }
}

@media (min-width: 900px) {
  .cols { grid-template-columns: 1fr 1fr; }
  .seg { display: none; }
  .previewcol { position: sticky; top: 16px; }
}

/* Settings */
.settings { max-width: 640px; }
.hint { color: var(--muted); font-size: .85rem; font-weight: 400; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.pair + .hint { margin: -6px 0 14px; }
.result { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); }
.result.ok::before { content: "\2713\00a0"; color: var(--accent-text); font-weight: 700; }
.result.err { border-color: var(--err); background: var(--err-bg); color: var(--err); }

/* Send tab */
.needs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--accent-soft); border-radius: 14px; }
.fromline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 14px; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 6px; }
.chips:empty { display: none; }
.chip { padding: 5px 10px; border-radius: 99px; background: var(--accent-soft); font-size: .85rem; overflow-wrap: anywhere; }
.chip.invalid { background: none; border: 1.5px dashed var(--err); color: var(--err); }
.chip.dup { background: none; border: 1.5px dashed var(--muted); color: var(--muted); }
.count { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }
.count.over { color: var(--err); font-weight: 600; }
.sendcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mailframe { display: block; width: 100%; height: 480px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color-scheme: light; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.bar { height: 14px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.panel h3 { margin: 6px 0 0; font-size: 1rem; }
.plainlist { margin: 0; padding-left: 1.2rem; overflow-wrap: anywhere; }
.panel.good { border: 2px solid var(--ok); }
.panel.good h2 { color: var(--ok); }
.panel.good h2::before { content: "\2713\00a0"; }
.panel.problems { border: 2px solid var(--err); }
.panel.problems h2 { color: var(--err); }
.sendlog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sendlog li { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.sendlog li:first-child { padding-top: 0; border-top: 0; }
.warn { color: var(--err); font-size: .9rem; }