/* Community project pages share one opening, contribution section and list layout. */
.project-detail { color: var(--white, #fff); overflow-wrap: anywhere; }
.project-detail [hidden] { display: none !important; }
.projects-catalogue-panel { border-top: 1px solid var(--stroke, #ffffff26); }
.project-detail .lab-section { padding: 56px 40px; }
.project-detail .lab-section h2 { margin: 0 0 24px; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.2; }
.project-detail .lab-section p { color: var(--paragraph-gray, #ababab); line-height: 1.75; }
.project-detail .section-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.project-detail .section-hero-copy { grid-column: 1 / -1; }
.project-detail .section-hero-copy > p { max-width: 850px; }
.project-detail .section-hero h1 { max-width: 1050px; }
.project-detail .project-contribute { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.project-detail .project-contribute > div { min-width: 0; max-width: 760px; }
.project-detail .project-contribute h2 { margin-bottom: 16px; }
.project-detail .project-contribute p:last-child { margin-bottom: 0; }
.project-detail .project-contribute > a { flex-shrink: 0; }
.project-detail .project-contribute .primary-button { white-space: normal; }
.project-detail .project-contribute .project-contribute-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.project-detail .project-contribute-channels, .project-dialog-channels { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.project-channel { display: flex; align-items: center; gap: 10px; color: var(--paragraph-gray, #ababab); font-size: 14px; line-height: 1.5; }
.project-channel :is(svg, img), .project-channel-icon { display: block; flex: 0 0 24px; width: 24px; height: 24px; color: var(--white, #fff); }
.project-contribute-action { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 18px; border: 1px solid var(--stroke, #434343); border-radius: 2px; background: var(--stroke, #434343); color: var(--white, #f7fcff); font: inherit; font-weight: 500; line-height: 1.5; text-decoration: none; transition: all .35s; }
.project-contribute-action:hover { border-color: var(--primary, #eb4d21); background: var(--primary, #eb4d21); color: var(--white, #f7fcff); }
.project-contribute-action :is(svg, img) { flex: 0 0 32px; width: 32px; height: 32px; }
.project-contribute-action span { white-space: nowrap; }
.project-contribute-actions .project-contribute-channels { gap: 12px; }
.project-channel span { display: block; }
.project-channel strong { color: var(--white, #fff); font-weight: 500; }
#project-contribute-dialog { box-sizing: border-box; width: min(600px, calc(100% - 40px)); max-height: calc(100% - 40px); margin: auto; padding: 32px; overflow: auto; border: 1px solid var(--stroke, #ffffff26); border-radius: 4px; background: #0b0b0b; color: var(--white, #fff); font: inherit; }
#project-contribute-dialog::backdrop { background: #000c; }
#project-contribute-dialog h2 { margin: 0 0 20px; font-size: clamp(26px, 4vw, 36px); line-height: 1.25; }
#project-contribute-dialog p, #project-contribute-dialog li { color: var(--paragraph-gray, #ababab); line-height: 1.75; }
#project-contribute-dialog p { margin: 0 0 20px; }
#project-contribute-dialog ol, #project-contribute-dialog ul { margin: 0 0 24px; padding-left: 24px; }
#project-contribute-dialog li + li { margin-top: 10px; }
#project-contribute-dialog .project-dialog-channels { margin: 24px 0; }
#project-contribute-dialog [data-close-contribute] { margin-top: 8px; padding: 12px 20px; border: 1px solid var(--stroke, #ffffff26); border-radius: 2px; background: transparent; color: var(--white, #fff); font: inherit; cursor: pointer; }
#project-contribute-dialog [data-close-contribute]:hover { border-color: var(--primary, #ff5201); }
#project-contribute-dialog :is(button, a):focus-visible { outline: 2px solid var(--primary, #ff5201); outline-offset: 4px; }
.project-detail .project-catalogue-controls { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(140px, 1fr)); gap: 20px; margin: 28px 0 20px; }
.project-detail .project-catalogue-controls > :is(div, label) { min-width: 0; }
.project-detail .project-catalogue-controls label { display: block; margin: 0 0 10px; color: var(--paragraph-gray, #ababab); font-size: 14px; font-weight: 400; line-height: 1.5; }
.project-detail .project-catalogue-controls :is(input, select) { display: block; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--stroke, #ffffff26); border-radius: 2px; background: var(--primary-dark, #060606); color: var(--white, #fff); font: inherit; font-size: 16px; line-height: 1.5; color-scheme: dark; }
.project-detail .project-catalogue-controls select { padding-right: 30px; }
.project-detail .project-catalogue-controls label > :is(input, select) { margin-top: 10px; }
.project-detail .project-catalogue-controls input::placeholder { color: var(--paragraph-gray, #ababab); opacity: .8; }
.project-detail .project-catalogue-controls :is(input, select):disabled { opacity: .5; cursor: not-allowed; }
.project-detail :is(input, select, a, button):focus-visible { outline: 2px solid var(--primary, #ff5201); outline-offset: 4px; }
.project-detail #catalogue-status { margin: 0 0 20px; color: var(--paragraph-gray, #ababab); font-size: 14px; }
.project-detail #project-records { width: 100%; }
.project-detail .project-record { padding: 32px 0; border-top: 1px solid var(--stroke, #ffffff26); }
.project-detail .project-record-type { color: var(--primary, #ff5201); font-size: 12px; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
.project-detail .project-record-title { max-width: 100%; margin: 12px 0 16px; font-size: 24px; font-weight: 500; line-height: 1.35; }
.project-detail .project-record-title a { color: var(--white, #fff); font: inherit; text-decoration: none; }
.project-detail .project-record-title a:hover { color: var(--primary, #ff5201); }
.project-detail .project-record-summary { max-width: 960px; margin: 0 0 20px; color: var(--paragraph-gray, #ababab); font-size: 16px; line-height: 1.75; }
.project-detail .project-record-metadata { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; font-size: 13px; line-height: 1.7; }
.project-detail .project-record-metadata > div { display: flex; flex-wrap: wrap; gap: 4px 8px; max-width: 100%; }
.project-detail .project-record-metadata dt { color: var(--paragraph-gray, #ababab); font-weight: 400; }
.project-detail .project-record-metadata dd { max-width: 100%; margin: 0; color: var(--white, #fff); }
.project-detail .project-record-metadata a { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; }
.project-detail .project-record-metadata a:hover { color: var(--primary, #ff5201); }
.project-detail #catalogue-empty { padding: 32px 0; border-top: 1px solid var(--stroke, #ffffff26); color: var(--paragraph-gray, #ababab); }
@media (max-width: 991px) {
  .project-detail .lab-section { padding: 48px 30px; }
  .project-detail .project-catalogue-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-detail .project-contribute { align-items: flex-start; flex-direction: column; gap: 24px; }
}
@media (max-width: 767px) {
  .project-detail .lab-section { padding: 40px 20px; }
  .project-detail .project-catalogue-controls { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .project-detail .project-record { padding: 28px 0; }
  .project-detail .project-record-title { font-size: 22px; }
  .project-detail .project-record-metadata { flex-direction: column; gap: 10px; }
  #project-contribute-dialog { padding: 24px; }
}
@media (max-width: 767px) {
  /* Reserve two breadcrumb lines so short names keep the same title position. */
  .project-detail .section-hero nav[aria-label="Breadcrumb"] { min-height: 52px; align-content: flex-start; }
}