/* Cards: the card face and its tiles. The face is a photographed object, so its tokens are its own and have no light-theme override.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. */

:root {
  /* the physical card face (fasset-biz cards.js): a photographed object, not a
     themed surface, so no [data-theme="light"] override. */
  --card-face-bg-from: #1d1e20;
  --card-face-bg-to: #101012;
  --card-face-sheen: rgba(255, 255, 255, 0.07);
  --card-face-ink: rgba(255, 255, 255, 0.92);
  --card-face-edge: rgba(255, 255, 255, 0.03);
  --card-face-sheen-lift: rgba(255, 255, 255, 0.11);
  --card-face-hatch: rgba(255, 255, 255, 0.05);
  --card-face-ink-status: rgba(255, 255, 255, 0.75);
  --card-face-ink-holder: rgba(255, 255, 255, 0.88);
  --card-face-ink-quiet: rgba(255, 255, 255, 0.55);
  --card-face-shadow-contact: rgba(0, 0, 0, 0.45);
  --card-face-shadow-rest: rgba(0, 0, 0, 0.55);
  --card-face-shadow-tight: rgba(0, 0, 0, 0.4);
  --card-face-shadow-lift: rgba(0, 0, 0, 0.66);
  --card-face-shadow-lift-tight: rgba(0, 0, 0, 0.5);
  --card-face-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ————— company cards (bb-cards-contract.md §6) —————
   The demo's grammar: the face is a physical object capped at 380px, with the
   Fasset lockup and the status on it, and the money (spend against the limit,
   what is left) under it in the app's own type, never the face's mono. */
#card-grid { grid-template-columns: repeat(2, minmax(0, 380px)); gap: var(--space-20); }
@media (max-width: 900px) { #card-grid { grid-template-columns: minmax(0, 380px); } }
.cd-card { min-width: 0; cursor: pointer; }
/* The physical card face (fasset-biz cards.js, D33 C1): a photographed object,
   not a themed panel, so it keeps its own dark treatment in both themes off
   the --card-face-* tokens rather than --card-bg/--text-default. */
.cd-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 1.586;
  padding: var(--space-20);
  border: 0;
  border-radius: 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background:
    radial-gradient(130% 150% at 14% 6%, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 40%),
    linear-gradient(158deg, var(--card-face-bg-from) 0%, var(--card-face-bg-to) 54%, var(--card-face-bg-from) 100%);
  color: var(--card-face-ink);
  box-shadow:
    inset 0 1px 0 var(--card-face-sheen),
    inset 0 0 0 1px var(--card-face-edge),
    0 1px 2px var(--card-face-shadow-contact),
    0 10px 24px -8px var(--card-face-shadow-rest),
    0 3px 8px -3px var(--card-face-shadow-tight);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cd-tile::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(133deg, var(--card-face-sheen) 0%, transparent 32%, transparent 68%, var(--card-face-sheen) 100%);
}
.cd-tile::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: var(--card-face-noise);
  background-size: 160px 160px;
}
.cd-tile > * { position: relative; z-index: 2; }
/* Hover lifts the object and deepens its shadow, as the demo does. */
.cd-card:hover .cd-tile {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--card-face-sheen-lift),
    inset 0 0 0 1px var(--card-face-edge),
    0 2px 4px var(--card-face-shadow-contact),
    0 20px 44px -10px var(--card-face-shadow-lift),
    0 6px 14px -4px var(--card-face-shadow-lift-tight);
}
.cd-tile:active { transform: translateY(-3px) scale(0.99); }
.cd-tile:focus-visible { outline: 1.5px solid var(--focus-ring); outline-offset: 3px; }
.cd-tile.cd-frozen { filter: saturate(0) brightness(0.82); }
.cd-tile.cd-frozen::before {
  background:
    repeating-linear-gradient(45deg, var(--card-face-hatch) 0 1px, transparent 1px 9px),
    linear-gradient(133deg, var(--card-face-hatch) 0%, transparent 40%);
}
.cd-brand { display: inline-flex; align-items: center; }
.cd-lock { height: 14px; width: auto; display: block; color: var(--card-face-ink); }
.cd-tile .status { color: var(--card-face-ink-status); }
/* The number is a data id, so it is the one mono figure on the face. */
.cd-number { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.16em; color: var(--card-face-ink); }
.cd-foot { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cd-holder { font-size: var(--text-13); font-weight: var(--w-medium); color: var(--card-face-ink-holder); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-email { font-size: var(--text-12); color: var(--card-face-ink-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-meter { margin-top: var(--space-12); padding: 0 var(--space-2); }
.cd-figure { font-variant-numeric: tabular-nums; }
.cd-meter > .cd-figure { margin-top: var(--space-6); }
.cd-bar { margin-top: var(--space-8); height: 2px; border-radius: 1px; background: var(--border); overflow: hidden; }
.cd-bar span { display: block; height: 100%; background: var(--text-faint); }
.card-purchase .opt-name, .card-purchase .opt-detail { display: block; }
.card-purchase .opt-detail { font-size: var(--text-12); color: var(--text-subtle); margin-top: var(--space-2); }
/* A request row on a phone: what it is above, the two decisions under it at
   equal width. */
@media (max-width: 640px) {
  [data-card-request].option-row-static { flex-wrap: wrap; row-gap: var(--space-12); }
  [data-card-request] > .cluster { flex: 1 1 100%; margin-inline-start: 0; }
  [data-card-request] > .cluster > .btn { flex: 1 1 0; }
}

/* The dialog that cannot be dismissed (js/screens/cards.js): terms to accept before going on. */
.blocking-dialog-wrap { position: fixed; inset: 0; z-index: var(--z-panel); display: flex; align-items: center; justify-content: center; padding: var(--space-16); }
.blocking-dialog-scrim { position: absolute; inset: 0; background: var(--scrim); }
.blocking-dialog {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: 100%;
  background: var(--overlay); border-radius: var(--r-surface); box-shadow: var(--overlay-shadow);
  overflow: hidden;
}
.blocking-dialog:focus { outline: none; }
.blocking-dialog-title { font-size: var(--text-14); font-weight: var(--w-medium); padding: var(--space-16) var(--space-20); border-bottom: 1px solid var(--border-faint); }
.blocking-dialog-body { flex: 1; overflow-y: auto; padding: var(--space-20); }
.blocking-dialog-foot { padding: var(--space-14) var(--space-20); border-top: 1px solid var(--border-faint); display: flex; justify-content: flex-end; gap: var(--space-10); }

/* The Owner's agreements dialog (2026-10-28 walk): its button sits at the right with room above it, and the foot is drawn only
   when it holds something, since its Close shows only when the agreements cannot be loaded. */
.blocking-dialog-foot:not(:has(> :not([hidden]))) { display: none; }
.blocking-dialog-body #cards-agreements-accept { display: flex; margin: var(--space-16) 0 0 auto; }

/* Card spend's Min and Max are filters like the ones beside them: pill height, plain size, and one row with them. */
#cs-min, #cs-max { width: 96px; height: 34px; padding: 0 var(--space-14); border-radius: var(--r-control); font-size: var(--text-13); }

/* The cardholder search narrows the select under it; they are two controls, so they are apart. */
#rc-member-search { margin-bottom: var(--space-8); }