:root {
  --accent: #1d6fb8;
  --accent-dark: #0f2942;
  --text: #24323f;
  --text-soft: #4a5b6b;
  --border: #e2e8ee;
  --code-bg: #eef2f6;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height: 1.65;
  background: #fff;
  font-size: 16px;
}

.page {
  width: 80%;
  margin: 0 auto;
  padding: 24px 40px 80px;
}

.page-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--accent);
}

/* Breadcrumb header — reflects the navigation path to this page */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--accent);
}
.breadcrumb .crumb { color: var(--text-soft); font-weight: 600; }
.breadcrumb .crumb.current { color: var(--accent-dark); font-weight: 700; }
.breadcrumb .crumb-sep {
  color: var(--accent);
  font-weight: 400;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .breadcrumb { font-size: 19px; }
}

.last-updated {
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
  margin: -14px 0 26px;
}

.lead {
  font-size: 17px;
  color: var(--text-soft);
  margin: 18px 0 28px;
}

h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 40px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin: 26px 0 10px;
}

p { margin: 0 0 14px; }

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 0 0 8px; }
li > ul, li > ol { margin-top: 8px; }

a { color: var(--accent); word-break: break-word; }

code {
  background: var(--code-bg);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.88em;
  color: #b3261e;
}

/* Callout boxes for "Note" / "Note to myself" */
.note {
  border-left: 4px solid var(--accent);
  background: #f1f7fc;
  padding: 12px 18px;
  border-radius: 0 6px 6px 0;
  margin: 18px 0;
}
.note .note-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  margin-bottom: 4px;
}
.note.note-self {
  border-left-color: #e0a020;
  background: #fdf7ec;
}
.note.note-self .note-label { color: #b9810f; }

.note p:last-child { margin-bottom: 0; }

/* Embedded wireframe (shown in a phone-style frame) */
.wireframe-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 26px 0 10px;
}
.wireframe-frame {
  width: 390px;
  max-width: 100%;
  height: 780px;
  max-height: 80vh;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(15, 41, 66, 0.20);
  background: #000;
}
.wireframe-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.wireframe-actions {
  margin-top: 16px;
  font-size: 14px;
}

/* Wireframe with an explanatory note beside it (note on the right).
   Below the breakpoint the note stacks ABOVE the screen so it isn't missed.
   Width is measured against the Specs iframe = browser window minus sidebar. */
.screen-with-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
}
.screen-with-note .wireframe-wrap { margin: 0; }
.screen-with-note .side-note { max-width: 280px; margin: 0; flex: 0 1 280px; }
@media (max-width: 1150px) {
  .screen-with-note { flex-direction: column; gap: 20px; }
  .screen-with-note .side-note { order: -1; flex-basis: auto; max-width: 100%; }
}

/* Flowchart / diagram image */
.flowchart {
  margin: 24px 0 10px;
}
.flowchart img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(15, 41, 66, 0.14);
  background: #fff;
}
.flowchart figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7885;
}

@media (max-width: 640px) {
  .page { width: 100%; padding: 16px 20px 60px; }
  .page-title { font-size: 24px; }
  h2 { font-size: 19px; }
  .wireframe-frame { height: 70vh; }
}