/* =============================================================
 * Wall of Shame — /wall-of-shame (public list), /wall-of-shame/:id
 * (per-entry), and inline "Add to Wall" form on audit result pages.
 * Shares the global palette with /style.css; only page-specific layout
 * lives here so we keep diffs minimal on the global sheet.
 * ============================================================= */

.wall-page {
  background: #011a24;
  color: #e4f4f7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wall-header {
  padding: 2.5rem 1.25rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.wall-header h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 1.5rem 0 0.75rem;
  line-height: 1.15;
  color: #cdeef4;
}

.wall-header .wall-subhead {
  color: #9fc9d4;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 620px;
  margin: 0 auto;
}

.wall-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.wall-brand {
  color: #7ef0ff;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.wall-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.wall-nav a {
  color: #9fc9d4;
  text-decoration: none;
  font-size: 0.95rem;
}

.wall-nav a:hover {
  color: #7ef0ff;
}

.wall-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1.25rem 1rem;
  box-sizing: border-box;
}

.wall-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #9fc9d4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wall-filter-bar select {
  background: rgba(4, 22, 34, 0.6);
  color: #e4f4f7;
  border: 1px solid rgba(126, 240, 255, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.95rem;
  min-width: 180px;
}

.wall-main {
  flex: 1;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1.25rem 3rem;
  box-sizing: border-box;
}

.wall-loading,
.wall-empty,
.wall-error {
  padding: 3rem 2rem;
  text-align: center;
  color: #9fc9d4;
  font-size: 1rem;
  border: 1px dashed rgba(126, 240, 255, 0.2);
  border-radius: 12px;
  background: rgba(4, 22, 34, 0.35);
  margin: 1rem 0;
}

/* Load-failure banner (QC-BUG-030): warmer tint than the neutral empty
   state so a server/network failure reads as an error, not "no entries". */
.wall-error {
  color: #f3c9c9;
  border-color: rgba(255, 138, 138, 0.35);
  background: rgba(40, 12, 12, 0.35);
}
.wall-error strong {
  display: block;
  color: #ffd9d9;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.wall-retry {
  margin-top: 0.9rem;
  background: #5a2330;
  color: #fff;
  border: 1px solid rgba(255, 138, 138, 0.4);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}
.wall-retry:hover { background: #743040; }

.wall-empty strong {
  display: block;
  color: #cdeef4;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.wall-empty a {
  color: #7ef0ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(126, 240, 255, 0.4);
}

.wall-empty a:hover { border-bottom-color: #7ef0ff; }

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

.wall-card {
  background: rgba(4, 22, 34, 0.6);
  border: 1px solid rgba(126, 240, 255, 0.2);
  border-radius: 12px;
  padding: 1rem 1.1rem 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wall-card .wall-card-category {
  font-weight: 700;
  color: #cdeef4;
  font-size: 1rem;
  line-height: 1.2;
}

.wall-card .wall-card-metro {
  color: #9fc9d4;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.wall-card .wall-card-quoted {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 0.35rem;
}

.wall-card .wall-card-quoted-label {
  font-size: 0.75rem;
  color: #9fc9d4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.wall-card .wall-card-benchmark {
  color: #cde;
  font-size: 0.9rem;
}

.wall-card .wall-card-badge {
  align-self: flex-start;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #111;
  margin-top: 0.4rem;
}
/* Severity-driven color. The three buckets match the old severityColor() */
/* in wall.js. These live here (instead of inline style= attrs set from JS) */
/* so the strict style-src 'self' 'nonce-...' CSP on /wall-of-shame        */
/* doesn't silently block the severity coloring in production.             */
.wall-card-quoted--high  { color: #ef5a5a; }
.wall-card-quoted--med   { color: #ef7d4b; }
.wall-card-quoted--low   { color: #eab64b; }
.wall-card-badge--high   { background: #ef5a5a; }
.wall-card-badge--med    { background: #ef7d4b; }
.wall-card-badge--low    { background: #eab64b; }
.is-hidden               { display: none !important; }

.wall-card .wall-card-source {
  align-self: flex-start;
  font-size: 0.75rem;
  color: #7ef0ff;
  margin-bottom: 0.15rem;
  letter-spacing: 0.02em;
}

.wall-card .wall-card-comment {
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid #7ef0ff;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #cdeef4;
  line-height: 1.4;
  margin-top: 0.6rem;
}

.wall-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(126, 240, 255, 0.1);
  font-size: 0.8rem;
}

.wall-card-footer .wall-vote-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(126, 240, 255, 0.08);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}

.wall-card-footer button {
  background: transparent;
  border: 1px solid rgba(126, 240, 255, 0.2);
  color: #9fc9d4;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
}

.wall-card-footer .wall-vote-group button {
  border: none;
  padding: 0.15rem 0.35rem;
  color: #9fc9d4;
}

.wall-card-footer .wall-vote-count {
  color: #cdeef4;
  font-weight: 700;
  min-width: 1.4rem;
  text-align: center;
}

.wall-card-footer .wall-card-permalink {
  color: #7ef0ff;
  text-decoration: none;
  margin-left: auto;
}

.wall-card-footer .wall-report-link {
  background: transparent;
  border: none;
  color: #6a8a91;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  font-size: 0.75rem;
}

/* Per-card action feedback (vote/help/report/copy). Lives on its own row
   below the footer controls (footer is flex-wrap) and is only shown when it
   carries a message. Set via class/text only — never JS inline style, which
   the strict style-src CSP blocks. */
.wall-card-footer .wall-card-status {
  flex-basis: 100%;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #9fc9d4;
}
.wall-card-footer .wall-card-status--error {
  color: #f3a8a8;
}

.wall-report-menu {
  display: none;
  position: absolute;
  right: 0.6rem;
  bottom: 2.8rem;
  background: rgba(4, 22, 34, 0.96);
  border: 1px solid rgba(126, 240, 255, 0.2);
  border-radius: 8px;
  padding: 0.5rem;
  z-index: 5;
  width: 240px;
}

.wall-report-menu.open {
  display: block;
}

.wall-report-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #cdeef4;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  border-radius: 4px;
}

.wall-report-menu button:hover {
  background: rgba(126, 240, 255, 0.08);
}

.wall-methodology {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1.25rem 3rem;
  box-sizing: border-box;
  color: #9fc9d4;
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
}

.wall-methodology h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7ef0ff;
  margin-bottom: 0.4rem;
  text-align: center;
}

.wall-methodology p {
  /* Override the global p { max-width: 40rem; margin: 1rem auto }
     rule from style.css §7: without re-asserting margin: 0 auto
     here the paragraph block gets pinned to the left edge of the
     1100px wall-methodology container and the centered text sits
     visibly off-center in the viewport. */
  margin: 0 auto;
  max-width: 48rem;
}

.wall-methodology a {
  color: #7ef0ff;
}

/* Inline "Add to Wall of Shame" button + form used on audit result pages. */
.wall-submit-inline {
  margin-top: 0.5rem;
}

.wall-submit-inline .wall-submit-btn {
  background: transparent;
  border: 1px solid rgba(239, 90, 90, 0.6);
  color: #ef5a5a;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
}

.wall-submit-inline .wall-submit-btn:hover {
  background: rgba(239, 90, 90, 0.12);
}

.wall-submit-inline form {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: rgba(4, 22, 34, 0.45);
  border: 1px solid rgba(126, 240, 255, 0.2);
  border-radius: 8px;
}

.wall-submit-inline form.open {
  display: flex;
}

.wall-submit-inline .wall-submit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  color: #9fc9d4;
  font-size: 0.8rem;
}

.wall-submit-inline .wall-submit-meta strong {
  color: #cdeef4;
}

.wall-submit-inline textarea {
  width: 100%;
  min-height: 60px;
  background: rgba(0, 0, 0, 0.45);
  color: #e4f4f7;
  border: 1px solid rgba(126, 240, 255, 0.25);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.wall-submit-inline .wall-submit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  font-size: 0.85rem;
}

.wall-submit-inline .wall-submit-cancel {
  background: transparent;
  border: 1px solid rgba(126, 240, 255, 0.3);
  color: #9fc9d4;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}

.wall-submit-inline .wall-submit-send {
  background: #7ef0ff;
  color: #011;
  border: none;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.wall-submit-inline .wall-submit-success {
  color: #b4f0d4;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

.wall-submit-inline .wall-submit-error {
  color: #ef7d4b;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}