/* =================================================================
   cards.css — CARD SYSTEM

   One base class plus a variant:  .fb-card .fb-card--glass
   Optional anatomy inside:
     .fb-card__header / __title / __subtitle / __body / __footer /
     .fb-card__media / __badge

   Cards do not set their own outer margin. Spacing between cards is
   the layout's job (.fb-stack), so a card is reusable anywhere.
   ================================================================= */

.fb-card{
  position:relative;
  display:block;
  background:var(--fb-surface);
  border:none;
  border-radius:var(--fb-radius-lg);
  box-shadow:var(--fb-shadow-sm);
  padding:var(--fb-space-5);
  color:var(--fb-text);
}

/* -----------------------------------------------------------------
   WHITE — the default working card. Questions, forms, content.
   ----------------------------------------------------------------- */
.fb-card--white{
  background:var(--fb-surface);
  box-shadow:var(--fb-shadow-sm);
}

/* -----------------------------------------------------------------
   GLASS — for panels floating over the sky or the house.
   backdrop-filter is progressively enhanced: without support the
   panel is a plain translucent white and stays legible.
   ----------------------------------------------------------------- */
.fb-card--glass{
  background:var(--fb-glass-bg);
  border:1px solid var(--fb-glass-border);
  box-shadow:var(--fb-shadow-md);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .fb-card--glass{
    background:var(--fb-glass-bg);
    -webkit-backdrop-filter:blur(var(--fb-glass-blur)) saturate(var(--fb-glass-saturate));
    backdrop-filter:blur(var(--fb-glass-blur)) saturate(var(--fb-glass-saturate));
  }
}
.fb-card--glass-strong{background:var(--fb-glass-bg-strong)}

/* Dark glass, for panels over a bright hero. Pair with .fb-on-dark
   so the text tokens flip with it. */
.fb-card--glass-dark{
  background:var(--fb-glass-bg-dark);
  border:1px solid rgba(255,255,255,.18);
  color:var(--fb-text-inverse);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .fb-card--glass-dark{
    -webkit-backdrop-filter:blur(var(--fb-glass-blur)) saturate(var(--fb-glass-saturate));
    backdrop-filter:blur(var(--fb-glass-blur)) saturate(var(--fb-glass-saturate));
  }
}

/* -----------------------------------------------------------------
   INFORMATION — an explainer with a coloured spine. Neutral by
   default; add a status modifier to recolour it.
   ----------------------------------------------------------------- */
.fb-card--info{
  background:var(--fb-accent-subtle);
  border-left:4px solid var(--fb-accent);
  border-radius:0 var(--fb-radius-sm) var(--fb-radius-sm) 0;
  box-shadow:none;
  padding:var(--fb-space-4);
}

/* -----------------------------------------------------------------
   WARNING — needs attention but isn't an error.
   The vermiculite notice is the canonical use.
   ----------------------------------------------------------------- */
.fb-card--warning{
  background:var(--fb-warning-subtle);
  border-left:4px solid var(--fb-primary);
  border-radius:0 var(--fb-radius-sm) var(--fb-radius-sm) 0;
  box-shadow:none;
  padding:var(--fb-space-4);
}
.fb-card--warning .fb-card__title{color:var(--fb-warning-strong)}

.fb-card--success{
  background:var(--fb-success-subtle);
  border-left:4px solid var(--fb-success);
  border-radius:0 var(--fb-radius-sm) var(--fb-radius-sm) 0;
  box-shadow:none;
  padding:var(--fb-space-4);
}
.fb-card--danger{
  background:var(--fb-danger-subtle);
  border-left:4px solid var(--fb-danger);
  border-radius:0 var(--fb-radius-sm) var(--fb-radius-sm) 0;
  box-shadow:none;
  padding:var(--fb-space-4);
}

/* -----------------------------------------------------------------
   DASHBOARD — a single metric tile. Built to sit in a
   .fb-grid--metrics and stay readable at 2-up on a phone.
   ----------------------------------------------------------------- */
.fb-card--dashboard{
  padding:var(--fb-space-3) var(--fb-space-4);
  border-radius:var(--fb-radius-md);
  box-shadow:var(--fb-shadow-xs);
  display:flex;
  flex-direction:column;
  gap:var(--fb-space-1);
  min-width:0;                 /* lets long numbers shrink, not overflow the grid */
}
.fb-card--dashboard .fb-card__label{
  font-size:var(--fb-text-xs);
  font-weight:var(--fb-weight-bold);
  color:var(--fb-text-muted);
  display:flex;
  align-items:center;
  gap:var(--fb-space-1);
  line-height:1.2;
}

/* -----------------------------------------------------------------
   RESULT — the celebratory dark panel. Pairs with .fb-on-dark.
   ----------------------------------------------------------------- */
.fb-card--result{
  background:linear-gradient(160deg,var(--fb-navy-500),var(--fb-navy-400));
  color:var(--fb-text-inverse);
  border-radius:var(--fb-radius-lg);
  box-shadow:var(--fb-shadow-lg);
  padding:var(--fb-space-6) var(--fb-space-5);
  overflow:hidden;
}
.fb-card--result .fb-card__title{color:var(--fb-text-inverse)}
.fb-card--result .fb-card__subtitle{color:var(--fb-text-inverse-muted)}

/* -----------------------------------------------------------------
   SELECTABLE — a card that is really a radio. The input is visually
   hidden but still focusable, so :has() drives the visual state and
   the keyboard still works.
   ----------------------------------------------------------------- */
.fb-card--selectable{
  cursor:pointer;
  border:2px solid var(--fb-border);
  box-shadow:none;
  transition:var(--fb-transition-all);
}
.fb-card--selectable:hover{border-color:var(--fb-accent)}
.fb-card--selectable:has(input:checked){
  border-color:var(--fb-secondary);
  background:var(--fb-secondary-subtle);
  box-shadow:var(--fb-shadow-sm);
}
.fb-card--selectable:has(input:focus-visible){box-shadow:var(--fb-ring)}
.fb-card--selectable input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* -----------------------------------------------------------------
   MODIFIERS
   ----------------------------------------------------------------- */
.fb-card--flush{padding:0}
.fb-card--tight{padding:var(--fb-space-4)}
.fb-card--roomy{padding:var(--fb-space-6)}
.fb-card--raised{box-shadow:var(--fb-shadow-md)}
.fb-card--flat{box-shadow:none;border:1px solid var(--fb-border)}
.fb-card--sunken{background:var(--fb-surface-sunken);box-shadow:none}
.fb-card--inverse{background:var(--fb-surface-inverse);color:var(--fb-text-inverse)}
.fb-card--accent-bar::before{           /* the tier colour spine on packages */
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:var(--fb-card-accent,var(--fb-border));
  border-radius:var(--fb-radius-lg) 0 0 var(--fb-radius-lg);
}
.fb-card--accent-bar{overflow:hidden}

/* -----------------------------------------------------------------
   ANATOMY
   ----------------------------------------------------------------- */
.fb-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--fb-space-3);
  margin-bottom:var(--fb-space-1);
}
.fb-card__title{
  font-family:var(--fb-font-display);
  font-variation-settings:var(--fb-vf-heading);
  font-size:var(--fb-text-lg);
  font-weight:var(--fb-weight-bold);
  letter-spacing:-.015em;
  color:var(--fb-secondary);
  margin:0;
}
.fb-card__subtitle{
  font-size:14.5px;
  color:var(--fb-text-muted);
  margin:0 0 var(--fb-space-4);
  line-height:var(--fb-leading-normal);
}
.fb-card__body{margin:0}
.fb-card__body > * + *{margin-top:var(--fb-space-3)}
.fb-card__footer{
  margin-top:var(--fb-space-4);
  padding-top:var(--fb-space-4);
  border-top:1px dashed var(--fb-divider);
}
.fb-card__media{
  margin:calc(var(--fb-space-5) * -1) calc(var(--fb-space-5) * -1) var(--fb-space-4);
  overflow:hidden;
  border-radius:var(--fb-radius-lg) var(--fb-radius-lg) 0 0;
}
.fb-card__media img,.fb-card__media svg{display:block;width:100%;height:auto}

/* ribbon badge across the top edge */
.fb-card__badge{
  position:absolute;
  top:0;left:0;right:0;
  width:max-content;
  margin:0 auto;
  padding:4px var(--fb-space-4);
  border-radius:0 0 9px 9px;
  background:var(--fb-primary);
  color:var(--fb-text-on-primary);
  font-family:var(--fb-font-mono);
  font-size:var(--fb-text-3xs);
  font-weight:var(--fb-weight-semi);
  letter-spacing:.11em;
  box-shadow:0 2px 8px rgba(242,106,33,.35);
}
.fb-card--has-badge{padding-top:var(--fb-space-8)}

/* a row of label/value lines, as used in the estimate breakdown */
.fb-card__line{
  display:flex;
  justify-content:space-between;
  gap:var(--fb-space-4);
  padding:9px 0;
  font-size:14.5px;
  border-bottom:1px dashed var(--fb-divider);
}
.fb-card__line:last-child{border-bottom:none}
.fb-card__line > span:last-child{font-family:var(--fb-font-mono);white-space:nowrap}
.fb-card__line--total{
  border-top:2.5px solid var(--fb-text);
  border-bottom:none;
  margin-top:var(--fb-space-2);
  padding-top:var(--fb-space-4);
  font-weight:var(--fb-weight-black);
  font-size:var(--fb-text-lg);
}

/* -----------------------------------------------------------------
   INTERACTIVE LIFT — opt-in, for cards that are links or buttons.
   Never on a static content card.
   ----------------------------------------------------------------- */
.fb-card--interactive{
  cursor:pointer;
  transition:transform var(--fb-duration-fast) var(--fb-ease-out),
             box-shadow var(--fb-duration-fast) var(--fb-ease-out);
}
.fb-card--interactive:hover{transform:translateY(-3px);box-shadow:var(--fb-shadow-md)}
.fb-card--interactive:active{transform:translateY(-1px)}
@media (hover:none){
  .fb-card--interactive:hover{transform:none;box-shadow:var(--fb-shadow-sm)}
}