/* ==========================================================================
   projects-index.css — Projects Directory
   --------------------------------------------------------------------------
   1:1 with Figma node 526:1627 ("Projects"). Every value below is a Figma
   variable or a measured value from that node.

   Layout (Figma 526:1632 → 526:1635):
     outer   px 28, pb 8, background #fbf7ef
     column  700px, centred, first row starts 79.5px down
     stack   flex column, gap 24  (header → search → grid)
   ========================================================================== */

/* position/z-index: .ws-main paints a decorative .ws-main__spectre backdrop at
   z-index 0; the directory is an opaque #fbf7ef surface in Figma (526:1632),
   so it must sit above it rather than let it bleed through.
   The radial layer is that frame's top vignette: a 4% black ellipse
   (r 762.7 x 37.8) centred on the top edge. */
.oc-projects {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 79.5px 28px 8px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 762.7px 37.8px at 50% 0%,
      rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 100%),
    var(--color-background);
}

.oc-projects__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);          /* 24 — Figma 526:1635 */
  width: 700px;
  max-width: 100%;
}

/* ---- Header: "Projects" + New Project ---------------------- 526:1636 ---- */
.oc-projects__header {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.oc-projects__title {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-3xl);   /* 30 */
  line-height: 1.35;
  color: var(--color-foreground);
}

/* The button itself is the canonical .oc-btn (components/ui/button.css) —
   same Figma component, so it inherits the shared states (543:2198). Only its
   placement in the header row belongs to this page. */
.oc-projects__new {
  flex-shrink: 0;
}

/* ---- Search ------------------------------------------------ 526:1639 ---- */
.oc-projects__search {
  display: flex;
  gap: var(--space-2-5);        /* 10 */
  align-items: center;
  width: 100%;
  padding: var(--space-3);      /* 12 */
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--color-card-background);
  -webkit-backdrop-filter: blur(42px);
  backdrop-filter: blur(42px);
  overflow: hidden;
}

.oc-projects__search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.oc-projects__search-input {
  flex: 1 0 0;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-sm);
  line-height: 1.25;
  color: var(--color-foreground);
}

.oc-projects__search-input:focus {
  outline: none;
}

.oc-projects__search-input::placeholder {
  color: var(--color-card-placeholder);
  opacity: 1;
}

/* ---- Grid -------------------------------------------------- 526:1674 ---- */
.oc-projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 106px;
  gap: 16px;
  width: 100%;
}

/* ---- Card -------------------------------------------------- 526:1675 ----
   The Figma card is a hairline separator border with no fill. `cursor` and
   the focus ring are the only additions: the card opens a project, so it
   must be operable and focusable. Figma specifies no hover treatment.     */
.oc-project-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid var(--color-card-separator);
  border-radius: 16px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.oc-project-card:focus-visible {
  outline: 2px solid var(--color-button-primary-bg);
  outline-offset: 2px;
}

.oc-project-card__head {
  display: flex;
  gap: 15px;
  align-items: center;
  width: 100%;
}

.oc-project-card__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-2);      /* 8 → 24 + 16 = 40px box */
  border-radius: var(--radius-8);
  background: var(--color-cream-50);
}

.oc-project-card__icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.oc-project-card__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-1);          /* 4 */
  min-width: 0;
}

.oc-project-card__title,
.oc-project-card__count,
.oc-project-card__updated {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-sans);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-project-card__title {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  color: var(--color-foreground);
}

.oc-project-card__count {
  font-weight: var(--font-weight-normal);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.oc-project-card__updated {
  width: 100%;
  font-weight: var(--font-weight-normal);
  font-size: var(--text-xs);    /* 12 */
  color: var(--color-text-placeholder);
}

/* ---- Load failure --------------------------------------------------------
   Not a Figma state: the node specifies the loaded directory only. Rendered
   in placeholder type so a storage failure is visible rather than silent. */
.oc-projects__error {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-sm);
  line-height: 1.25;
  color: var(--color-text-placeholder);
}

@media (max-width: 820px) {
  .oc-projects {
    padding: 40px 20px 8px;
  }

  .oc-projects__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}