/* Shared Driver module chrome and compact catalogue cards.
 * This is a component stylesheet, not a global patch layer.
 */

/* Keep the three-line wordmark as one geometric unit at every responsive size.
 * The SVG must grow in both axes with its viewBox; a fixed height letterboxes the tagline on large headers. */
.brand-tagline{height:auto;aspect-ratio:192/15}

.driver-action-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);
  width:fit-content;max-width:100%;margin:0 auto var(--space-4);
}
.driver-action-bar .button{
  --action-accent:var(--learn-color);--action-ink:#5720bb;
  min-height:var(--control-height);padding-inline:22px;border-radius:10px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--action-accent) 66%,#d7dde7);
  color:var(--action-ink);background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--action-accent) 5%,#fff) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 2px 4px rgba(15,23,42,.08),0 6px 16px color-mix(in srgb,var(--action-accent) 10%,transparent);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,border-color .15s ease;
}
.driver-action-bar .driver-action--manual{--action-accent:var(--drivers-color);--action-ink:#087f94}
.driver-action-bar .driver-action--contributions{--action-accent:var(--projects-color);--action-ink:#a7175a}
.driver-action-bar .driver-action--review{--action-accent:var(--community-color);--action-ink:#a84500}
.driver-action-bar .driver-action--compare,.driver-action-bar .compare-toolbar-button{--action-accent:var(--learn-color);--action-ink:#6521c7}
.driver-action-bar .driver-action--import{--action-accent:#7422e6;--action-ink:#fff;border-color:#5d11c9;color:#fff;background:linear-gradient(180deg,#8a35f4 0%,#741be7 52%,#5d11c9 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(61,0,126,.22),0 3px 6px rgba(64,20,120,.18),0 9px 22px rgba(111,20,232,.16)}
.driver-action-bar .button:hover{transform:translateY(-1px);filter:saturate(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 4px 7px rgba(15,23,42,.10),0 9px 20px color-mix(in srgb,var(--action-accent) 14%,transparent)}
.driver-action-bar .driver-action--import:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(61,0,126,.20),0 5px 9px rgba(64,20,120,.20),0 12px 26px rgba(111,20,232,.20)}
.driver-action-bar .button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--action-accent) 13%,transparent),0 1px 2px rgba(15,23,42,.08)}
.driver-action-bar .button[aria-current="page"]{outline:2px solid color-mix(in srgb,var(--action-accent) 38%,transparent);outline-offset:2px}
.driver-action-bar .driver-action--import[aria-current="page"]{color:#fff;background:linear-gradient(180deg,#8a35f4 0%,#741be7 52%,#5d11c9 100%)}
.driver-action-bar .button:focus-visible{outline:3px solid color-mix(in srgb,var(--action-accent) 42%,#fff);outline-offset:3px}

/* Driver Library keeps its focus indication inside clipped filter rails. Box Design keeps its existing treatment. */
.library-page .library-search input:focus,.library-page .library-range-inputs input:focus{outline:none;border-color:#7a25eb;box-shadow:inset 0 0 0 2px rgba(122,37,235,.72),inset 0 1px 2px rgba(18,24,40,.04)}
.library-page .library-search input:focus-visible,.library-page .library-range-inputs input:focus-visible{outline:none;border-color:#7a25eb;box-shadow:inset 0 0 0 2px rgba(122,37,235,.78),inset 0 1px 2px rgba(18,24,40,.04)}

/* Readable centered workflows on very wide CSS viewports. */
.page.driver-workflow-page{max-width:var(--form-page-max)}
.page.driver-contributions-page{max-width:var(--list-page-max)}
.driver-workflow-page>.page-lede,.driver-contributions-page>.page-lede{max-width:880px}
.driver-workflow-page .workflow-section,.driver-contributions-page .workflow-section{max-width:100%}
.driver-contributions-page .project-card{width:100%;max-width:100%}

/* Catalogue cards: one consistent internal hierarchy at every trust level. */
.library-main .driver-card{display:flex;flex-direction:column;min-width:0;height:100%}
.library-main .driver-card__top{min-height:30px}
.library-main .driver-card__notice{min-height:82px;display:flex;align-items:flex-start;margin:8px 0 10px}
.library-main .driver-card__notice-placeholder{display:block;width:100%;height:100%}
.library-main .driver-card__notice .community-warning{width:100%;margin:0}
.library-main .driver-card .driver-photo{flex:none}
.library-main .driver-card h2{min-height:2.4em;display:flex;align-items:flex-end}
.library-main .driver-display-name{min-height:1.45em;margin-bottom:var(--space-1)}
.library-main .driver-display-name--empty{visibility:hidden}
.library-main .driver-card-specs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"size impedance" "type sensitivity";gap:7px 12px}
.library-main .driver-card-specs>div[data-spec="size"]{grid-area:size}
.library-main .driver-card-specs>div[data-spec="impedance"]{grid-area:impedance}
.library-main .driver-card-specs>div[data-spec="type"]{grid-area:type}
.library-main .driver-card-specs>div[data-spec="sensitivity"]{grid-area:sensitivity}
.library-main .driver-card-specs>div{min-width:0}
.library-main .driver-card-specs dt{margin-bottom:2px}
.library-main .driver-card-specs dd{white-space:normal}
.library-main .driver-quick{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.library-main .driver-quick span{min-width:0;align-content:start}
.library-main .driver-card__link{margin-top:auto;padding-top:var(--space-2)}
.library-main .community-warning{font-size:var(--font-sm);line-height:1.4}

@container driver-library (min-width:760px){
  .library-main .driver-card .driver-photo{height:clamp(104px,5.4vw,158px)}
}

@media(max-width:780px){
  .driver-action-bar{width:100%;justify-content:stretch}
  .driver-action-bar .button{flex:1 1 190px;white-space:normal;text-align:center}
  .page.driver-workflow-page,.page.driver-contributions-page{max-width:100%}
}