/*
 * Styles used by exactly one page. Anything a second page needs moves to components.css.
 */
@layer pages {

  /* ---------- Resource form (resources/resource_form.html) ---------- */
  /* File vs link fields follow the chosen type, no JS needed. */
  .resource-form:has(input[name="kind"][value="link"]:checked) .when-file,
  .resource-form:has(input[name="kind"][value="file"]:checked) .when-link { display: none; }

  /* ---------- Expense form (expenses/expense_form.html) ---------- */
  /* Markup only matters for billable expenses. */
  .expense-form:not(:has(input[name="billable"]:checked)) .when-billable { display: none; }

  /* ---------- Invoice line editor (billing/invoice_editor.html) ---------- */
  .line-editor .bp-table td { padding: var(--space-2) var(--space-3); }
  .line-editor .bp-input { height: 40px; min-width: 0; }
  .line-editor td:first-child { min-width: 260px; width: 100%; }
  .line-editor td.num .bp-input { width: 110px; text-align: right; }

  /* ---------- Invite detail (accounts/invite_detail.html) ---------- */
  .invite-link { flex: 1; min-width: 0; height: 48px; font-size: 14px; }

  /* ---------- Component showcase (core/showcase.html) ---------- */
  .showcase { display: grid; gap: var(--fluid-gap); grid-template-columns: 1fr; }
  @media (min-width: 1280px) { .showcase { grid-template-columns: 1fr 1fr; } }
  .showcase-panel {
    display: grid; gap: var(--space-6); align-content: start;
    padding: var(--space-6); border-radius: var(--radius-lg);
    background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  }
  .showcase-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .showcase-toasts { display: grid; gap: var(--space-2); max-width: 380px; }

} /* @layer pages */