/* Signed-in surfaces added in the fourth pass: Notifications, Results, Achievements, the avatar builder (and, in phase 2, Football DNA, competition and club pages, models).
   Same tokens, same components; this file only places them and adds the few pieces they need (v2/inventory.md section 12). Tokens only. Breakpoints: 959, 760, 600. */

/* ---------- Notifications ---------- */
.notif-day__h { font: var(--type-label); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.notif-list { display: flex; flex-direction: column; background: var(--surface-card); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.notif { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--card-pad) var(--space-3) var(--space-4); border-top: 1px solid var(--border-faint); transition: background var(--dur-fast); }
.notif:first-child { border-top: 0; }
.notif:hover { background: var(--surface-raised); }
.notif::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.notif.is-unread::before { background: var(--accent); }
.notif__lead { position: relative; width: 40px; height: 40px; flex: none; }
.notif__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-muted); }
.notif__icon--up { background: var(--tint-success); color: var(--text-up); }
.notif__icon--down { background: var(--tint-danger); color: var(--text-down); }
.notif__icon--warn { background: var(--tint-warning); color: var(--text-warning); }
.notif__icon--info { background: var(--tint-info); color: var(--text-info); }
.notif__icon--danger { background: var(--tint-danger); color: var(--text-danger); }
.notif__icon--medal, .notif__icon--identity { background: none; }
.notif__icon--medal img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.notif__icon--accent { background: var(--accent-subtle); color: var(--text-accent); }
.notif__icon--corrected { background: var(--tint-corrected); color: var(--state-corrected); }
.notif__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.notif__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.notif__title { font: var(--type-label); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-strong); font-weight: var(--weight-semibold); min-width: 0; }
.notif.is-unread .notif__title { font-weight: var(--weight-heavy); }
.notif__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.notif__time { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; white-space: nowrap; }
.notif__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.notif__line { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-muted); }
@media (max-width: 600px) { .notif { grid-template-columns: 40px minmax(0, 1fr); padding-right: var(--space-4); } }

.result { display: flex; flex-direction: column; gap: var(--space-1); }

/* ---------- Achievements ---------- */
.ach-tiles { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr)); }
.ach-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; padding: var(--space-3); text-align: left; background: var(--surface-card); border: var(--border-width) dashed var(--border-subtle); border-radius: var(--radius-lg); color: var(--text-muted); transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.ach-tile.is-earned { border-style: solid; color: var(--text-strong); box-shadow: var(--light-top); }
.ach-tile:hover { background: var(--surface-raised); }
.ach-tile:active { transform: translateY(1px); }
.ach-tile .progress--bar { margin-top: var(--space-1); }
.ach-tile__art { position: relative; display: block; width: 72px; height: 72px; margin-bottom: var(--space-1); }
.ach-tile:not(.is-earned) .ach-art { filter: grayscale(1); opacity: .45; }
.ach-tile__art .meaning-icon { width: 100%; height: 100%; }
.ach-tile .h-item { color: inherit; }
.ach-strip { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1); }
.ach-strip::-webkit-scrollbar { display: none; }
.ach-strip__i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--radius-lg); background: var(--surface-card); border: 0; box-shadow: var(--shadow-card); }
.ach-detail { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.ach-detail h2 { font-size: var(--fs-h2); }
/* The detail sheet shows the medallion lit from behind, like the reveal, without the stage. */
.ach-detail > img:not(.meaning-icon) { position: relative; width: var(--layout-rail); max-width: 60%; height: auto; margin-block: var(--space-2) var(--space-3); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.ach-detail::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--layout-rail) + var(--space-6)); z-index: -1; background: var(--halo); opacity: .6; pointer-events: none; }
.ach-detail { position: relative; isolation: isolate; }


.inline-alert .button { margin-left: auto; flex: none; }

/* A wrapped row of chips keeps its 44px hit areas apart (each chip's hit area is 46px tall; the row gap was 8px) */
.chips--wrap { row-gap: var(--space-3); }

/* ---------- Football DNA ---------- */
.dna-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; max-width: var(--layout-aside); }
.dna-versus { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Competition and club pages ---------- */
.mark-bare { display: inline-flex; align-items: center; justify-content: center; }
.icon-tile.mark-bare { background: none; }
.record-strip { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--card-pad); }
.table-row { --cols: 28px minmax(0, 1fr) 32px 40px 56px; padding-left: var(--space-4); padding-right: var(--space-4); }
.table-row .table-opt { display: none; }
@media (min-width: 761px) { .table-row { --cols: 36px minmax(0, 1fr) 36px 36px 36px 36px 48px 56px 136px; } .table-row .table-opt { display: block; } }
.search { position: relative; }
.search__icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search__input { padding-left: var(--space-7); }

/* ---------- Models and bots ---------- */

/* A short tab label ("DNA", "Table") still gets a 44px-wide target */
.tabs a { min-width: var(--tap-min); justify-content: center; }
@media (max-width: 600px) { .you-bar .tabs { gap: var(--space-4); } }
.rules-sub p + p { margin-top: var(--space-3); }

/* ---------- The avatar builder: one preview, items by part ---------- */
.builder { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.builder__preview { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; position: sticky; top: var(--space-4); }
.builder__stage .avatar--layers { border-radius: var(--radius-avatar); box-shadow: 0 0 0 2px var(--accent); }
.builder__actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.item-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
.item-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; padding: var(--space-3); text-align: left; background: var(--surface-card); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: border-color var(--dur-fast), background var(--dur-fast); }
.item-tile:hover { background: var(--surface-raised); }
.item-tile:disabled { cursor: default; }
.item-tile[data-premium="true"]:disabled { filter: grayscale(1); opacity: .5; }
.item-tile:disabled:hover { background: var(--surface-card); }
.item-tile[aria-pressed="true"] { background: var(--surface-accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.item-tile__art { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: var(--radius-md); margin-bottom: var(--space-1); }
.item-tile__art.is-head .avatar--layers { transform: scale(1.7); transform-origin: 50% 40%; }
.item-tile__marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.item-tile__marker { position: absolute; top: calc(var(--space-2) * -1); right: calc(var(--space-2) * -1); z-index: 1; line-height: 0; }
.item-tile__on { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--text-on-accent); }
.item-tile:has(.item-tile__marker) .item-tile__on { top: var(--space-8); }
@media (max-width: 760px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder__preview { position: static; }
  .builder__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder__actions > [data-avatar-builder-target="save"] { grid-column: 1 / -1; }
}
.avatar-invitation { margin-bottom: var(--space-5); }

/* Colour dots: a 12px gap keeps each dot's 48px hit area clear of its neighbours (it was 8px, so the hit areas overlapped) */
.swatch-row { gap: var(--space-3); }