.acfk {
--acfk-_accent-premium: #0e7a5f;
--acfk-_on-accent: #ffffff;
--acfk-_success: #1a7f37;
--acfk-_error: #b32d2e;
--acfk-hairline: rgba( 0, 0, 0, 0.12 );
--acfk-wash: rgba( 0, 0, 0, 0.025 );
--acfk-wash-2: rgba( 0, 0, 0, 0.05 );
--acfk-field-line: rgba( 0, 0, 0, 0.22 );
--acfk-muted: inherit;
--acfk-glyph-muted: rgba( 0, 0, 0, 0.48 );
--acfk-radius: 10px;
--acfk-radius-sm: 6px;
--acfk-gap: 16px;
--acfk-gap-sm: 8px;
--acfk-z-base: 1;
--acfk-z-float: 900;
--acfk-z-modal: 1000;
}
@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
.acfk {
--acfk-hairline: color-mix( in srgb, currentColor 14%, transparent );
--acfk-wash: color-mix( in srgb, currentColor 3%, transparent );
--acfk-wash-2: color-mix( in srgb, currentColor 6%, transparent );
--acfk-field-line: color-mix( in srgb, currentColor 28%, transparent );
--acfk-muted: color-mix( in srgb, currentColor 76%, transparent );
--acfk-glyph-muted: color-mix( in srgb, currentColor 48%, transparent );
}
}
.acfk {
--acfk-_accent-resolved:
var( --wp--preset--color--primary,
var( --wp--preset--color--accent,
var( --wp--preset--color--accent-1,
var( --acfk-_accent-premium ) ) ) );
--acfk-accent: var( --acfk-_accent-resolved );
--acfk-accent-solid: var( --acfk-_accent-premium );
--acfk-on-accent: var( --acfk-_on-accent );
--acfk-success: var( --acfk-_success );
--acfk-error: var( --acfk-_error );
}
.acfk {
line-height: 1.5;
}
.acfk :where( input, select, textarea, button ) {
font: inherit;
}
.acfk :where( input, select, textarea ) {
font-size: 16px;
}
.acfk :is( input, select, textarea ):not( [type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], #nope ) {
font-size: 16px;
}
.acfk-stack { display: flex; flex-direction: column; gap: var( --acfk-gap, 16px ); }
.acfk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var( --acfk-gap-sm, 8px ); }
.acfk-grid {
display: grid;
gap: var( --acfk-gap, 16px );
grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}
.acfk-grid--2 { grid-template-columns: repeat( 2, 1fr ); }
.acfk-grid--3 { grid-template-columns: repeat( 3, 1fr ); }
:where( ul, ol )[ class*="acfk-" ] {
margin: 0;
padding-inline-start: 0;
list-style: none;
}
.acfk-card,
.acfk-empty {
box-sizing: border-box;
border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
border-radius: var( --acfk-radius, 10px );
background: var( --acfk-wash, rgba( 0, 0, 0, 0.025 ) );
}
.acfk-card { padding: var( --acfk-gap, 16px ); }
.acfk-card--flat { background: transparent; }
.acfk-card__title { margin: 0 0 var( --acfk-gap-sm, 8px ); font-size: 16px; font-weight: 600; }
.acfk-card__meta { color: var( --acfk-muted, inherit ); font-size: 13px; }
.acfk-btn,
.acfk a.acfk-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid currentColor;
border-radius: var( --acfk-radius-sm, 6px );
background: transparent;
color: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease-out, opacity 0.15s ease-out;
}
.acfk-btn:hover,
.acfk a.acfk-btn:hover { background: var( --acfk-wash-2, rgba( 0, 0, 0, 0.05 ) ); color: inherit; text-decoration: none; }
.acfk-btn--solid,
.acfk a.acfk-btn--solid {
border-color: var( --acfk-accent-solid, #0e7a5f );
background: var( --acfk-accent-solid, #0e7a5f );
color: var( --acfk-on-accent, #ffffff );
}
.acfk-btn--solid:hover,
.acfk a.acfk-btn--solid:hover { opacity: 0.9; background: var( --acfk-accent-solid, #0e7a5f ); color: var( --acfk-on-accent, #ffffff ); }
.acfk-btn--sm { box-sizing: border-box; min-height: 36px; padding: 6px 12px; font-size: 14px; }
.acfk-btn[disabled],
.acfk-btn.is-loading { opacity: 0.6; cursor: not-allowed; }
.acfk-field { display: flex; flex-direction: column; gap: 6px; }
.acfk-field__label { font-size: 14px; font-weight: 600; }
.acfk-field__hint { color: var( --acfk-muted, inherit ); font-size: 13px; }
.acfk-field :where( input, select, textarea ) {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid var( --acfk-field-line, rgba( 0, 0, 0, 0.22 ) );
border-radius: var( --acfk-radius-sm, 6px );
background: transparent;
color: inherit;
box-sizing: border-box;
}
.acfk-field :is( input, select, textarea ):not( #nope ) {
min-height: 44px;
}
.acfk-msg {
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
border-left-width: 3px;
border-radius: var( --acfk-radius-sm, 6px );
background: var( --acfk-wash, rgba( 0, 0, 0, 0.025 ) );
color: inherit;
font-size: 14px;
}
.acfk-msg--success { border-left-color: var( --acfk-success, #1a7f37 ); }
.acfk-msg--error { border-left-color: var( --acfk-error, #b32d2e ); }
@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
.acfk-msg--success { background: color-mix( in srgb, var( --acfk-success, #1a7f37 ) 8%, transparent ); }
.acfk-msg--error { background: color-mix( in srgb, var( --acfk-error, #b32d2e ) 8%, transparent ); }
}
.acfk-pill {
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
border-radius: 999px;
background: var( --acfk-wash-2, rgba( 0, 0, 0, 0.05 ) );
font-size: 12px;
font-weight: 600;
line-height: 1.6;
}
.acfk-meter {
overflow: hidden;
width: 100%;
height: 8px;
border-radius: 999px;
background: var( --acfk-wash-2, rgba( 0, 0, 0, 0.05 ) );
}
.acfk-meter__fill {
display: block;
height: 100%;
border-radius: inherit;
background: var( --acfk-accent-solid, #0e7a5f );
transition: width 0.3s ease-out;
}
.acfk-stat__value { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.acfk-stat__label { color: var( --acfk-muted, inherit ); font-size: 13px; }
.acfk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.acfk-table :where( th, td ) { box-sizing: border-box; padding: 10px 12px; border-bottom: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) ); text-align: left; }
.acfk-table :where( th ) { font-weight: 600; }
.acfk-empty { padding: 28px 16px; color: var( --acfk-muted, inherit ); text-align: center; font-size: 14px; }
.acfk-thumbs { display: flex; flex-wrap: wrap; gap: var( --acfk-gap-sm, 8px ); }
.acfk-thumbs :where( img ) {
width: 64px;
height: 64px;
border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
border-radius: var( --acfk-radius-sm, 6px );
object-fit: cover;
}
.acfk-spinner {
display: inline-block;
width: 1em;
height: 1em;
border: 2px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
border-top-color: currentColor;
border-radius: 50%;
animation: acfk-spin 0.7s linear infinite;
}
@keyframes acfk-spin { to { transform: rotate( 360deg ); } }
.acfk :where( a, button, input, select, textarea, [tabindex] ):focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.acfk-sr {
position: absolute;
overflow: hidden;
clip-path: inset( 50% );
width: 1px;
height: 1px;
white-space: nowrap;
}
@media ( max-width: 782px ) {
.acfk-grid--2,
.acfk-grid--3 { grid-template-columns: 1fr; }
}
@media ( max-width: 600px ) {
.acfk-grid { grid-template-columns: 1fr; }
.acfk-btn { width: 100%; }
.acfk-stat__value { font-size: 24px; }
.acfk-table--cards :where( thead ) { position: absolute; overflow: hidden; clip-path: inset( 50% ); width: 1px; height: 1px; }
.acfk-table--cards :where( tr ) {
box-sizing: border-box;
display: block;
margin-bottom: var( --acfk-gap-sm, 8px );
padding: 10px 12px;
border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
border-radius: var( --acfk-radius-sm, 6px );
}
.acfk-table--cards :where( td ) { box-sizing: border-box; display: flex; justify-content: space-between; gap: var( --acfk-gap-sm, 8px ); border: 0; padding: 4px 0; }
.acfk-table--cards :where( td )::before { content: attr( data-label ); color: var( --acfk-muted, inherit ); font-weight: 600; }
}
@media ( prefers-reduced-motion: reduce ) {
.acfk-btn,
.acfk a.acfk-btn,
.acfk-meter__fill { transition: none; }
.acfk-spinner { animation-duration: 2s; }
}