/* Reusable RFP listing card (board, homepage, saved views), stacked in a list. Light theme only.
   Needs the shared tokens (--color-*, --space-*, --font-*). */


.rfp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title  save"
    "pills  pills"
    "facts  facts"
    "inst   inst"
    "source source"
    "foot   foot";
  column-gap: var(--space-2, 8px);
  row-gap: var(--space-3, 12px);
  align-items: start;
  box-sizing: border-box;
  padding: var(--space-5, 24px);
  background: var(--color-surface-raised, #FFFFFF);
  border: 1px solid var(--color-card-border, #E5E0D8);
  border-radius: var(--radius, 4px);
  list-style: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
/* Cards stack in one column with 16px gaps, so the warm page shows between them. */
:is(ul, ol):has(> .rfp-row):not([hidden]) { display: grid; gap: var(--space-4, 16px); margin: 0; padding: 0; border: 0; list-style: none; }
/* Subtle hover lift, only for people who have not asked for less motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rfp-row:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(43, 38, 35, 0.10); }
  .rfp-row--soon:hover, .rfp-row--urgent:hover { box-shadow: inset 4px 0 0 var(--rfp-urgency-bar), 0 4px 12px rgba(43, 38, 35, 0.10); }
}

/* Closing within 7 days: a restrained urgency in rust tints (a faint wash at the top, a tinted edge and a 4px bar). Never red, never a fill. */
.rfp-row--soon, .rfp-row--urgent {
  --rfp-urgency-bar: color-mix(in srgb, var(--color-accent, #A7410E) 65%, var(--color-surface-raised, #FFFFFF));
  border-color: color-mix(in srgb, var(--color-accent, #A7410E) 35%, var(--color-card-border, #E5E0D8));
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent, #A7410E) 6%, var(--color-surface-raised, #FFFFFF)), var(--color-surface-raised, #FFFFFF) 140px);
  box-shadow: inset 4px 0 0 var(--rfp-urgency-bar);
}

.rfp-row__title {
  grid-area: title;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rfp-row--closed .rfp-row__title, .rfp-row--withdrawn .rfp-row__title { color: var(--color-text-muted, #5E5853); }
.rfp-row__title:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }

.rfp-row__save-wrap { grid-area: save; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2, 8px); min-width: 44px; }
.rfp-row__save-status { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-1, 4px); max-width: 160px; font-size: 14px; color: var(--color-text, #2B2623); }
.rfp-row__save-msg { font-weight: 600; }
.rfp-row__retry { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-2, 8px); border: 0; background: transparent; color: var(--color-text, #2B2623); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rfp-row__retry:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
.rfp-row__save {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.rfp-row__save-icon { fill: none; }
.rfp-row__save[aria-pressed="true"] { color: var(--color-text); }   /* saved is shown by the filled icon, in ink: rust is only for the one primary action */
.rfp-row__save[aria-pressed="true"] .rfp-row__save-icon { fill: currentColor; }
.rfp-row__save:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }

/* Status pills. Solid rust with white text only for an RFP closing within 7 days; every other status is a neutral gray pill. */
.rfp-row__pills { grid-area: pills; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); margin-top: calc(-1 * var(--space-1, 4px)); }
.rfp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.3; }
.rfp-pill--closing { background: var(--color-accent, #A7410E); color: #FFFFFF; }
.rfp-pill--neutral { background: color-mix(in srgb, var(--color-border, #7A736C) 16%, var(--color-surface-raised, #FFFFFF)); color: var(--color-text, #2B2623); }
.rfp-pill--count { font-weight: 400; }
.rfp-icon { flex: none; }

/* Metadata row: small-caps label with an icon, bold value beneath. */
.rfp-row__facts { grid-area: facts; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4, 16px) var(--space-5, 24px); font-family: var(--font-body); }
.rfp-row__fact { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 0; }
.rfp-row__label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.rfp-row__fact-icon { color: var(--color-text-muted); }
.rfp-row--soon .rfp-row__deadline .rfp-row__fact-icon, .rfp-row--urgent .rfp-row__deadline .rfp-row__fact-icon { color: var(--color-accent, #A7410E); }
.rfp-row__fact-text { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }

/* Institution row, under a divider. The tile holds the initial; signed out it is a 20px blur behind a dark gray lock. */
.rfp-row__inst { grid-area: inst; display: flex; align-items: center; gap: var(--space-3, 12px); padding-top: var(--space-3, 12px); border-top: 1px solid var(--color-card-border, #E5E0D8); }
.rfp-row__tile { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--color-card-border, #E5E0D8); border-radius: 8px; background: color-mix(in srgb, var(--color-border, #7A736C) 12%, var(--color-surface-raised, #FFFFFF)); font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--color-text); }
.rfp-row__tile-fill { position: absolute; inset: -12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-border, #7A736C) 40%, var(--color-surface-raised, #FFFFFF)); color: var(--color-text); font-size: 22px; -webkit-filter: blur(20px); filter: blur(20px); }
.rfp-row__lock { position: relative; color: #4A4440; }
.rfp-row__inst-text { min-width: 0; }
.rfp-row__meta, .rfp-row__place { margin: 0; overflow-wrap: anywhere; }
.rfp-row__meta { font-size: 16px; font-weight: 600; color: var(--color-text); }
.rfp-row__place { font-size: 14px; color: var(--color-text-muted); }
.rfp-row__signin { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--color-text, #2B2623); font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rfp-row__signin:hover { text-decoration-thickness: 2px; }
.rfp-row__signin:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }

/* Footer: one calm ghost action and, when known, the view and proposal counts. */
.rfp-row__foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3, 12px) var(--space-4, 16px); padding-top: var(--space-3, 12px); border-top: 1px solid var(--color-card-border, #E5E0D8); }
.rfp-row__view { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 var(--space-4, 16px); border: 1px solid var(--color-accent, #A7410E); border-radius: var(--radius, 4px); background: transparent; color: var(--color-text, #2B2623); font-family: var(--font-body); font-size: 16px; font-weight: 600; text-decoration: none; }
.rfp-row__view:hover { background: color-mix(in srgb, var(--color-text, #2B2623) 5%, transparent); }
.rfp-row__view:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
.rfp-row__stats { display: flex; align-items: center; gap: var(--space-4, 16px); margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 14px; color: var(--color-text-muted); }
.rfp-row__stat { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 760px) { .rfp-row__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .rfp-row__view { flex: 1 1 100%; }
  .rfp-row__stats { margin-left: 0; }
}


/* Status badges (design-11): rust and neutrals only. State is always in the words; dot and border style add shape. */
.rfp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--space-2, 8px); border-radius: 4px; font-size: 14px; line-height: 1.4; color: var(--color-text, #2B2623); border: 1px solid var(--color-border, #7A736C); }
.rfp-badge__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.rfp-badge--urgent { border: 2px solid var(--color-accent, #A7410E); padding: 1px 7px; font-weight: 700; }
.rfp-badge--urgent .rfp-badge__dot { background: var(--color-accent, #A7410E); }
.rfp-badge--soon { border: 1px solid var(--color-text, #2B2623); font-weight: 600; }
.rfp-badge--soon .rfp-badge__dot { border: 2px solid var(--color-text, #2B2623); background: transparent; }
.rfp-badge--closed, .rfp-badge--withdrawn { border-style: dashed; color: var(--color-text-muted, #5E5853); }


/* Source line for listings found on a public site: plain ink with an underline, no rust. The whole line is the link (44px tall). */
.rfp-row__source { grid-area: source; margin: 0; font-size: 14px; }
.rfp-row__source-link { display: inline-flex; flex-wrap: wrap; align-items: center; min-height: 44px; min-width: 44px; color: var(--color-text, #2B2623); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rfp-row__source-link:hover { text-decoration-thickness: 2px; }
.rfp-row__source-link:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
.rfp-row__source-host { font-weight: 400; color: var(--color-text-muted, #5E5853); white-space: pre; }
.rfp-row__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }