/* ---------------------------------------------------------------------------
 * Rendered content
 *
 * The rules for what goldmark produces out of a file under content/. They live
 * in a sheet of their own and are loaded in addition to the base sheet,
 * because a content page comes in two flavours: a page of running text follows
 * content.css, a chooser page follows style.css, and both show the same
 * rendered markdown. Keeping these rules here means they exist once instead of
 * twice with a chance to drift apart.
 *
 * Everything below is therefore self contained: it uses the palette variables,
 * which are inlined into every page, and nothing from either base sheet.
 * ------------------------------------------------------------------------- */

.prose-wrap{
  max-width:var(--prose-max);
  margin:0 auto;
  padding:0 24px 40px;
}

.prose{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px 32px 28px;
  box-shadow:var(--shadow-rest);
  animation-delay:.05s;
  color:var(--ink);
  font-size:15px;
  line-height:1.65;
  /* Centred throughout, decision Raya 21.08.2026. The guides are short steps
     with a picture between them rather than long running text, and centred
     they read as a sequence instead of a wall. What genuinely needs a line
     start keeps one below: lists, commands and tables. */
  text-align:center;
}
@media (max-width:560px){
  .prose{ padding:24px 20px 20px; }
}

/* Headings. A file starts at level two: level one is the page title in the
 * header, and a second one would leave the document with two. */
.prose h2{
  font-family:Georgia,serif;
  font-size:24px;
  margin:32px 0 10px;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-shadow:var(--text-lift);
}
.prose > :first-child{ margin-top:0; }
.prose h2:first-child{
  padding-top:0;
  border-top:0;
}
.prose h3{
  font-family:Georgia,serif;
  font-size:18px;
  margin:22px 0 6px;
}
.prose h4{
  font-size:15px;
  font-weight:600;
  margin:16px 0 6px;
  color:var(--ink-soft);
}

.prose p{ margin:0 0 12px; }
.prose ul,
.prose ol{
  display:inline-block;
  text-align:left;
  margin:0 0 12px;
  padding-left:22px;
}
.prose li{ margin-bottom:5px; }
.prose li > ul,
.prose li > ol{ margin:5px 0 0; }
.prose a{ color:var(--pine); }
.prose strong{ font-weight:600; }
.prose hr{
  border:0;
  border-top:1px solid var(--line);
  margin:24px 0;
}

/* Commands and file names. An indented block in the source becomes pre > code;
 * the frame goes on the pre so a long line scrolls inside it instead of
 * widening the page. */
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 5px;
}
/* A command block sits centred as a block but stays left aligned inside: in an
 * indented command the indentation is the content. It shrinks to its longest
 * line rather than spanning the column, so a two word command does not sit in
 * a box five times its width. */
.prose pre{
  display:inline-block;
  text-align:left;
  max-width:100%;
  margin:0 0 14px;
  padding:14px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  overflow-x:auto;
  vertical-align:top;
}
/* The copy button, added by the enhancement script. Nothing here applies
 * until it exists, so a page without JavaScript is untouched by these rules.
 * It sits inside the block rather than above it, so it moves with the block
 * and cannot end up over the first line of a command. */
pre.has-copy{
  position:relative;
  padding-right:46px;
}
.copy-button{
  position:absolute;
  top:8px;
  right:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper-raised);
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.copy-button svg{ width:16px; height:16px; }

/* Always visible rather than appearing on hover: a way to copy that only
   shows itself once the pointer is already there is a way most people never
   find, and on a touch screen there is no hover at all. Subdued instead, so
   it offers itself without competing with the command. */
.copy-button:hover,
.copy-button:focus-visible{
  color:var(--pine);
  border-color:var(--pine);
  outline:none;
}
.copy-button[data-state="done"]{
  color:var(--status-on);
  border-color:var(--status-on);
}
.copy-button[data-state="failed"]{
  color:var(--incident);
  border-color:var(--incident);
}

.prose pre code{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  font-size:13px;
  line-height:1.55;
  white-space:pre;
}

/* Screenshots of a step. Centred, and capped by width rather than by height.
 *
 * The width is what has to match: pictures of the same phone read as one
 * sequence only if they are the same size across, and their heights differ
 * anyway because each step shows a different amount. A height cap does the
 * opposite - it leaves a tall screenshot narrow and a cropped one nearly twice
 * as wide.
 *
 * A very tall picture therefore stays tall. That is a sign to crop it, not
 * something for the stylesheet to paper over. */
.prose img{
  display:block;
  max-width:480px;
  width:auto;
  height:auto;
  margin:6px auto 18px;
  border:1px solid var(--line);
  border-radius:8px;
}

/* A logo from the icon set is not a screenshot: no frame around it, and small
 * enough to sit in the text rather than interrupt it. The rule keys on where
 * the file comes from, so a text stays free of layout instructions. */
.prose img[src^="/assets/icons/"]{
  max-height:72px;
  border:0;
  border-radius:0;
  margin:10px auto 18px;
}

.prose blockquote{
  display:inline-block;
  text-align:left;
  margin:0 0 14px;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--line);
  color:var(--ink-soft);
}

/* A wide table scrolls inside its own frame rather than pushing the page
 * sideways. */
.prose table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:0 0 14px;
  font-size:13.5px;
}
.prose th,
.prose td{
  text-align:left;
  padding:9px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.prose th{
  color:var(--ink-soft);
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.prose tbody tr:last-child td{ border-bottom:0; }

/* An intro above a chooser: the tiles follow right after, so the gap below the
 * text is smaller there than on a page that ends with it. */
main > .prose-wrap{ padding-bottom:24px; }

/* A note set off from the running text: ::: note in the source. It is the way
 * to make something stand out without letting raw HTML into the files, so a
 * text change still cannot break the layout.
 *
 * The accent is the pine of the FamTec category rather than a warning colour.
 * A note is a hint, not an incident - those have their own colours and their
 * own place in the status card. */
.prose-note{
  margin:0 0 14px;
  padding:14px 18px;
  border-left:3px solid var(--pine);
  border-radius:0 8px 8px 0;
  background:var(--pine-soft);
  color:var(--ink);
}
.prose-note > :last-child{ margin-bottom:0; }
.prose-note strong{ color:var(--pine); }