/*
  UI Card — Website Refresh 2026 1e (Figma), "Card Elements" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8095-50910

  Requires tokens.css and icons.css loaded first.

  This is a mock screenshot of the ResourceSpace app UI itself (the
  asset-grid card shown inside the Hero's fake browser window) —
  NOT part of the marketing site's own design system. It has its own
  tiny type scale and its own colour palette (dark surfaces, status
  greens/ambers/blues) that doesn't map onto the site's --color-*
  tokens, so it gets its own small set of --mock-ui-* custom
  properties here rather than borrowing brand tokens that don't
  actually match.

  Type scale: title + filter buttons = 12px, everything else (pills/
  status, filename, filetype) = 10px — confirmed directly against
  Figma, correcting Dev Mode's own inspector which had reported
  smaller effective sizes (likely reading a scaled-down instance
  rather than the text style's own authored size). Figma's literal
  sub-pixel values (10.206px radii, 0.75px borders, etc.) have been
  rounded to whole pixels throughout — sub-pixel box edges render
  blurry/inconsistently across browsers, so this is a deliberate
  crispness fix, not a Figma-accuracy regression.

  Card Status has 3 real states confirmed in Figma (Default/Pending/
  Archived) — mapped here to --active/--pending/--archived since
  "Default" literally renders as a green "Active" badge, and naming
  the modifier after what it actually shows is clearer than after
  Figma's own inconsistent variant label.

  The ID badge's small icon and the count badge's icon aren't Lucide
  glyphs already in the shared sprite (they're a hash mark and a
  notes/document icon respectively) — downloaded directly from Figma
  as assets/icons/ui-card/hash-icon.svg and note-icon.svg rather than
  approximated from a similarly-shaped sprite icon.
*/

.rs-ui-card {
  --mock-ui-surface-card-image-bg: #30322f;
  --mock-ui-typography-900: #fafafa;
  --mock-ui-neutral-700: #4a4c48;
  --mock-ui-neutral-100: #fafafa;
  --mock-ui-green: #26c902;
  --mock-ui-amber: #fecf7f;
  --mock-ui-blue: #56a3fc;

  display: flex;
  flex-direction: column;
  width: 200px;
  font-family: var(--font-body);
}

.rs-ui-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  background-color: var(--mock-ui-surface-card-image-bg);
}

.rs-ui-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-ui-card__content {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border-radius: 0 0 6px 6px;
  background-color: var(--color-transparency-dark-80);
}

.rs-ui-card__title {
  margin: 0 0 4px 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.25;
  color: var(--mock-ui-typography-900);
}

.rs-ui-card__filename {
  margin: 0 0 6px 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-neutral-700);
}

.rs-ui-card__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-bottom: 6px;
}

.rs-ui-card-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  height: auto;
  box-sizing: border-box;
  padding: 3px 5px;
  border-radius: 10px;
  background-color: var(--mock-ui-neutral-700);
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  color: var(--mock-ui-neutral-100);
  white-space: nowrap;
}

.rs-ui-card-pill--count {
  font-size: 10px;
}

.rs-ui-card-pill__icon {
  display: block;
  flex-shrink: 0;
}

.rs-ui-card-pill--id .rs-ui-card-pill__icon {
  width: 6px;
  height: 6px;
}

.rs-ui-card-pill--count .rs-ui-card-pill__icon {
  width: 10px;
  height: 7px;
}

.rs-ui-card-status {
  display: flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 3px 5px;
  border: 1px solid;
  border-radius: 48px;
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* Scoped under .rs-ui-card-status (not just the bare
   .rs-ui-card-status__icon class) so this reliably beats .rs-icon's
   own 20px width/height/stroke-width (icons.css) — both selectors
   are equally specific (one class each), so without this it comes
   down to file load order, which isn't something this file controls
   on its own: confirmed live that when ui-card.css loads before
   icons.css in the page's <head>, the later file wins the tie and
   the status icon renders at 20px instead of 9px. */
.rs-ui-card-status .rs-ui-card-status__icon {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  stroke-width: 2px;
}

.rs-ui-card-status--active {
  border-color: var(--mock-ui-green);
  color: var(--mock-ui-green);
}

.rs-ui-card-status--pending {
  border-color: var(--mock-ui-amber);
  color: var(--mock-ui-amber);
}

.rs-ui-card-status--archived {
  border-color: var(--mock-ui-blue);
  color: var(--mock-ui-blue);
}

.rs-ui-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.rs-ui-card__filetype {
  display: flex;
  align-items: center;
  gap: 1px;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-neutral-700);
}

.rs-ui-card__filetype-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--color-neutral-700);
  stroke-width: 2px;
}

.rs-ui-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-neutral-700);
  cursor: pointer;
}

.rs-ui-card__add .rs-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2px;
}

/* ---------- UI Search Field ---------- */

.rs-ui-search-field {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 280px;
  height: 32px;
  box-sizing: border-box;
  padding-left: 8px;
  border: 1px solid var(--color-neutral-white-50);
  border-radius: 31px;
  background: none;
  font-family: var(--font-body);
}

.rs-ui-search-field__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-neutral-white-50);
  stroke-width: 2px;
}

.rs-ui-search-field__text {
  font-weight: 500;
  font-size: 11px;
  color: var(--color-neutral-white-50);
}

/* ---------- UI Button (filter pill) ---------- */

.rs-ui-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 32px;
  border: 1px solid var(--color-neutral-white-50);
  background: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--color-neutral-white-50);
  cursor: pointer;
}

.rs-ui-button--current {
  border-color: var(--color-neutral-white-50);
  background-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
}

/* ---------- UI Mock (browser window + content grid) ---------- */
/* Website Refresh 2026 1e (Figma), "UI Mock" frame, Step symbols.
   Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8004-39589

   This is the "blank" chrome that stays in place across all 5 hero
   states — a translucent dark window (70% dark, matching
   .rs-flash-style --color-transparency-dark-70) holding the search
   field, filter pills, and a 3x2 card grid. Only the grid's content
   changes between states; this shell does not.

   Figma's Grid frame itself has 24px top padding before the first
   row, but that would stack with the filter row's own 18px
   margin-bottom and double the visual gap above the grid. Since the
   filter row always precedes the grid in markup, the filter's
   margin-bottom is the single source of that gap (matched to the
   grid's own 18px row gutter) and the grid carries no top padding
   of its own. */

.rs-ui-mock {
  box-sizing: border-box;
  width: 680px;
  max-width: 100%;
  padding: 24px;
  border-radius: 16px;
  background-color: var(--color-transparency-dark-70);
}

.rs-ui-mock__content {
  display: flex;
  flex-direction: column;
}

.rs-ui-mock__content > .rs-ui-search-field {
  margin-bottom: 16px;
}

.rs-ui-mock__filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  /* Matches the grid's own row gutter (.rs-ui-mock__row gap, below)
     rather than an arbitrary spacing value. */
  margin-bottom: 18px;
}

.rs-ui-mock__grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rs-ui-mock__row {
  display: flex;
  gap: 16px;
}