/* =========================================================
   agenticengineering101.com

   PART 1 is Full Stack Python's stylesheet, transcribed rule-for-rule from
   the inline <style> block on https://www.fullstackpython.com/ (fetched
   2026-09-11) and de-minified. Values are unchanged. Two deliberate
   deviations, both marked [DEVIATION] inline below.

   PART 2 is the small set of rules FSP has no equivalent for (article meta,
   prompt blocks, stub notices, prev/next, email form). Written in FSP's
   idiom: Helvetica Neue for interface text, #777 for muted, dotted links,
   no color, no boxes.
   ========================================================= */

/* ============ PART 1 — Full Stack Python, verbatim ============ */

:root {
  /* FSP uses no webfonts. These two lines are the whole font system:
     swap in "DM Sans" here and the site changes face with no other edit. */
  --font-body: Georgia, serif;
  --font-head: "Helvetica Neue", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 18px;
  background: #fefefe;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  color: #222;
  padding: 0;
  overflow-wrap: break-word;   /* [ADDED] long tokens wrap instead of overflowing 320px */
}

img { vertical-align: middle; max-width: 100%; }   /* max-width [ADDED] for responsiveness */
hr { height: 0; box-sizing: content-box; margin: 21px 0; border-top: 1px solid #eee; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.1;
  color: #000;
}
h1, h2, h3 { margin: 30px 0 6px; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4, h5, h6 { margin: 11px 0; font-size: 18px; }

p  { margin: 0 0 12px; }
ol, ul { margin: 0 0 10px; }

/* [DEVIATION 1] FSP ships `font:"Courier New",monospace` — an invalid font
   shorthand (no size), so browsers drop it entirely and FSP's own code
   blocks render in Georgia. Using font-family here, which is the evident
   intent. Everything else in this rule is FSP's. */
code, pre {
  font-family: "Courier New", monospace;
  border-radius: 4px;
  background-color: #f4f9ff;
  font-size: 12px;
}
code { padding: 2px 4px; white-space: nowrap; }
pre {
  overflow: scroll;
  white-space: pre;
  display: block;
  padding: 10px;
  margin: 0 0 11px;
  line-height: 1.4;
  word-break: break-all;
  word-wrap: break-word;
  border: 1px solid #ccc;
}

/* grid */
.cn { padding: 0 15px 0 15px; margin-right: auto; margin-left: auto; }
.cn:before, .cn:after { display: table; content: " "; }
.cn:after { clear: both; }
.row:before, .row:after { display: table; content: " "; }
.row:after { clear: both; }
.row { margin-right: -15px; margin-left: -15px; }
.c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {
  position: relative; min-height: 1px; padding: 0 15px 0 15px;
}

a { background: transparent; text-decoration: none; border-bottom: 1px dotted; color: #444; }
a:hover { text-decoration: none; color: #000; }

/* header / footer */
.ft { padding: 0 0 24px; float: right; }
.sns { font-family: var(--font-head); }
.sps { font-size: 14px; }
.hd { margin: 20px 0 15px 0; }
.hd > a { border-bottom: none; }
img.hdr { vertical-align: middle; border: none; height: 52px; width: 52px; padding: 1px; }
.hdt a, .hdt a:hover {
  font-family: var(--font-head);
  font-size: 72px;
  font-weight: normal;
  letter-spacing: .03em;
  vertical-align: middle;
  margin-left: -5px;
  color: #000;
  text-decoration: none;
  border-bottom: none;
  line-height: .9em;
}
.bk { margin: 0 5px 0 5px; }
img.nob { border: none; }
p.banner { font-weight: 500; line-height: 1.1; color: #fff; font-size: 22px; margin: 14px 0 18px 0; }
.bp { line-height: 1.3em; }

/* table of contents */
.toc > h4 { margin: 15px 0 3px 25px; }
.toc > h4.td { margin-left: 38px; }
.tc { margin-left: 56px; padding: 4px 0 0; font-family: var(--font-head); }
.tds { margin-left: 65px; }
.tdi { margin-left: 78px; }
.sn { color: #777; }
.desc { margin-top: 6px; }
.cex { margin-left: 20px; }
h3.toc-examples { margin-top: 24px; line-height: 28px; }

@media (min-width: 750px) { .cn { width: 730px; } }
@media (min-width: 768px) {
  .cn { width: 750px; }
  #full-toc { display: block; }
  #mobile-toc { display: none; }
  .c3, .c4, .c6, .c8, .c9, .c12 { float: left; }
  .c12 { width: 100%; }
  .c9  { width: 75%; }
  .c8  { width: 66.66666666666666%; }
  .c6  { width: 50%; }
  .c4  { width: 33.33333333333333%; }
  .c3  { width: 25%; }
  .co1 { margin-left: 8.333333333333332%; }
  .select-next { min-height: 300px; }
}
@media (min-width: 940px)  { .cn { width: 920px; } }
@media (min-width: 1140px) { .cn { width: 1120px; } .select-next { min-height: 220px; } }

/* [DEVIATION 2] FSP's only max-width block. Kept because the 72px masthead
   and 40px h1 genuinely do not fit a phone. Everything else is min-width. */
@media (max-width: 767px) {
  #full-toc { display: none; }
  .desktop-only { display: none; }
  pre { overflow-wrap: normal; word-wrap: normal; word-break: keep-all; font-size: 60%; }
  .hd { padding: 8px 0 10px; margin: 0; }
  .hdt a, .hdt a:hover { font-size: 34px; }
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  img.hdr { height: 26px; width: 26px; }
}

/* ============ PART 2 — additions FSP has no equivalent for ============ */

/* Skip link: invisible until focused. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #000; color: #fff; padding: 8px 12px; border-bottom: none; }
.skip:focus { left: 0; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* A TOC entry for a page that is not written yet. Uses FSP's own .sn muted grey. */
.tc .sn { font-size: 14px; }

/* Article byline under the h1 — FSP's .sns .sps treatment. */
.meta { font-family: var(--font-head); font-size: 14px; color: #777; margin: 0 0 18px; }
.meta a { color: #777; }
.crumbs { font-family: var(--font-head); font-size: 14px; color: #777; margin: 20px 0 0; }

/* Prose column: FSP body type, capped at a readable measure. */
.prose { max-width: 34em; }
.prose h2, .prose h3 { margin-top: 30px; }
.prose li { margin: 0 0 6px; }
.prose blockquote { margin: 0 0 12px; padding-left: 15px; border-left: 3px solid #eee; color: #444; }
.table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; }

.callout { max-width: 34em; margin: 0 0 12px; padding-left: 15px; border-left: 3px solid #ccc; }
.callout__label { font-family: var(--font-head); font-size: 14px; color: #777; margin: 0 0 4px; }

/* "What to prompt to learn more" — the pattern FSP itself adopted in 2026. */
.promptnext { max-width: 34em; margin: 30px 0 0; }
.promptnext__p { color: #444; }
.promptnext ul { list-style: none; padding: 0; }
.promptnext li {
  font-family: "Courier New", monospace; font-size: 12px; line-height: 1.4;
  background-color: #f4f9ff; border-radius: 4px; padding: 8px 10px; margin: 0 0 6px;
}

/* Not-yet-written page notice. */
.stub { max-width: 34em; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 12px 0; margin: 0 0 18px; }

/* Prev / next. */
.pager { font-family: var(--font-head); font-size: 14px; margin: 30px 0 0; padding: 12px 0 0; border-top: 1px solid #eee; }
.pager__next { float: right; }

/* Email capture. Not an FSP element — kept because this site is a lead magnet. */
.signup { max-width: 34em; margin: 30px 0 0; padding: 12px 0 0; border-top: 1px solid #eee; }
.signup__h { font-size: 18px; margin: 0 0 4px; }
.signup__p { font-size: 14px; font-family: var(--font-head); color: #777; }
.signup__form { font-family: var(--font-head); }
.signup__input { font-size: 16px; padding: 7px 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 18em; margin: 0 4px 6px 0; min-height: 40px; }
.signup__btn { font-family: var(--font-head); font-size: 16px; padding: 7px 14px; border: 1px solid #000; border-radius: 4px; background: #000; color: #fff; cursor: pointer; min-height: 40px; }
.signup__btn:hover { background: #fff; color: #000; }

:focus-visible { outline: 2px solid #000; outline-offset: 2px; }