/* ---------------------------------------------------------------------------
   Hover / focus states.

   GENERATED from what used to be style-hover="" and style-focus="" attributes,
   which the dc-runtime compiled into classes at runtime. They are plain CSS now.
   The !important is not decoration: every one of these elements carries an inline
   style attribute, which would otherwise win.
   --------------------------------------------------------------------------- */
.vh1:hover{background:#c0a172 !important;color:#2c3018 !important}
.vh2:hover{background:#d3b380 !important}
.vh3:hover{background:rgba(244,239,229,.12) !important;border-color:#f4efe5 !important}
.vh4:hover{transform:scale(1.07) !important}
.vh5:hover{transform:scale(1.06) !important}
.vh6:hover{background:#3d4222 !important;border-color:#3d4222 !important;color:#f4efe5 !important}
.vh7:hover{border-color:#c0a172 !important;transform:translateY(-6px) !important}
.vh8:hover{border-color:#c0a172 !important}
.vh9:hover{background:#2c3018 !important}
.vh10:hover{background:#c0a172 !important}
.vf11:focus{border-bottom-color:#c0a172 !important}
.vh12:hover{color:#d3b380 !important;border-bottom-color:#d3b380 !important}

.vh13:hover{color:#f4efe5 !important}

/* Connectivity accordion — the open row was indistinguishable from the closed
   ones (only the +/x icon changed), so it now takes a tint, a gold rule down the
   left edge and a brighter label. The padding is cancelled by an equal negative
   margin: the tint bleeds past the column edges while the content width stays
   put, so opening a panel never reflows the rows it is measuring. */
[data-conn-item]{transition:background-color .4s ease,border-color .4s ease}
[data-conn-item][data-open="true"]{
  background:rgba(244,239,229,.055) !important;
  border-bottom-color:rgba(192,161,114,.45) !important;
  box-shadow:inset 3px 0 0 #c0a172;
  padding:0 16px;
  margin:0 -16px;
}
[data-conn-item][data-open="true"] .vh13{color:#f4efe5 !important}

/* Configuration cards — full-bleed portrait image with the label and CTA sitting
   on a scrim over it. The whole card is the anchor, so the hover state has to be
   driven from .cfg-card rather than from the individual pieces. */
.cfg-card{position:relative;display:block;overflow:hidden;background:#e6ded0;border:1px solid rgba(61,66,34,.14);transition:border-color .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.cfg-card:hover{border-color:#c0a172;transform:translateY(-6px)}
.cfg-card img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.cfg-card:hover img{transform:scale(1.06)}
.cfg-scrim{transition:opacity .5s ease}
.cfg-card:hover .cfg-scrim{opacity:.88}
.cfg-cta{position:relative;display:inline-block;padding-bottom:7px}
.cfg-cta::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:34px;background:#c0a172;transition:width .55s cubic-bezier(.22,1,.36,1)}
.cfg-card:hover .cfg-cta::after{width:100%}