/* field-notes.css. Page-specific styles for the Field Notes
   long-read surface. Each entry uses a full .surface card so the
   disclosure pattern stays anchored over multi-paragraph content;
   permalink hover and inline data tables are tuned for the reading
   register, not the dashboard data-density register. */

/* Entry structure: full .surface for long-read disclosure,
   permalink hover, data tables inside entries. */
/* Field Notes entries use a uniform 1px hairline on all four sides
   so the entry reads as a flat editorial block. The previous
   accent-tinted left rail combined with the standard hairline on the
   other three sides made the left edge feel mismatched and pulled
   the eye toward the wrong column. */
.prose-page .fn-entry{scroll-margin-top:64px;overflow:hidden;}
.prose-page .fn-entry[open]{box-shadow:none;}
.prose-page .fn-entry summary{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;cursor:pointer;list-style:none;user-select:none;transition:background var(--duration-fast);}
.prose-page .fn-entry summary::-webkit-details-marker{display:none;}
.prose-page .fn-entry summary::marker{display:none;content:'';}
.prose-page .fn-entry summary:hover{background:var(--color-bg-subtle);}
.prose-page .fn-entry-info{flex:1;min-width:0;}
.prose-page .fn-entry-date{font-family:var(--font-mono);font-size:var(--fs-label-xs);font-weight:var(--fw-label);letter-spacing:var(--ls-label-wide);line-height:var(--lh-label);text-transform:uppercase;color:var(--color-text-tertiary);margin-bottom:0.25rem;}
.prose-page .fn-entry-title{font-family:var(--font-display);font-size:var(--fs-prose-md);font-weight:var(--fw-label-strong);letter-spacing:0;color:var(--color-text);line-height:var(--lh-heading);}
.prose-page .fn-entry-subtitle{font-family:var(--font-display);font-size:var(--fs-label-md);color:var(--color-text-tertiary);line-height:1.4;margin-top:0.1rem;}
.prose-page .fn-permalink{display:inline-flex;vertical-align:middle;color:var(--color-text-tertiary);margin-left:0.35rem;opacity:0;transition:opacity 0.15s ease;}
.prose-page .fn-entry summary:hover .fn-permalink,
.prose-page .fn-permalink:focus{opacity:1;}
.prose-page .fn-permalink:hover{color:var(--color-accent);}
.prose-page .fn-permalink-copied{opacity:1 !important;color:var(--color-green) !important;}
.prose-page .fn-entry-chevron{flex-shrink:0;margin-left:1rem;color:var(--color-text-tertiary);transition:transform 0.2s ease;}
.prose-page .fn-entry[open] .fn-entry-chevron{transform:rotate(180deg);}
.prose-page .fn-entry-body{padding:0 1.25rem 1.75rem;border-top:1px solid var(--color-border);}

.prose-page .prose-section{margin-bottom:2.25rem;}
.prose-page .prose-label{margin-top:2rem;}
.prose-page .prose-section p,.prose-page .fn-entry-body > p{font-size:var(--fs-prose-sm);line-height:1.85;color:var(--color-text-secondary);margin-bottom:1rem;}
.prose-page .fn-lead{font-size:var(--fs-prose-md);line-height:1.85;color:var(--color-text);margin-top:1.5rem;}
.prose-page .fn-entry-body a:not(.fn-permalink):not(.cr-index-name){color:var(--color-text);text-decoration:underline;text-decoration-color:var(--color-border-strong);text-underline-offset:0.15em;transition:text-decoration-color var(--duration-fast);}
.prose-page .fn-entry-body a:not(.fn-permalink):not(.cr-index-name):hover{text-decoration-color:var(--color-accent);}
.prose-page .fn-coda{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--color-border);}
.prose-page .fn-coda p{font-size:var(--fs-prose-sm);line-height:1.85;color:var(--color-text);margin-bottom:1rem;}
.prose-page .fn-cta{margin-top:1.5rem;}
.prose-page .fn-cta a{color:var(--color-accent);text-decoration:none;font-family:var(--font-mono);font-size:var(--fs-label-xs);font-weight:var(--fw-label);text-transform:uppercase;letter-spacing:var(--ls-label);}
.prose-page .fn-cta a:hover{text-decoration:underline;}

/* Contact Report: player index reads as reference material through
   hairline rules, matching the app's dense table rhythm without
   becoming another card. */
.prose-page .cr-index{margin:1.75rem 0 0.25rem;padding:0.95rem 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:transparent;border-radius:0;}
.prose-page .cr-index-label{font-family:var(--font-mono);font-size:var(--fs-label-xs);font-weight:var(--fw-label);text-transform:uppercase;letter-spacing:var(--ls-label-wide);line-height:var(--lh-label);color:var(--color-text-tertiary);margin-bottom:0.75rem;}
.prose-page .cr-index-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;}
.prose-page .cr-index-row{display:flex;align-items:baseline;gap:0.3rem;padding:0.25rem 0;border-bottom:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--fs-label-md);line-height:1.5;}
.prose-page .cr-index-row:nth-last-child(-n+2){border-bottom:none;}
.prose-page .cr-index-rank{flex-shrink:0;width:1.6rem;text-align:right;color:var(--color-text-tertiary);font-size:var(--fs-label-xs);}
.prose-page .cr-index-name{color:var(--color-text);text-decoration:none;transition:color var(--duration-fast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prose-page .cr-index-name:hover{color:var(--color-accent);}
.prose-page .cr-index-consensus{margin-left:auto;flex-shrink:0;color:var(--color-text-tertiary);font-size:var(--fs-label-xs);}

.prose-page .cr-section-target{scroll-margin-top:64px;}
.prose-page .cr-missed,.prose-page .cr-diverge{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--color-border);}
.prose-page .cr-missed-label{font-family:var(--font-mono);font-size:var(--fs-label-xs);font-weight:var(--fw-label);text-transform:uppercase;letter-spacing:var(--ls-label-wide);line-height:var(--lh-label);color:var(--color-text-tertiary);margin-bottom:1rem;}
.prose-page .cr-missed p,.prose-page .cr-diverge p{font-size:var(--fs-prose-sm);line-height:1.85;color:var(--color-text-secondary);margin-bottom:1rem;}
.prose-page .cr-diverge{margin-top:1.75rem;}
/* cr-stat lines hold long mid-dot-separated stat strings (sometimes
   multi-row via <br>). Force a single line per row, scroll horizontally on
   overflow, and fade the right edge to signal more content past the visible
   end. Scrollbar hidden: the fade is the affordance.

   The fade falls inside a padding-right buffer so the gradient lands on
   trailing whitespace rather than on the rightmost text characters when
   the user scrolls to the end. The mask width matches the buffer, so a
   scroll-start view shows a narrow soft fade on the last ~1 character
   (enough to signal scrollability) without clipping readable content. */
.prose-page .cr-stat{font-family:var(--font-mono);font-size:var(--fs-label-md);color:var(--color-text-tertiary);line-height:var(--lh-ui);margin-bottom:1.15rem;letter-spacing:0;padding:0.65rem 18px 0.65rem 14px;background:transparent;border-radius:0;border-left:2px solid var(--color-accent);white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(to right,#fff calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to right,#fff calc(100% - 14px),transparent 100%);}
.prose-page .cr-stat::-webkit-scrollbar{display:none;}
/* Modern browsers: release the fade entirely at scroll-end so the last
   characters read at full opacity once the user has scrolled to them.
   Fallback (Firefox <120, older Safari) retains the static narrow mask
   above, which is already legible to the second-to-last character. */
@supports (animation-timeline: scroll(self inline)){
  .prose-page .cr-stat{
    animation:fnStatFadeRelease linear both;
    animation-timeline:scroll(self inline);
    animation-range:90% 100%;
  }
}
@keyframes fnStatFadeRelease{
  to{
    -webkit-mask-image:linear-gradient(to right,#fff 100%,#fff 100%);
    mask-image:linear-gradient(to right,#fff 100%,#fff 100%);
  }
}
.prose-page .fn-entry-body > .cr-stat:first-child{margin-top:1.5rem;}
.prose-page .cr-diverge-row{display:block;}
.prose-page .cr-diverge-move{font-family:var(--font-mono);font-size:var(--fs-label-md);font-weight:var(--fw-label);color:var(--color-accent);white-space:nowrap;}
.prose-page .cr-src{font-family:var(--font-ui);font-size:var(--fs-label-md);color:var(--color-text-tertiary);line-height:1.65;margin-top:1.25rem;}

@media(max-width:600px){
  .prose-page .cr-index-grid{column-gap:0.4rem;}
  .prose-page .cr-index-row{font-size:var(--fs-label-sm);gap:0.2rem;min-width:0;}
  .prose-page .cr-index-rank{width:1.3rem;}
  .prose-page .fn-entry summary{padding:0.85rem 1rem;}
  .prose-page .fn-entry-body{padding:0 1rem 1.5rem;}
  .prose-page .fn-entry-title{font-size:var(--fs-prose-sm);}
}
/* Tag filters. */
.fn-filters {
  display: flex; gap: 0.2rem; margin-bottom: 0.45rem;
  flex-wrap: wrap;
}
.fn-filters:last-of-type { margin-bottom: 1.75rem; }
.fn-filter {
  font-family: var(--font-mono); font-size: var(--fs-label-xs); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label-tight); line-height: var(--lh-label);
  padding: 0.28rem 0.64rem; border-radius: var(--radius-sm);
  border: 1px solid var(--surface-edge); background: transparent;
  color: var(--color-text-tertiary); cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.fn-year-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0 0 1.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-label-wide);
}
.fn-year-index:empty { display: none; }
.fn-year-index a {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast);
  padding: 0.2rem 0;
}
.fn-year-index a:hover { color: var(--color-accent); }
.fn-year-marker {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label-wide);
  line-height: var(--lh-label);
  color: var(--color-text-tertiary);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border);
}
.fn-year-marker:first-of-type { margin-top: 0; }

.fn-filter:hover { color: var(--color-text-secondary); border-color: var(--color-border-strong); background: var(--control-hover-wash); }
.fn-filter.active {
  background: color-mix(in srgb, var(--color-accent) 5%, transparent); color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--surface-edge));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 6%, transparent);
}

/* Entry tags Form tags (neutral warm) identify what kind of piece it is. Subject tags (colored) identify what the piece is about. */
.fn-tag {
  font-family: var(--font-mono); font-size: var(--fs-2xs, 0.55rem); font-weight: var(--fw-label);
  letter-spacing: var(--ls-label-tight); line-height: var(--lh-label); text-transform: uppercase;
  padding: 0.12rem 0.38rem; border-radius: 3px; border: 1px solid var(--badge-edge);
  margin-left: 0.4rem; vertical-align: middle;
  display: inline-block; position: relative; top: -0.5px;
}
/* Form tags: neutral warm, differentiated by label only */
.fn-tag-portrait,
.fn-tag-report,
.fn-tag-method,
.fn-tag-usage {
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
}
/* Subject tags: carry color because subject is what you scan for */
.fn-tag-xstats { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.fn-tag-draft  { background: var(--color-adjacent-muted); color: var(--color-adjacent); }
/* Sport tags: outlined, no fill — visually lighter than form/subject tags */
.fn-tag-mlb, .fn-tag-nfl { background: transparent; color: var(--color-text-tertiary); border: 1px solid var(--surface-edge); }

/* Filter bar: sport axis above, form axis below. */

.fn-entry-subtitle {
  font-family: var(--font-display); font-size: var(--fs-label-md);
  color: var(--color-text-tertiary); line-height: 1.4;
  margin-top: 0.1rem;
}
.fn-entry.fn-hidden { display: none; }
.fn-empty {
  font-family: var(--font-ui); font-size: var(--fs-ui-sm);
  color: var(--color-text-tertiary); text-align: left;
  padding: 1.25rem 1.35rem; display: none;
  background: var(--empty-surface); border: 1px solid var(--empty-edge);
  border-left: 2px solid var(--instrument-rail-muted);
  border-radius: var(--radius-sm); box-shadow: var(--chrome-inset);
}
.fn-empty.vis { display: block; }