/**
* Vincent42 components that have no bare-HTML-element analogue.
*
* Bare element styling (buttons, inputs, textareas, selects, tables, lists,
* blockquotes, etc.) lives in global.css at zero specificity so plugin and
* block markup auto-inherits the theme. This file only carries named
* components (display frame, card, modal, text link) and structural wrappers
* (field) that cannot be expressed at the element level.
*
* @package Vincent42
*/
/* -------------------------------------------------------------------------
Shared: "display screen" frame (modals, dense instrument panels)
------------------------------------------------------------------------- */
.v42-display-frame {
position: relative;
border-radius: var(--v42-radius-xl);
border: 1px solid color-mix(in srgb, var(--v42-color-primary) 72%, var(--v42-color-outline));
background: color-mix(in srgb, var(--v42-color-surface-container-low) 82%, transparent);
backdrop-filter: blur(12px);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--v42-color-primary) 18%, transparent),
0 0 28px color-mix(in srgb, var(--v42-color-primary) 14%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--v42-color-on-surface) 10%, transparent);
transition:
border-color var(--v42-duration-base) var(--v42-ease-standard),
box-shadow var(--v42-duration-base) var(--v42-ease-standard);
}
/* -------------------------------------------------------------------------
Cards
------------------------------------------------------------------------- */
.v42-card {
position: relative;
padding: var(--v42-space-lg);
border-radius: var(--v42-radius-xl);
border: 1px solid color-mix(in srgb, var(--v42-color-on-surface) 8%, transparent);
background: color-mix(in srgb, var(--v42-color-surface-container) 88%, transparent);
backdrop-filter: blur(10px);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v42-color-on-surface) 6%, transparent);
}
.v42-card--display {
border: 1px solid color-mix(in srgb, var(--v42-color-primary) 72%, var(--v42-color-outline));
background: color-mix(in srgb, var(--v42-color-surface-container-low) 78%, transparent);
backdrop-filter: blur(12px);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--v42-color-primary) 16%, transparent),
0 0 24px color-mix(in srgb, var(--v42-color-primary) 12%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--v42-color-on-surface) 8%, transparent);
}
.v42-card__title {
margin: 0 0 var(--v42-space-md);
font-family: var(--v42-font-heading);
font-size: var(--v42-text-h3-size);
font-weight: var(--v42-text-h3-weight);
letter-spacing: var(--v42-text-h3-spacing);
color: var(--v42-color-on-surface);
}
.v42-card__body {
margin: 0;
color: var(--v42-color-on-surface-variant);
font-size: var(--v42-text-body-md-size);
line-height: var(--v42-text-body-line);
}
.v42-card__body > *:last-child {
margin-bottom: 0;
}
/* -------------------------------------------------------------------------
Modal
------------------------------------------------------------------------- */
.v42-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--v42-space-md);
background: color-mix(in srgb, var(--v42-color-surface-container-lowest) 75%, transparent);
backdrop-filter: blur(10px);
transition: opacity var(--v42-duration-base) var(--v42-ease-standard);
}
.v42-modal[hidden] {
display: none !important;
}
.v42-modal__dialog {
position: relative;
width: min(100%, 32rem);
max-height: min(90vh, 40rem);
overflow: auto;
padding: var(--v42-space-lg);
margin: auto;
}
.v42-modal__dialog.v42-display-frame {
padding: var(--v42-space-xl);
}
.v42-modal__title {
margin: 0 0 var(--v42-space-md);
font-family: var(--v42-font-heading);
font-size: var(--v42-text-h3-size);
font-weight: var(--v42-text-h3-weight);
color: var(--v42-color-on-surface);
}
/* Close button: explicit override of the bare-button baseline (square icon
target, no uppercase label, neutral fill). */
.v42-modal__close {
position: absolute;
top: var(--v42-space-md);
right: var(--v42-space-md);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
font-family: var(--v42-font-mono);
font-size: var(--v42-text-label-size);
font-weight: 700;
letter-spacing: 0;
text-transform: none;
line-height: 1;
color: var(--v42-color-on-surface-variant);
background: color-mix(in srgb, var(--v42-color-surface-container-high) 60%, transparent);
border: 1px solid color-mix(in srgb, var(--v42-color-outline) 35%, transparent);
border-radius: var(--v42-radius-md);
box-shadow: none;
cursor: pointer;
transition:
color var(--v42-duration-fast) var(--v42-ease-standard),
background-color var(--v42-duration-fast) var(--v42-ease-standard),
border-color var(--v42-duration-fast) var(--v42-ease-standard),
box-shadow var(--v42-duration-fast) var(--v42-ease-standard);
}
.v42-modal__close:hover {
color: var(--v42-color-primary);
border-color: color-mix(in srgb, var(--v42-color-primary) 45%, transparent);
background: color-mix(in srgb, var(--v42-color-primary) 12%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--v42-color-primary) 22%, transparent);
transform: none;
}
.v42-modal__close:focus-visible {
outline: 2px solid var(--v42-color-primary);
outline-offset: 2px;
}
/* -------------------------------------------------------------------------
Text links (explicit control surfaces; bare `a` styling lives in global.css)
------------------------------------------------------------------------- */
.v42-text-link {
font-family: var(--v42-font-body);
font-size: inherit;
font-weight: 500;
color: var(--v42-color-primary);
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition:
color var(--v42-duration-fast) var(--v42-ease-standard),
text-decoration-color var(--v42-duration-fast) var(--v42-ease-standard),
box-shadow var(--v42-duration-fast) var(--v42-ease-standard);
}
.v42-text-link:hover {
color: var(--v42-color-primary-fixed);
text-decoration-color: var(--v42-color-primary-fixed);
}
.v42-text-link:focus-visible {
outline: 2px solid var(--v42-color-primary);
outline-offset: 3px;
border-radius: var(--v42-radius-sm);
}
/* -------------------------------------------------------------------------
Form field wrapper (layout-only; controls inherit element baselines)
------------------------------------------------------------------------- */
.v42-field {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--v42-space-xs);
margin-bottom: var(--v42-space-md);
}
.v42-field:last-child {
margin-bottom: 0;
}
/* Inputs inside a field span the wrapper width by default. Bare inputs outside
a field keep their natural sizing so plugin inline controls aren't forced wide. */
.v42-field > :where(input, textarea, select) {
width: 100%;
}