@import url('./ambient-gradient.css?v=15e172f9b3');
@import url('./redesign.css?v=680663b928');

/* ND-03: projects page in the redesign. Grid, chips and sort keep the hooks
 * of js/showcase.js; only their look changes here. */

/* DS-08 stays within projects.html; accepted pages keep their own rhythm. */
.projects-redesign {
  --home-footer-space: var(--projects-footer-space);
  --home-footer-word-gap: var(--projects-footer-word-gap);
}

.projects-redesign .header-inner {
  gap: var(--spacing-label);
}

.projects-redesign .home-lead {
  margin-top: var(--spacing-content);
}

.projects-redesign .home-actions {
  gap: var(--spacing-related);
  margin-top: var(--spacing-content);
}

/* Page head: title on the left, the main action on the right — the grid is
 * what people came for, so the head stays one compact row. */
.home-redesign main > .pj-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--spacing-groups);
  padding-block: var(--projects-head-space) var(--projects-head-after-space);
}

.pj-head h1 {
  font-size: var(--nd-hero-size);
  font-weight: 500;
  letter-spacing: -0.057em;
  line-height: 1.08;
}

.projects-redesign .pj-head-actions {
  margin-top: 0;
}

.home-redesign main > .pj-showcase {
  padding-block: 0;
}

/* View bar, like a Linear list header: stays under the site header while the
 * grid scrolls. Background and bottom line reach the window edges through two
 * spread shadows (shadows never widen the page, unlike positioned boxes);
 * clip-path trims them to the bar's own height plus the 1px line. */
.projects-redesign .pj-toolbar {
  position: sticky;
  top: var(--header-height);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-related) var(--spacing-content);
  margin-bottom: var(--spacing-fields);
  padding-block: var(--projects-toolbar-space);
  background: var(--nd-bg);
  box-shadow: 0 0 0 100vmax var(--nd-bg), 0 1px 0 100vmax var(--nd-line);
  clip-path: inset(0 -100vmax -1px);
}

.projects-redesign .showcase-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--projects-chip-gap);
  margin: 0;
}

.projects-redesign .showcase-sort-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-related);
}

.projects-redesign .showcase-sort-label {
  color: var(--nd-muted);
  font: 400 var(--text-xs) / 1 var(--font-body);
}

/* One status line above the grid: what is shown, how many, how to reset.
 * It is the only live region of the catalog (the grid itself is not). */
.projects-redesign .showcase-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-related);
  margin-bottom: var(--spacing-related);
}

.projects-redesign .showcase-status-row[hidden] {
  display: none;
}

.projects-redesign .showcase-status {
  min-height: 1.5em; /* cleared while loading: keep the height, no layout jump */
  margin: 0;
  color: var(--nd-muted);
  font: 400 var(--text-sm) / var(--leading-snug) var(--font-body);
}

/* Closing card: the decorative window is the submit form in miniature, so
 * the step after "add project" is not a mystery. */
.pj-draft {
  justify-self: end;
  width: 100%;
  max-width: var(--projects-draft-width);
  overflow: hidden;
  border: 1px solid var(--home-window-frame);
  border-radius: var(--home-window-radius);
  background: var(--home-window-surface);
  box-shadow: var(--home-window-shadow);
}

.pj-draft-body {
  display: grid;
  gap: var(--projects-draft-gap);
  padding: var(--projects-draft-pad);
}

.pj-label {
  display: block;
  margin-bottom: var(--spacing-label);
  color: var(--nd-muted);
  font-size: var(--text-xs);
}

.pj-input {
  display: flex;
  align-items: center;
  padding: var(--projects-field-pad);
  border: 1px solid var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-bg);
  color: var(--nd-text);
  font-size: var(--text-sm);
}

.pj-caret {
  width: var(--projects-caret-width);
  height: 1.1em;
  margin-left: var(--projects-caret-gap);
  background: var(--ambient-mint);
  animation: pj-caret var(--projects-caret-blink) steps(1) infinite;
}

@keyframes pj-caret {
  50% {
    opacity: 0;
  }
}

.pj-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-label);
}

.pj-options > span {
  padding: var(--projects-option-pad);
  border: 1px solid var(--nd-line);
  border-radius: var(--radius-full);
  color: var(--nd-muted);
  font-size: var(--text-xs);
}

.pj-options > .is-on {
  border-color: var(--projects-pick-line);
  background: var(--projects-pick-bg);
  color: var(--nd-text);
}

.pj-draft-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-related);
  padding-top: var(--projects-draft-gap);
  border-top: 1px solid var(--home-window-divider);
  color: var(--nd-muted);
  font-size: var(--text-xs);
}

.pj-draft-send {
  padding: var(--projects-field-pad);
  border: 1px solid var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--home-window-selection);
  color: var(--nd-text);
  font-weight: 500;
}

/* Content rhythm: the CTA owns both external pauses; the grid section
 * contributes no hidden padding to either one. */
.projects-redesign main > .pj-join {
  gap: var(--projects-panel-gap);
  margin-block: var(--projects-cta-before-space) var(--projects-cta-after-space);
  padding: var(--projects-panel-padding);
}

.projects-redesign .home-join h2 {
  margin-bottom: var(--spacing-content);
}

.projects-redesign .home-footer-top,
.projects-redesign .home-footer-bottom {
  gap: var(--projects-footer-space) var(--spacing-content);
}

.projects-redesign .home-footer-top p {
  margin-top: var(--spacing-label);
}

.projects-redesign .home-footer-links {
  gap: var(--spacing-related);
}

@media (width <= 1200px) {
  .projects-redesign {
    --projects-panel-padding: var(--spacing-groups);
    --projects-panel-gap: var(--spacing-groups);
  }
}

@media (width <= 600px) {
  .projects-redesign {
    --projects-panel-padding: var(--spacing-fields);
    --projects-footer-word-gap: var(--spacing-related);
  }
}

@media (width <= 900px) {
  .home-redesign main > .pj-head {
    grid-template-columns: 1fr;
    gap: var(--spacing-content);
  }

  .projects-redesign .home-footer-links,
  .projects-redesign .home-footer-bottom {
    gap: 0;
  }

  .projects-redesign .showcase-sort-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Phones: two toolbar rows would eat a third of the screen while sticky,
 * so the bar scrolls away with the page; chips scroll sideways in one row. */
@media (width <= 768px) {
  .projects-redesign .header-inner {
    padding-inline: var(--nd-gutter);
  }

  .projects-redesign .pj-toolbar {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .projects-redesign .projects-filter .showcase-chips {
    flex-wrap: nowrap;

    /* Extra paint room for the focus outline; the negative margin only
     * cancels this inset so the chips retain the common content edge. */
    margin: calc(-1 * var(--projects-scroll-inset));
    padding: var(--projects-scroll-inset);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .projects-redesign .showcase-chips .ui-chip {
    flex: none;
  }

  .projects-redesign .showcase-sort-wrap {
    justify-content: flex-start;
  }

  .pj-draft {
    justify-self: stretch;
    max-width: none;
  }
}

/* On phones the miniature form only lengthens the page; the copy and the
 * buttons above already say what happens next. */
@media (width <= 540px) {
  .pj-draft {
    display: none;
  }
}

/* Narrow phones: the sort row has no room for icons next to the label. */
@media (width <= 480px) {
  .projects-redesign .ui-seg-item .sort-icon {
    display: none;
  }
}