/*
  style.css - the look of The Last Paragraph.

  Two typefaces carry a meaning:
    serif       words that come from the article or go into the post
    sans-serif  the app's own controls and notes

  The blue is an editor's blue pencil. The small blue square is an
  "end mark", the sign magazines print after the last word of a story.
*/

:root {
  --paper: #f2f4f7;        /* page background */
  --sheet: #ffffff;        /* fields, choices, the post preview */
  --ink: #1a2230;          /* main text */
  --muted: #5a6577;        /* notes and secondary text */
  --rule: #d3d9e2;         /* dividing lines */
  --field-border: #8b96a8; /* outlines of inputs */
  --pencil: #2350c4;       /* the accent: links, buttons, selection */
  --pencil-dark: #1a3c96;
  --pencil-soft: #e8eefc;

  --ok-bg: #e3f4e8;    --ok-ink: #14532d;
  --warn-bg: #fff3d1;  --warn-ink: #6b4700;
  --bad-bg: #fde7e5;   --bad-ink: #8c1d18;

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

/* Anything marked hidden stays hidden, whatever other rules say. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- Page frame ---------- */

.masthead,
main {
  max-width: 44rem;
  margin: 0 auto;
}

/* The preview page is wider, to fit the editor and the post side by side. */
body.wide .masthead,
body.wide main {
  max-width: 72rem;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.75rem 0 1rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* The end mark: a small solid square. */
.endmark {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.4em;
  background: var(--pencil);
}

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  font-size: 0.9rem;
  color: var(--muted);
}

.steps li { counter-increment: step; }
.steps li::before { content: counter(step) ". "; }

.steps li.current {
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 0 var(--pencil);
}

main { padding-top: 2.5rem; }

/* ---------- Text ---------- */

h1 {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  line-height: 1.3;
}

p { margin: 0 0 1rem; }

.lead {
  font-size: 1.1rem;
  max-width: 38rem;
}

.note {
  font-size: 0.9rem;
  color: var(--muted);
}

a { color: var(--pencil); }
a:hover { color: var(--pencil-dark); }

code,
pre {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

pre {
  margin: 0.75rem 0 0;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Forms ---------- */

label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

input[type="text"],
textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--field-border);
  border-radius: 6px;
  font: inherit;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

/* Text that will be published is shown in the serif face while you edit. */
textarea#paragraph,
textarea#commentary {
  font-family: var(--serif);
  font-size: 1.05rem;
}

.fields > input,
.fields > textarea {
  margin-bottom: 1.1rem;
}

.fields > textarea + .note {
  margin-top: -0.7rem;
}

:focus-visible {
  outline: 3px solid var(--pencil);
  outline-offset: 2px;
}

button,
a.button {
  display: inline-block;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--pencil);
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.primary {
  background: var(--pencil);
  color: #ffffff;
}
.primary:hover {
  background: var(--pencil-dark);
  border-color: var(--pencil-dark);
  color: #ffffff;
}

.secondary {
  background: var(--sheet);
  color: var(--pencil);
}
.secondary:hover { background: var(--pencil-soft); }

/* The Send button turns red when it will publish for everyone to see. */
.primary.danger,
.primary.danger:hover {
  background: var(--bad-ink);
  border-color: var(--bad-ink);
}

button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 1.5rem 0 1rem;
}

/* The article link field and its button sit on one line. */
.fetch-form { margin: 1.75rem 0 0.75rem; }

.fetch-row {
  display: flex;
  gap: 0.6rem;
}
.fetch-row input { flex: 1; min-width: 0; }
.fetch-row button { flex: none; }

/* ---------- Notices ---------- */

.notice {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid;
  border-radius: 0 6px 6px 0;
}
.notice p,
.notice ul { margin: 0.4rem 0 0; }
.notice a { color: inherit; }

.notice.ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.notice.warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice.bad  { background: var(--bad-bg);  color: var(--bad-ink); }

ul.plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Sections separated by a rule ---------- */

.panel {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.panel form + .note { margin-top: 0.75rem; }

.checklist {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.checklist li {
  padding-left: 1.6rem;
  text-indent: -1.6rem;
  margin-bottom: 0.25rem;
}
.checklist li::before {
  display: inline-block;
  width: 1.6rem;
  text-indent: 0;
  font-weight: 700;
}
.checklist li.done::before { content: "\2713"; color: var(--ok-ink); }   /* check mark */
.checklist li.todo::before { content: "\25CB"; color: var(--muted); }    /* open circle */
.checklist li.todo { color: var(--muted); }

/* ---------- Step 2: choosing a paragraph ---------- */

.article-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--muted);
}
.article-name cite { color: var(--ink); }

.choices {
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
}
.choices legend {
  padding: 0;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.choice {
  display: grid;
  grid-template-columns: auto 1.25rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  margin-bottom: 0.6rem;
  padding: 1rem 1.1rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: 0 6px 6px 0;
  font-weight: 400;
  cursor: pointer;
}
.choice:hover { border-color: var(--field-border); }

/* The chosen paragraph gets the blue pencil down its margin. */
.choice:has(input:checked) {
  background: var(--pencil-soft);
  border-color: var(--pencil);
}

.choice-number {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.choice-text {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
}

.left-out { margin-top: 1.25rem; }
.left-out summary {
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}
.left-out .note { margin: 0.75rem 0; }

/* ---------- Step 3: editor and post side by side ---------- */

.workbench {
  display: grid;
  gap: 2.5rem;
  margin-top: 1.75rem;
}

@media (min-width: 60rem) {
  .workbench {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
  /* Keep the post in view while you scroll through the fields. */
  .proof {
    position: sticky;
    top: 1.25rem;
  }
}

/* The post, as it will read on the blog. */
.blog-post {
  padding: 1.75rem 2rem 1.25rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.blog-post .post-title {
  margin: 0 0 1.25rem;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.blog-post blockquote {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  border-left: 4px solid var(--pencil);
}

.blog-post h4 {
  margin: 1.5rem 0 0.4rem;
  font-family: var(--sans);
  font-size: 1rem;
}

.blog-post .post-labels {
  margin: 1.5rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
}

.proof .blog-post + .note { margin-top: 0.75rem; }

/* The two send options. */
.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  max-width: 38rem;
  margin-bottom: 0.9rem;
  font-weight: 400;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--pencil);
}

.send-summary {
  margin: 1.25rem 0 0.9rem;
  font-weight: 600;
}

/* ---------- Result page ---------- */

.files { margin: 1.5rem 0; }
.files dt {
  margin-top: 1rem;
  font-weight: 600;
}
.files dd { margin: 0.25rem 0 0; }
.files code {
  display: block;
  margin-bottom: 0.3rem;
  padding: 0.5rem 0.75rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 6px;
  word-break: break-all;
}

.response summary {
  cursor: pointer;
  font-weight: 600;
}

/* ---------- Signed-in line at the foot of the page (hosted app) ---------- */

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  max-width: 44rem;
  margin: 4rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}
body.wide .account { max-width: 72rem; }

/* A button that looks like a link, for small actions such as Sign out. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pencil);
  font-weight: 400;
  text-decoration: underline;
}
.link-button:hover { color: var(--pencil-dark); }

/* ---------- Small screens ---------- */

@media (max-width: 34rem) {
  h1 { font-size: 1.65rem; }
  .fetch-row { flex-direction: column; }
  .blog-post { padding: 1.25rem 1.1rem 1rem; }
  .choice { grid-template-columns: auto 1fr; }
  .choice-number { display: none; }
}