/* ============================================================
   FORKATO 2 - signed-in page kit
   Shared pieces for the pages behind fk2Enabled(): people, photos,
   readouts, section heads, activity lines, panels. Page-specific
   layout lives in fk-<page>.css next to this file. Every color is a
   token from app.css; on-photo colors use --c-on-photo / --c-veil.
   ============================================================ */

.fk-main { padding-top: var(--s-8); padding-bottom: var(--s-32); max-width: 1440px; margin: 0 auto; }
.fk-main > * + * { margin-top: clamp(40px, 5vw, 56px); }

/* --- Type --------------------------------------------------- */
.fk-sec { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-4) var(--s-8); }
.fk-sec__title { font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; line-height: 1.08; }
.fk-sec__title--sm { font-size: 1.5rem; }
.fk-sec__aside { font-size: 0.875rem; color: var(--c-text-2); }
.fk-mut { color: var(--c-text-2); }
.fk-dim { color: var(--c-text-3); }
.fk-on { color: var(--c-sage); }
.fk-late { color: var(--c-ember); }
.fk-gold { color: var(--c-accent); }
.fk-link { color: var(--c-accent); min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.fk-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- People ------------------------------------------------- */
.fk-av {
  --pc: var(--c-p1);
  --sz: 28px;
  width: var(--sz); height: var(--sz);
  border-radius: var(--r-full);
  display: inline-grid; place-items: center;
  flex: none;
  position: relative;
  overflow: hidden;
  background: var(--c-surface-hi);
  box-shadow: inset 0 0 0 2px var(--pc), 0 0 0 2px var(--c-bg);
  font-size: calc(var(--sz) * 0.42);
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
}
.fk-av img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: inherit; object-fit: cover; }
.fk-av[data-p="2"] { --pc: var(--c-p2); }
.fk-av[data-p="3"] { --pc: var(--c-p3); }
.fk-av[data-p="4"] { --pc: var(--c-p4); }
.fk-av[data-p="5"] { --pc: var(--c-p5); }
.fk-av[data-p="6"] { --pc: var(--c-p6); }
.fk-av--off { --pc: var(--c-border-hi); }
.fk-stack { display: inline-flex; align-items: center; }
.fk-stack .fk-av + .fk-av { margin-left: -7px; }

/* --- Photos ------------------------------------------------- */
.fk-shot { position: relative; overflow: hidden; display: block; background: var(--c-surface); border-radius: var(--r-md); }
.fk-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fk-shot--empty { display: grid; place-items: center; color: var(--c-text-3); }
.fk-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--c-veil-deep) 0%, color-mix(in oklch, var(--c-veil-deep) 74%, transparent) 32%, transparent 64%),
    linear-gradient(to bottom, color-mix(in oklch, var(--c-veil-deep) 50%, transparent) 0%, transparent 22%);
}
.fk-onphoto { color: var(--c-on-photo); }
.fk-veilpill {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 16px 0 8px;
  border-radius: var(--r-full);
  background: var(--c-veil);
  color: var(--c-on-photo);
  font-size: 0.9375rem;
}
.fk-veilpill .fk-mut { color: var(--c-on-photo-2); }
.fk-tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--c-surface-hi);
  font-size: 0.75rem; font-weight: 600;
  color: var(--c-text);
}
.fk-tag--photo { background: var(--c-veil); color: var(--c-on-photo); }

/* --- Readout strip (instrument row) ------------------------- */
.fk-read {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--c-border-hi); border-bottom: 1px solid var(--c-border-hi);
}
.fk-read > div { padding: 10px 0 10px 12px; border-left: 1px solid var(--c-border-hi); min-width: 0; }
.fk-read > div:first-child { border-left: 0; padding-left: 0; }
.fk-read__cap { font-size: 0.8125rem; font-weight: 600; color: var(--c-text-2); }
.fk-read__v {
  font-family: var(--f-num); font-stretch: 85%; font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 1.375rem; line-height: 1.15; white-space: nowrap;
}
.fk-read--photo, .fk-read--photo > div { border-color: color-mix(in oklch, var(--c-on-photo) 18%, transparent); }
.fk-read--photo .fk-read__cap { color: var(--c-on-photo-2); }
.fk-read--photo .fk-read__v { color: var(--c-on-photo); }
.fk-read--photo .fk-late { color: var(--c-ember-photo); }
.fk-read--photo .fk-on { color: var(--c-sage-photo); }
.fk-onphoto .fk-on { color: var(--c-sage-photo); }
/* The primary pill keeps the evening gold on a photo in either theme. */
.btn--photo { background: var(--c-gold-photo); color: var(--c-gold-photo-fg); border-color: transparent; }
.btn--photo:hover { background: var(--c-gold-photo); filter: brightness(1.06); }
@media (max-width: 520px) {
  .fk-read { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .fk-read > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .fk-read > div:nth-child(n+3) { border-top: 1px solid var(--c-border-hi); }
  .fk-read--photo > div:nth-child(n+3) { border-top-color: color-mix(in oklch, var(--c-on-photo) 18%, transparent); }
}

/* --- Lines and lists ---------------------------------------- */
.fk-lines { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.fk-line {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--c-border);
  font-size: 0.9375rem; line-height: 1.45;
}
.fk-line > :nth-child(2) { flex: 1; min-width: 0; }
.fk-line strong { font-weight: 600; }
.fk-line .n { font-size: 0.8125rem; color: var(--c-text-2); white-space: nowrap; }
.fk-hl { border-bottom: 1px solid var(--c-border-hi); }

/* --- Panels and empty states -------------------------------- */
.fk-panel { padding: clamp(16px, 2.5vw, 28px); border-radius: var(--r-xl); background: var(--c-surface); }
.fk-empty { display: flex; flex-direction: column; gap: var(--s-6); align-items: flex-start; padding: var(--s-12) 0; color: var(--c-text-2); max-width: 52ch; }
.fk-empty strong { color: var(--c-text); font-size: 1.0625rem; }

/* Skeleton while a page's one fetch is in flight */
.fk-skel { background: var(--c-surface); border-radius: var(--r-md); position: relative; overflow: hidden; }
.fk-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--c-surface-hi) 80%, transparent), transparent);
  transform: translateX(-100%);
  animation: fk-shimmer 1.4s var(--ease-out) infinite;
}
@keyframes fk-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .fk-skel::after { animation: none; } }

/* Entrance: one staggered reveal per page load */
.fk-in { animation: fk-rise var(--dur-slow) var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes fk-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .fk-in { animation: none; } }

/* --- Buttons that sit on photos ----------------------------- */
.fk-iconbtn {
  width: 44px; height: 44px; border-radius: var(--r-full); border: 0;
  display: inline-grid; place-items: center; flex: none;
  background: var(--c-surface-hi); color: var(--c-text);
  cursor: pointer;
}
.fk-iconbtn--photo { background: var(--c-veil); color: var(--c-on-photo); }
.fk-iconbtn[aria-pressed="true"] { color: var(--c-accent); }

/* --- Nav extras (house stack, bell panel) ------------------- */
.fk-nav__house { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; border: 0; background: none; cursor: pointer; border-radius: var(--r-full); }
.fk-nav__house:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.fk-bell { position: relative; }
.fk-bell__dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-accent); box-shadow: 0 0 0 2px var(--c-surface-hi); }
.fk-bellpanel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(380px, calc(100vw - 32px));
  max-height: min(520px, 70vh); overflow-y: auto;
  padding: var(--s-4) var(--s-8) var(--s-8);
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-border-hi), var(--shadow-lg);
  z-index: 200;
}
/* The bell is not the last nav item, so on a phone a right-aligned panel
   runs off the left edge. Pin it to the gutters instead. */
@media (max-width: 640px) {
  .fk-bellpanel { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; }
}
.fk-bellpanel__cta { display: flex; justify-content: flex-start; padding: 0 0 var(--s-6) calc(32px + var(--s-6)); margin-top: calc(-1 * var(--s-4)); }
.fk-bellpanel__head { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.fk-bellpanel__head b { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; }
.fk-bellpanel .fk-line { text-decoration: none; color: var(--c-text); }
.fk-bellpanel .fk-line--unread strong::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: var(--r-full); background: var(--c-accent); vertical-align: middle; }
.fk-nav__menu .dropdown__item[aria-pressed="true"] { color: var(--c-accent); }

/* --- Modal (centered dialog for small tasks) ---------------
   Named fk-sheet for history; it is a centered modal on every width
   (owner preference, 2026-10-26: no side panels). */
.fk-sheet-back {
  position: fixed; inset: 0; z-index: 900;
  background: color-mix(in oklch, var(--c-veil-deep) 72%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-8);
}
.fk-sheet {
  width: min(560px, 100%); max-height: min(86vh, 860px); overflow-y: auto;
  background: var(--c-bg);
  border-radius: 20px;
  box-shadow: 0 0 0 1px var(--c-border-hi), var(--shadow-lg);
  padding: var(--s-12) var(--s-12) var(--s-16);
  display: flex; flex-direction: column; gap: var(--s-10);
  animation: fk-pop var(--dur-normal) var(--ease-expo);
}
.fk-sheet--wide { width: min(820px, 100%); }
@keyframes fk-pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fk-sheet { animation: none; } }
.fk-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-8); }
.fk-sheet__head h2 { font-size: 1.75rem; }
@media (max-width: 640px) {
  .fk-sheet-back { padding: var(--s-8) var(--s-4); }
  .fk-sheet { max-height: 90vh; padding: var(--s-10) var(--s-8) var(--s-12); border-radius: 18px; }
}

/* --- Choice chips (filters, kinds, options) ----------------- */
.fk-chips { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.fk-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fk-chips--scroll::-webkit-scrollbar { display: none; }
.fk-chip .n { font-size: 0.8125rem; color: inherit; opacity: 0.8; }
.fk-chip:hover { color: var(--c-text); }
.fk-chip[aria-pressed="true"]:hover { color: var(--c-bg); }

/* --- Switch -------------------------------------------------- */
.fk-switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: var(--r-full); background: var(--c-border-hi); position: relative; cursor: pointer; margin: 0; transition: background var(--dur-fast) var(--ease-out); }
.fk-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--c-text-2); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.fk-switch:checked { background: var(--c-accent); }
.fk-switch:checked::after { transform: translateX(18px); background: var(--c-accent-fg); }
.fk-switch:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.fk-bell__dot { font-size: 0; color: transparent; }

/* --- Links on Forkato 2 pages --------------------------------
   app.css paints every anchor gold (a:not(.btn)..., 0-3-1). On these
   pages a link is a title or a row and reads in text color; only
   .fk-link is gold. Selectors are long to outrank the global rule. */
body.fk2 a:not(.btn):not(.nav__brand):not(.recipe-card),
body.fk2 a:not(.btn):not(.nav__brand):not(.recipe-card):hover { color: inherit; }
body.fk2 a.fk-link:not(.btn):not(.nav__brand),
body.fk2 a.fk-link:not(.btn):not(.nav__brand):hover { color: var(--c-accent); }
body.fk2 .fk-nav__links { color: var(--c-text-2); }
body.fk2 .fk-nav a.fk-nav__link:not(.btn):hover,
body.fk2 .fk-nav a.fk-nav__link[aria-current="page"]:not(.btn) { color: var(--c-text); }
body.fk2 .dropdown__menu a.dropdown__item:not(.btn) { color: var(--c-text); }
.fk-onphoto .fk-mut, .fk-onphoto .fk-read__cap { color: var(--c-on-photo-2); }
.fk-onphoto .fk-late { color: var(--c-ember-photo); }
.fk-onphoto h1, .fk-onphoto h2, .fk-onphoto h3, .fk-onphoto .g { color: var(--c-on-photo); }
.fk-onphoto .fk-av { background: var(--c-veil-deep); color: var(--c-on-photo); }
/* Small labels marked up as headings stay in the body face. */
h2.fk-read__cap, h3.fk-read__cap, h4.fk-read__cap { font-family: var(--f-body); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
@media (max-width: 640px) { .fk-nav__long { display: none; } }
/* 44px touch floor for small buttons on Forkato 2 pages. */
body.fk2 .btn--sm { min-height: 44px; }

/* Single-line truncation, shared by every fk page. */
.fk-ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }