/* ---------- /sample/footprints/: the Larkfield Property report ---------- */
/* A synthetic copy of the weekly report as the intro video shows it: a serif headline over a
   plain sans body, one colour per prototype, red only for what went wrong. Loaded on this page
   alone so site.css and its cache stamp stay as they are. The sheet itself (.sample__sheet),
   the page header and the foot line come from site.css. */
.fr {
  --fr-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fr-ink: var(--color-black);
  --fr-grey: var(--color-secondary);
  --fr-line: rgba(17, 16, 19, 0.12);
  --fr-hair: rgba(17, 16, 19, 0.08);
  --fr-lettings: #2563eb;
  --fr-tenant: #17a05b;
  --fr-tenant-text: #0f7a43;
  --fr-rent: #f28c1e;
  --fr-rent-text: #a8560a;
  --fr-bad: #ec4a24;
  --fr-mark: #fde08a;
  --fr-card: #f5f6f7;
  --fr-body: 15.58px;
  --fr-small: 14.76px;
  padding: 28px 36px 8px;
  font-family: var(--font-body);
  color: var(--color-text);
}
.fr p { max-width: none; margin: 0; }
.fr ul, .fr ol { margin: 0; padding: 0; list-style: none; }
.fr h2, .fr h3, .fr h4 { margin: 0; }

.fr-mast { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--fr-line); }
.fr-brand { font-family: var(--fr-serif); font-size: 22px; line-height: 1.2; color: var(--fr-ink); }
.fr-brand em { color: var(--fr-grey); }
.fr .fr-meta { font-size: var(--fr-small); line-height: 1.5; text-align: right; color: var(--fr-grey); }

.fr .fr-title { max-width: 11.5em; margin-top: 40px; font-family: var(--fr-serif); font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.015em; line-height: 1.08; color: var(--fr-ink); text-wrap: balance; }
.fr .fr-lede { max-width: 38em; margin-top: 28px; font-family: var(--fr-serif); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--fr-ink); text-wrap: pretty; }
.fr-lede strong { font-weight: 700; }
.fr-mark { padding: 0 3px; border-radius: 3px; background: var(--fr-mark); color: inherit; }
.fr .fr-note { max-width: 40em; margin-top: 14px; font-size: var(--fr-small); line-height: 1.55; color: var(--fr-grey); }

/* the week: one dot per session, a ring where a release went live */
.fr-week { margin-top: 36px; padding: 14px 24px 18px; border-radius: 16px; background: var(--fr-card); border: 1px solid var(--fr-hair); }
.fr-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fr-small); }
.fr-grid thead th { padding: 6px 0 10px; font-weight: 600; text-align: center; color: var(--fr-ink); }
.fr-grid thead td { width: 148px; }
.fr-grid tbody th { padding: 10px 8px 10px 0; font-weight: 600; text-align: left; vertical-align: top; color: var(--fr-ink); }
.fr-grid tbody td { padding: 10px 10px 8px; vertical-align: top; border-left: 1px solid var(--fr-hair); }
.fr-dots { display: flex; flex-wrap: wrap; gap: 6px 8px; max-width: 92px; min-height: 12px; }
.fr-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--fr-c); }
.fr-row--lettings { --fr-c: var(--fr-lettings); }
.fr-row--tenant { --fr-c: var(--fr-tenant); }
.fr-row--rent { --fr-c: var(--fr-rent); }
.fr-rel { display: block; margin-top: 6px; font-size: 13px; line-height: 14px; text-align: right; color: var(--fr-ink); }
.fr-rel::after, .fr-key--release::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; border: 1.5px solid var(--fr-ink); border-radius: 50%; vertical-align: -1px; }
.fr-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: var(--fr-body); color: var(--fr-ink); }
.fr-key li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--fr-c); }
.fr-key--lettings { --fr-c: var(--fr-lettings); }
.fr-key--tenant { --fr-c: var(--fr-tenant); }
.fr-key--rent { --fr-c: var(--fr-rent); }
.fr-key li.fr-key--release::before { margin: 0 8px 0 0; background: none; vertical-align: -1px; }
.fr .fr-caption { max-width: 60em; margin-top: 12px; font-size: var(--fr-body); line-height: 1.6; color: var(--fr-grey); }

.fr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 28px; }
.fr-stats li { padding-top: 14px; border-top: 2px solid var(--fr-ink); }
.fr-stats p { font-size: var(--fr-body); line-height: 1.55; color: var(--fr-grey); }
.fr .fr-stat__n { font-family: var(--fr-serif); font-size: 2.6rem; line-height: 1.1; color: var(--fr-ink); }
.fr-stat__n em { font-size: 1.05rem; color: var(--fr-grey); }
.fr-up { font-weight: 600; color: var(--fr-tenant-text); }

.fr-section { margin-top: 52px; }
.fr .fr-h { font-family: var(--fr-serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.01em; line-height: 1.2; color: var(--fr-ink); }
.fr .fr-sub { max-width: 44em; margin-top: 8px; font-size: var(--fr-body); line-height: 1.6; color: var(--fr-grey); }

.fr-tag { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--font-body); font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1.6; white-space: nowrap; vertical-align: 2px; }
.fr-tag--lettings { color: var(--fr-lettings); }
.fr-tag--tenant { color: var(--fr-tenant-text); }
.fr-tag--rent { color: var(--fr-rent-text); }

.fr-live { margin-top: 18px; border-top: 1px solid var(--fr-hair); }
.fr-live li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 18px; padding: 16px 0; border-bottom: 1px solid var(--fr-hair); }
.fr-live__when b { display: block; font-size: var(--fr-body); color: var(--fr-ink); }
.fr-live__when span { font-size: var(--fr-small); color: var(--fr-grey); }
.fr .fr-live__title { font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--fr-ink); }
.fr-live li > div p { max-width: 52em; margin-top: 4px; font-size: var(--fr-body); line-height: 1.6; color: var(--fr-grey); }

.fr-stuck { display: grid; gap: 16px; margin-top: 18px; }
.fr-card { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 12px 28px; align-items: start; padding: 20px 24px; border-radius: 16px; background: var(--fr-card); border: 1px solid var(--fr-hair); }
.fr .fr-card__title { font-family: var(--fr-serif); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.005em; line-height: 1.25; color: var(--fr-ink); }
.fr .fr-card__who { margin-top: 4px; font-size: var(--fr-small); color: var(--fr-grey); }
.fr-card__text > p:not([class]) { margin-top: 12px; font-size: var(--fr-body); line-height: 1.6; color: var(--fr-ink); }
.fr .fr-card__replay { margin-top: 8px; font-size: var(--fr-small); color: var(--fr-grey); }
.fr .fr-status { display: inline-block; margin-top: 12px; padding: 2px 12px; border-radius: 999px; font-size: var(--fr-small); font-weight: 600; line-height: 1.6; }
.fr-status--fixed { background: #dcf3e5; color: var(--fr-tenant-text); }
.fr-status--soon { background: #fde4df; color: #a32c12; }
.fr-status--watch { background: #e6e7ea; color: #3d4047; }
.fr-status--decide { background: var(--fr-mark); color: #5c4300; }

/* a day-by-day bar for one control; each card scales to its own busiest day */
.fr-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; padding-top: 4px; }
.fr-bars li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 76px; }
.fr-bars i { display: block; width: 100%; max-width: 34px; height: max(2px, calc(var(--h) * 56px)); border-radius: 3px; background: var(--fr-bad); }
.fr-bars .is-zero i { background: rgba(17, 16, 19, 0.1); }
.fr-bars span { margin-top: 6px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; color: var(--fr-grey); }
.fr-bars .is-release::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 22px; border-left: 1.5px dashed var(--fr-ink); }

.fr-time { margin-top: 18px; border-top: 1px solid var(--fr-hair); }
.fr-time li { display: grid; grid-template-columns: 220px minmax(0, 1fr) 64px; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--fr-hair); }
.fr-time__name { font-size: var(--fr-body); color: var(--fr-ink); }
.fr-time__name small { display: block; font-size: 13px; color: var(--fr-grey); }
.fr-track { display: block; height: 10px; border-radius: 999px; background: #e8e9ec; overflow: hidden; }
.fr-track i { display: block; height: 100%; border-radius: 999px; }
.fr-fill--lettings { background: var(--fr-lettings); }
.fr-fill--tenant { background: var(--fr-tenant); }
.fr-fill--rent { background: var(--fr-rent); }
.fr-time__n { font-size: var(--fr-body); text-align: right; color: var(--fr-ink); }

.fr-qa { display: grid; gap: 16px; margin-top: 18px; }
.fr-qa__item { padding: 18px 24px 20px; border-radius: 16px; background: var(--fr-card); border: 1px solid var(--fr-hair); }
.fr-qa__item--decide { box-shadow: inset 4px 0 0 var(--fr-mark); }
.fr .fr-qa__who { font-size: var(--fr-small); color: var(--fr-grey); }
.fr .fr-qa__q { margin-top: 6px; font-family: var(--fr-serif); font-size: 1.2rem; line-height: 1.35; color: var(--fr-ink); }
.fr-qa__item > p:not([class]) { margin-top: 8px; font-size: var(--fr-body); line-height: 1.6; color: var(--fr-ink); }

.fr + .sample__next { margin-top: 28px; }
.fr .sample__foot { margin-top: 44px; }

@media (max-width: 899px) {
  .fr { padding: 22px 24px 4px; }
  .fr-card { grid-template-columns: minmax(0, 1fr); }
  .fr-bars { max-width: 280px; }
  .fr-time li { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px 16px; }
  .fr-time .fr-track { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 767px) {
  .fr-stats { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fr-live li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fr-live__when b, .fr-live__when span { display: inline; }
  .fr-live__when span::before { content: " \00b7  "; }
}
@media (max-width: 599px) {
  .fr { padding: 20px 16px 4px; }
  .fr .fr-meta { text-align: left; }
  .fr .fr-title { margin-top: 28px; }
  .fr-week { margin-inline: -4px; padding: 10px 10px 14px; }
  .fr-grid { font-size: 12.5px; }
  .fr-grid thead td { width: 64px; }
  .fr-grid tbody th { padding-right: 4px; }
  .fr-grid tbody td { padding: 8px 4px 6px; }
  .fr-dots { gap: 4px; max-width: none; }
  .fr-dots i { width: 8px; height: 8px; }
  .fr-rel { font-size: 11px; }
  .fr-rel::after { width: 7px; height: 7px; margin-left: 3px; }
  .fr-card, .fr-qa__item { padding: 16px; }
}