/* Phoenix Wall page (compact). Builds on styles.css + fta.css */
body[data-page="wall"] .fta { max-width: 64rem; --hub-max: 64rem; }
body[data-page="wall"] .fta-nav ul { max-width: 36rem; margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header: logo beside title */
.wall-head { display: flex; align-items: center; justify-content: center; gap: .75rem; text-align: left; margin-bottom: .2rem; }
.wall-head .fta-sub__logo { width: 52px; height: 52px; }
.wall-head h1 { margin: 0; font-size: clamp(1.7rem, 7vw, 2.2rem); }
.wall-head .tagline { margin: .1rem 0 0; font-size: .875rem; line-height: 1.3; }

/* top row: spotlight strip + tier summary */
.wall-top { display: grid; grid-template-columns: minmax(0,1fr); gap: .6rem; margin-top: .6rem; }
.wall-top .card { margin: 0; padding: .65rem .8rem; }
@media (min-width: 768px) { .wall-top { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); } }
.card.spot { border-color: var(--gold); }
.spot h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .45rem; font-size: 1.05rem; }
.spot .ph-tag { margin-left: 0; font-size: .6875rem; padding: .05rem .5rem; }
.spot__row { display: flex; align-items: center; gap: .6rem; }
.spot__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.spot__name { font-family: var(--font-title); font-size: 1.35rem; line-height: 1.1; color: #fff; overflow-wrap: anywhere; }
.spot__meta { color: var(--gold); font-weight: 700; font-size: .8125rem; }
.spot__stats { display: flex; gap: .35rem; margin: 0; }
.ss { display: flex; flex-direction: column-reverse; align-items: center; min-width: 3.2rem; padding: .25rem .35rem; border-radius: .6rem; background: #16181c; border: 1px solid #2f3336; }
.ss dd { margin: 0; }
.ss__n { font-family: var(--font-title); font-size: 1.05rem; line-height: 1.15; color: var(--gold); font-variant-numeric: tabular-nums; }
.ss__l { font-size: .625rem; letter-spacing: .04em; text-transform: uppercase; color: #a4abb1; font-weight: 700; white-space: nowrap; }
.wall-top .card .asof { margin: .4rem 0 0; font-size: .75rem; line-height: 1.35; }
.wall-top .card .note { margin: .4rem 0 0; font-size: .75rem; line-height: 1.35; }

/* tier counts on one line */
.tsum { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.ts a { display: inline-flex; align-items: baseline; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; background: #16181c; border: 1px solid #2f3336; color: #e7e9ea; text-decoration: none; font-size: .8125rem; font-weight: 700; }
.ts a:hover { border-color: #536471; }
.ts a:focus-visible, .mc:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ts__c { font-family: var(--font-title); color: var(--gold); font-size: .95rem; }
.ts--risen a { border-color: rgba(255,224,138,.55); }
.ts--phoenix a { border-color: rgba(255,197,51,.5); }
.ts--flame a { border-color: rgba(255,106,26,.5); }
.ts--ember a { border-color: rgba(194,65,12,.6); }

/* badges: CSS-only ember medallions */
.badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-family: var(--font-title); font-size: 1.25rem; line-height: 1; color: #1a0a00; border: 2px solid rgba(255,255,255,.18); }
.badge--sm { width: 1.5rem; height: 1.5rem; font-size: .85rem; border-width: 1px; }
.badge--risen { background: radial-gradient(circle at 50% 35%, #fffbe6, #ffe08a 45%, #ffc533 75%); box-shadow: 0 0 14px rgba(255,224,138,.55); }
.badge--phoenix { background: radial-gradient(circle at 50% 35%, #ffe08a, #ffc533 40%, #ff6a1a 85%); box-shadow: 0 0 12px rgba(255,165,40,.5); }
.badge--flame { background: radial-gradient(circle at 50% 35%, #ffb36b, #ff6a1a 55%, #c2410c); box-shadow: 0 0 10px rgba(255,106,26,.45); }
.badge--ember { background: radial-gradient(circle at 50% 35%, #ff8a5c, #c2410c 55%, #6b1d06); color: #ffe7d6; box-shadow: 0 0 9px rgba(194,65,12,.45); }

/* the wall: one card, tier blocks separated by thin rules */
.card.wall { margin-top: .6rem; padding: .3rem .7rem .6rem; }
.tb { padding: .5rem 0 .1rem; border-top: 1px solid #2f3336; }
.tb:first-child { border-top: 0; }
.card h2.tb__h { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .45rem; margin: 0 0 .4rem; font-size: 1.1rem; }
.tb__s { font-family: "Source Sans 3", system-ui, sans-serif; font-size: .75rem; font-weight: 700; color: #a4abb1; }
.tb__c { margin-left: auto; font-family: "Source Sans 3", system-ui, sans-serif; font-size: .75rem; font-weight: 700; color: #a4abb1; }
.tb--empty { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; padding-bottom: .4rem; }
.tb--empty .tb__h { flex: 1 1 auto; margin: 0; }
.tb--empty .tb__c { display: none; }
.card .tb__empty { margin: 0; color: var(--gold); font-weight: 700; font-size: .8125rem; }

.chipgrid { list-style: none; margin: 0 0 .35rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.1rem, 1fr)); gap: .3rem; }
@media (min-width: 768px) { .chipgrid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } }
.mc { display: flex; flex-direction: column; min-width: 0; padding: .28rem .45rem; border-radius: .55rem; background: #16181c; border: 1px solid #2f3336; border-left: 3px solid #2f3336; cursor: default; }
.mc__n { font-weight: 800; font-size: .8125rem; line-height: 1.2; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc__d { font-family: var(--font-title); font-size: .875rem; line-height: 1.2; color: var(--gold); font-variant-numeric: tabular-nums; }
.tb--phoenix .mc { border-left-color: #ffc533; }
.tb--flame .mc { border-left-color: #ff6a1a; }
.tb--ember .mc { border-left-color: #c2410c; }
.tb--newer .mc { border-left-color: #536471; }
.tb--newer .mc__d { color: #c9d1d9; }
.tb--confirm .mc { border-style: dashed; border-left-style: solid; border-left-color: #536471; }

@media (max-width: 400px) {
  .spot__stats { gap: .25rem; }
  .ss { min-width: 2.7rem; padding: .2rem .25rem; }
  .ss__l { font-size: .5625rem; }
}

/* phones: keep 3 per row, let long names wrap instead of cutting off; trim height */
@media (max-width: 520px) {
  .wall-head .tagline { display: none; }
  .mc__n { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; font-size: .78rem; }
  .mc { padding: .25rem .4rem; }
  .card.wall { padding: .2rem .6rem .45rem; }
  .tb { padding-top: .4rem; }
  .card h2.tb__h { margin-bottom: .3rem; }
  .wall-top .card { padding: .55rem .7rem; }
}
@media (max-width: 520px) {
  body[data-page="wall"] .fta { padding-top: .5rem; }
  body[data-page="wall"] .fta-nav { margin-bottom: .5rem; }
  .wall-head .fta-sub__logo { width: 40px; height: 40px; }
  .spot h2 { margin-bottom: .3rem; }
  .spot__name { font-size: 1.2rem; }
  .spot__meta { font-size: .75rem; }
  .ss { min-width: 2.6rem; }
  .ss__n { font-size: .95rem; }
  .tsum { gap: .25rem; }
  .ts a { padding: .12rem .45rem; font-size: .75rem; }
  .ts__c { font-size: .85rem; }
  .tb--newer .tb__s, .tb--confirm .tb__s, .tb--risen .tb__s { display: none; }
  .tb--empty { padding-top: .35rem; padding-bottom: .3rem; }
}
#wall-asof { color: #a4abb1; }
@media (max-width: 520px) {
  .spot__meta { white-space: nowrap; }
  .spot__row { gap: .45rem; }
  .spot__stats { gap: .2rem; }
  .ss { min-width: 2.5rem; padding: .18rem .25rem; }
}
.tb--empty .tb__h { flex: 0 1 auto; }
@media (max-width: 520px) { .spot__meta { white-space: normal; font-size: .7rem; } }
body[data-page="wall"] .back { margin-top: .8rem; }
body[data-page="wall"] .footer { padding-top: .75rem; padding-bottom: 1.25rem; }