/* Field note read template: every page under /field-notes/<slug>/. Loads after styles.css.
   Source: claude/field-note-handoff.md, claude/field-note-reference.dc.html and
   claude/field-note-phone-reference.dc.html. The rail and the phone bar are sticky inside the
   article grid, so both stop at the end of the article, before Related reading. Scroll
   highlighting and the phone bar's fade live in script.js. No inline styles: the CSP forbids them. */

/* Layout: article (up to 720px) and a 280px rail, 64px apart. */
.fn-layout{display:grid;grid-template-columns:minmax(0,720px) 280px;justify-content:space-between;gap:64px;padding-block:48px 96px}
.fn{min-width:0}

/* Article header */
.fn-crumbs{margin-bottom:24px;font-size:15px;color:var(--slate)}
.fn-crumbs a{color:var(--slate)}
.fn-crumbs [aria-current]{color:var(--granite)}
.fn h1{font-size:48px;font-weight:800;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.fn-intro{margin-top:20px;font-size:22px;line-height:1.5;color:var(--ink-muted)}
.fn-meta{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:20px;font-size:15px;color:var(--slate)}

/* The short answer */
.fn-short{margin-top:40px;padding:24px 28px;border-left:4px solid var(--blue);border-radius:0 8px 8px 0;background:var(--blue-wash)}
.page-field-note .fn-short h2{margin-bottom:8px;font-size:17px;font-weight:800;line-height:1.3;letter-spacing:0}
.fn-short p{font-size:19px;line-height:1.65}
.fn-short p+p{margin-top:12px}

/* On this page, phone version: a closed disclosure under the short answer. */
.fn-toc{margin-top:20px;border-block:1px solid var(--scree);scroll-margin-top:24px}
.fn-toc summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.fn-toc summary::-webkit-details-marker{display:none}
.fn-toc summary svg{transition:transform .15s ease}
.fn-toc[open] summary svg{transform:rotate(180deg)}
.fn-toc ol{margin:0 0 12px;padding:0;list-style:none}
.fn-toc a{display:block;padding:8px 0;font-weight:600}

/* Body: 19px at 1.7, H2 30px with 56px above. */
.fn-body>*,.fn-section>*{margin-top:18px}
.fn-body>:first-child{margin-top:56px}
.fn-section{margin-top:0}
.fn-body p,.fn-body li{font-size:19px;line-height:1.7}
.page-field-note .fn-section>h2{margin-top:56px;font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.015em;scroll-margin-top:24px;text-wrap:balance}
.fn-body>.fn-section:first-child>h2{margin-top:0}
.fn-body>.fn-intro-copy+.fn-section>h2{margin-top:56px}
.fn-intro-copy>*+*{margin-top:18px}
.fn-body ul,.fn-body ol:not([class]){display:flex;flex-direction:column;gap:10px;padding-left:1.4em}
.fn-body li::marker{color:var(--slate)}
.fn-body strong{font-weight:800}
.fn-body h3{font-size:19px;font-weight:800;line-height:1.35}
.fn-body .source-line{font-size:15px}
.fn-body .link-row{font-size:19px}

/* Inline related links: a lone link after a section. */
.fn-related-line{margin-top:24px;padding:4px 0 4px 16px;border-left:3px solid var(--blue)}
.fn-body .fn-related-line{font-size:17px;line-height:1.5}
.fn-related-line span{color:var(--slate)}
.fn-related-line a{font-weight:600}

/* Lists and cards carried over from the old note layout keep their own styling. */
.fn-body .field-note-checklist{gap:0;padding-left:0}
.fn-body .field-note-checklist li{font-size:18px}
.fn-body .blend-checks{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:0}
.fn-body .blend-checks p,.fn-body .field-note-question-grid p{font-size:17px}
.fn-body .measurement-change-card{margin-top:24px}
.fn-body .measurement-change-card p,.fn-body .measurement-change-card dd,.fn-body .measurement-change-card dt{font-size:17px}

/* Figures: a Snowfield panel that reaches 40px past the text column on desktop. */
.fn-body figure{display:flex;flex-direction:column;gap:20px;margin:32px -40px 0;padding:32px 40px;border:1px solid var(--scree);border-radius:8px;background:var(--snow)}
.fn-body figure>figcaption{display:flex;flex-direction:column;gap:4px;padding:0;border:0}
.page-field-note .fn-body figure>figcaption>.label{font-size:19px;font-weight:800;line-height:1.35;color:var(--granite);letter-spacing:0;text-transform:none}
.page-field-note .fn-body figure>figcaption>strong{font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink-muted)}
.fn-body figure p,.fn-body figure li{font-size:16px;line-height:1.55}
.fn-body figure h3{font-size:17px}
.fn-body figure .figure-note,.fn-body figure .pipeline-caption,.fn-body .carry-forward-worksheet>p{font-size:14px;line-height:1.5;color:var(--slate)}

/* Number tiles: white, 4px top edge; Slate for the comparison value, Signal blue for the preferred one. */
.fn-body .reconciliation-totals,.fn-body .count-credit-grid,.fn-body .blend-flow-grid{gap:14px}
.fn-body .reconciliation-totals>div,.fn-body .count-credit-grid>section,.fn-body .blend-flow-grid>section{gap:4px;padding:18px 20px;border:1px solid var(--scree);border-top:4px solid var(--slate);border-radius:6px;background:var(--white)}
.fn-body .reconciliation-totals>div+div,.fn-body .count-credit-grid>section:first-child{border-top-color:var(--blue)}
.fn-body .reconciliation-totals span,.fn-body .count-credit-grid .label{font-size:14px;font-weight:700;color:var(--slate)}
.fn-body .reconciliation-totals strong,.fn-body .figure-stat{font-size:48px;color:var(--granite)}
.fn-body .reconciliation-totals div:last-child strong{color:var(--granite)}
.fn-body .reconciliation-totals p{font-size:16px;font-weight:600}
.fn-body .blend-flow-grid>.blend-join{grid-column:1/-1;border:1px solid var(--gold-line);border-top-width:1px;background:var(--white)}
.fn-body .count-credit-grid>section>p:not(.label){font-size:15px}

/* Tables: real table markup, a visually hidden caption, ruled rows. */
.fn-body figure table{width:100%;border:0;border-radius:0;border-collapse:collapse;background:transparent;font-size:15px}
.fn-body figure table caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fn-body figure thead th{padding:0 12px 10px;border:0;background:transparent;font-size:14px;font-weight:700;color:var(--slate);text-align:left}
.fn-body figure thead th:first-child{padding-left:0}
.fn-body figure tbody th,.fn-body figure tbody td{padding:12px;border:0;border-top:1px solid var(--scree);vertical-align:top;text-align:left;font-size:15px}
.fn-body figure tbody th{padding-left:0;font-weight:800}
.fn-body .reconciliation-sheet tbody td:last-child,.fn-body .carry-forward-table tbody td:last-child{padding-right:0;font-weight:600;color:var(--blue)}
.fn-body .chart-data table caption{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;padding-bottom:10px;font-size:14px;color:var(--slate);text-align:left}

/* Where the work goes from here */
.fn-next{margin-top:56px;padding-top:32px;border-top:2px solid var(--granite)}
.page-field-note .fn-next h2{margin-bottom:16px;font-size:22px;font-weight:800;line-height:1.3;letter-spacing:0}
.fn-next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fn-next-card{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--scree);border-radius:8px;background:var(--white);color:var(--granite);text-decoration:none}
.fn-next-card:hover{border-color:var(--blue);color:var(--granite)}
.fn-next-card svg{flex:none;width:32px;height:32px}
.fn-next-card>span{display:flex;flex-direction:column;gap:4px}
.fn-next-title{font-size:18px;font-weight:800;line-height:1.35;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.fn-next-card:hover .fn-next-title{color:var(--blue-hover)}
.fn-next-desc{font-size:16px;line-height:1.5;color:var(--ink-muted)}

/* Rail: starts level with the short answer and stays pinned until the article ends. */
.fn-rail{padding-top:128px}
.fn-rail-inner{position:sticky;top:24px;display:flex;flex-direction:column;gap:28px}
.fn-rail nav{display:flex;flex-direction:column;gap:10px}
.page-field-note .fn-rail h2{font-size:15px;font-weight:700;line-height:1.4;letter-spacing:0;color:var(--slate)}
.fn-rail ol{margin:0;padding:0;list-style:none}
.fn-rail ol a{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--scree);color:var(--ink-muted);font-size:15px;font-weight:500;line-height:1.45;text-decoration:none}
.fn-rail ol a:hover{color:var(--blue)}
.fn-rail ol a[aria-current]{border-left-color:var(--blue);color:var(--blue);font-weight:700}
.fn-rail-card{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--scree);border-radius:8px;background:var(--white)}
.fn-rail-card-title{font-size:17px;font-weight:800;line-height:1.3}
.fn-rail-card p:not(.fn-rail-card-title){font-size:15px;line-height:1.5;color:var(--ink-muted)}
.fn-rail-card .button{min-height:44px;padding:0 10px;font-size:14px;white-space:nowrap}

/* Phone bar: hidden on desktop. */
.fn-bar{display:none}

/* Related reading: Mist band, three white cards. */
.fn-reading{background:var(--mist)}
.fn-reading>.wrap{padding-block:var(--band)}
.page-field-note .fn-reading h2{margin-bottom:28px;font-size:32px;font-weight:800;line-height:1.08;letter-spacing:-.025em}
.fn-reading-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fn-reading-grid a{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--scree);border-radius:8px;background:var(--white);color:var(--granite);text-decoration:none}
.fn-reading-grid a:hover{border-color:var(--blue);color:var(--granite)}
.fn-reading-grid svg{width:32px;height:32px}
.fn-reading-title{font-size:20px;font-weight:800;line-height:1.3}
.fn-reading-more{margin-top:auto;font-size:16px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:4px}

/* Field guide variant (body class page-field-guide, claude/field-guide-handoff.md): the same layout
   with no short answer. The overview becomes a path diagram, linked notes a numbered reading list,
   "Where do we start?" three small cards, and the full-width band "Where this leads next". */
.fg-path{display:flex;flex-direction:column;gap:16px;margin:40px -40px 0;padding:28px 40px;border:1px solid var(--scree);border-radius:8px;background:var(--snow)}
.fg-path figcaption{font-size:19px;font-weight:800;line-height:1.35}
.fg-path ol{display:flex;flex-direction:row;gap:12px;align-items:stretch;margin:0;padding:0;list-style:none}
.fg-path-step{flex:1;display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--scree);border-top:4px solid var(--granite);border-radius:6px;background:var(--white)}
.fg-path-step:last-child{border-top-color:var(--blue)}
.fg-path-label{font-size:14px;font-weight:700;color:var(--slate)}
.fg-path-name{font-size:20px;font-weight:800;line-height:1.25}
.fg-path-desc{font-size:16px;line-height:1.5;color:var(--ink-muted)}
.fg-path-arrow{display:flex;align-items:center}
.fg-path-arrow svg{flex:none}

.fn-body .fg-reading{margin-top:20px;padding:0;border-top:1px solid var(--scree);list-style:none}
.fg-reading a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--scree);color:var(--granite);text-decoration:none}
.fg-reading a:hover{color:var(--granite)}
.fg-reading-num{font-size:28px;font-weight:800;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.fg-reading-text{display:flex;flex-direction:column;gap:4px}
.fg-reading-title{font-size:21px;font-weight:800;line-height:1.3}
.fg-reading-hook{font-size:17px;line-height:1.5;color:var(--ink-muted)}
.fg-reading-more{font-size:16px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.fg-reading a:hover .fg-reading-more{color:var(--blue-hover)}

.fn-body .fg-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;padding:0;list-style:none}
.fg-start li{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--scree);border-radius:8px;background:var(--white)}
.fn-body .fg-start h3{margin:0}
.fn-body .fg-start p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-muted)}
.fg-start a{margin-top:auto;font-size:16px;font-weight:600}

.fg-next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.fg-next-card{display:flex;flex-direction:column;gap:12px;padding:32px;border:1px solid var(--scree);border-radius:8px;background:var(--white)}
.fg-next-card:only-child{grid-column:1/-1}
.fg-next-card:only-child p{max-width:44em}
.fg-next-card svg{width:32px;height:32px}
.page-field-note .fg-next-card h3{font-size:24px;font-weight:800;line-height:1.25;letter-spacing:0}
.fg-next-card p{font-size:17px;line-height:1.55;color:var(--ink-muted)}
.fg-next-card .fg-next-links{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.fg-next-links a{font-size:16px;font-weight:600}
.fg-next-links a:first-child{font-weight:700}

/* Privacy variant (body class page-privacy, claude/indexes-privacy-handoff.md): the article layout
   with no short answer, a rail holding only "On this page" and no phone bar. Smaller H2s (26px)
   and 18px text; the source links get a Scree left edge; the fine-print callout is Gold wash. */
.page-privacy .fn-body>:first-child{margin-top:48px}
.page-privacy .fn-body p,.page-privacy .fn-body li{font-size:18px}
.page-privacy .fn-section>h2{margin-top:48px;font-size:26px;line-height:1.25;letter-spacing:0}
.fn-body .pv-links{gap:8px;margin-top:18px;padding-left:0;list-style:none}
.fn-body .pv-links li{padding-left:16px;border-left:3px solid var(--scree);font-size:17px;line-height:1.5}
.pv-links a{font-weight:600}
.fn-body .pv-fine{display:flex;gap:16px;align-items:flex-start;margin-top:48px;padding:24px 28px;border-radius:8px;background:var(--gold-wash)}
.pv-fine svg{flex:none}
.pv-fine>div{display:flex;flex-direction:column;gap:6px}
.page-field-note .pv-fine h2{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:0}
.page-privacy .fn-body .pv-fine p{font-size:17px;line-height:1.6}

/* Below 1080px: no rail; the list moves under the short answer and the bottom bar takes over. */
@media (min-width:1080px){
 .fn-toc{display:none}
 /* The CMP comparison table reaches 40px past the column, like a figure, so all six columns fit. */
 .fn-body .update-table-wrap{margin-inline:-40px}
 .fn-body .cmp-table{min-width:0;font-size:15px}
 .fn-body .cmp-table th,.fn-body .cmp-table td{padding-inline:12px}
}
@media (max-width:1079px){
 .fn-layout{grid-template-columns:minmax(0,1fr);padding-bottom:0}
 .fn-rail{display:none}
 .fn-bar{position:sticky;bottom:0;z-index:2;display:flex;gap:10px;align-items:center;margin:32px calc(-1 * var(--gutter)) 0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--scree);background:rgba(255,255,255,.97)}
 .fn-bar a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:6px;font-size:15px;font-weight:600;text-decoration:none}
 .fn-bar-toc{gap:6px;padding:0 12px;border:1px solid var(--scree);background:var(--white);color:var(--granite)}
 .fn-bar-toc:hover{color:var(--granite);border-color:var(--blue)}
 .fn-bar .button{flex:1;padding:0 12px}
 /* With JavaScript the bar waits until the short answer has scrolled past, then fades in. */
 .js .fn-bar{visibility:hidden;opacity:0;transition:opacity .15s ease,visibility 0s linear .15s}
 .js .fn-bar.is-visible{visibility:visible;opacity:1;transition:opacity .15s ease,visibility 0s}
 .fn-reading-grid,.fn-next-grid,.fg-next-grid{grid-template-columns:minmax(0,1fr)}
 .fn-body figure,.fg-path{margin-inline:0}
}
@media (max-width:900px){
 .fn-layout{padding-top:24px}
 .fn-crumbs{margin-bottom:16px;font-size:14px}
 .page-field-note .fn h1{font-size:34px;line-height:1.08;letter-spacing:-.02em}
 .fn-intro{margin-top:14px;font-size:18px}
 .fn-meta{gap:4px 16px;margin-top:14px;font-size:14px}
 .fn-short{margin-top:24px;padding:18px}
 .page-field-note .fn-short h2{margin-bottom:6px;font-size:17px!important;line-height:1.3!important;letter-spacing:0!important}
 .fn-short p{font-size:17px}
 .fn-body>*,.fn-section>*{margin-top:14px}
 .fn-body>:first-child{margin-top:36px}
 .fn-body p,.fn-body li{font-size:17px}
 .page-field-note .fn-section>h2{margin-top:36px;font-size:24px!important;line-height:1.2!important}
 .fn-body>.fn-intro-copy+.fn-section>h2{margin-top:36px}
 .page-field-note .fn-body h3{font-size:17px!important;font-weight:800;line-height:1.35!important}
 .fn-body .fn-related-line{margin-top:18px;font-size:16px}
 .fn-body .field-note-checklist li{font-size:16px}
 .fn-body .blend-checks{grid-template-columns:minmax(0,1fr)}
 .fn-body figure{gap:14px;margin-top:20px;padding:18px}
 .page-field-note .fn-body figure>figcaption>.label{font-size:17px}
 .page-field-note .fn-body figure>figcaption>strong{font-size:15px!important;line-height:1.5!important;letter-spacing:0!important}
 .fn-body figure p,.fn-body figure li{font-size:15px}
 .fn-body .reconciliation-totals,.fn-body .count-credit-grid,.fn-body .blend-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .fn-body .reconciliation-totals>div,.fn-body .count-credit-grid>section,.fn-body .blend-flow-grid>section{padding:14px}
 .page-field-note .fn-body .reconciliation-totals strong,.page-field-note .fn-body .figure-stat{font-size:34px!important}
 .fn-body .reconciliation-totals p{font-size:14px}
 /* Each table row becomes a stacked block: row label, then each value, then the question in blue. */
 .fn-body .reconciliation-sheet thead,.fn-body .carry-forward-table thead{display:none}
 .fn-body .reconciliation-sheet table,.fn-body .reconciliation-sheet tbody,.fn-body .reconciliation-sheet tr,.fn-body .reconciliation-sheet th,.fn-body .reconciliation-sheet td,
 .fn-body .carry-forward-table,.fn-body .carry-forward-table tbody,.fn-body .carry-forward-table tr,.fn-body .carry-forward-table th,.fn-body .carry-forward-table td{display:block;width:auto}
 .fn-body .reconciliation-sheet tr,.fn-body .carry-forward-table tr{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--scree)}
 .fn-body .reconciliation-sheet tbody th,.fn-body .reconciliation-sheet tbody td,.fn-body .carry-forward-table tbody th,.fn-body .carry-forward-table tbody td{padding:0;border:0;font-size:14px}
 .fn-body .reconciliation-sheet tbody th,.fn-body .carry-forward-table tbody th{font-size:15px}
 .fn-body .reconciliation-sheet td::before,.fn-body .carry-forward-table td::before{display:inline;color:var(--slate);font-weight:400}
 .fn-body .reconciliation-sheet td:nth-of-type(1)::before{content:"A: "}
 .fn-body .reconciliation-sheet td:nth-of-type(2)::before{content:"B: "}
 .fn-body .carry-forward-table td:not(:last-child)::before{content:attr(data-label) ": "}
 .fn-body .reconciliation-sheet td:last-child::before,.fn-body .carry-forward-table td:last-child::before{content:none}
 .fn-next{margin-top:40px;padding-top:24px}
 .page-field-note .fn-next h2{margin-bottom:12px;font-size:20px!important;line-height:1.3!important;letter-spacing:0!important}
 .fn-next-grid{gap:10px}
 .fn-next-card{padding:16px}
 .fn-next-title{font-size:16px}
 .fn-next-desc{font-size:15px}
 .page-field-note .fn-reading h2{margin-bottom:20px;font-size:26px!important}
 .fn-reading-grid{gap:12px}
 .fn-reading-grid a{padding:20px}
 .page-field-note .fn-reading-title{font-size:18px}
 /* Guide parts stack; the path's arrows turn to point down. */
 .fn-toc+.fg-path{margin-top:28px}
 .fg-path{gap:16px;padding:18px}
 .fg-path figcaption{font-size:17px}
 .fg-path ol{flex-direction:column;gap:8px}
 .fg-path-step{padding:16px}
 .fg-path-name{font-size:18px}
 .fg-path-desc{font-size:15px}
 .fg-path-arrow{justify-content:center}
 .fg-path-arrow svg{transform:rotate(90deg)}
 .fg-reading a{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:16px 0}
 .fg-reading-num{font-size:22px}
 .fg-reading-title{font-size:18px}
 .fg-reading-hook{font-size:16px}
 .fg-reading-more{font-size:15px}
 .fn-body .fg-start{grid-template-columns:minmax(0,1fr)}
 .fg-start li{padding:16px}
 .fn-body .fg-start p,.fg-start a{font-size:15px}
 .fg-next-grid{gap:12px}
 .fg-next-card{padding:20px}
 .page-field-note .fg-next-card h3{font-size:20px!important;line-height:1.3!important}
 .fg-next-card p{font-size:16px}
 /* Privacy: 22px H2s, 17px text. */
 .page-privacy .fn-body>:first-child{margin-top:36px}
 .page-privacy .fn-body p,.page-privacy .fn-body li{font-size:17px}
 .page-privacy .fn-section>h2{margin-top:36px;font-size:22px!important;line-height:1.25!important;letter-spacing:0!important}
 .fn-body .pv-links li{font-size:16px}
 .fn-body .pv-fine{margin-top:36px;padding:20px}
 .page-field-note .pv-fine h2{font-size:18px!important;line-height:1.3!important;letter-spacing:0!important}
 .page-privacy .fn-body .pv-fine p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
 .js .fn-bar,.js .fn-bar.is-visible,.fn-toc summary svg{transition:none}
}