/* ============================================================
   FS25 Portal — Home sections, members, activity
   Depends on: 01-tokens.css .. 10-features.css
   ============================================================ */

/* ============================================================
   Home backdrop
   ------------------------------------------------------------
   Optional artwork behind the home page. It is fixed, dimmed by
   an admin-set amount, and faded out toward the bottom so the
   page still ends on the site's own surface colour rather than
   on a hard edge of photograph.
   ============================================================ */

.home-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  /* Slow drift so the artwork feels alive without ever distracting. */
  animation: fs-backdrop-drift 60s var(--ease) infinite alternate;
}

.home-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) calc(var(--backdrop-dim, 0.8) * 100%), transparent) 0%,
      color-mix(in srgb, var(--bg) calc(var(--backdrop-dim, 0.8) * 100%), transparent) 45%,
      var(--bg) 100%);
}

@keyframes fs-backdrop-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(0, -1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-backdrop { animation: none; transform: scale(1.04); }
}

/* ============================================================
   Section cards
   ------------------------------------------------------------
   Each section is a panel that reacts to the pointer: it lifts,
   its amber edge lights up, and the header link slides. The
   backdrop shows through slightly when one is present, so the
   cards sit ON the artwork rather than hiding it.
   ============================================================ */

.home-section {
  position: relative;
  padding: var(--s5);
  margin-bottom: var(--s5);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light), var(--shadow-sm);
  transition: border-color var(--t) var(--ease),
              transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

/* The amber edge only lights on hover, so a page of cards stays calm
   until you reach for one. */
.home-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--s5);
  bottom: var(--s5);
  width: var(--plate-edge);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--border-strong);
  transition: background var(--t) var(--ease), top var(--t) var(--ease), bottom var(--t) var(--ease);
}

.home-section:hover {
  border-color: var(--amber-line);
  transform: translateY(-2px);
  box-shadow: var(--edge-light), var(--shadow);
}

.home-section:hover::before {
  background: var(--amber);
  top: var(--s3);
  bottom: var(--s3);
}

/* Over artwork the panels gain a little translucency so the image
   stays part of the page. */
.page-content.has-backdrop .home-section {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--hairline) solid var(--border);
}

.section-head h2 {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.section-more {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  white-space: nowrap;
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.home-section:hover .section-more { color: var(--amber); transform: translateX(3px); }

.section-empty {
  padding: var(--s5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  border: var(--hairline) dashed var(--border);
  border-radius: var(--r);
}

.home-edit-hint {
  margin-top: var(--s6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .home-section:hover { transform: none; }
  .home-section:hover .section-more { transform: none; }
}

/* ============================================================
   Hero
   ------------------------------------------------------------
   The one place on the site that gets scale. It is a spec plate
   blown up: amber edge, stamped label, the release title as the
   largest type on the page.
   ============================================================ */

.hero-plate { padding: var(--s2) 0; }

.hero-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s3);
}

.hero-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.hero-title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  margin-bottom: var(--s3);
}

.hero-excerpt { max-width: 68ch; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.hero-author { font-size: var(--fs-sm); color: var(--text-dim); }

/* ============================================================
   Roadmap summary
   ============================================================ */

.roadmap-summary {
  padding: var(--s5);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
}

.roadmap-meter {
  height: 10px;
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.roadmap-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--steel), var(--amber) 55%, var(--green));
  transition: width var(--t-slow) var(--ease);
}

.roadmap-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s4);
}

.roadmap-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roadmap-stat > :first-child {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.roadmap-stat.planned     > :first-child { color: var(--steel); }
.roadmap-stat.in_progress > :first-child { color: var(--amber); }
.roadmap-stat.done        > :first-child { color: var(--green); }
.roadmap-stat.total       > :first-child { color: var(--text); }

/* ============================================================
   Compact lists (posts, forum, tickets)
   ============================================================ */

.mini-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.mini-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  transition: background var(--t) var(--ease);
}

.mini-item + .mini-item { border-top: var(--hairline) solid var(--border-faint); }
.mini-item:hover { background: var(--surface-2); }

.mini-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.mini-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-title:hover { color: var(--amber); }

.mini-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-meta a { color: var(--text-faint); }
.mini-meta a:hover { color: var(--amber); }

/* ============================================================
   Member strip (home) and member grid (/members)
   ============================================================ */

.member-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s1);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-pill);
  transition: border-color var(--t) var(--ease);
}

.member-chip:hover { border-color: var(--amber-line); }
.member-chip .avatar { width: 26px; height: 26px; font-size: var(--fs-sm); border-radius: var(--r-round); }
.member-chip-name { font-size: var(--fs-sm); }

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4);
}

.member-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light);
  color: inherit;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.member-card:hover {
  border-color: var(--amber-line);
  transform: translateY(-2px);
  color: inherit;
}

.member-card-top {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.member-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.member-avatar-wrap .online-dot { position: absolute; right: 0; bottom: 0; }

.member-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.member-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-badge { margin-left: var(--s1); }

.member-handle,
.member-title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

.member-title { color: var(--amber); }

.member-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }

.member-stats { gap: var(--s2) var(--s4); }

/* ============================================================
   Activity stream
   ------------------------------------------------------------
   A machine log with faces: mono metadata, a coloured left edge
   per kind so the eye can group entries while scanning.
   ============================================================ */

.activity-stream {
  list-style: none;
  display: flex;
  flex-direction: column;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.activity-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-left: var(--plate-edge) solid transparent;
  transition: background var(--t) var(--ease);
}

.activity-row + .activity-row { border-top: var(--hairline) solid var(--border-faint); }
.activity-row:hover { background: var(--surface-2); }

.activity-post    { border-left-color: var(--amber); }
.activity-comment { border-left-color: var(--steel); }
.activity-thread  { border-left-color: var(--green); }
.activity-reply   { border-left-color: var(--border-strong); }
.activity-ticket  { border-left-color: var(--red); }

.activity-row-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.activity-line {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-actor { font-weight: 600; color: var(--text); }
.activity-verb { color: var(--text-faint); }
.activity-target { color: var(--text); }
.activity-target:hover { color: var(--amber); }

.activity-when {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

.activity-kind { flex-shrink: 0; }

/* ============================================================
   Admin: home layout builder
   ============================================================ */

.section-add { margin-bottom: var(--s5); }

.inline-add-form {
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
  flex-wrap: wrap;
}

.inline-add-form .form-group { margin-bottom: 0; }

.grid-hint {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-bottom: var(--s4);
}

.grid-hint kbd {
  padding: 1px var(--s1);
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  color: var(--amber);
}

/* Tiles flow left to right in reading order, which is the order they
   appear on the home page. */
.section-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4);
  align-items: start;
}

.section-tile {
  position: relative;
  padding: var(--s4);
  padding-top: var(--s6);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light);
  cursor: grab;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.section-tile:hover { border-color: var(--border-strong); }
.section-tile:active { cursor: grabbing; }
.section-tile.inactive { opacity: 0.55; }

.section-tile.dragging {
  opacity: 0.35;
  border-color: var(--amber);
  transform: scale(0.98);
}

/* Where the dragged tile would land. */
.section-tile.drop-target {
  border-color: var(--amber);
  box-shadow: var(--edge-light), 0 0 0 var(--hairline) var(--amber-line);
}

/* The position number doubles as the drag affordance. */
.tile-order {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--bg);
  background: var(--amber);
  border-radius: var(--r-sm);
}

.section-tile.inactive .tile-order { background: var(--text-faint); }

.tile-remove {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
}

.section-row-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.section-type { color: var(--amber); }

.section-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.section-fields .form-group { margin-bottom: 0; }

.section-actions { margin-top: var(--s3); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 700px) {
  .hero-plate { padding: var(--s5) var(--s4); }
  .hero-title { font-size: var(--fs-xl); }

  .section-head { flex-direction: column; align-items: flex-start; gap: var(--s1); }

  .roadmap-summary-stats { gap: var(--s4); }

  .member-grid { grid-template-columns: 1fr; }

  .activity-kind { display: none; }
  .activity-line { white-space: normal; }

  .section-grid { grid-template-columns: 1fr; }
  .inline-add-form { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Profile back link
   ------------------------------------------------------------
   Shown only when viewing someone else's profile — arriving from
   the members grid otherwise leaves no way back.
   ============================================================ */

.profile-back {
  margin-bottom: var(--s4);
}

.profile-back a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}

.profile-back a:hover { transform: translateX(-2px); }

@media (prefers-reduced-motion: reduce) {
  .profile-back a:hover { transform: none; }
}