/* Phase 7 platform pages ------------------------------------------------- */
.platform-page {
  --container-width: 110rem;
  --page-gutter: clamp(1rem, 3.2vw, 4rem);
  background: var(--color-background);
}

.platform-page .site-main { overflow: clip; }

.platform-hero {
  min-height: 20rem;
  display: grid;
  align-items: center;
  padding-block: clamp(3.1rem, 6vw, 5.2rem);
  background: var(--gradient-hero);
  color: #c9d4e4;
}

.platform-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .95fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 8rem);
}

.platform-hero__copy { max-width: 58rem; }

.platform-hero__badge,
.tag,
.status-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .76rem;
  border: 1px solid rgb(255 116 23 / 48%);
  border-radius: 999rem;
  color: #ff9c55;
  font-size: .78rem;
  font-weight: 700;
}

.platform-hero h1 {
  max-width: 68rem;
  margin: .8rem 0 .7rem;
  color: #fff;
  font-size: clamp(2.15rem, 4vw, 3.45rem);
  line-height: 1.08;
}

.platform-hero h1 span { color: var(--color-orange-500); }

.platform-hero__summary {
  max-width: 57rem;
  margin-bottom: 1.15rem;
  color: #c7d0df;
  font-size: clamp(.98rem, 1.3vw, 1.12rem);
}

.hero-tags,
.card-tags,
.button-row,
.tool-actions {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  list-style: none;
}

.hero-tags li {
  padding: .42rem .78rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999rem;
  background: rgb(255 255 255 / 7%);
  color: #cbd5e1;
  font-size: .76rem;
}

.platform-symbol {
  min-height: 13.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 1.25rem;
  background: var(--gradient-hero-panel);
  box-shadow: inset 0 0 3rem rgb(255 255 255 / 2%);
  color: #fff;
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  font-weight: 700;
  line-height: 1;
}

.platform-content { padding-block: clamp(3rem, 6vw, 5.2rem); }
.directory-actions { display: flex; justify-content: center; gap: .75rem; margin: -1rem 0 2.25rem; }
.platform-content--tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.platform-content--white { background: var(--color-surface); }

.section-heading { margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }
.section-heading h2 { margin-bottom: .45rem; }
.section-heading p { margin-bottom: 0; color: var(--color-text-muted); }

.platform-grid {
  display: grid;
  grid-template-columns: repeat(var(--platform-columns, 3), minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.35rem);
}

.platform-grid--2 { --platform-columns: 2; }
.platform-grid--3 { --platform-columns: 3; }
.platform-grid--4 { --platform-columns: 4; }
.platform-grid--5 { --platform-columns: 5; }

.platform-card,
.content-panel,
.metric-card,
.auth-card {
  border: 1px solid var(--color-border);
  border-radius: .85rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.platform-card {
  min-height: 10rem;
  padding: 1.35rem;
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

a.platform-card:hover {
  border-color: rgb(255 101 0 / 55%);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
  transform: translateY(-.18rem);
}

.platform-card :is(h2, h3) { margin: .65rem 0 .45rem; font-size: 1.08rem; }
.platform-card p { margin-bottom: .7rem; color: var(--color-text-muted); font-size: .9rem; }

.number-tile,
.resource-icon {
  width: 3.15rem;
  height: 3.15rem;
  display: grid;
  place-items: center;
  border-radius: .72rem;
  background: linear-gradient(135deg, #6552f9, #5141f0);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.resource-icon { background: var(--color-violet-100); color: var(--color-violet-500); }

.tag {
  padding: .2rem .5rem;
  border-color: #dfe9f8;
  background: #edf5ff;
  color: #3d6fae;
  font-size: .67rem;
  font-weight: 500;
}

.tag--orange { border-color: #ffd8bc; background: #fff4ec; color: #c95f18; }
.tag--green { border-color: #c9ecdc; background: #ecfaf4; color: #25825f; }
.tag--violet { border-color: #dfd9ff; background: #f3f0ff; color: #6751c6; }
.tag--red { border-color: #ffd2d7; background: #fff0f2; color: #cf3f50; }

.feature-bar {
  position: relative;
  z-index: 2;
  margin-top: -2.2rem;
  padding: 1.35rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.feature-bar div { padding-inline: 1rem; }
.feature-bar div + div { border-left: 1px solid var(--color-border); }
.feature-bar strong { display: block; margin-bottom: .2rem; color: var(--color-text); }
.feature-bar small { color: var(--color-text-muted); }

.search-box {
  padding: .42rem;
  display: flex;
  gap: .4rem;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.search-box input,
.search-box select,
.field,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: .55rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.search-box input { border: 0; }
.search-box select { width: auto; border-block: 0; border-right: 0; border-radius: 0; }
.form-textarea { min-height: 9rem; resize: vertical; }

.content-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr);
  gap: 1.5rem;
  align-items: start;
}

.content-split > *,
.article-layout > *,
.article-body,
.stack,
.filters { min-width: 0; }

.content-split--equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-panel { padding: clamp(1.2rem, 2.5vw, 2rem); }
.content-panel h2 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); }

.list-rows { margin: 0; padding: 0; list-style: none; }
.list-row { padding: 1rem 0; display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: start; border-bottom: 1px solid var(--color-border); }
.list-row:last-child { border-bottom: 0; }
.list-row h3 { margin: 0 0 .2rem; font-size: .96rem; }
.list-row p { margin: 0; color: var(--color-text-muted); font-size: .82rem; }
.list-row .number-tile { width: 1.6rem; height: 1.6rem; border-radius: .4rem; font-size: .7rem; }

.filters { display: grid; gap: 1rem; }
.filter-card { padding: 1.25rem; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface); }
.filter-card h3 { margin-bottom: .35rem; font-size: 1rem; }
.filter-card p { margin: 0; color: var(--color-text-muted); font-size: .85rem; }

.score-display { display: grid; place-items: center; padding: 1.2rem; text-align: center; }
.score-ring { width: 11rem; aspect-ratio: 1; display: grid; place-items: center; border: .85rem solid #dff3eb; border-top-color: #30b886; border-radius: 50%; }
.score-ring strong { display: block; font-size: 2.5rem; }
.score-ring small { display: block; color: var(--color-text-muted); }

.stats-banner {
  padding: 1.3rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-radius: .85rem;
  background: var(--color-navy-850);
  color: #cbd5e1;
}

.stats-banner div { padding: .35rem 1rem; text-align: center; }
.stats-banner div + div { border-left: 1px solid rgb(255 255 255 / 12%); }
.stats-banner strong { display: block; color: #fff; font-size: 1.45rem; }
.stats-banner small { font-size: .72rem; }

.severity { color: #d44052; }
.progress { height: .55rem; overflow: hidden; border-radius: 999rem; background: var(--color-surface-subtle); }
.progress span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #5368ee, #7048f9); }

.code-block,
.json-editor {
  max-width: 100%;
  overflow: auto;
  padding: 1.2rem;
  border-radius: .7rem;
  background: #03142f;
  color: #dbe7f7;
  font: .83rem/1.65 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rule-callout { padding: 1rem; border-left: .25rem solid var(--color-yellow-500); background: var(--color-surface-subtle); }
.rule-callout--danger { border-left-color: var(--color-red-500); }

.pricing-card { min-height: 28rem; display: flex; flex-direction: column; }
.pricing-card--featured { border: .15rem solid var(--color-orange-500); transform: translateY(-.6rem); }
.pricing-card__price { margin: .6rem 0 1rem; font-size: 2.7rem; font-weight: 800; }
.pricing-card__price small { font-size: .85rem; color: var(--color-text-muted); }
.check-list { margin: 0 0 1.4rem; padding: 0; display: grid; gap: .65rem; list-style: none; }
.check-list li::before { content: "✓"; margin-right: .55rem; color: var(--color-green-500); font-weight: 800; }
.pricing-card .button { margin-top: auto; }

.discussion-row { grid-template-columns: auto 1fr auto; }
.avatar { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-violet-100); color: var(--color-violet-500); font-weight: 800; }
.verified { color: var(--color-green-500); font-weight: 700; }

.resource-card { min-height: 12rem; }
.resource-card .resource-icon { margin-bottom: 1rem; }

.about-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.5rem; align-items: start; }
.principles li { grid-template-columns: auto 1fr; }

.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.contact-form { display: grid; gap: .8rem; }
.contact-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-options .platform-card { min-height: 9rem; }

.auth-stage { min-height: 49rem; display: grid; place-items: center; padding: 4rem 1rem; background: var(--color-canvas); }
.auth-card { width: min(100%, 44rem); padding: clamp(1.5rem, 4vw, 3rem); text-align: center; }
.auth-card__logo { width: min(100%, 17rem); margin: 0 auto 1.8rem; padding: .7rem 1rem; border-radius: .7rem; background: var(--color-navy-900); }
.auth-card h1 { font-size: clamp(1.8rem, 4vw, 2.45rem); }
.auth-card p { color: var(--color-text-muted); }
.auth-card form { display: grid; gap: .8rem; margin-top: 1.5rem; }
.auth-card__switch { margin: 1.2rem 0 0; }

.dashboard-layout { display: grid; grid-template-columns: 16rem 1fr; gap: 1.5rem; }
.dashboard-nav { min-height: 40rem; padding: 1.3rem; border-radius: .8rem; background: var(--color-navy-850); color: #dbe4f0; }
.dashboard-nav ul { margin: 1rem 0 0; padding: 0; display: grid; gap: .3rem; list-style: none; }
.dashboard-nav a { display: block; padding: .65rem .75rem; border-radius: .45rem; color: #cbd5e1; text-decoration: none; }
.dashboard-nav a:hover, .dashboard-nav a[aria-current="page"] { background: #1c3d70; color: #fff; }
.dashboard-main { min-width: 0; display: grid; gap: 1.3rem; }
.dashboard-main .stats-banner { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dashboard-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.dashboard-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.article-tabs { max-width: 100vw; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.article-tabs .container { width: 100%; max-width: 100%; margin: 0; padding-inline: var(--page-gutter); display: flex; gap: 2rem; overflow-x: auto; }
.article-tabs a { padding: 1rem 0; color: var(--color-text-soft); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.5rem; align-items: start; }
.article-body > * + * { margin-top: 1.35rem; }
.article-body h2 { margin-bottom: .55rem; }
.article-body .code-block { min-height: 16rem; }
.article-aside { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.article-aside .content-panel { padding: 1.35rem; }
.article-aside h3 { font-size: .95rem; }

.tool-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.tool-workspace .content-panel { padding: 1.5rem; }
.json-editor { width: 100%; min-height: 19rem; resize: vertical; border: 0; }
.tool-message { margin: .5rem 0 0; min-height: 1.4rem; color: var(--color-text-muted); font-size: .82rem; }
.tool-message[data-state="error"] { color: var(--color-red-500); }
.tool-message[data-state="valid"] { color: var(--color-green-500); }

.accordion-list { display: grid; gap: .7rem; }
.accordion-list details { padding: 1rem 1.2rem; border: 1px solid var(--color-border); border-radius: .7rem; background: var(--color-surface); }
.accordion-list summary { cursor: pointer; font-weight: 700; }
.accordion-list details p { margin: .8rem 0 0; color: var(--color-text-muted); }

.preview-note { margin-bottom: 1rem; padding: .75rem 1rem; border: 1px solid #f2d8bd; border-radius: .6rem; background: #fff7ed; color: #9a4b16; font-size: .84rem; }

html[data-theme="dark"] .platform-card,
html[data-theme="dark"] .content-panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .feature-bar,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .accordion-list details { border-color: var(--color-border); background: var(--color-surface); }
html[data-theme="dark"] .tag { border-color: #345275; background: #102e55; color: #9fc7f8; }
html[data-theme="dark"] .tag--orange { border-color: #744527; background: #372416; color: #ffae76; }
html[data-theme="dark"] .tag--green { border-color: #235c4a; background: #102f28; color: #88ddb9; }
html[data-theme="dark"] .tag--violet { border-color: #4c4384; background: #27234e; color: #c5baff; }
html[data-theme="dark"] .resource-icon { background: #27234e; color: #c5baff; }
html[data-theme="dark"] .preview-note { border-color: #744527; background: #372416; color: #ffbd8e; }
html[data-theme="dark"] :is(.field, .form-select, .form-textarea, .search-box input, .search-box select) { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); }

@media (max-width: 75rem) {
  .platform-grid--5 { --platform-columns: 3; }
  .platform-grid--4 { --platform-columns: 3; }
  .stats-banner, .dashboard-main .stats-banner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-banner div:nth-child(4) { border-left: 0; }
  .stats-banner div:nth-child(n+4) { border-top: 1px solid rgb(255 255 255 / 12%); }
  .dashboard-layout { grid-template-columns: 13rem 1fr; }
}

@media (max-width: 64rem) {
  .platform-hero__layout,
  .content-split,
  .content-split--equal,
  .about-layout,
  .contact-layout,
  .article-layout { grid-template-columns: 1fr; }
  .platform-symbol { min-height: 10rem; }
  .feature-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-bar div + div { border-left: 0; }
  .feature-bar div:nth-child(even) { border-left: 1px solid var(--color-border); }
  .article-aside { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-nav { min-height: auto; }
  .dashboard-nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .platform-grid--3,
  .platform-grid--4,
  .platform-grid--5 { --platform-columns: 2; }
  .platform-hero { padding-block: 2.7rem; }
  .platform-hero__layout { gap: 1.5rem; }
  .platform-symbol { min-height: 8rem; }
  .stats-banner, .dashboard-main .stats-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-banner div:nth-child(3), .stats-banner div:nth-child(5) { border-left: 0; }
  .stats-banner div:nth-child(4) { border-left: 1px solid rgb(255 255 255 / 12%); }
  .stats-banner div:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / 12%); }
  .tool-workspace,
  .dashboard-panels,
  .dashboard-panels--3,
  .article-aside { grid-template-columns: 1fr; }
  .dashboard-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-box { align-items: stretch; flex-direction: column; }
  .search-box select { width: 100%; border: 1px solid var(--color-border); border-radius: .55rem; }
}

@media (max-width: 36rem) {
  .directory-actions { align-items: stretch; flex-direction: column; }
  .platform-grid--2,
  .platform-grid--3,
  .platform-grid--4,
  .platform-grid--5,
  .feature-bar,
  .contact-options { --platform-columns: 1; grid-template-columns: 1fr; }
  .feature-bar div:nth-child(even) { border-left: 0; }
  .feature-bar div + div { padding-top: .8rem; border-top: 1px solid var(--color-border); }
  .platform-card, .content-panel { padding: 1.05rem; }
  .pricing-card--featured { transform: none; }
  .dashboard-nav ul { grid-template-columns: 1fr; }
  .article-tabs .container { gap: 1.2rem; }
}