/* Fully Known — component styles. Load after tokens.css. Every value is a token. */
.fk, .fk * { box-sizing: border-box; }
.fk {
  font-family: var(--font-text); font-size: 17px; line-height: 26px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--ink); font-synthesis: none; -webkit-font-smoothing: antialiased;
}
.fk-root { background: var(--surface); color: var(--ink); }
.fk :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fk-eyebrow { font-family: var(--font-caps); font-size: 12px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.fk-script { font-family: var(--font-script); font-weight: 400; }
.fk-muted { color: var(--ink-muted); }
.fk-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.fk-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Icon */
.fk-icon { display: inline-block; flex: none; vertical-align: middle; }

/* Button */
.fk-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--size-control); padding: 0 var(--space-5); border-radius: var(--radius-md);
  font: inherit; font-family: var(--font-text); font-size: 17px; line-height: 24px; letter-spacing: -0.005em;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease-out, border-color .15s ease-out, transform .1s ease-out;
}
.fk-btn:active { transform: scale(.98); }
.fk-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.fk-btn-primary { background: var(--action); color: var(--on-action); }
.fk-btn-primary:hover:not(:disabled) { background: var(--action-hover); }
.fk-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.fk-btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); }
.fk-btn-quiet { background: transparent; color: var(--ink); padding: 0 var(--space-3); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fk-btn-quiet:hover:not(:disabled) { background: var(--surface-sunken); }
.fk-btn-sm { height: var(--size-control-sm); padding: 0 var(--space-4); font-size: 15px; border-radius: var(--radius-sm); }
.fk-btn-block { width: 100%; }

/* TextField */
.fk-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fk-field-label { font-size: 15px; line-height: 22px; color: var(--ink); }
.fk-input {
  height: var(--size-control); padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1.5px solid var(--line-strong); background: var(--surface-raised); color: var(--ink);
  font: inherit; font-family: var(--font-text); font-size: 17px; letter-spacing: -0.01em; width: 100%;
}
.fk-input::placeholder { color: var(--ink-muted); }
.fk-input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.fk-field-hint { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.fk-field-invalid .fk-input { border-color: var(--danger); }
.fk-field-error { display: flex; gap: var(--space-1); align-items: center; font-size: 15px; line-height: 22px; color: var(--danger); }

/* Checkbox */
.fk-check { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch); cursor: pointer; font-size: 17px; }
.fk-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fk-check-box { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: var(--surface-raised); display: grid; place-items: center; color: transparent; flex: none; }
.fk-check input:checked + .fk-check-box { background: var(--action); border-color: var(--action); color: var(--on-action); }
.fk-check input:focus-visible + .fk-check-box { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Avatar */
.fk-avatar { width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--radius-pill); display: inline-grid; place-items: center; flex: none; overflow: hidden; color: var(--on-tint); font-family: var(--font-caps); font-size: 15px; letter-spacing: 0.02em; background: var(--brand-rose); }
.fk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fk-avatar-lg { width: var(--size-avatar-lg); height: var(--size-avatar-lg); font-size: 30px; }
.fk-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.fk-tint-rose { background: var(--brand-rose); } .fk-tint-tan { background: var(--brand-tan); } .fk-tint-sand { background: var(--brand-sand); }
.fk-tint-silver { background: var(--brand-silver); } .fk-tint-ash-blue { background: var(--brand-ash-blue); } .fk-tint-ash-sage { background: var(--brand-ash-sage); }

/* Card base */
.fk-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* FriendRow */
.fk-friend { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 68px; color: inherit; text-decoration: none; border-radius: var(--radius-lg); }
a.fk-friend:hover, button.fk-friend:hover { background: var(--surface-sunken); }
button.fk-friend { appearance: none; border: 0; background: none; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.fk-friend-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fk-friend-name { font-size: 19px; line-height: 26px; }
.fk-friend-meta { font-size: 15px; line-height: 22px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-friend-chev { color: var(--ink-muted); }

/* FavoriteCard */
.fk-fav { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); color: var(--on-tint); min-height: 112px; }
.fk-fav .fk-eyebrow { color: var(--on-tint); display: flex; align-items: center; gap: var(--space-2); }
.fk-fav-value { font-size: 19px; line-height: 26px; }
.fk-fav-swatch { display: flex; align-items: center; gap: var(--space-2); font-size: 19px; line-height: 26px; }
.fk-fav-swatch i { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1.5px solid var(--on-tint); display: inline-block; }
.fk-fav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* DateCard */
.fk-date { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.fk-date-soon { background: var(--accent-soft); border-color: transparent; }
.fk-date-block { width: 56px; height: 60px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.fk-date-soon .fk-date-block { background: var(--accent); color: var(--on-tint); }
.fk-date-month { font-family: var(--font-caps); font-size: 11px; line-height: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.fk-date-day { font-size: 24px; line-height: 26px; }
.fk-date-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fk-date-title { font-size: 19px; line-height: 26px; }
.fk-date-detail { font-size: 15px; line-height: 22px; color: var(--ink-muted); display: flex; gap: var(--space-1); align-items: center; }
.fk-date-soon .fk-date-detail { color: var(--accent-ink); }

/* WishlistItem */
.fk-wish { display: flex; gap: var(--space-4); padding: var(--space-4); align-items: flex-start; }
.fk-wish-thumb { width: 72px; height: 72px; border-radius: var(--radius-md); flex: none; display: grid; place-items: center; color: var(--on-tint); overflow: hidden; background: var(--brand-silver); }
.fk-wish-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fk-wish-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.fk-wish-title { font-size: 19px; line-height: 26px; }
.fk-wish-meta { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.fk-wish-note { font-size: 15px; line-height: 22px; color: var(--ink); background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.fk-wish-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }

/* QuestionCard */
.fk-question { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: var(--space-5); background: var(--brand-rose); color: var(--on-tint); display: flex; flex-direction: column; gap: var(--space-3); }
.fk-question-aura { position: absolute; inset: 0; background-size: cover; background-position: center; }
.fk-question > *:not(.fk-question-aura) { position: relative; }
.fk-question .fk-eyebrow { color: var(--on-tint); }
.fk-question-greeting { font-family: var(--font-script); font-size: 36px; line-height: 42px; }
.fk-question-prompt { font-size: 24px; line-height: 30px; }
.fk-question-on-aura, .fk-question-on-aura .fk-eyebrow { color: var(--on-aura); }
.fk-question-form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.fk-question-form .fk-input { background: var(--brand-snow); color: var(--brand-ink); border-color: transparent; }
.fk-question-form .fk-input::placeholder { color: #6B6560; }
.fk-question-form .fk-btn-primary { background: var(--brand-ink); color: var(--brand-snow); }

/* ActivityItem */
.fk-activity { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.fk-activity:last-child { border-bottom: 0; }
.fk-activity-text { flex: 1; min-width: 0; font-size: 17px; line-height: 24px; }
.fk-activity-time { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: block; margin-top: var(--space-1); }

/* SegmentedTabs */
.fk-seg { display: flex; padding: 4px; gap: 4px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.fk-seg button { appearance: none; flex: 1; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); font: inherit; font-family: var(--font-text); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.fk-seg button[aria-selected="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-card); }

/* TabBar */
.fk-tabbar { display: flex; justify-content: space-around; padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--surface-raised); border-top: 1px solid var(--line); box-shadow: var(--shadow-sheet); }
.fk-tab { appearance: none; border: 0; background: none; font: inherit; flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-muted); cursor: pointer; text-decoration: none; font-family: var(--font-text); font-size: 13px; line-height: 18px; }
.fk-tab-pill { width: 56px; height: 30px; border-radius: var(--radius-pill); display: grid; place-items: center; }
.fk-tab[aria-current="page"] { color: var(--ink); }
.fk-tab[aria-current="page"] .fk-tab-pill { background: var(--accent); color: var(--on-tint); }

/* Banner */
.fk-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-sunken); color: var(--ink); font-size: 15px; line-height: 22px; border-radius: var(--radius-md); }
.fk-banner-text { flex: 1; }
.fk-banner a, .fk-banner button.fk-banner-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.fk-banner-close { appearance: none; border: 0; background: none; color: var(--ink-muted); width: var(--size-touch); height: var(--size-touch); margin: -12px -12px -12px 0; display: grid; place-items: center; cursor: pointer; border-radius: var(--radius-pill); }
.fk-banner-success { background: var(--success-soft); } .fk-banner-success .fk-icon { color: var(--success); }
.fk-banner-danger { background: var(--danger-soft); } .fk-banner-danger .fk-icon { color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .fk-btn { transition: none; } .fk-btn:active { transform: none; } }